가이드독자가 회원이 아니면 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이며, 유료 위젯 34개가 모두 포함되고 트래픽에 따라 늘어나는 항목은 없습니다. 다음 달에 읽기 진행바를 추가해도 청구서는 그대로이고, 구독을 시작한 뒤 출시된 위젯도 함께 들어옵니다. 도메인을 더 쓰려면 대시보드에서 따로 구매합니다. 이사한 뒤에도 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 가 나옵니다.

수치 출처