Astro 블로그에 댓글 시스템 연동하기: Giscus, Waline, Twikoo 완전 가이드

Astro 블로그에 댓글을 추가하는 문제로 꽤 오랫동안 고민했습니다.

처음에는 댓글 시스템 하나만 불러오면 되는 간단한 일이라고 생각했습니다. 하지만 막상 시작해 보니 Giscus, Waline, Twikoo, Disqus 등 선택지가 너무 많았습니다. 모두 사용하기 좋다고 말하지만 설정 방식은 제각각이었습니다. 더 난감한 점은 튜토리얼을 따라 어렵게 설정한 뒤 블로그를 열었을 때 댓글이 잘 표시되다가도, 기쁜 마음으로 다른 글을 클릭하면 댓글이 사라진다는 것이었습니다.

나중에야 Astro의 View Transitions 라우팅 때문이라는 사실을 알았습니다. 페이지를 전환할 때 댓글 컴포넌트가 다시 로드되지 않아, 클릭해 보기 전에는 보일지 알 수 없는 ‘슈뢰딩거의 댓글’이 되어 버린 것입니다.

비슷한 문제를 겪었거나 어떤 댓글 시스템을 골라야 할지 고민하고 있다면 이 글이 도움이 될 것입니다. 세 가지 주요 방식(Giscus, Waline, Twikoo)을 비교하고, Astro에 연동하는 전체 코드와 View Transitions 라우팅 호환 문제의 해결법을 소개합니다. 그대로 따라 하면 10분 안에 설정할 수 있습니다.

댓글 시스템 비교: 무엇을 선택해야 할까?

솔직히 세 시스템을 모두 사용해 봤는데 각각 장단점이 있었습니다. 먼저 한눈에 볼 수 있는 비교표부터 살펴보겠습니다.

제가 권하는 선택 기준

표를 보고도 선택하기 어렵다면 조금 더 구체적으로 나눠 보겠습니다.

블로그의 주요 독자가 프로그래머이고 기술 튜토리얼이나 오픈 소스 프로젝트 문서를 다룬다면 Giscus를 선택하세요. 이유는 간단합니다. 독자가 이미 GitHub 계정을 가지고 있으므로 댓글을 남길 때 GitHub로 바로 로그인하는 편이 오히려 편합니다. 게다가 Giscus는 순수 프론트엔드 방식이라 백엔드를 배포할 필요가 없고, 설정도 매우 간단해 5분이면 끝납니다.

블로그가 일반 독자를 대상으로 한다면, 예를 들어 일상 기록, 사진 작품, 여행기를 다룬다면 Waline 또는 Twikoo를 선택하세요. 둘 다 익명 댓글을 지원해 독자의 참여 장벽을 낮춥니다. 회원가입이나 로그인 없이 닉네임과 이메일만 입력하면 댓글을 남길 수 있습니다. Waline은 관리 백엔드가 더 강력해 댓글이 많은 블로그에 적합하고, Twikoo는 더 가벼우며 배포도 조금 더 간단합니다.

저처럼 비용을 전혀 들이고 싶다면 고민하지 말고 Giscus를 선택하세요. GitHub의 무료 서비스만 사용하므로 별도 데이터베이스나 유료 클라우드 서비스가 필요 없고 서버를 임대할 필요도 없습니다. Waline에도 무료 할당량(LeanCloud 개발 버전 1GB 저장 공간)이 있지만, 블로그 트래픽이 늘면 유료 버전으로 업그레이드해야 할 수 있습니다.

댓글 검수, 데이터 통계, 스팸 댓글 필터링 같은 강력한 관리 백엔드가 필요하다면 Waline을 선택하세요. 전용 관리 패널에서 댓글을 일괄 처리하고 방문 통계를 확인할 수 있어 WordPress 댓글 플러그인과 비슷한 사용 경험을 제공합니다.

