티스토리 뷰
목차
티스토리 블로그를 처음 만들고 나서 가장 먼저 한 일이 스킨 고르기였습니다. 색깔 하나 바꿀 때마다 "이게 진짜 내 블로그구나" 싶은 기분이 들었는데, 지금 돌아보면 그 설렘 때문에 정작 중요한 것들을 죄다 놓쳤습니다. HTML 편집 권한, 광고 배치 공간, 로딩 속도까지 — 저는 이 세 가지를 전부 스킨을 바꾸고 나서야 알았습니다.
HTML 편집 권한과 광고 배치, 고르기 전에 확인해야 하는 것들
예쁜 스킨을 고르고 나서 설레는 마음으로 애드센스 코드를 삽입하려 했을 때, 편집 화면이 아예 잠겨 있었습니다. 처음에는 제가 뭔가 잘못 누른 줄 알았는데, 알고 보니 그 스킨 자체가 HTML 편집을 허용하지 않는 구조였습니다. HTML(HyperText Markup Language)이란 웹페이지의 뼈대를 만드는 코드입니다. 티스토리에서는 이 코드를 직접 수정해야 애드센스 광고 코드를 심거나, 구글 서치 콘솔(Google Search Console) 인증 태그를 붙일 수 있습니다. 여기서 구글 서치 콘솔이란 내 블로그가 구글 검색 결과에 어떻게 노출되는지 확인하고 관리하는 무료 도구입니다(출처: Google Search Console 공식 페이지). 결국 저는 스킨을 처음부터 다시 골라야 했고, 그 과정에서 이미 설정해뒀던 코드도 전부 날아갔습니다.
스킨을 바꿀 때마다 이전에 심어뒀던 HTML 커스터마이징이 초기화되는 경우가 많다는 걸, 저는 두 번의 스킨 교체를 거치고 나서야 체감했습니다. 애드센스 코드를 매번 다시 삽입해야 했고, 서치 콘솔 인증도 다시 해야 했습니다. "스킨은 언제든 바꿀 수 있으니까 일단 예쁜 걸 쓰자"는 생각을 하는 분들도 있는데, 저는 그게 생각보다 훨씬 번거로운 작업이 된다고 봅니다.
광고 배치 공간도 미리 따져봐야 할 요소입니다. 본문 좌우 여백이 거의 없거나 사이드바가 없는 1단 레이아웃 스킨은 애드센스 승인 이후 광고를 넣을 자리가 마땅하지 않습니다. 일반적으로 디자인이 깔끔할수록 여백이 좁다고 알려져 있는데, 실제로 써보니 꼭 그렇지만은 않습니다. 처음부터 사이드바가 있거나 본문 여백이 넉넉한 구조를 고르면, 나중에 광고 세팅을 할 때 훨씬 수월하게 진행됩니다. 스킨을 보는 순서를 바꿔야 합니다. 예쁜지 먼저 보는 게 아니라, HTML 편집이 열려 있는지, 사이드바 구조가 있는지를 먼저 확인하는 것이 순서입니다.
- HTML 편집 가능 여부: 스킨 적용 전 편집 화면에서 반드시 확인
- 사이드바 유무: 1단 레이아웃보다 2단(사이드바 포함) 구조가 광고 배치에 유리
- 본문 여백: 좌우 여백이 넉넉한 스킨일수록 광고 삽입 후 가독성 저하가 적음
- 스킨 변경 후 필수 확인: 애드센스 코드, 서치 콘솔 인증 태그 재삽입 여부
로딩 속도가 SEO에 미치는 영향, 생각보다 큽니다
솔직히 이건 예상 밖이었습니다. 처음 스킨을 고를 때 저는 로딩 속도를 전혀 고려하지 않았습니다. 애니메이션이 들어간 헤더가 멋있어 보였고, 배경 이미지가 꽉 찬 스킨이 고급스러워 보였거든요. 그런데 나중에 페이지 속도(Page Speed)를 측정해봤더니 점수가 낮게 나왔습니다. 여기서 페이지 속도란 웹페이지가 완전히 로딩되는 데 걸리는 시간을 수치로 나타낸 지표로, 구글이 검색 순위를 결정할 때 실제로 반영하는 요소 중 하나입니다. 구글은 2021년부터 코어 웹 바이탈(Core Web Vitals)을 검색 순위 알고리즘에 공식 반영했는데, 여기에 LCP(Largest Contentful Paint, 가장 큰 콘텐츠 요소가 화면에 렌더링되는 시간)가 포함됩니다(출처: Google 검색 센터 공식 문서). 즉, 로딩이 느린 블로그는 검색 노출 자체가 불리해지는 구조입니다.
디자인 요소가 많이 들어간 스킨일수록 이 수치가 나빠지는 경향이 있습니다. 배경 이미지 파일 크기가 크거나, 자바스크립트(JavaScript) 기반 애니메이션이 많이 들어간 스킨은 초기 로딩 시간을 길게 만듭니다. 여기서 자바스크립트란 웹페이지에 동적인 효과(애니메이션, 슬라이드 등)를 구현하는 프로그래밍 언어인데, 이 코드가 많을수록 브라우저가 처리해야 할 작업도 늘어납니다. 로딩 속도가 느리면 방문자 이탈률이 올라간다는 의견도 있고, 콘텐츠가 좋으면 어느 정도 커버된다는 시각도 있습니다. 제 경험상 둘 다 틀린 말은 아니지만, 적어도 스킨 선택 단계에서 불필요하게 느린 출발을 할 이유는 없다고 봅니다.
구글 페이지스피드 인사이트(PageSpeed Insights)에서는 URL만 입력하면 현재 페이지의 속도 점수를 무료로 확인할 수 있습니다. 스킨을 최종 결정하기 전에 미리보기 URL로 한 번쯤 측정해보는 것이 제가 지금이라면 당연히 할 행동입니다. 당시에는 그 방법을 몰라서 못 했을 뿐이고, 알았더라면 스킨을 두 번이나 바꾸는 일은 없었을 겁니다.
자주 묻는 질문
Q. 스킨을 나중에 바꾸면 SEO에 문제가 생기나요?
A. URL이 그대로 유지된다면 스킨 변경 자체가 SEO에 큰 영향을 준다고 보기는 어렵습니다. 다만 스킨을 바꿀 때 HTML 코드가 초기화되면 애드센스 코드나 서치 콘솔 인증 태그가 사라질 수 있고, 이 부분을 재설정하지 않으면 광고 노출이 끊기거나 색인 작업에 차질이 생기는 경우가 있습니다. 변경 직후 반드시 확인하는 절차가 필요합니다.
Q. 무료 스킨으로도 HTML 편집이 되나요?
A. 무료라고 해서 HTML 편집이 막혀 있는 건 아닙니다. 티스토리 기본 제공 스킨 중에도 편집 권한이 열려 있는 것들이 있습니다. 다만 스킨마다 다르기 때문에, 적용 전에 직접 편집 화면에 들어가서 확인하는 것이 가장 확실합니다. 처음에는 무료 스킨에서 이 기준만 충족되면 충분하다고 생각합니다.
Q. 로딩 속도를 직접 측정할 수 있는 방법이 있나요?
A. 구글 페이지스피드 인사이트(PageSpeed Insights)에서 URL을 입력하면 모바일과 PC 각각의 속도 점수를 무료로 확인할 수 있습니다. 코어 웹 바이탈(Core Web Vitals) 항목도 함께 보여주기 때문에, 스킨을 바꿀 때마다 이 도구로 한 번씩 점검하는 습관을 들이는 게 좋습니다. 스킨을 최종 결정하기 전에 미리 측정해보는 것도 방법입니다.
Q. 모바일과 PC 중 어떤 화면을 기준으로 스킨을 골라야 하나요?
A. 제 경험상 모바일 화면을 먼저 보는 게 맞습니다. 방문자 대부분이 모바일로 유입되는 경우가 많고, PC에서 깔끔해 보이는 스킨도 모바일에서 글자가 지나치게 작거나 레이아웃이 어긋나는 경우가 있었습니다. 반응형 디자인(Responsive Design) — 화면 크기에 따라 레이아웃이 자동으로 조정되는 구조 — 이 적용된 스킨인지 확인하는 것도 중요한 체크 포인트입니다.
결론
스킨을 두 번 바꾸고, 매번 애드센스 코드를 다시 심고, 뒤늦게 로딩 속도 문제를 발견한 제 경험을 돌아보면 결국 하나로 귀결됩니다. 처음 고를 때 HTML 편집 권한, 광고 배치 공간, 로딩 속도 이 세 가지만 먼저 확인했다면 그 시간을 콘텐츠 쓰는 데 썼을 겁니다.
디자인이 예쁜 스킨이 나쁜 건 아닙니다. 다만 그 예쁨이 기능적인 기준을 통과한 스킨 안에서 고른 것이어야 한다는 뜻입니다. 스킨을 고를 때 위에서 정리한 체크 항목들을 먼저 훑어보고, 그다음에 디자인을 보는 순서로 접근하시길 권합니다. 다음 글에서는 애드센스 신청부터 승인까지의 과정을 제가 직접 겪은 순서대로 정리해 올릴 예정입니다.