티스토리 시작하기 2-1단계, 테마 수정하기(2-1)
티스토리 블로그를 시작할 때 가장 중요한 요소 중 하나는 바로 테마(스킨)입니다. 이전 포스팅에서 다양한 스킨들과 추천 테마 3가지에 대해 간략히 살펴봤는데요,
이번에는 테마 설정에 대해 좀 더 깊이 들어가 보겠습니다. 테마는 단순히 블로그의 외관만 결정하는 것이 아니라 사용자 경험, 가독성, 그리고 검색엔진 최적화(SEO)에도 큰 영향을 미치기 때문입니다.
테마별 맞춤 설정의 중요성
티스토리의 가장 큰 장점 중 하나는 다양한 테마와 그에 따른 맞춤 설정 옵션입니다. 각 테마마다 제공하는 설정 옵션이 다르기 때문에, 자신이 선택한 테마의 특성을 잘 이해하고 활용하는 것이 중요합니다.
대부분의 테마는 "꾸미기" > "스킨 편집" 경로를 통해 접근할 수 있는 자체 사용자 정의 옵션을 제공합니다. 여기서는 보통 "홈 설정", "글 목록", "글 읽기" 등의 탭을 찾을 수 있으며, 이를 통해 홈페이지 레이아웃 변경, 추천 게시물 표시 여부, 헤더와 푸터 사용자 정의 등 다양한 설정이 가능합니다.
개인적으로 수많은 테마를 사용해 본 결과, 처음 테마를 선택했을 때는 모든 설정 옵션을 하나씩 살펴보는 시간을 갖는 것이 좋습니다. 생각보다 숨겨진 기능들이 많고, 간단한 설정 변경만으로도 블로그의 분위기가 완전히 달라질 수 있기 때문이죠.
사이드바 구성으로 블로그 개성 및 수익화 코드 적용하기
사이드바는 블로그의 측면에 위치해 다양한 정보와 위젯을 표시하는 중요한 영역입니다. 사용자들이 내 블로그를 더 쉽게 탐색하고, 관심 있는 콘텐츠를 찾을 수 있도록 도와주는 역할을 합니다.
사이드바를 설정하려면 "꾸미기" > "사이드바" 메뉴로 이동합니다. 이 화면에서는 왼쪽에 사용 가능한 모듈(위젯) 목록이, 오른쪽에는 현재 사이드바 구성이 표시됩니다. 모듈을 드래그 앤 드롭 방식으로 쉽게 추가하고 배치할 수 있어요.
자주 사용되는 사이드바 모듈은 다음과 같습니다:
카테고리: 블로그의 주제별 분류를 보여줍니다
최근 글/인기글: 방문자에게 새 콘텐츠나 인기 콘텐츠를 안내합니다 (애드센스 블로그의 경우 "인기글" 제거가 권장됩니다)
검색창: 방문자가 원하는 내용을 쉽게 찾을 수 있게 합니다
태그 클라우드: 블로그에서 자주 사용되는 키워드를 시각적으로 보여줍니다
배너 출력: 프로필이나 광고 등을 표시할 수 있습니다
전체 방문자: 블로그 방문 통계를 보여줍니다 (애드센스 블로그의 경우 제거 권장)
이 중 가장 많이 사용되는 설정은 HTML 배너출력입니다. 이 설정은 티스토리 플러그인 포스팅에서 별도로 다룰 예정입니다만, "플러그인 배너출력" 항목을 활성화 하셔야 이용 가능합니다
이 항목엔 HTML코드를 직접 넣을 수 있는데, 사이드바, 하단 푸터 등에 코드를 넣을 수 있습니다. 이 코드를 이용해 쿠팡 코드를 넣을 수도 있고, 별도의 광고나 이미지 등 다양한 커스터마이징된 코드를 넣을 수 있습니다.
사이드바 구성은 블로그의 용도에 따라 달라질 수 있습니다. 예를 들어, 수익 창출이 목적인 애드센스 블로그라면 '인기글'이나 '전체 방문자' 위젯은 제거하는 것이 좋습니다. 이런 요소들이 방문자의 클릭을 분산시켜 광고 클릭률을 낮출 수 있기 때문이죠.
반면, 커뮤니티 중심의 블로그라면 '최근 댓글'이나 '인기글' 위젯이 유용할 수 있습니다. 방문자들이 활발한 토론이 이루어지는 글을 쉽게 찾을 수 있어 커뮤니티 참여도를 높일 수 있기 때문입니다.
HTML 코드 수정으로 SEO 최적화하기 (Magazine 테마)
테마 설정과 사이드바 구성만으로도 상당한 수준의 맞춤화가 가능하지만, 때로는 HTML 코드를 직접 수정해야 할 필요성이 있습니다. 특히 SEO 최적화나 특수한 기능 추가를 위해서는 HTML 편집이 필수적입니다.
HTML 편집기에 접근하려면 "꾸미기" > "스킨 편집" > "HTML 편집" 탭으로 이동합니다. 코드를 수정하기 전에 반드시 현재 스킨을 백업해두는 것이 좋습니다. 사소한 실수로도 블로그 레이아웃이 깨지거나 기능이 작동하지 않을 수 있기 때문이죠.
HTML 코드 수정을 통해 할 수 있는 주요 최적화 작업은 다음과 같습니다:
1. 메타 태그 추가
검색 엔진 인증을 위해 <head> 태그 사이에 메타 태그를 추가할 수 있습니다. 네이버 웹마스터 도구나 구글 서치 콘솔 등의 인증 코드를 삽입하면 검색 엔진에서 내 블로그를 더 잘 인식하고 관리할 수 있게 됩니다.
2. 구글 애드센스 코드 삽입
수익 창출을 목적으로 한다면, 애드센스 승인을 위해 관련 코드를 <head> 섹션에 삽입해야 할 수 있습니다.
3. SEO를 위한 제목 태그(H1) 최적화 (이건 #1테마와 magazine테마에만 해당됩니다)
Magazine 테마를 사용 중이라면, 포스팅 제목이 기본적으로 H3 태그로 설정되어 있을 수 있습니다. 검색 엔진 최적화를 위해서는 이를 H1 태그로 변경하는 것이 중요합니다.
(문제가 있는 magazine 테마)
Bookclub 테마는 정상이다.특히 메거진 테마는 많은 분들이 사용하지만 헤더 코드가 이상해 SEO에 분리함이 있습니다. 위 이미지를 보시면 아시겠지만 제목은 H1태그가 사용되어야하는데 H3태그가 사용되었습니다.
이 말은 본문에 H2태그가 들어간다면, 제목은 그 아래에 위치하게 된다는 의미이기도 합니다. (태그에 대한 내용은 별도 포스팅에서 다루도록 해보겠습니다.)
(변경 전 코드 - 590번째 라인)
(변경 후 코드 - 590번째 라인)예를 들어, 제가 공유드린 코드 스크린샷에서 볼 수 있듯이, 원래 H3 태그로 되어 있던 제목 부분을 H1으로 변경하는 작업이 필요합니다. 이 작업을 통해 검색 엔진이 내 포스팅의 주제를 더 명확하게 인식할 수 있게 됩니다.
<!-- 변경 전 -->
<div class="box_article_tit">
<h3 class="blind">본문 제목</h3>
<!-- 변경 후 -->
<div class="box_article_tit">
<h1 class="blind">본문 제목</h1>
이러한 변경은 단순해 보이지만, 검색 엔진 최적화에 상당한 영향을 미칠 수 있습니다. H1 태그는 웹페이지의 가장 중요한 제목을 나타내는 태그로, 검색 엔진은 이 태그의 내용을 페이지의 주제로 인식합니다.
테마 설정에 관한 실용적 팁
그동안의 경험을 바탕으로 몇 가지 실용적인 팁을 드리자면.
모바일 최적화를 확인하세요. 모든 설정 변경 후에는 반드시 모바일 환경에서 어떻게 보이는지 확인하세요. 방문자의 상당수가 모바일로 접속한다는 점을 기억하세요.
불필요한 요소는 과감히 제거하세요. 블로그의 로딩 속도와 사용자 경험을 위해 꼭 필요한 요소만 남기는 것이 좋습니다. 특히 애드센스 블로그라면 더욱 그렇습니다.
브랜딩을 고려하세요. 테마 설정은 단순한 기능적 측면 외에도 블로그의 브랜딩과 일관성에도 중요합니다. 색상, 글꼴, 레이아웃 등을 통일감 있게 구성하면 방문자에게 더 전문적인 인상을 줄 수 있습니다.
티스토리 테마 설정은 단순히 외관만의 문제가 아니라 블로그의 기능성, 사용자 경험, 그리고 검색엔진 최적화까지 영향을 미치는 중요한 요소입니다. 이번 포스팅에서 다룬 내용을 바탕으로, 여러분만의 독특하고 효과적인 블로그를 만들어 보시길 바랍니다!
다음 포스팅에서는 티스토리 플러그인을 활용한 블로그 기능 확장에 대해 더 자세히 알아보겠습니다. 궁금한 점이 있으시면 댓글로 남겨주세요!