정리하면 기술 블로그에는 Giscus, 라이프스타일 블로그에는 Waline, 극도로 단순한 구성을 원한다면 Twikoo가 적합합니다.

Giscus 연동 방법: 가장 간단한 방식

Giscus는 특히 기술 블로그에 가장 권하고 싶은 댓글 시스템입니다. 세 시스템 중 설정이 가장 간단하며 백엔드나 데이터베이스를 배포할 필요 없이 GitHub의 무료 서비스만 사용합니다.

준비 작업

Giscus를 연동하기 전에 다음 작업을 완료해야 합니다.

1. 공개 GitHub 저장소 만들기

Alibaba Cloud - 개발자 클라우드 1순위, Lighthouse 서버 15% 할인

15% 할인 받기 →광고

블로그 소스 코드 저장소를 그대로 사용해도 되고, 댓글만 보관하는 전용 저장소(예: blog-comments)를 새로 만들어도 됩니다. 반드시 공개 저장소여야 하며 비공개 저장소에서는 댓글이 표시되지 않습니다.

2. Discussions 기능 켜기

저장소의 Settings 페이지로 이동해 아래로 스크롤한 뒤 Features 영역에서 Discussions를 선택합니다. 기본적으로 꺼져 있으므로 직접 활성화해야 합니다.

3. giscus app 설치하기

https://github.com/apps/giscus 에 접속해 Install을 클릭하고 앞에서 만든 저장소를 선택합니다. 이 단계는 giscus 봇이 Discussions를 자동으로 만들고 관리할 수 있도록 저장소 접근 권한을 부여하는 과정입니다.

4. Discussion 카테고리 설정하기

저장소의 Discussions 페이지를 열고 오른쪽 위의 Categories 설정을 클릭합니다. Announcements 유형의 카테고리(예: ‘Comments’)를 새로 만드는 것을 권장합니다. 그러면 본인과 giscus 봇만 댓글 주제를 만들 수 있고 다른 사용자는 답글만 작성할 수 있어 스팸 콘텐츠를 줄일 수 있습니다.

설정 매개변수 확인하기

준비를 마치면 https://giscus.app/zh-CN 에 접속해 페이지 안내에 따라 정보를 입력합니다.

1. 저장소 이름: 사용자 이름/저장소 이름을 입력합니다. 예: zhangsan/blog-comments
2. 페이지와 Discussion 매핑 관계: pathname을 권장합니다. 각 페이지가 URL 경로에 따라 대응하는 Discussion을 자동으로 만듭니다.
3. Discussion 카테고리: 앞에서 만든 Announcements 카테고리를 선택합니다.
4. 테마: light 또는 dark를 선택하거나, preferred_color_scheme으로 자동 적용할 수 있습니다.

입력을 마치면 페이지 아래쪽에 설정 코드가 생성됩니다. 이 코드에는 data-repo, data-repo-id, data-category-id 등의 매개변수가 포함됩니다. 잠시 뒤 사용할 수 있도록 기록해 둡니다.

Astro 연동 코드

이제 가장 중요한 부분입니다. Astro 프로젝트에 Giscus 컴포넌트를 만듭니다. src/components 디렉터리에 Giscus.astro 파일을 새로 만들고 다음 코드를 붙여 넣습니다.

---
// src/components/Giscus.astro
---

<div class="giscus"></div>

