스킨을 바꾸면 사라지는 티스토리 댓글 위젯

시작하기 전에 티스토리가 요구하는 것

사이트 빌더를 쓰다 온 사람에게는 여기가 낯선 대목입니다. Squarespace 는 일정 요금제부터 서드파티 스크립트를 돌리고, Wix 는 연결 도메인을 먼저 요구합니다. 둘 다 결제 화면을 찾아가게 만듭니다. 티스토리에는 요금제 자체가 없습니다. 서비스 첫 화면이 파는 것이 없고, 스킨 편집을 설명하는 도움말들도 그것을 구독의 기능이 아니라 블로그의 기능으로 적습니다.

그래서 알아 둘 두 가지는 돈 이야기가 아닙니다. 하나, 계정에 블로그가 있어야 합니다. 고객센터는 한 계정이 블로그를 5개까지 운영할 수 있다고 적으면서 주소는 한 번 정하면 끝이라고 못 박습니다. "이미 개설한 티스토리 주소(URL)는 변경할 수 없습니다." 둘, 몇 달 뒤에 발목을 잡는 쪽인데, 스킨을 갈아 끼우면 HTML/CSS 편집에서 한 일과 그 옆에 올려 둔 파일이 지워집니다. 아래 설치는 10분이면 끝납니다. 스킨을 바꾼 뒤 되살리는 것도 10분이면 되지만, 스니펫을 어딘가에 남겨 둔 경우에만 그렇습니다.

탭은 셋, 그중 우리가 쓸 파일은 하나

티스토리는 이 화면을 자기 가이드에 그대로 적어 두었습니다. "현재 사용중인 스킨을 직접 편집하거나, 스킨에 포함된 파일을 관리할 수 있습니다." 쓰는 스킨을 직접 고치거나, 그 안에 든 파일을 관리하는 곳이라는 말입니다. 지도라고 할 것이 탭 줄 하나뿐이고, 그마저 짧습니다.

사람들이 실제로 품고 오는 질문에 답하는 문장이 그것입니다. 서드파티 스크립트를 돌려도 되느냐는 것이죠. 벤더의 안내는 스크립트 추가를 당연한 일로 두고 금지 대신 주의를 요청합니다. "맞춤법 오류, 태그를 닫지 않은 경우, 무리하게 스크립트를 추가하는 경우 블로그가 정상적으로 보이지 않을 수 있으니 주의해주세요." 벤더가 직접 내놓은 공식 티스토리 테마도 자기 skin.html 에서 외부 CDN 스크립트를 불러옵니다. 오늘 열어 본 라이브 티스토리 블로그도 티스토리 것이 아닌 도메인에서 스크립트를 실행하고 있고, 그것을 막을 Content-Security-Policy 헤더는 응답에 없습니다.

주소가 둘이면 둘 다 등록해야 한다

티스토리 블로그는 만들 때 정한 주소에서 응답합니다. 도메인을 사서 DNS 를 맞춘 뒤 관리 > 블로그에서 붙이면 그 주소에서도 응답합니다. 위젯이 알아봐야 할 호스트네임이 하나가 아니라 둘이 된다는 뜻입니다. 둘 다 등록하세요. 인증서 쪽은 어느 주소든 티스토리가 덮어 줍니다. "티스토리는 서비스 도메인과 외부 도메인 모두에 https를 지원합니다." 로그인 팝업이 요구하는 조건이 그것입니다.

설치

1. 주소 두 개를 같은 site id 에 등록한다

   발행된 글을 열어 주소창에 뜬 것을 읽고, 그 호스트네임을 BootSignal 사이트 설정 에 넣습니다. 내 도메인을 붙여 두었다면 tistory.com 주소를 그 대신이 아니라 그 옆에 함께 넣으세요. 관리 화면은 여전히 그쪽에 있고, 옛 링크도 계속 그쪽으로 들어옵니다. 등록하면 site id 가 나오고, 티스토리에 타이핑할 값은 그 문자열 하나뿐입니다. 위젯은 location.hostname 을 그 id 뒤의 목록과 맞춰 보고, 목록에 없는 호스트네임에서는 아무것도 그리지 않습니다.

