티스토리 위젯으로 사이드바에 실시간 검색어 다는 법 4단계
티스토리 위젯은 사이드바에 외부 기능을 붙이는 HTML 모듈이다. 글 하나만 읽고 떠나는 방문자를 붙잡는 데 드는 비용이 가장 낮은 장치이기도 하다. 고정 배너는 무시당하지만, 접속할 때마다 내용이 바뀌는 실시간 검색어 위젯은 방문자에게 다음 클릭 이유를 만든다.
이 글은 티스토리 관리 화면의 실제 메뉴 경로 그대로 설치 4단계를 안내하고, 테마와 개수 옵션, 워드프레스 설치, 흔한 실수 5가지와 자가점검표까지 한 번에 정리한다.
사이드바 위젯이 체류시간을 늘리는 원리
검색으로 들어온 방문자는 답을 얻는 순간 떠날 준비를 한다. 검색 유입 블로그와 SNS 바이럴의 차이에서 정리했듯 검색 방문자는 목적이 분명한 만큼 이탈도 빠르다. 이 이탈 직전에 시선이 머무는 자리가 사이드바이고, 여기에 무엇을 놓느냐가 세션당 페이지뷰를 가른다.
고정 배너나 카테고리 목록은 두 번째 방문부터 배경으로 취급된다. 늘 같은 화면은 눈이 알아서 걸러내기 때문이다. 반면 실시간 검색어처럼 볼 때마다 내용이 바뀌는 요소는 매번 새 정보로 읽힌다. "지금 사람들이 무엇을 검색하나"는 블로그 주제와 상관없이 누구나 한 번은 눈길을 주는 정보라서, 글을 다 읽은 방문자에게 자연스러운 다음 행동을 제안하는 역할을 한다.
운영자 입장의 이득도 있다. 사이드바에서 매일 검색어 흐름을 확인하게 되므로 글감 신호를 놓치지 않는다. 위젯 하나가 방문자에게는 볼거리, 운영자에게는 소재 레이더가 된다.
사이드바 위젯의 성패는 "얼마나 예쁜가"가 아니라 "다시 볼 이유가 있는가"로 갈린다. 고정 콘텐츠는 장식으로 끝나고, 갱신되는 콘텐츠만 체류시간을 만든다.
티스토리 실시간 검색어 위젯 설치 4단계
준비물은 위젯 코드 한 줄이 전부다. 키팡 설치 안내 페이지(keypang.kr/widget/)에서 복사할 수 있고 무료이며, 위젯 하단에 출처 표기가 고정으로 들어간다. 표시되는 검색어는 3시간마다 실측 데이터로 갱신된다.
아래 경로는 티스토리 관리 화면 기준이다. 스킨 편집 화면이 아니라 사이드바 설정에서 작업한다는 점만 기억하면 길을 잃을 일이 없다.
- 1단계, 사이드바 설정 열기. 티스토리 블로그 관리 홈에 들어가 좌측 메뉴에서 꾸미기, 사이드바 순서로 이동한다. 현재 스킨에 적용된 사이드바 모듈 목록이 나타난다.
- 2단계, HTML 배너 위젯 추가. 모듈 목록에서 "HTML 배너 위젯"을 찾아 추가 버튼을 누른다. 사이드바에 새 모듈이 생기며, 위치는 끌어서 원하는 순서로 옮길 수 있다.
- 3단계, 코드 붙여넣기. 추가된 HTML 배너 모듈의 편집 버튼을 눌러 HTML 입력란에 아래 코드를 그대로 붙여넣는다. 여는 태그부터 닫는 태그까지 전체를 넣어야 한다.
- 4단계, 미리보기 후 저장. 미리보기로 위젯이 표시되는지 확인한 뒤 저장을 누른다. 블로그를 새로고침하면 사이드바에서 실시간 검색어가 돌아간다.
<iframe src="https://keypang.kr/widget/embed/?theme=dark&n=10" width="320" height="460" frameborder="0" title="키팡 실시간 인기검색어"></iframe>3분 실행. 위 코드는 설치 페이지에서 테마와 개수를 바꿔 미리보기로 확인한 뒤 복사 버튼 한 번으로 가져올 수 있다. 사이드바 편집창을 열어둔 지금이 가장 빠르다.
키팡 위젯 코드 복사하러 가기
옵션 조정, 테마와 표시 개수
주소 뒤에 붙는 파라미터 두 개로 위젯 모양을 바꾼다. 스킨 배경이 밝으면 light, 어두우면 dark를 쓰고, 사이드바 여백이 길면 10개, 짧으면 5개를 고르면 된다.
| 파라미터 | 값 | 역할 | 권장 설정 |
|---|---|---|---|
| theme | dark / light | 위젯 배경 테마 | 스킨 배경색과 같은 계열 |
| n | 5 / 10 | 표시할 검색어 개수 | 5개는 height 300, 10개는 460 |
기본 폭은 320이다. 사이드바가 이보다 좁으면 width 값을 사이드바 폭에 맞춰 줄이면 잘림 없이 들어간다. 표시 개수를 5개로 줄일 때는 height도 300 정도로 함께 줄여야 아래 빈 공간이 남지 않는다.
iframe을 붙일 수 없는 지면에는 이미지 카드를 쓴다. 주소는 https://keypang.kr/badge/today.svg 하나이고, 30분마다 자동 갱신되는 이미지라서 마크다운이 되는 지면이면 깃허브 README든 노션이든 어디든 들어간다. 특정 검색어만 보여주는 뱃지가 필요하면 /badge/k/검색어.svg 형식도 지원한다. 네이버 블로그는 iframe 자체를 차단하므로 이 이미지 카드 방식만 가능하다.
워드프레스는 Custom HTML 블록 하나로 끝난다
워드프레스는 관리자 화면에서 외모, 위젯 순서로 들어가 사이드바 영역에 "사용자 정의 HTML"(Custom HTML) 블록을 추가하고 같은 iframe 코드를 붙여넣는다. 블록 동작 방식은 워드프레스 공식 문서에 정리되어 있다.
블록 편집기를 쓰는 테마라면 글 본문 안에도 같은 블록을 넣을 수 있다. 글 하단에 위젯을 배치해 마지막 문장까지 읽은 독자에게 다음 클릭거리를 주는 응용도 가능하다.
설치할 때 흔한 실수 5가지
실패 사례는 대부분 아래 다섯 가지 유형이다. 미리 알고 시작하면 한 번에 끝난다.
- 스킨 편집에 직접 붙여넣기. 꾸미기의 스킨 편집 화면에서 HTML을 직접 고치면 스킨을 교체하거나 초기화할 때 코드가 함께 사라진다. 반드시 사이드바의 HTML 배너 모듈에 넣는다.
- 폭이 안 맞아 위젯이 잘림. 사이드바 폭이 320보다 좁은 스킨에서 생긴다. width 값을 사이드바 폭에 맞추면 해결된다.
- 코드 일부만 복사. 여는 iframe 태그만 붙여넣고 닫는 태그를 빠뜨리면 위젯이 표시되지 않는다. 설치 페이지의 복사 버튼을 쓰면 실수가 없다.
- 모바일 확인 생략. 반응형 스킨은 모바일에서 사이드바가 본문 아래로 내려간다. 저장 후 스마트폰으로 한 번 열어 가로 스크롤이 생기지 않는지 확인한다.
- 네이버 블로그에 iframe 시도. 붙여넣어도 표시되지 않는다. 네이버 블로그는 이미지 카드 방식만 가능하다.
티스토리 메뉴 명칭은 개편 때 바뀔 수 있다. 화면이 설명과 다르게 보이면 티스토리 공식 공지에서 변경 사항을 먼저 확인하는 편이 빠르다.
위젯을 달았다면 다음 단계는 검색어를 글감으로 잇는 일이다. 사이드바에서 발견한 검색어를 소재로 바꾸는 과정은 실시간 검색어로 소재 찾는 3단계에 정리되어 있다.
설치 후 자가점검표
저장을 눌렀다고 끝이 아니다. 아래 여섯 항목을 순서대로 확인하면 설치 실패의 대부분을 걸러낼 수 있다.
| 점검 항목 | 확인 방법 | 통과 기준 |
|---|---|---|
| 위젯 표시 | 블로그 새로고침 | 사이드바에 검색어 목록이 보인다 |
| 가로 스크롤 | 브라우저 폭 줄여보기 | 본문과 사이드바 어디에도 가로 스크롤이 없다 |
| 모바일 노출 | 스마트폰으로 접속 | 반응형 스킨 기준 본문 아래에 위젯이 보인다 |
| 테마 일치 | 스킨 배경과 비교 | 위젯 배경이 스킨과 이질감이 없다 |
| 갱신 확인 | 3시간 뒤 재방문 | 검색어 목록이 갱신되어 있다 |
| 출처 표기 | 위젯 하단 확인 | 키팡 출처 표기가 정상 표시된다 |
자주 묻는 질문
- 티스토리 사이드바 위젯은 무료인가?
- 무료다. 키팡 실시간 검색어 위젯은 별도 가입이나 결제 없이 코드 복사만으로 설치할 수 있고, 위젯 하단에 출처 표기가 고정으로 들어가는 조건이 전부다.
- 네이버 블로그에도 실시간 검색어 위젯을 달 수 있나?
- iframe 방식은 불가능하다. 네이버 블로그는 외부 iframe을 차단하기 때문에, 30분마다 갱신되는 이미지 카드를 본문에 넣는 방식만 가능하다.
- 위젯 데이터는 얼마나 자주 갱신되나?
- iframe 위젯은 3시간마다 실측 데이터로 갱신되고, 이미지 카드는 30분마다 자동 갱신된다. 설치 후 별도 관리는 필요 없다.
- 모바일 화면에서도 위젯이 보이나?
- 반응형 스킨이라면 사이드바가 본문 아래로 내려가면서 위젯도 함께 표시된다. 별도 모바일 스킨을 쓰면 사이드바 자체가 노출되지 않을 수 있으므로 반응형 스킨 사용을 권장한다.
사이드바 한 칸이 내일 유입을 만든다
설치는 4단계, 실제 소요 시간은 3분 안팎이다. 오늘 달아두면 방문자는 글을 다 읽은 뒤에도 지금 뜨는 검색어라는 다음 볼거리를 만나고, 운영자는 사이드바에서 매일 글감 신호를 얻는다.
위젯에 표시되는 검색어가 어디서 오는지, 어떻게 읽어야 하는지는 지금 뜨는 검색어 확인하는 법과 함께 보면 바로 잡힌다.
지금 키팡 위젯 페이지에서 코드 복사하고 3분 안에 설치 끝내기