<script>
  function loadGiscus() {
    const script = document.createElement('script');
    script.src = 'https://giscus.app/client.js';
    script.setAttribute('data-repo', 'your-username/your-repo'); // 저장소로 변경
    script.setAttribute('data-repo-id', 'your-repo-id'); // repo-id로 변경
    script.setAttribute('data-category', 'Comments');
    script.setAttribute('data-category-id', 'your-category-id'); // category-id로 변경
    script.setAttribute('data-mapping', 'pathname');
    script.setAttribute('data-reactions-enabled', '1');
    script.setAttribute('data-emit-metadata', '0');
    script.setAttribute('data-input-position', 'bottom');
    script.setAttribute('data-theme', 'light');
    script.setAttribute('data-lang', 'zh-CN');
    script.setAttribute('crossorigin', 'anonymous');
    script.async = true;

    const container = document.querySelector('.giscus');
    if (container) {
      container.innerHTML = ''; // 중복 로드를 막기 위해 컨테이너 비우기
      container.appendChild(script);
    }
  }

  // 첫 페이지 로드 시 초기화
  loadGiscus();

  // [핵심] Astro View Transitions 이벤트를 수신해 페이지 전환 시 댓글 다시 로드
  document.addEventListener('astro:page-load', loadGiscus);
</script>

<style>
  .giscus {
    margin-top: 2rem;
  }
</style>

코드의 document.addEventListener('astro:page-load', loadGiscus); 줄이 View Transitions 라우팅 문제를 해결하는 핵심입니다. Astro는 페이지 전환 시 astro:page-load 이벤트를 발생시킵니다. 이 이벤트를 수신해 페이지가 전환될 때마다 댓글 컴포넌트를 다시 로드하면 댓글이 사라지지 않습니다.

글 페이지에서 사용하기

블로그 글 템플릿 파일(일반적으로 src/pages/blog/[...slug].astro 또는 비슷한 경로)을 열고 글 본문 뒤에 Giscus 컴포넌트를 불러옵니다.

---
import Giscus from '@/components/Giscus.astro';
// ...기타 import
---

<article>
  <!-- 블로그 글 본문 -->
  <h1>{title}</h1>
  <div>{content}</div>
</article>

<!-- 댓글 영역 -->
<Giscus />

저장한 뒤 개발 서버(npm run dev)를 시작하고 아무 글이나 엽니다. 페이지 아래쪽으로 스크롤하면 댓글 입력란이 보입니다. 서로 다른 글 사이를 이동해 보세요. 댓글이 사라지지 않고 정상적으로 표시되어야 합니다.

Waline 연동 방법: 가장 강력한 기능

Giscus의 GitHub 로그인 장벽이 높다고 느껴지고 독자가 익명으로 댓글을 남길 수 있게 하고 싶다면 Waline을 사용해 보세요. 관리 백엔드, 데이터 통계, 이메일 알림 등 Giscus보다 기능이 훨씬 풍부합니다. 다만 설정은 조금 더 복잡하고 백엔드 서비스를 배포해야 합니다.

백엔드 배포하기(Vercel + LeanCloud)

Waline 백엔드는 여러 플랫폼에 배포할 수 있습니다. 가장 흔한 방식은 완전히 무료인 Vercel + LeanCloud 조합입니다.

1단계: LeanCloud 앱 만들기

1. https://console.leancloud.cn/ 에 접속해 계정을 만듭니다(글로벌 버전을 권장하며 중국 버전은 도메인 ICP 등록이 필요합니다).
2. ‘앱 만들기’를 클릭하고 ‘개발 버전’을 선택합니다(무료 1GB 저장 공간으로 개인 블로그에는 충분합니다).
3. 생성이 끝나면 앱의 ‘설정 → 앱 자격 증명’ 페이지로 이동해 다음 세 값을 기록합니다.
   • App ID(나중에 LEAN_ID에 입력)
   • App Key(나중에 LEAN_KEY에 입력)
   • Master Key(나중에 LEAN_MASTER_KEY에 입력)

2단계: Vercel에 Waline 배포하기

1. https://vercel.com/new/clone?repository-url=https://github.com/waline/waline/tree/main/example 에 접속합니다. Waline이 공식 제공하는 원클릭 배포 링크입니다.
2. GitHub 계정으로 Vercel에 로그인합니다.
3. 프로젝트 이름(예: my-waline)을 입력하고 Create를 클릭합니다.
4. Vercel이 자동으로 저장소를 만들고 배포합니다. 약 1~2분 뒤 배포가 완료됩니다.
5. ‘Settings → Environment Variables’를 클릭하고 다음 세 환경 변수를 추가합니다.
   • LEAN_ID = LeanCloud App ID
   • LEAN_KEY = LeanCloud App Key
   • LEAN_MASTER_KEY = LeanCloud Master Key