2. 꾸미기 > HTML/CSS 편집을 열고 skin.html 을 먼저 복사해 둔다

   블로그 관리에서 스킨 편집 화면을 열면 skin.html 탭이 먼저 보이고, 편집기 하나에 파일 전체가 들어 있습니다. 무엇을 타이핑하기 전에 전체를 선택해 내 컴퓨터의 텍스트 파일에 붙여넣으세요. 이 화면에는 복원 버튼이 없습니다. 잘못 저장하면 되돌릴 곳이 없다는 뜻입니다. 파일 이름에 오늘 날짜를 넣고, 블로그 관련 메모를 두는 자리에 함께 둡니다.

3. 댓글 영역 옆에 마운트를 붙인다

   파일에서 <s_rp> 를 찾습니다. 스킨 가이드는 이 블록을 댓글로 접근했을 때 내부 치환자가 출력되는 영역이라고 설명합니다. 티스토리가 자기 댓글 영역을 그리는 자리라는 표시입니다. 블록은 일단 그대로 두고 그 바로 앞에 마운트를 놓습니다. 두 번째 요소가 속성이 아니라 인라인 스크립트인 이유는 다음 단계에 있습니다.

   코드복사

   <div data-bootsignal="comments" id="bs-thread"></div>
   <script>
     document.getElementById('bs-thread')
       .setAttribute('data-thread-id', location.pathname);
   </script>

4. 스레드 키를 글 주소에서 받아 온다

   티스토리 글은 숫자가 붙은 경로에 있고, skin.html 은 블로그의 모든 글이 함께 쓰는 파일 하나입니다. 마운트에 고정된 키를 타이핑해 넣으면 모든 글이 한 대화를 나눠 쓰게 됩니다. location.pathname 을 읽으면 글마다 자기 키를 갖습니다. 시점도 맞습니다. 로더는 문서를 다 읽은 뒤 마운트를 훑고, 그 인라인 스크립트는 문서를 읽는 동안 실행되기 때문입니다. 로더는 닫는 body 태그 앞에 한 번만 넣습니다. 나중에 위젯이 몇 개가 되든 그대로 하나입니다.

   코드복사

   <script src="https://bootsignal.com/bootsignal.js"
           data-site-id="YOUR_SITE_ID" data-lang="ko" defer></script>

5. 미리보기로 보고 저장한 뒤 실제 글에서 확인한다

   화면에는 미리보기와 저장이 나란히 있고, 티스토리는 저장을 해야 블로그에 반영된다고 분명히 적어 두었습니다. 미리보기로 지면이 여전히 그려지는지 보고, 저장하고, 라이브 주소에서 발행된 글을 엽니다. 판단은 미리보기 창이 아니라 그 글에서 하세요. 목록 지면도 함께 열어 봅니다. 스킨이 글 영역을 여러 종류의 지면에서 그린다면, 그 지면들도 각자의 경로에서 각자의 키를 받습니다.

방금 붙여넣은 것

티스토리 댓글 영역은 이미 있다, 어느 쪽을 남길지 정한다

이제 같은 글에 댓글 영역이 둘입니다. 독자는 먼저 눈에 띄는 쪽에 씁니다. 대화가 갈리는 것은 어느 한쪽을 고르는 것보다 나쁘니, 블로그에 댓글이 생겼다고 알리기 전에 먼저 정하세요.

티스토리 쪽을 남기면 독자는 티스토리가 주는 신원으로 글을 쓰고, 새로 붙인 댓글창은 그 아래 두 번째 칸으로 남습니다. 시험하는 동안에만 말이 되는 모양입니다. 걷어내려면 skin.html 에서 <s_rp> 블록을 들어내야 하고, 그 결과는 분명하게 적어 둘 만합니다. 그 댓글들은 티스토리 쪽에 저장돼 있고 따라오지 않습니다. 페이지에서 그려지지 않게 될 뿐 그 이상은 없습니다. 옛 글에 아까운 대화가 있다면 블록을 지우기 전에 글 본문으로 옮겨 두세요.

이 설치를 되돌리는 것은 스킨 교체다

이 글에 나오는 다른 실패는 전부 자기가 실패했다고 알려 줍니다. 이것만 아닙니다. 스킨을 다른 것으로 바꾸면 편집 내역이 어떻게 되는지는 벤더 문서에서 확인하지 못했습니다. 확인되지 않았다는 것 자체가 대비할 이유입니다. 새 디자인을 구경해 본 날 위젯이 옛 스킨과 함께 사라져도, 지면은 그것 없이 멀쩡해 보입니다. 그냥 없는 댓글창을 두고 버그를 신고하는 사람은 없습니다.

