🗨️ Giscus: GitHub 기반의 댓글 시스템

🗨️ Giscus: GitHub 기반의 댓글 시스템

 

블로그나 문서 사이트에 댓글 시스템을 추가하고 싶지만, 데이터베이스 설정이나 서버 구축 없이 간단하게 구현하고 싶으신가요?

바로 Giscus가 이런 니즈를 완벽하게 해결해주는 도구입니다. Giscus는 GitHub Discussions를 기반으로 한 댓글 시스템으로, 댓글을 GitHub에 저장하므로 추가적인 서버나 데이터베이스가 필요하지 않습니다.

이번 글에서는 Giscus의 개념, 주요 기능, 사용법, 그리고 실무에서의 활용 방법을 다뤄볼게요!

 

1. Giscus란?

 

💡 GitHub Discussions 기반 댓글 시스템

 

Giscus는 GitHub Discussions API를 사용하여 댓글을 관리하는 오픈 소스 댓글 위젯입니다. 댓글 데이터가 GitHub Discussions에 저장되기 때문에 별도의 백엔드 설정 없이도 손쉽게 구현할 수 있어요.

 

📋 Giscus의 특징

• 서버리스(Serverless): 데이터는 GitHub에 저장되므로, 별도의 서버나 데이터베이스가 필요 없습니다.

• 오픈 소스: 누구나 무료로 사용하고 커스터마이즈할 수 있습니다.

• GitHub 계정 사용: 댓글 작성자는 GitHub 계정으로 로그인해야 합니다.

• 스팸 방지: GitHub Discussions를 활용하기 때문에 스팸 계정을 효과적으로 방지할 수 있습니다.

• SEO 친화적: 댓글이 GitHub Discussions에 저장되므로 검색 엔진이 인덱싱할 수 있습니다.

 

2. Giscus의 주요 기능

 

🛠️ 1) 댓글과 Discussions 동기화

 

댓글은 GitHub Discussions의 특정 스레드와 연결됩니다. 댓글이 추가되면 해당 Discussions 스레드에 자동으로 업데이트됩니다.

 

🛠️ 2) 멀티 페이지 지원

 

Giscus는 페이지별로 고유한 Discussions 스레드를 생성하거나 기존 스레드와 연결할 수 있습니다.

 

🛠️ 3) 커스터마이징 가능

 

Giscus는 다크 모드, 다양한 언어 지원, 그리고 위젯 스타일 커스터마이징 기능을 제공합니다.

 

3. Giscus 설치 및 설정

 

🛠️ 1) GitHub 저장소 생성

 

먼저, Giscus가 댓글을 저장할 GitHub Discussions를 활성화해야 합니다.

1. GitHub 저장소를 생성하거나 기존 저장소를 사용합니다.

2. 저장소의 Settings로 이동합니다.

3. Discussions 섹션에서 Discussions를 활성화합니다.

 

🛠️ 2) Giscus 설정

1. Giscus 공식 설정 페이지로 이동합니다.

2. 다음 정보를 입력합니다:

• Repository: Giscus가 연결될 GitHub 저장소를 선택합니다.

• Mapping: 댓글과 Discussions의 매핑 방식을 선택합니다.

• URL: 페이지 URL 기준으로 Discussions 연결.

• Title: 페이지 제목 기준으로 연결.

• OG:URL: Open Graph URL을 기준으로 연결.

• Theme: Giscus 위젯의 테마를 설정합니다.

3. Giscus 코드 스니펫을 복사합니다.

 

🛠️ 3) 설치

 

HTML에 Giscus 추가

 

<div id="comments"></div>

<script src="https://giscus.app/client.js"

        data-repo="username/repo"

        data-repo-id="REPO_ID"

        data-category="Discussions"

        data-category-id="CATEGORY_ID"

        data-mapping="pathname"

        data-strict="0"

        data-reactions-enabled="1"

        data-emit-metadata="0"

        data-input-position="top"

        data-theme="light"

        data-lang="en"

        crossorigin="anonymous"

        async>

</script>

 

Next.js에서 Giscus 추가

1. Giscus 컴포넌트 생성

 

import React from 'react';

 

const Giscus = () => (

  <div id="comments">

    <script

      src="https://giscus.app/client.js"

      data-repo="username/repo"

      data-repo-id="REPO_ID"

      data-category="Discussions"

      data-category-id="CATEGORY_ID"

      data-mapping="pathname"

      data-strict="0"

      data-reactions-enabled="1"

      data-emit-metadata="0"

      data-input-position="top"

      data-theme="light"

      data-lang="en"

      crossorigin="anonymous"

      async

    ></script>

  </div>

);

 

export default Giscus;

 

2. 페이지에 Giscus 추가

 

import Giscus from '../components/Giscus';

 

const BlogPost = () => (

  <div>

    <h1>블로그 포스트 제목</h1>

    <p>블로그 내용</p>

    <Giscus />

  </div>

);

 

export default BlogPost;

 

4. Giscus 활용 사례

 

📖 1) 블로그 댓글

• 블로그의 각 포스트마다 별도의 Discussions 스레드를 생성해 댓글을 관리합니다.

 

📖 2) 문서화 피드백

• 문서 페이지에 Giscus를 추가하여 사용자 피드백을 쉽게 수집할 수 있습니다.

 

📖 3) 커뮤니티 포럼

• Discussions와 댓글을 통합하여 사용자의 의견을 GitHub 플랫폼에서 관리합니다.

 

5. Giscus의 장단점

 

👍 장점

1. GitHub 기반 데이터 관리: 댓글 데이터를 GitHub Discussions에 저장.

2. 무료 및 오픈 소스: 누구나 자유롭게 사용 가능.

3. GitHub 계정 인증: 스팸 댓글 방지.

4. SEO 친화적: 댓글이 검색 엔진에 인덱싱될 수 있음.

 

👎 단점

1. GitHub 계정 필수: 댓글 작성자는 GitHub 계정이 있어야 함.

2. 제한된 커스터마이징: 디자인 커스터마이징 옵션이 제한적.

3. 데이터 의존성: 데이터가 GitHub에 저장되므로 플랫폼 의존성이 생김.

 

6. Giscus vs Disqus

 

특징 Giscus Disqus

데이터 저장 위치 GitHub Discussions Disqus 서버

가격 무료 유료 플랜 존재

SEO 가능 (GitHub Discussions 기반) 가능 (HTML로 렌더링)

스팸 방지 GitHub 계정 인증 별도의 스팸 필터 제공

 

결론

 

Giscus는 GitHub Discussions를 기반으로 한 가볍고 강력한 댓글 시스템입니다.

서버와 데이터베이스 설정 없이 댓글 시스템을 쉽게 구현하고, GitHub 커뮤니티와 자연스럽게 연결할 수 있는 솔루션이죠.

 

블로그, 문서 사이트, 커뮤니티 포럼 등 다양한 곳에 활용해보세요.

🌷전설의 개발자가 되어봅시당!🌷