6. 저장한 뒤 ‘Deployments’를 클릭하고 최신 배포 기록 오른쪽의 점 세 개를 눌러 ‘Redeploy’로 다시 배포합니다.
7. 배포가 끝나면 my-waline.vercel.app 같은 도메인을 받게 됩니다.

3단계: 사용자 지정 도메인 연결하기(중요)

이 단계를 건너뛰면 안 됩니다. Vercel의 .vercel.app 도메인은 중국 본토에서 차단되어 있으므로 자체 도메인을 연결하지 않으면 중국에서 댓글 서비스에 접근할 수 없습니다.

1. 도메인 제공업체(예: Alibaba Cloud, Tencent Cloud)에서 CNAME 레코드를 추가합니다.
   • 호스트 레코드: waline(또는 원하는 다른 이름)
   • 레코드 유형: CNAME
   • 레코드 값: cname.vercel-dns.com
2. Vercel로 돌아가 ‘Settings → Domains’를 클릭하고 도메인(예: waline.yourdomain.com)을 입력한 뒤 Add를 클릭합니다.
3. DNS가 적용될 때까지 기다립니다(보통 몇 분에서 몇 시간). 적용이 끝나면 자체 도메인으로 Waline에 접근할 수 있습니다.

Astro 프론트엔드 연동

백엔드 배포를 마쳤다면 Astro 프로젝트에 프론트엔드 코드를 연동합니다.

1단계: Waline 클라이언트 설치하기

npm install @waline/client

2단계: Waline 컴포넌트 만들기

src/components 디렉터리에 Waline.astro 파일을 새로 만듭니다.

---
// src/components/Waline.astro
---

<div id="waline"></div>

<script>
  import { init } from '@waline/client';
  import '@waline/client/style';

  function loadWaline() {
    const walineInstance = init({
      el: '#waline',
      serverURL: 'https://waline.yourdomain.com', // Waline 도메인으로 변경
      path: window.location.pathname,
      lang: 'zh-CN',
      dark: 'auto', // 다크 모드 자동 적용
      emoji: [
        '//unpkg.com/@waline/emojis@latest/weibo',
        '//unpkg.com/@waline/emojis@latest/bilibili'
      ],
      meta: ['nick', 'mail'], // 댓글 작성자 정보: 닉네임, 이메일(URL 숨김)
      requiredMeta: ['nick'], // 필수 항목: 닉네임
      pageSize: 10,
    });

    // 나중에 제거할 수 있도록 인스턴스 반환
    return walineInstance;
  }

  // 페이지 전환 시 제거할 수 있도록 인스턴스 저장
  let walineInstance = null;

  // 첫 페이지 로드
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => {
      walineInstance = loadWaline();
    });
  } else {
    walineInstance = loadWaline();
  }

  // [핵심] View Transitions 라우팅 호환
  document.addEventListener('astro:page-load', () => {
    // 기존 인스턴스 제거
    if (walineInstance && walineInstance.destroy) {
      walineInstance.destroy();
    }
    // 다시 로드
    walineInstance = loadWaline();
  });
</script>

<style>
  #waline {
    margin-top: 2rem;
  }
</style>

마지막의 astro:page-load 이벤트 리스너를 확인하세요. 댓글을 다시 로드할 뿐 아니라 기존 인스턴스를 먼저 제거해(walineInstance.destroy()) 메모리 누수도 방지합니다.

3단계: 글 페이지에서 사용하기

Giscus와 마찬가지로 글 템플릿에서 Waline 컴포넌트를 불러옵니다.

