가이드독자가 회원이 아니라면 Ghost 댓글창은 비어 있다

독자가 회원이 아니라면 Ghost 댓글창은 비어 있다

회원만 쓰는 답글이냐, Google 로그인만 하면 되는 댓글이냐. 고른 다음 붙여넣을 줄은 하나입니다.

갱신

Ghost 에는 2022년 8월부터 네이티브 댓글이 있고, 설계부터 회원 전용입니다. 독자가 내 사이트에 가입해 로그인한 뒤에야 답글 칸이 나타납니다. 유료 뉴스레터에는 맞는 거래이고 열린 블로그에는 틀린 거래입니다. 할 말이 있는 사람 대부분은 그러려고 계정을 만들지 않습니다. 지나가는 독자가 글을 남기게 하려면 서드파티 댓글 위젯을 붙입니다. Settings > Advanced > Code Injection 에 스크립트 태그 하나, 댓글창이 놓일 자리에 <div> 하나면 되고, 그 전에 올려야 할 Ghost(Pro) 등급은 없습니다.

Ghost 는 이미 댓글을 갖고 있고, 결정은 거기서 끝난다

네이티브 댓글은 내 멤버십 목록 위에서 돕니다. Ghost 도 그대로 적어 두었습니다. 댓글은 로그인한 회원에게만 열린다고요. 켜는 자리는 Settings > Membership > Access 이고, Edit 를 누르면 고를 수 있는 것은 All members 와 Paid-members only 둘입니다. 익명 독자를 위한 세 번째 항목은 없고, Ghost 자신의 도움말도 익명 댓글이 필요하면 서드파티 연동을 보라며 그 문을 닫아 둡니다.

댓글창이 사람들이 돈을 내고 보는 것의 일부라면, 이 문턱은 흠이 아니라 기능입니다. 유료 글 아래에서 구독자끼리 붙는 자리는 좋은 방이고, 로그인 요구가 그 방을 지켜 줍니다. 열린 블로그에서는 같은 문턱이 반대로 작동합니다. 어디선가 내 벤치마크 글로 넘어와 수치가 틀렸다고 알려 주려는 사람은 그러려고 계정을 만들지 않습니다. 댓글창은 계속 비어 있고, 나는 아무도 안 읽는다고 결론을 냅니다.

내 트래픽에 맞는 쪽을 고른다

Ghost 네이티브 댓글BootSignal 댓글
쓸 수 있는 사람로그인한 내 사이트 회원. 익명 댓글은 지원하지 않습니다.Google 계정이 있는 누구나. 내 사이트 회원일 필요는 없습니다.
켜는 자리Settings > Membership > Access 에서 All members 또는 Paid-members onlyCode Injection 의 로더 하나와 마운트 <div>
테마 조건최신 공식 테마, 또는 커스텀 테마 글 템플릿에 {{comments}} 를 넣은 상태없음. <div> 를 붙여넣은 자리에 그려집니다.
관리Ghost 관리 화면에서 숨기기·되살리기·고정, 필터와 전문 검색BootSignal 대시보드에서 댓글 삭제, 작성자 차단
데이터가 있는 곳내 Ghost 사이트BootSignal, 등록한 도메인에 딸린 채로
비용Community comments 는 모든 Ghost(Pro) 등급에 포함으로 표시등록 도메인 단위로 월 $20 또는 연 $200, 모든 위젯 포함
결정하는 줄은 첫 줄입니다. 나머지는 어느 쪽을 골라도 안고 갈 수 있는 세부.

분명히 해 둘 것이 있습니다. Ghost 의 네이티브 관리 기능은 좋습니다. 스태프가 댓글을 숨기고 되살리고, 하나를 맨 위에 고정하고, 글·작성자·공개 범위·날짜로 걸러 보고, 본문 전체를 검색할 수 있습니다. 내가 이야기를 나누고 싶은 사람들이 이미 회원이라면 그걸 대신할 이유가 없습니다. 위젯은 그 사람들이 회원이 아니고 앞으로도 되지 않을 때 붙이는 것입니다.

여기서 등급이 잠그는 것은 스크립트가 아니라 테마다

