앞서 Google Analytics Umami 전환기에서 말씀드렸듯 대대적인 블로그 개편을 진행하는 중입니다. 방문 데이터 분석을 손본 뒤에는 블로그에 달려 있던 댓글 플랫폼을 바꾸는 작업을 하게 되었습니다.
이 웹사이트는 2021년 구입한 Jekyll 템플릿에서 시작되었는데요. Disqus는 템플릿에 빌트인된 댓글 플랫폼이었습니다.
앞서 말씀드렸듯 저는 데이터 주권과 프라이버시를 중요한 가치로 보고 있습니다. 하지만, Disqus는 제 가치관에 맞지 않았습니다. 내 댓글 데이터가 플랫폼에 귀속되는 것은 물론, 사용자의 활동을 추적하여 프로파일링하고, 여러 보안 침해 사고들이 발생한 이력이 있습니다. 프라이버시 측면에서 좋지 않은 선택이었죠.
저는 그 대안으로 GitHub Discussions 기반의 오픈 소스 댓글 위젯인 Giscus를 선택했습니다.
Giscus란?
Giscus는 GitHub Discussions를 이용한 오픈 소스 댓글 위젯입니다.
댓글 데이터를 GitHub Repository의 Discussion에서 저장·관리하고, 가벼운 오픈 소스 클라이언트 스크립트만으로 동작합니다. 광고도 추적도 없고, 별도 서버도 필요없습니다.
댓글 데이터에 대한 통제권이 나에게 귀속된다는 점, 설정이 단순한 점, 사용자 추적이 없다는 점이 제 요구 사항과 일치하여 Giscus를 선택하게 되었습니다.
Giscus 적용하기
GitHub Repository Discussions 설정
댓글을 저장할 GitHub Repository의 Discussions 기능을 활성화합니다. Giscus는 Repository의 Discussions에 접근하여 댓글을 관리하므로, 대상 Repository는 반드시 Public이어야 합니다. Repository -> Settings -> General -> Features 경로에서 “Discussions”을 체크해주시면 됩니다.
이어서 Giscus가 사용할 카테고리를 만듭니다. 별다른 설정을 하지 않았다면 아래와 같이 몇 가지 카테고리가 기본 생성되는데, 이를 그대로 사용하셔도 무방합니다.
GitHub에 Giscus App 연동
Giscus에서 내 GitHub Repository의 Discussions에 접근하기 위해 권한을 부여해야 합니다. 다행히도, 환경 설정의 괴로움 없이 GitHub Apps에서 간편하게 연동할 수 있습니다.
Marketplace에서 giscus App을 찾아 GitHub 계정에 추가합니다.
giscus App 설정의 Repository access 옵션에서 Only select repositories -> Discussions 설정한 Repository를 선택하여 액세스 권한을 부여합니다.
giscus.app에서 설정 확인
이제 웹사이트에 붙일 스크립트를 가져오는 일만 남았습니다.
giscus.app에 접속하여 언어, 저장소, 경로 매핑 등 설정 사항들을 입력합니다.
설정을 마치면 하단 Enable giscus 문단에 아래와 같은 스크립트가 생성됩니다. 이 스크립트를 웹사이트에 추가하여 댓글 위젯을 사용할 수 있습니다.
<script src="https://giscus.app/client.js"
data-repo="username/repo-name"
data-repo-id="R_xxxxxxxx"
data-category="Announcements"
data-category-id="DIC_xxxxxxxx"
data-mapping="pathname"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="bottom"
data-theme="preferred_color_scheme"
data-lang="en"
crossorigin="anonymous"
async>
</script>
웹사이트에 Giscus 붙이기
간단한 HTML 수정으로 적용하는 방법과 Jekyll 웹사이트에서 적용하는 경우 두 가지를 다루겠습니다.
HTML 편집
giscus.app에서 생성한 스크립트를 그대로 복사하여 댓글 기능을 제공하고 싶은 위치에 넣으면 됩니다.
<div class="comments">
<script src="https://giscus.app/client.js"
data-repo="username/repo-name"
data-repo-id="R_xxxxxxxx"
data-category="Announcements"
data-category-id="DIC_xxxxxxxx"
data-mapping="pathname"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="bottom"
data-theme="preferred_color_scheme"
data-lang="en"
crossorigin="anonymous"
async>
</script>
</div>
Jekyll 웹사이트 적용
설정 파일(_data/settings.yml)에 giscus.app에서 생성한 스크립트와 동일하게 Giscus 설정 환경 변수를 추가합니다.
# Giscus Comments
giscus:
repo: "username/repo-name"
repo_id: "R_xxxxxxxx"
category: "Announcements"
category_id: "DIC_xxxxxxxx"
mapping: "pathname"
strict: "0"
reactions_enabled: "1"
emit_metadata: "0"
input_position: "bottom"
theme: "preferred_color_scheme"
lang: "en"
_includes 경로에 giscus-comments.html을 만들고 giscus.app에서 생성한 스크립트를 추가합니다. 이때, 속성들의 값을 Liquid 변수로 두어 설정 파일의 환경 변수를 가져오도록 합니다.
<script src="https://giscus.app/client.js"
data-repo="{{ site.data.settings.giscus.repo }}"
data-repo-id="{{ site.data.settings.giscus.repo_id }}"
data-category="{{ site.data.settings.giscus.category }}"
data-category-id="{{ site.data.settings.giscus.category_id }}"
data-mapping="{{ site.data.settings.giscus.mapping }}"
data-strict="{{ site.data.settings.giscus.strict }}"
data-reactions-enabled="{{ site.data.settings.giscus.reactions_enabled }}"
data-emit-metadata="{{ site.data.settings.giscus.emit_metadata }}"
data-input-position="{{ site.data.settings.giscus.input_position }}"
data-theme="preferred_color_scheme"
data-lang="en"
crossorigin="anonymous"
async>
</script>
이후, HTML 파일에서 댓글을 표시하고 싶은 위치에서 아래와 같이 참조하면 됩니다.
<div class="container">
<div class="row">
<div class="col col-12">
{% include giscus-comments.html %}
</div>
</div>
</div>
이후 웹페이지를 조회하면, 정상적으로 적용된 것을 확인할 수 있습니다.
댓글 숨김 기능
특정 포스트에서만 댓글을 끄는 기능을 구현해 보겠습니다.
giscus-comment.html 파일을 불러오는 로직에 Markdown 파일의 Front Matter에 위치한 page.comments 변수의 값을 확인하는 조건을 추가합니다.
{% if page.comments != false %}
<div class="container">
<div class="row">
<div class="col col-12">
{% include giscus-comments.html %}
</div>
</div>
</div>
{% endif %}
이후, 댓글을 숨기고 싶은 글의 Front Matter에 comments: false를 넣으면 됩니다.
---
title: "글 제목"
comments: false
---
Polyglot 다국어 지원
제 블로그처럼 다국어를 지원하는 웹사이트의 경우, 언어별로 다른 댓글 UI를 제공할 필요가 있습니다.
Jekyll-Polyglot 플러그인을 사용할 경우, 현재 선택한 언어 값이 site.active_lang 전역 변수에 저장되어 있기에 해당 변수 값을 이용하여 간단하게 다국어를 지원할 수 있습니다.
<script src="https://giscus.app/client.js"
data-lang="{{ site.active_lang | default: site.data.settings.giscus.lang }}"
async>
</script>
블로그 테마와 Giscus 테마 연동
Giscus의 UI 테마 변수 data-theme의 기본 설정값인 preferred_color_scheme은 OS/브라우저의 설정을 따릅니다.
제 블로그의 경우 사용자가 토글로 라이트/다크 모드를 바꿀 수 있는데, 블로그의 테마와 OS/브라우저의 설정이 다른 경우 댓글이 화면과 어울리지 않게 됩니다.
이를 해결하기 위해, 스크립트 로딩 시 현재 블로그 테마의 설정값인 site.data.settings.color_scheme를 참조하여 블로그 테마에 따라 Giscus 테마도 변경되도록 개선했습니다.
{% if site.data.settings.color_scheme == "light" %}
<script src="https://giscus.app/client.js"
data-theme="light""
async>
</script>
{% else %}
<script src="https://giscus.app/client.js"
data-theme="dark"
async>
</script>
{% endif %}