Railway - 현대적인 배포 플랫폼, 번거로운 운영 없이 몇 분 만에 라이브

지금 시작 →광고

---
import Waline from '@/components/Waline.astro';
---

<article>
  <!-- 글 본문 -->
</article>

<Waline />

관리자 계정 등록하기

배포를 마친 뒤 https://waline.yourdomain.com/ui/register에 접속해 첫 번째 계정을 등록합니다. 이 계정은 자동으로 관리자가 되며 관리 백엔드에 로그인해 댓글을 검수하고 데이터 통계를 확인할 수 있습니다.

관리 백엔드 주소는 https://waline.yourdomain.com/ui입니다. 관리자 계정으로 로그인하면 스팸 댓글을 일괄 삭제하고 데이터를 내보내는 등 다양한 기능을 사용할 수 있습니다.

Twikoo 연동 방법: 가볍고 간결한 방식

Twikoo는 세 시스템 중 가장 가볍고, Tencent Cloud, Vercel, Cloudflare Workers 등 다양한 방식으로 배포할 수 있으며 인터페이스도 간결하고 보기 좋습니다. Waline만큼 복잡한 관리 기능이 필요하지 않다면 Twikoo가 좋은 선택입니다.

클라우드 함수 배포하기(Cloudflare Workers)

Twikoo는 여러 배포 방식을 지원합니다. 여기서는 완전히 무료이며 중국에서도 안정적으로 접근할 수 있는 Cloudflare Workers를 권장합니다.

1단계: Twikoo 설치하기

npm install twikoo

2단계: Cloudflare Workers에 배포하기

1. Cloudflare 계정을 만듭니다(아직 없다면).
2. Workers & Pages 페이지로 이동해 ‘Create Application → Create Worker’를 클릭합니다.
3. Worker 이름(예: my-twikoo)을 정하고 Deploy를 클릭합니다.
4. 배포가 끝나면 ‘Quick Edit’을 클릭하고 기본 코드를 삭제한 뒤 Twikoo 클라우드 함수 코드를 붙여 넣습니다(Twikoo 공식 문서 참고: https://twikoo.js.org/).
5. 저장하고 배포한 뒤 Worker 도메인(예: my-twikoo.your-subdomain.workers.dev)을 기록합니다.

Astro 프론트엔드 연동

src/components 디렉터리에 Twikoo.astro 파일을 새로 만듭니다.

---
// src/components/Twikoo.astro
---

<div id="twikoo"></div>

<script>
  function loadTwikoo() {
    // SSR 문제를 피하기 위해 Twikoo 동적 import
    import('twikoo').then((twikoo) => {
      twikoo.init({
        envId: 'https://my-twikoo.your-subdomain.workers.dev', // Worker 도메인으로 변경
        el: '#twikoo',
        path: window.location.pathname,
        lang: 'zh-CN',
      });
    });
  }

  // 첫 페이지 로드
  loadTwikoo();

  // [핵심] View Transitions 라우팅 호환
  document.addEventListener('astro:page-load', () => {
    // 중복 렌더링을 막기 위해 컨테이너 비우기
    const container = document.getElementById('twikoo');
    if (container) {
      container.innerHTML = '';
      loadTwikoo();
    }
  });
</script>

<style>
  #twikoo {
    margin-top: 2rem;
  }
</style>

글 페이지에서 Twikoo 컴포넌트를 불러옵니다.

---
import Twikoo from '@/components/Twikoo.astro';
---

<article>
  <!-- 글 본문 -->
</article>

<Twikoo />

Astro 호환 처리: View Transitions 라우팅의 함정

앞의 세 시스템 연동 코드에는 모두 다음과 같은 줄이 들어 있습니다.

document.addEventListener('astro:page-load', loadComment);

이 코드가 Astro View Transitions 문제를 해결하는 핵심입니다. 이 줄이 없으면 댓글 컴포넌트는 처음 페이지에 들어갈 때만 로드되고, 이후 다른 글로 이동하면 댓글이 사라집니다.