코드 인젝션은 유료 부가 기능이 아닙니다. Ghost(Pro) 요금 비교표에는 코드 인젝션 행 자체가 없습니다. Site Header 와 Site Footer 칸은 모든 등급의 Settings > Advanced 에 있고, 셀프호스팅 Ghost 에는 무언가를 잠글 등급이 애초에 없습니다. Community comments 도 모든 등급에 포함으로 적혀 있으니, 두 시스템 중 어느 쪽도 잠금을 풀려고 등급을 올릴 대상이 아닙니다.

잠긴 쪽은 테마 파일입니다. Ghost(Pro) 는 커스텀 테마와 마켓플레이스 테마를 Starter 에서 쓸 수 없고 Publisher 부터 쓸 수 있다고 적어 두었습니다. 그래서 아래 post.hbs 길은 Ghost(Pro) 에서 Publisher 이상이 필요합니다. HTML card 길과 글 단위 인젝션 길은 어느 등급에서나 되고, 셀프호스팅에서는 셋 다 열려 있습니다. 어느 길로 갈지는 시작하기 전에 정하세요. 스니펫은 그대로이고, 스니펫이 들어가는 자리만 달라집니다.

글에 붙은 댓글창은 이렇게 생겼다

미리보기

댓글 2

댓글을 남겨보세요…
홍길동 님으로 작성등록
  • M
    김민수2시간 전

    진짜 한 줄로 끝나네요. 설치가 이렇게 간단할 줄!

  • J
    이서연어제

    로그인까지 공유돼서 따로 붙일 게 없어요. 👍

div 를 놓은 자리에 이런 것이 앉습니다. 안에 걸린 댓글은 표본 데이터.

  1. Ghost(Pro) 와 셀프호스팅은 출발 호스트네임이 다르다

    BootSignal 대시보드에 뭔가 적기 전에, 독자가 실제로 닿는 주소가 무엇인지 먼저 정리하세요. Ghost 는 여기에 답이 둘입니다. Ghost(Pro) 사이트는 기본으로 무료 ghost.io 서브도메인을 받고, 커스텀 도메인은 나중에 CNAME 레코드로 붙입니다. 그래서 Pro 로 만든 지면은 초반 몇 주를 yourpublication.ghost.io 에서 보내고 DNS 가 준비되면 집을 옮깁니다. 셀프호스팅 Ghost 에는 기댈 벤더 서브도메인이 없습니다. 설치할 때 지정한 호스트네임에서 응답하고, 이미 돌리는 마케팅 사이트 옆의 blog. 서브도메인인 경우가 많습니다. 독자가 있는 주소를 등록하고, Pro 사이트가 이사 중이라면 둘 다 등록하세요. 위젯은 location.hostname 을 site id 에 달린 목록과 맞춰 보고 목록에 없으면 조용히 있습니다. 앞에 붙은 www. 는 양쪽에서 떼고 비교하므로 www.example.com 은 따로 등록할 필요가 없고, 도메인 본체를 등록하면 그 아래 서브도메인까지 덮습니다. 대시보드가 돌려주는 것은 site id 이고, Ghost Admin 이 다음으로 물어보는 것이 그 문자열입니다.

  2. 로더를 Site Footer 에 붙여넣는다

    Ghost Admin 에서 Settings > Advanced > Code Injection 으로 갑니다. Site Header 코드는 <head> 안에, Site Footer 코드는 닫는 </body> 바로 앞에 나가고, Ghost 자신의 튜토리얼도 제대로 로드되도록 JavaScript 는 Site Footer 로 보내라고 합니다. 이 칸은 JS 전용이 아니라 HTML 을 그대로 받으므로 <script> 태그를 직접 적어 줍니다. 인젝션된 코드는 테마의 스타일과 스크립트 뒤에 로드되는데, 우리가 원하는 순서가 그쪽입니다. 태그에 붙은 defer 는 파싱과 첫 렌더에서 이 스크립트를 비켜 세웁니다. 로더는 지면 하나에 하나로 끝나고, 나중에 얹는 것은 요청이 아니라 마크업입니다.

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

마운트 div 가 갈 수 있는 자리 셋

