개인 사이트에 Disqus 댓글 추가하기

들어가며

블로그에 댓글이 있으면 좋겠다는 생각이 들었다. 내가 쓴 글에 사람들의 반응을 확인할 수 있는 것은 블로그를 지속하게 하는 동기부여 역할도 하니까 말이다. 직접 구현할까 하다가, 지금은 외부 서비스인 Disqus를 사용해보기로 했다. 하지만 아마 곧 걷어내고 직접 만든 댓글을 사용하게 될 것 같다. 기능 자체는 충분히 훌륭하지만, 어느 순간이 되면 광고가 달리기 때문이다. 그럼에도 한번 설치해보기로 생각하는 이유는 머리로 아는 것과 직접 사용해봤을 때 알게되는 것이 다르기 때문이다. 이번 기회를 통해 경험해보고, 추후에는 나만의 댓글 시스템을 만들어야겠다.

진행 과정

1. Disqus 홈페이지에 가입해야 한다. 이곳에서 내 사이트의 댓글들을 관리할 수 있다.

2. Disqus 내에서 site를 만든다. Website Name은 다른 site와 구분지을 수 있는 값이다. 외부에 노출되는 주소는 아니므로 대충 지어도 상관은 없다.

   

3. 결제 플랜을 선택하라고 나오는데, 나는 무료로 사용할 것이기 때문에 하단에 있는 Basic을 선택한다. Ad-supported란, 광고가 노출된다는 뜻이다. 사실 당연하다. 서비스를 무료로 운영할 수는 없기 때문이다.

   

4. 다음은 플랫폼을 선택한다. 내 블로그는 Next.js를 사용해서 만들어졌으니 이 목록에는 없었다. 그래서 맨 하단에 I don't see my platform listed, install manually with Universal Code를 선택했다.

   

5. 그 다음 페이지에서 아래처럼 설치 방법이 나와있기는 하지만, 이를 사용하지는 않을 것이다. Next.js는 React 기반으로 만들어졌기 때문에 React 라이브러리를 사용할 수 있다.

   

6. React에서 사용할 수 있는 disqus-react 라이브러리를 설치한다. 설치 방법은 readme 파일에 친절하게 나와있다. 순서대로 따라만 하면 되기에 어렵지 않을 것이다.

   

7. 설치가 끝나고, 블로그를 보니 아래처럼 댓글창이 생겼다.

겪은 문제

설치 방법이 쉽다고는 했지만, 순탄하지는 않았다.

1. Super expression must either be null or a function 에러 메시지는 Next.js 13을 사용할 때 겪을 수 있는 문제다. 댓글은 사용자의 클릭과 같은 Action이 이루어지는 곳이므로 'use client'를 상단에 작성해야 한다. (Next.js 13 규칙)

   
   

2. 블로그 하단에 댓글창이 나타나지 않는 문제를 겪었다. 연결이 끝났을거라 생각했는데 댓글이 나올 자리에 밑줄만 하나 있고, 댓글창이 나타나지 않았다. 콘솔 log에 Refused to load the script 'https://danver-blog.disqus.com/embed.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' 'unsafe-inline' giscus.app analytics.umami.is". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback. 라는 메시지가 있었다. CSP 문제였기에, 아래 이미지처럼 필요한 값들을 헤더에 추가해서 해결했다.

   
   

맺으며

Disqus 댓글 설치가 잘 끝났다. 당분간 이걸로 버티다가, 시간이 될 때 자체 댓글 시스템을 만들어보고자 한다. 바라는 것은 나 혼자만 사용하지 않고, 다른 사용자에게도 팔아보고 싶은데 과금모델이 고민이다. 어떻게 요금 방식을 설정해야 적당한걸까. 사례를 찾아보고, 스스로도 생각해봐야겠다.