왜 이런 문제가 생길까?

Astro의 View Transitions 기능은 단일 페이지 애플리케이션(SPA)의 라우팅 전환과 비슷합니다. 링크를 클릭하면 Astro는 전체 페이지를 다시 로드하지 않고 페이지 내용만 교체합니다. 덕분에 전환이 더 빠르고 매끄럽지만 문제가 하나 생깁니다. 기존 댓글 시스템 스크립트는 페이지가 로드될 때 실행되는데, 페이지가 새로고침되지 않으면 스크립트도 다시 실행되지 않으므로 댓글이 ‘사라지는’ 것입니다.

해결 방법

Astro는 여러 생명주기 이벤트를 제공합니다. 그중 가장 자주 쓰는 astro:page-load는 페이지 내용의 로드가 끝날 때마다 발생하며, 첫 로드와 라우팅 전환을 모두 포함합니다. 이 이벤트를 수신하고 발생할 때마다 댓글 컴포넌트를 다시 초기화하면 됩니다.

document.addEventListener('astro:page-load', () => {
  // 댓글 다시 초기화
  loadComment();
});

다른 해결 방법(권장하지 않음)

다음 두 가지 방법도 있지만 각각 문제가 있습니다.

방법 1: transition:persist 지시어 사용

Astro에는 페이지가 전환될 때 특정 요소를 그대로 유지하는 transition:persist 지시어가 있습니다. 완벽한 방법처럼 들리지만 실제로는 댓글이 뒤섞일 수 있습니다. 글마다 댓글 내용이 다른데 요소를 그대로 유지하면 글 A에 글 B의 댓글이 표시될 수 있기 때문입니다.

<!-- 권장하지 않음! 댓글이 뒤섞일 수 있음 -->
<div id="comments" transition:persist>
  <Giscus />
</div>

방법 2: View Transitions 비활성화

끝내 해결하기 어렵다면 블로그 글 페이지에서 View Transitions를 끄고 기존의 전체 페이지 새로고침 방식으로 되돌릴 수 있습니다.

---
// src/pages/blog/[...slug].astro
// <ViewTransitions /> 컴포넌트를 import하지 않음
---

하지만 이렇게 하면 매끄러운 전환 애니메이션을 포기해야 하므로 얻는 것보다 잃는 것이 많습니다.

테마 전환 적용하기

블로그가 다크 모드 전환을 지원한다면 댓글 시스템의 테마도 함께 바뀌어야 합니다. Giscus를 예로 들면 다음과 같습니다.

document.addEventListener('theme-change', (e) => {
  const theme = e.detail.theme; // 현재 테마(light/dark) 확인

  // Giscus iframe에 메시지를 보내 테마 전환
  const iframe = document.querySelector('iframe.giscus-frame');
  if (iframe) {
    iframe.contentWindow.postMessage(
      { giscus: { setConfig: { theme } } },
      'https://giscus.app'
    );
  }
});

Waline과 Twikoo에도 비슷한 API가 있습니다. 자세한 내용은 각 공식 문서를 참고하세요.

Vultr - 고성능 NVMe 클라우드 서버, 전 세계 32개 노드, Docker 원클릭 배포

요금 보기 →광고

자주 묻는 질문

Q1: 중국에서 Vercel 접속이 차단되면 어떻게 하나요?

A: 가장 흔한 문제입니다. Vercel의 .vercel.app 도메인은 중국 본토에서 DNS 오염으로 접속할 수 없습니다. 해결 방법은 자체 도메인을 연결하는 것입니다.

1. 도메인 제공업체에서 cname.vercel-dns.com을 가리키는 CNAME 레코드를 추가합니다.
2. Vercel의 Settings → Domains에서 도메인을 추가합니다.
3. DNS가 적용될 때까지 기다린 뒤 자체 도메인으로 댓글 서비스에 접근합니다.

