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

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

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

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

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

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

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

로더와 마운트 요소는 서로 다른 화면에 넣습니다. 첫 실패는 대개 이 둘을 한자리에 몰아넣을 때 생깁니다. 로더는 사이트 전체에 한 번만 넣으므로 Site settings, Custom code tab, Footer code, 곧 사이트 설정의 커스텀 코드 탭에 있는 아래쪽 코드 칸에 넣습니다. Webflow 는 이 칸의 내용을 모든 페이지의 </body> 앞에 내보냅니다. Webflow 는 로딩을 늦추지 않도록 스크립트 태그를 Head code 보다 이쪽에 두라고 권합니다. 그래도 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 를 저장했는지 봅니다. 로더는 임베드와 다른 화면에 있고, 한쪽을 저장한 것이 다른 쪽 저장은 아닙니다.