블로그 댓글을 Utterances에서 Giscus로 전환한 이유와 방법

안녕하세요, 자바파커입니다.

"블로그 댓글 시스템, Utterances 쓰고 있는데 굳이 바꿔야 하나요?"

저도 그렇게 생각했습니다. Utterances는 가볍고 깔끔하니까요. 하지만 직접 Giscus로 전환해보니 — 대댓글, 포스트 리액션, 실시간 다크모드 전환까지, 체감 차이가 확실했습니다.

이 글에서는 왜 전환했는지, 어떻게 전환했는지, 실제 코드까지 공유합니다.

Utterances vs Giscus — 뭐가 다른가

둘 다 GitHub 기반 무료 댓글 시스템이지만, 저장 방식이 다릅니다.

왜 전환했나

1. 대댓글이 안 됨 — Utterances는 모든 댓글이 일렬로 나열됩니다. 대화가 길어지면 누가 누구에게 답한 건지 알기 어렵습니다.
2. 다크모드 코드가 지저분함 — Utterances는 테마 변경 시 컴포넌트를 다시 렌더링해야 해서, light/dark 두 개의 Utterances를 숨기고 보여주는 트릭이 필요했습니다.
3. 리액션 기능 — Giscus는 포스트 자체에 리액션을 달 수 있어서, 댓글을 쓰지 않아도 독자의 반응을 확인할 수 있습니다.

전환 과정 — 5단계로 끝

1단계: GitHub Discussions 활성화

GitHub 레포 → Settings → Features → Discussions 체크

# GitHub CLI로도 가능합니다
gh api repos/username/repo -X PATCH -f has_discussions=true

2단계: Giscus 앱 설치

github.com/apps/giscus에서 Install → 레포 선택

3단계: Giscus 설정값 확인

giscus.app에서 레포를 입력하면 설정값이 자동 생성됩니다. 필요한 값:

• repo — 레포 경로 (예: javapark/javapark.github.io)
• repoId — 레포 고유 ID
• category — Discussion 카테고리 (보통 General)
• categoryId — 카테고리 고유 ID

GraphQL로 직접 확인할 수도 있습니다:

gh api graphql -f query='
{
  repository(owner: "username", name: "repo") {
    id
    discussionCategories(first: 10) {
      nodes { id name }
    }
  }
}'

4단계: 패키지 설치

yarn add @giscus/react

5단계: 코드 교체

Before (Utterances):

import { Utterances } from "utterances-react-component"

const Comment = () => {
  const { theme } = useSelector(state => state.theme)
  const [spinner, setSpinner] = useState(true)

  useEffect(() => {
    setTimeout(() => setSpinner(false), 1500)
  }, [])

  return (
    <>
      {spinner && <Spinner />}
      <HiddenWrapper isHidden={spinner}>
        <HiddenWrapper isHidden={theme === "light"}>
          <Utterances repo="user/repo" theme="github-dark" issueTerm="pathname" />
        </HiddenWrapper>
        <HiddenWrapper isHidden={theme === "dark"}>
          <Utterances repo="user/repo" theme="github-light" issueTerm="pathname" />
        </HiddenWrapper>
      </HiddenWrapper>
    </>
  )
}

After (Giscus):

import Giscus from "@giscus/react"

const Comment = () => {
  const { theme } = useSelector(state => state.theme)

  return (
    <Giscus
      repo="user/repo"
      repoId="R_xxxxx"
      category="General"
      categoryId="DIC_xxxxx"
      mapping="pathname"
      reactionsEnabled="1"
      emitMetadata="0"
      inputPosition="top"
      theme={theme === "dark" ? "dark_dimmed" : "light"}
      lang="ko"
    />
  )
}

차이점이 보이시나요?

• Utterances: 스피너 + HiddenWrapper 2개로 light/dark 전환 → 30줄
• Giscus: theme prop만 바꾸면 실시간 전환 → 15줄

코드가 절반으로 줄었습니다.

Giscus 주요 설정 옵션

사용 가능한 테마

• light — 밝은 테마
• dark — 어두운 테마
• dark_dimmed — 약간 밝은 다크 테마 (추천)
• transparent_dark — 투명 다크
• 커스텀 CSS URL도 지정 가능

전환 후 달라진 점

대댓글 지원

댓글에 답글을 달 수 있어서 대화가 자연스럽게 이어집니다. Utterances에서는 "@사용자" 멘션으로 대신해야 했던 것이 스레드로 깔끔하게 정리됩니다.

포스트 리액션

댓글을 쓰지 않아도 포스트에 리액션을 남길 수 있습니다. "이 글이 도움이 됐다"는 피드백을 부담 없이 받을 수 있습니다.

코드 간소화

다크모드 전환을 위한 HiddenWrapper 트릭, 스피너 로딩 등 불필요한 코드를 모두 제거했습니다. Giscus는 theme prop만 변경하면 자동으로 테마가 전환됩니다.

기존 Utterances 댓글은 어떻게 되나요?

Utterances로 작성된 기존 댓글은 GitHub Issues에 그대로 남아 있습니다. Giscus는 GitHub Discussions에 새로운 스레드를 만들기 때문에, 기존 댓글과 새 댓글은 별도로 관리됩니다.

기존 댓글을 Discussions로 이전하려면 GitHub API를 사용해 Issues의 댓글을 Discussions로 복사하는 스크립트를 작성해야 합니다. 다만, 댓글이 많지 않다면 새로 시작하는 것을 추천합니다.

자주 묻는 질문 (FAQ)

Q1. Giscus도 GitHub 계정이 필요한가요?

네. Utterances와 마찬가지로 댓글을 작성하려면 GitHub 계정으로 로그인해야 합니다. 개발 블로그라면 대부분의 독자가 GitHub 계정을 가지고 있으므로 큰 문제가 되지 않습니다.

Q2. Giscus는 무료인가요?

네. 오픈소스이며 완전 무료입니다. 광고도 없고, 트래킹도 없습니다. 모든 데이터는 여러분의 GitHub 레포에 저장됩니다.

Q3. Next.js에서도 쓸 수 있나요?

네. @giscus/react 패키지는 React 기반이라 Next.js, Gatsby, CRA 등 모든 React 프로젝트에서 사용할 수 있습니다.

마무리

Utterances에서 Giscus로의 전환은 5분이면 끝나는 작업입니다. 대댓글, 리액션, 실시간 테마 전환 — 이 세 가지만으로도 전환할 가치가 충분합니다.

여러분의 블로그에도 Giscus를 적용해보세요. 아래 Giscus 댓글로 첫 댓글을 남겨주시면 더 좋겠습니다!

참고 자료:

• Giscus 공식 사이트
• Giscus GitHub
• @giscus/react NPM