웹플로우 사이트에 백엔드 없이 댓글 붙이기

Webflow 댓글 기능은 방문자용이 아니다

이 검색어의 결과가 뒤섞이는 이유는 Webflow 에 이미 댓글 기능이 있기 때문입니다. 그 기능은 Designer 안에 있고, 쓰는 사람은 사이트를 만드는 쪽입니다. 디자이너가 섹션에 메모를 남기고, 클라이언트가 답을 달고, 이야기가 끝나면 그 메모를 닫습니다. 발행된 페이지로는 아무것도 나가지 않아서, 블로그 글을 읽는 방문자는 그중 어느 것도 보지 못합니다.

방문자가 남기는 공개 댓글은 성격이 다른 문제이고, Webflow 가 풀어 주지 않는 조각이 셋입니다. 누가 쓰는지 아는 일, 쓴 글을 남겨 두는 일, 나쁜 글을 지울 수 있는 일. CMS 는 운영자가 직접 넣은 콘텐츠를 담고, Forms 는 운영자만 읽는 제출물을 모읍니다. 둘 다 대화가 아닙니다.

붙여넣기 전에 미리보기부터 본다

다른 걸 보기 전에 요금제부터 확인한다

두 조각이 들어가는 자리는 서로 다르다

로더와 마운트 요소는 들어가는 화면이 다릅니다. 첫 실패는 대개 이 둘을 한자리에 몰아넣는 데서 납니다. 로더는 사이트 전체에 한 번이라 Site settings, Custom code tab, Footer code, 곧 사이트 설정의 커스텀 코드 탭에 있는 아래쪽 코드 칸으로 갑니다. Webflow 는 이 칸의 내용을 모든 페이지에서 </body> 앞에 내보냅니다. 스크립트 태그는 로딩을 늦추지 않도록 Head code 보다 이쪽에 두라고 Webflow 가 권하고, 그래도 head 로 가야 하는 외부 스크립트에는 async 나 defer 를 붙이라고 안내합니다. 아래 로더가 defer 를 달고 있는 이유입니다. 마운트 요소는 놓인 위치가 곧 의미이므로 Code Embed 요소에 넣고, 레이아웃에서 댓글이 놓일 자리에 정확히 끌어다 둡니다.

1. Webflow 가 주는 호스트네임 두 개를 모두 등록한다

   Webflow 프로젝트는 만들어진 날 .webflow.io 주소를 하나 받고, 나중에 커스텀 도메인을 연결해도 그 주소가 없어지지 않습니다. Code Embed 문서도 테스트와 피드백에 쓸 스테이징 도메인으로 그 주소를 가리키고, yourdomain.com 이 올라간 뒤에도 발행된 사이트를 계속 그 주소로 내보냅니다. 그래서 결국 호스트네임 둘을 함께 쓰게 되는데, 위젯은 대시보드에 등록된 호스트네임에서만 응답합니다. your-project.webflow.io 는 yourdomain.com 의 서브도메인이 아니라서, 라이브 도메인을 등록해도 스테이징은 덮이지 않습니다. 둘을 같은 site id 아래 등록해 두세요. 다음 단계의 로더가 들고 가는 값이 그 site id 입니다. 호스트네임 하나가 요금제의 도메인 하나를 차지하니, 커스텀 도메인을 아직 연결하지 않았다면 스테이징 주소를 먼저 등록하고 라이브 주소는 올라가는 날 추가하면 됩니다.

2. 로더는 사이트 전체에 한 번만 붙인다

   Site settings, Custom code tab, Footer code 칸에 붙여넣고 Save changes 를 누릅니다. Webflow 는 이 칸을 발행하는 모든 페이지로 내보내고, 아직 만들지 않은 페이지에도 함께 나갑니다. 그래서 이 태그는 한 번 붙이면 다시 손댈 일이 없습니다. 칸마다 50,000자까지 들어가는데, 로더 태그 하나가 거기에 닿을 일은 없습니다.

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

   복사

3. 댓글이 들어갈 자리에 Code Embed 를 넣는다

   Add 패널(요소를 꺼내 오는 패널)을 열고 Collection page 템플릿의 본문 아래에 Code Embed 요소를 추가한 다음, 마운트 요소를 붙여넣고 저장한 뒤 모달을 닫습니다. 여기에는 다른 것이 들어가지 않습니다. 앞에서 넣은 로더가 이 요소를 찾아 채웁니다.

   <div data-bootsignal="comments" data-thread-id="page-key"></div>

   복사