Q2: 댓글 데이터를 이전할 수 있나요?

A: 가능하지만 과정이 꽤 번거롭습니다.

• Giscus 데이터는 GitHub Discussions에 있으며 GitHub API를 통해 JSON으로 내보낼 수 있습니다.
• Waline은 관리 백엔드에서 CSV 또는 JSON으로 데이터를 내보낼 수 있습니다.
• Twikoo는 데이터 백업을 지원하며 로컬로 내보낼 수 있습니다.

서로 다른 시스템 간에 이전하려면 데이터 형식을 변환하는 스크립트를 작성해야 하며, 바로 쓸 수 있는 도구는 없습니다.

Q3: 스팸 댓글은 어떻게 막나요?

A: 세 시스템 모두 스팸 방지 기능이 있습니다.

• Giscus: GitHub의 스팸 방지 시스템을 사용하므로 크게 걱정할 필요가 없습니다.
• Waline: Akismet 스팸 방지 플러그인이 내장되어 있고 관리 백엔드에서 직접 검수할 수 있습니다.
• Twikoo: 키워드 필터링, CAPTCHA, IP 블랙리스트 등을 지원합니다.

새 댓글이 관리자의 승인을 받은 뒤 표시되도록 ‘댓글 검수’ 기능을 켜는 것을 권장합니다.

Q4: 여러 댓글 시스템을 동시에 사용할 수 있나요?

A: 기술적으로는 가능하지만 그럴 필요는 없습니다. 여러 댓글 시스템을 사용하면 페이지 로드 시간이 늘어나고 댓글이 서로 다른 플랫폼에 흩어져 관리하기 어렵습니다. 시스템을 바꾸려면 기존 시스템의 데이터를 먼저 내보낸 뒤 새 시스템으로 가져오는 편이 좋습니다.

Q5: 댓글 로드가 느리면 어떻게 하나요?

A: 다음과 같은 방법으로 최적화할 수 있습니다.

• 지연 로딩 사용: 댓글 영역이 화면에 들어올 때 로드합니다.
• CDN 활성화: Waline과 Twikoo는 CDN 가속 설정을 지원합니다.
• 이모지 패키지 줄이기: Waline은 기본적으로 여러 이모지 패키지를 로드하므로 자주 사용하는 것만 남길 수 있습니다.

정리

지금까지의 내용을 정리해 보겠습니다.

블로그의 주요 독자가 프로그래머이거나 비용과 유지 관리가 전혀 필요 없는 방식을 원한다면 Giscus를 선택하세요. 설정이 가장 간단하고 5분이면 끝나며 GitHub가 기본으로 지원합니다.

강력한 관리 백엔드가 필요하거나 익명 댓글로 참여 장벽을 낮추고 싶다면 Waline을 선택하세요. 방문자가 많고 댓글도 많은 블로그에 적합합니다.

복잡한 관리 기능이 필요 없고 가볍고 간결한 스타일을 선호한다면 Twikoo를 선택하세요. 배포 방식이 유연하고 인터페이스가 보기 좋습니다.

제 기술 블로그에서는 Giscus를 사용합니다. 독자가 모두 프로그래머라 GitHub 로그인이 장벽이 되지 않고 오히려 더 편하기 때문입니다. 완전히 무료라는 점도 마음에 듭니다.

댓글 시스템을 골랐다면 튜토리얼을 따라 한 번 설정해 보세요. 10분이면 끝납니다. 블로그에 댓글이 생기면 독자와 상호작용할 수 있고 더 따뜻한 공간이 됩니다. 독자의 의견, 제안, 불평도 계속 글을 쓰는 데 큰 동기가 됩니다.

궁금한 점이 더 있다면 댓글로 남겨 주세요. 물론 먼저 댓글 시스템을 연동해야겠지만요. 설정이 순조롭게 끝나길 바랍니다!