코드 인젝션이 글자를 넣을 수 있는 자리는 <head> 안, 아니면 </body> 바로 앞뿐입니다. 이 제약 하나가 이 절을 결정합니다. Site Footer 에 마운트 div 를 떨어뜨리면 댓글창은 페이지 맨 아래, 사이트 푸터보다 더 아래에 그려지고, 사이트 전체 인젝션은 모든 페이지에서 실행되니 홈과 태그·작성자 목록에도 함께 뜹니다. 그래서 로더는 코드 인젝션으로, div 는 자리를 스스로 정할 수 있는 곳으로 갑니다.

HTML card, 글 하나씩 붙일 때

에디터에서 + 버튼을 누르거나 새 줄에서 / 를 치고 HTML card 를 고른 다음 div 를 붙여넣습니다. Ghost 는 HTML card 를 외부 콘텐츠 임베드와 서드파티 도구 연동에 쓰는 카드로 설명하고, 자기 Typeform 연동도 똑같이 이 동작을 씁니다. 카드는 글 본문 흐름 안에 앉으므로 댓글창이 사이트 푸터 아래가 아니라 마지막 문단 아래에 놓입니다.

HTML card 에 넣는 내용
<div data-bootsignal="comments" data-thread-id="my-post-slug"></div>

post.hbs, 모든 글의 같은 자리