• 2단계에서 복사해 둔 skin.html 전문, 날짜를 붙여서.
• 자리표시자 대신 내 진짜 site id 를 이미 채워 넣은 스니펫 둘.
• 파일 어디에 넣었는지 한 줄, 예를 들어 s_rp 블록 바로 앞이라는 정도.

텍스트 파일 하나에 세 항목, 블로그 메모를 두는 자리에 함께. 스킨을 바꾼 뒤 되돌리는 일이 검색 한 번과 붙여넣기 두 번이 됩니다. 기억으로 복원하면 저녁 하나가 들어갑니다.

댓글창이 안 뜰 때

주소가 site id 에 적힌 것과 다르다

가장 먼저 볼 곳이자 가장 흔한 원인입니다. 위젯은 등록된 호스트네임에서만 응답하고 로그인은 페이지 출처를 확인하므로, tistory.com 주소와 내 도메인 양쪽에서 열리는 블로그는 등록도 둘이어야 합니다. 고객센터에는 개인 도메인에서 실제로는 로그인돼 있는데도 브라우저 쿠키 정책 때문에 비로그인처럼 보이는 경우가 적혀 있기도 합니다. 그건 위젯이 아니라 티스토리 자체 세션 이야기이고 위젯 로그인은 페이지 출처의 브라우저 저장소에 있습니다만, 같은 오후에 겹쳐 만나면 헷갈리기 딱 좋으니 이름을 먼저 붙여 둡니다.

미리보기는 멀쩡했는데 라이브 글은 아니다

미리보기와 저장이 따로 있는 데는 이유가 있고, 미리보기만 한 편집은 블로그에 올라간 것이 아닙니다. 저장까지 했는데도 글에 아무것도 없다면 라이브 글에서 소스 보기를 열고 마운트 요소를 찾아보세요. 있는데 비어 있으면 호스트네임 쪽이고, 아예 없으면 파일 안 위치 쪽입니다. 대개 지금 지면이 그리지 않는 블록 안으로 붙여넣기가 들어간 경우입니다.

저장했더니 스킨 전체가 망가졌다

다른 것을 살피기 전에 붙여넣기를 되돌리고 새로고침합니다. skin.html 사본을 미리 떠 두라는 가장 빠른 이유가 이것입니다. 티스토리의 주의 문구도 닫지 않은 태그와 무리한 스크립트 추가를 한 문장에 나란히 적어 두었으니, 위젯보다 붙여넣은 것의 모양부터 보세요. 이 글의 스니펫은 div 하나, 인라인 스크립트 하나, 스크립트 태그 하나이고 전부 닫혀 있습니다.

위젯 값은 얼마이고, 무엇에 따라 늘지 않는가

댓글은 BootSignal 구독에 포함됩니다. 등록 도메인 단위로 월 $20 또는 연 $200이며, 유료 위젯 34개가 모두 포함되고 트래픽에 따라 늘어나는 항목은 없습니다. 마지막 대목이 티스토리에서는 다른 플랫폼보다 크게 작용합니다. 한국어 블로그는 하루 몇백 명으로 한 해를 보내다가 어느 날 큰 지면에 걸리기도 하는데, 페이지뷰로 값을 매기는 댓글 도구는 하필 그 주에 비싸집니다. 주소가 다른 두 번째 블로그는 등록이 하나 더 필요하고, 대시보드에서 추가합니다. 무엇이 무료이고 무엇이 아닌지는 요금 지면 에 나란히 적혀 있고, 호스팅형 댓글 서비스끼리 견준 내용은 비교 지면 에 있습니다.

파일을 열어 둔 김에

방금 넣은 로더 한 줄은 나머지 카탈로그도 함께 실행합니다. 그래서 두 번째 위젯은 div 하나로 끝나고 스크립트 태그는 더 늘지 않습니다. 긴 티스토리 글에 자연스럽게 어울리는 짝은 목차이고, 글에 이미 들어 있는 제목들을 그대로 읽어 만듭니다.

<div data-bootsignal="toc"></div>

편집기를 닫기 전에 이 줄도 아까 그 텍스트 파일에 함께 적어 두세요. 다음에 시험해 볼 스킨이 나머지와 함께 이것도 가져갑니다. 그 파일이 있으면 5분짜리 문제이고, 없으면 잃어버린 오후가 됩니다.