[Astro] 댓글 시스템 (Utterances)

개요

이전 글 이미지 최적화 — 커스텀 rehype 플러그인에서 이미지 최적화를 다루었습니다. 이번 글에서는 블로그에 필수적인 댓글 시스템을 Astro에서 구현하는 방법을 설명합니다.

Utterances란

Utterances는 GitHub Issues를 댓글 저장소로 사용하는 경량 댓글 시스템입니다. 별도의 서버나 데이터베이스가 필요 없고, GitHub 계정으로 로그인하여 댓글을 작성합니다.

이전에 Disqus를 사용했지만, 무거운 스크립트와 광고 표시 문제로 Utterances로 전환했습니다. Utterances의 주요 장점은 다음과 같습니다.

경량: 외부 스크립트 하나만 로드하면 되며, 불필요한 광고가 없습니다
GitHub 통합: 댓글이 GitHub Issues로 저장되므로, 별도 데이터베이스 관리가 불필요합니다
마크다운 지원: 댓글에서 마크다운 문법을 사용할 수 있어 코드 블록 등을 쉽게 작성할 수 있습니다
무료: 오픈소스 프로젝트로 완전 무료입니다

자세한 내용은 Utterances로 댓글 시스템 변경 포스트를 참고하세요.

Comments.astro 컴포넌트

Comments.astro는 Utterances 댓글 위젯을 렌더링하는 컴포넌트입니다. enabled props가 true일 때만 댓글 영역을 표시하므로, frontmatter에서 comments: false로 설정하면 특정 포스트의 댓글을 간단히 비활성화할 수 있습니다.

---
// src/components/Comments.astro
interface Props {
  enabled: boolean;
}

const { enabled } = Astro.props;
---

{enabled && (
  <div class="comments-section" style="margin-top: 40px;">
    <script
      is:inline
      src="https://utteranc.es/client.js"
      repo="dev-yakuza/dev-yakuza.github.io"
      issue-term="title"
      label="comment"
      theme="github-light"
      crossorigin="anonymous"
      async
    ></script>
  </div>
)}

주요 설정

주요 설정값은 다음과 같습니다.

속성	값	설명
`repo`	`dev-yakuza/dev-yakuza.github.io`	댓글이 저장될 GitHub 리포지토리
`issue-term`	`title`	포스트 제목으로 Issue를 매칭
`label`	`comment`	Issue에 붙는 라벨
`theme`	`github-light`	댓글 위젯 테마

is:inline 지시어를 사용하여 Astro가 이 스크립트를 번들링하지 않고 그대로 HTML에 포함합니다.

Utterances 설치 방법

Utterances를 사용하려면 먼저 GitHub에 utterances 앱을 설치해야 합니다. 설치 후 댓글이 저장될 리포지토리에 대한 접근 권한을 부여하면, 포스트에 댓글이 작성될 때마다 해당 리포지토리에 자동으로 Issue가 생성됩니다.

PostLayout에서 사용

PostLayout.astro에서 Comments 컴포넌트를 불러와 사용합니다. frontmatter의 comments 값이 그대로 enabled props로 전달되므로, 포스트별로 댓글 표시 여부를 개별 제어할 수 있습니다.

<!-- src/layouts/PostLayout.astro -->
<Comments enabled={comments} />

완료

이번 글에서는 Astro 블로그에 Utterances 댓글 시스템을 연동하는 방법을 살펴보았습니다.

Utterances로 GitHub Issues 기반 경량 댓글 시스템 구현
Comments.astro 컴포넌트로 캡슐화하여 재사용
enabled props로 포스트별 댓글 표시 여부 제어
is:inline 지시어로 외부 스크립트를 그대로 HTML에 포함

다음 글 광고 연동 (Google AdSense)에서는 Google AdSense 광고를 블로그에 연동하는 방법과 커스텀 rehype 플러그인을 다룹니다.

시리즈 안내

이 포스트는 Jekyll에서 Astro로 마이그레이션 시리즈의 일부입니다.

Github Sponsor

Buy me a coffee

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

앱 홍보

지금 보고 계신 블로그를 작성하는 Deku가 개발한 앱을 한번 사용해보세요.
Deku가 개발한 앱은 Flutter로 개발되었습니다.

관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.

책 홍보

블로그를 운영하면서 좋은 기회가 생겨 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.

쿠팡: 구매하기
yes24: 구매하기
교보문고: 구매하기
알라딘: 구매하기

쿠팡: 구매하기
yes24: 구매하기
교보문고: 구매하기
알라딘: 구매하기

쿠팡: 구매하기
yes24: 구매하기
교보문고: 구매하기
알라딘: 구매하기