Ghost 의 공식 Disqus 연동 문서가 참고할 본보기이고, 여기에도 고칠 것 없이 그대로 적용됩니다. div 를 post.hbs 의 본문 뒤에 두고, 공식 테마라면 {{#if comments}} 블록을 지우고 {{comments}} 헬퍼를 내 마크업으로 바꿉니다. 그다음 고친 테마를 업로드하고 Ghost 를 재시작하거나, Edit code 를 눌러 들어가는 브라우저 안 테마 편집기에서 같은 수정을 합니다. 커스텀 테마 권한이 필요한 길이 이쪽이라, Ghost(Pro) Starter 에서는 닫혀 있습니다.

post.hbs
{{!-- post.hbs, where {{comments}} used to be --}}
<div data-bootsignal="comments" data-thread-id="{{slug}}"></div>

글 단위 코드 인젝션, 한 페이지짜리일 때

글마다 에디터 사이드바에 자기 Code Injection 절이 있고, 그 글에만 적용되는 Header 와 Footer 칸이 따로 있습니다. Ghost 1.5 에 들어온 기능입니다. 위치 규칙은 같아서 댓글창은 본문 아래가 아니라 페이지 맨 아래에 놓입니다. 랜딩 페이지에는 괜찮고 블로그 글에는 틀립니다. 테마를 건드리지 않고 한 페이지에만 댓글창을 두고 싶을 때 꺼내는 길입니다.

글마다 다른 thread id 를 준다

data-thread-id 속성이 이 페이지의 댓글과 저 페이지의 댓글을 갈라 줍니다. 위젯은 URL 이 아니라 그 값을 키로 잡으니, 같은 값을 든 글 둘은 대화 하나를 함께 쓰고, 값이 바뀐 글은 댓글을 잃은 것처럼 보입니다. HTML card 에서는 값을 손으로 적으면 됩니다. 이미 그 글 안에 들어와 있으니 문제가 없습니다. post.hbs 에서는 글 컨텍스트 안이므로 글 자신의 슬러그를 속성에 출력하면, 템플릿 한 번 고쳐서 모든 글이 자기 댓글창을 갖습니다.

슬러그의 함정은 이름 변경입니다. 발행된 글의 URL 을 바꾸면 스레드 키도 같이 움직이니, 제목을 자주 고치는 편이라면 절대 움직이지 않는 값, 예를 들어 글 id 에 속성을 붙여 두세요. 모든 위젯이 이 값을 받는 것은 아닙니다. 댓글·별점·투표·방명록·업보트·반응·조회수·뉴스레터·피드백은 스레드 id 를 받고, 읽기 진행바나 목차는 페이지마다 저장할 것이 없습니다.

댓글창 두 개는 하나가 많다

공식 Ghost 테마는 전부 회원 댓글을 기본으로 지원합니다. 그래서 댓글 기능이 켜져 있으면 같은 글 아래에 네이티브 댓글창과 내 위젯이 나란히 쌓일 수 있습니다. 하나를 고르세요. Settings > Membership > Access 에서 네이티브 댓글을 끄는 것이 가장 빠르고 어느 등급에서나 됩니다. 커스텀 테마라면 대신 글 템플릿에서 {{#if comments}} 블록을 지울 수 있는데, Disqus 본보기가 요구하는 것과 같은 수정입니다. 커스텀 테마를 쓸 수 없는 Starter 에서는 설정 스위치가 가진 유일한 손잡이입니다.

둘을 같이 돌리는 게 말이 되는 경우가 하나 있습니다. 유료 글에는 회원 전용 답글, 무료 글에는 공개 댓글창을 두는 배치입니다. Ghost 는 HTML card 와 코드 인젝션을 글 단위로 적용하므로, 이 배치에는 테마를 갈라 둘 필요가 없습니다.

우리 쪽에서 나가는 값

댓글은 BootSignal 구독에 들어 있습니다. 등록 도메인 단위로 월 $20 또는 연 $200, 유료 위젯 31개가 모두 포함이고 트래픽에 따라 늘어나는 항목이 없습니다. 다음 달에 읽기 진행바를 얹어도 청구서는 그대로이고, 구독을 시작한 뒤에 나온 위젯도 함께 들어옵니다. 도메인을 더 쓰려면 대시보드에서 따로 삽니다. 이사 후에도 ghost.io 주소를 커스텀 도메인과 함께 등록해 두는 경우라면 알아 둘 만합니다. 자세한 것은 요금 지면에 있고, 호스팅형 댓글 서비스끼리 값을 견주어 놓은 것은 비교 지면에 있습니다.

누구나 쓰는 Ghost 댓글창

Site Footer 에 한 줄, HTML card 에 div 하나.

긴 Ghost 글에 어울리는 위젯 둘

이 둘은 애초에 댓글이 붙을 만한 긴 글에서 제값을 합니다. 마운트 방식은 댓글창과 똑같습니다. 글 안의 HTML card, 아니면 템플릿에 한 줄. 둘 다 스레드 id 를 받지 않고, Site Footer 의 로더가 이미 페이지에 있으니 요청도 늘지 않습니다.

미리보기

읽기 진행바. 스크롤이 내려간 만큼 화면 위쪽 띠가 차오릅니다.

미리보기
☰ 목차
시작하기설정FAQ

목차입니다. 내 글의 제목들로 만들고, 지금 읽고 있는 절을 표시해 줍니다.

스레드 id 가 필요 없는 마운트 요소
<div data-bootsignal="reading"></div>
<div data-bootsignal="toc"></div>

Ghost 설치가 조용해지는 여섯 가지

  • 어디에서도 아무것도 안 그려집니다. 지금 보고 있는 것이 발행된 페이지가 아니라 에디터입니다. 글을 업데이트하고 라이브 URL 을 엽니다.
  • yoursite.ghost.io 에서는 되고 커스텀 도메인에서는 안 되거나, 그 반대입니다. 위젯이 먼저 보는 것은 location.hostname 이고, 호스트네임은 하나하나 site id 에 등록돼 있어야 합니다.
  • 나는 댓글창이 보이는데 로그아웃한 독자는 못 봅니다. HTML card 의 눈 아이콘을 확인하세요. 회원 제한이 걸린 카드는 공개 방문자에게 통째로 숨습니다.
  • 글 둘이 같은 댓글을 보여 줍니다. data-thread-id 를 함께 쓰고 있습니다. 값을 따로 주거나, 템플릿에서 속성을 글 슬러그에 연결합니다.
  • 댓글창이 푸터 아래 페이지 맨 끝에 그려집니다. div 가 코드 인젝션 칸으로 들어갔고, 그 칸은 </body> 앞에만 쓸 수 있습니다. HTML card 나 post.hbs 로 옮기세요.
  • 댓글은 불러오는데 아무도 쓰지 못합니다. 답글 칸이 Google 로그인을 요구하며, 그 로그인은 도메인의 모든 BootSignal 위젯이 함께 씁니다.

자주 나오는 질문

Ghost 유료 요금제가 있어야 댓글 위젯을 붙일 수 있나요?
아닙니다. Ghost(Pro) 요금 비교표에는 코드 인젝션 행이 없어서, Settings > Advanced 아래 Site Header 와 Site Footer 칸은 Starter 를 포함한 모든 등급에 있습니다. 셀프호스팅 Ghost 에는 등급 잠금이 아예 없습니다. 잠긴 길은 post.hbs 를 고치는 쪽 하나인데, 커스텀 테마와 마켓플레이스 테마가 Starter 에서 사용 불가로 적혀 있기 때문입니다. 그 등급에서는 HTML card 나 글 단위 코드 인젝션으로 마운트하세요.
글이 아니라 페이지에도 댓글창을 둘 수 있을까요?
됩니다. HTML card 는 페이지 안에서도 글 안에서와 똑같이 동작하니, 소개 페이지나 변경 이력 아래 댓글창은 자기 data-thread-id 말고는 필요한 것이 없습니다. 넘어오지 않는 쪽은 템플릿 길입니다. post.hbs 는 글을 그리고 페이지는 자기 템플릿 파일에서 나오므로, 양쪽에 다 두려면 페이지는 카드로 하나씩 붙이거나 페이지 템플릿에서 같은 수정을 반복해야 합니다. Ghost 는 네이티브 댓글을 글 단위 기능으로 설명하고 페이지에서 그려지는지는 어디에도 적어 두지 않았으니, 여기가 위젯 쪽이 더 예측 가능한 자리입니다.
글이 이메일 뉴스레터로도 나가는데 구독자가 메일에서 댓글창을 보나요?
보지 못하고, 이건 어떤 위젯으로도 바꿀 수 없습니다. 메일 클라이언트는 JavaScript 를 돌리지 않아서 마운트 div 는 아무 일도 하지 않는 마크업으로 도착하고 로더는 실행되지 않습니다. Ghost 가 메일 본문에 무엇을 담든 마찬가지입니다. 대화는 글의 웹 버전에만 존재합니다. 독자 대부분이 받은 편지함에서 읽는다면 그건 HTML card 길을 고를 이유가 됩니다. 카드 바로 위에 한 줄을 두고, 답글을 쓰려면 브라우저에서 글을 열어 달라고 적어 두세요.
Ghost 회원 댓글과 공개 위젯을 같이 두면 어떻게 되나요?
기술적으로는 됩니다. 공식 테마라면 손대지 않는 한 같은 글 아래에 댓글창이 둘 그려집니다. 실제로 쓸 만한 형태는 글 단위로 나누는 쪽입니다. 유료 글에는 네이티브 회원 댓글을 두고, 무료 글에는 HTML card 로 위젯을 떨어뜨립니다. 어디서나 한 시스템만 쓰고 싶다면 Settings > Membership > Access 에서 네이티브 댓글을 끄면 됩니다.
독자가 댓글을 쓰려면 내 사이트 회원이 되어야 하나요?
위젯 쪽은 아닙니다. Google 로그인으로 들어오고, 그 로그인은 내 도메인에 붙은 다른 BootSignal 위젯과 공유됩니다. Ghost 네이티브 댓글은 정반대입니다. 멤버십에 로그인까지 필요하고, 처음 쓰는 사람에게는 이름과 전문 분야를 물어봅니다.
테마를 바꿨더니 댓글창이 사라졌습니다. 댓글도 같이 갔나요?
아닙니다. 댓글은 테마가 아니라 data-thread-id 값에 붙어 저장되니, 마운트 div 가 없는 새 테마는 한 글자도 건드리지 않고 댓글창만 감춥니다. 같은 값으로 div 를 다시 넣으면 대화가 그대로 돌아옵니다. 아끼는 글에 HTML card 를 권하는 실질적인 이유가 이것입니다. 카드 마크업은 글의 일부라 테마 교체를 넘어 살아남고, post.hbs 수정은 테마 파일 것이라 새로 고른 테마로 따라오지 않습니다.
누가 쓴 글을 관리하는 화면은 어디인가요?
BootSignal 대시보드입니다. 댓글을 지우거나 작성자를 차단할 수 있습니다. 네이티브로 남는 쪽과 견주고 있다면, Ghost 관리 화면은 숨기기와 되살리기, 맨 위 고정, 글·작성자·공개 범위·날짜 필터, 그리고 댓글 본문 전체 검색을 줍니다.
Ghost 도메인 등록

등록하면 Site Footer 스니펫에 넣을 site id 가 나옵니다.

수치 출처

Family Site