4. 스테이징으로 publish 하고 거기서 댓글창을 읽는다

   Webflow 는 커스텀 코드의 효과가 preview 모드에서도 보인다고 안내하고, 태그 자체는 그렇습니다. 다만 위젯에는 조건이 하나 더 있습니다. 페이지의 호스트네임을 등록된 도메인과 맞춰 보는데, Designer 의 preview 주소는 내 도메인이 아니라 Webflow 도메인입니다. .webflow.io 주소로 publish 하고 평범한 브라우저 탭에서 열어 보세요. 캔버스에서는 스크립트 태그가 든 Code Embed 가 자리표시 상자로 보이는데, 원래 그렇게 보이는 것이고 고장 신호가 아닙니다.

템플릿은 하나, 댓글창은 글마다 따로

data-thread-id="page-key" 를 그대로 두면 사이트의 모든 글이 같은 대화를 씁니다. 그걸 원하는 경우는 드뭅니다. 이 속성은 키에 지나지 않아서, 글마다 다른 값이 들어가게만 해 두면 분리는 저절로 됩니다.

Collection page 의 Code Embed 편집창에서는 코드 안에 CMS 필드를 끼워 넣을 수 있습니다. data-thread-id 의 따옴표 사이에 커서를 두고 글의 Slug 필드를 넣으세요. Webflow 가 발행 시점에 실제 슬러그로 바꿔 주니, 템플릿을 한 번 고치면 컬렉션의 모든 글이 자기 댓글창을 갖습니다.

위젯에 딸려 오는 것

• 답글이 계단처럼 붙어서, 이야기가 낱개 메모 더미로 흩어지지 않습니다.
• Google 로그인을 모든 BootSignal 위젯이 함께 쓰므로, 별점을 남기려고 로그인한 독자는 댓글을 쓸 때 이미 로그인 상태입니다.
• 새로 만들고 외울 비밀번호가 없습니다. 로그인은 Google 계정 하나로 끝납니다.
• 저장은 도메인 허용목록 뒤에 있습니다. 위젯은 등록한 도메인에서만 응답하고, 어딘가에 복사된 페이지에서는 응답하지 않습니다.
• 관리는 대시보드에서 합니다. 댓글 지우기, 작성자 차단.
• 화면 문구는 한국어·영어·일본어로 나오고, 로더의 data-lang 으로 고릅니다.

Webflow 사이트에 댓글을 얹는 세 가지 길

아무것도 없는 자리에서 시작하는 게 아니라 쓰던 댓글 시스템에서 옮겨 오는 경우라면, 기능 목록보다 옮기는 과정에서 나오는 질문이 더 큽니다. Disqus 대안 정리 지면이 그 질문을 하나씩 짚습니다.

Webflow 요금 옆에 놓고 보면

Webflow Site plan 은 사이트 단위로 청구됩니다. BootSignal 은 등록 도메인 단위로 월 $20 또는 연 $200, 모든 위젯 포함이고 트래픽에는 값을 매기지 않습니다. 글이 잘 터져도 청구서는 그대로이고, 같은 Webflow 프로젝트에 카운트다운이나 읽기 진행바를 나중에 얹어도 그대로입니다. 움직이는 쪽은 호스트네임입니다. 스테이징과 라이브는 등록 도메인 둘이고, 도메인은 대시보드에서 하나씩 추가합니다.

로더는 이미 있으니 다음 위젯은 div 하나

카탈로그의 나머지도 방금 붙인 그 스크립트 태그를 함께 씁니다. Webflow 블로그 글에 놓을 만한 것 둘을 꼽자면 이렇습니다.

안 보이면 호스트네임부터, 그다음 Save 두 곳

1. 주소창에 떠 있는 주소가 등록한 호스트네임 중 하나여야 합니다. your-project.webflow.io 와 yourdomain.com 은 별개 항목이고, Designer 의 preview 주소는 둘 다 아닙니다. preview 에서는 비어 있고 발행된 페이지에서는 보인다면, 그게 제대로 도는 모습입니다.
2. Designer 캔버스의 자리표시 상자는 스크립트 태그가 든 Code Embed 라면 어느 것이든 정상입니다. 설치가 됐는지는 발행된 URL 에서 판단합니다.
3. 발행된 페이지에서 브라우저 콘솔을 엽니다. 등록되지 않은 호스트네임이면 조용히 실패하는 대신 콘솔에 그렇게 적히고, 사람들이 빠뜨리는 쪽은 대개 스테이징입니다.
4. 로더의 site id 가 대시보드에 있는 값과 같은지 봅니다. 복사해 붙이는 사이에 끼어든 오타까지 봅니다.
5. 마크업이 rich text 블록이 아니라 Code Embed 에 들어갔는지 봅니다. rich text 에 넣으면 태그가 실행되지 않고 글자로 보입니다.
6. Site settings 를 저장했는지 봅니다. 로더는 임베드와 다른 화면에 있고, 한쪽을 저장한 것이 다른 쪽 저장은 아닙니다.