홈 › 웹 제작

정적 사이트에 댓글 달기: Disqus 설정과 다크모드 문제 해결

새벽뉴스 편집부 · 2026년 10월 15일 · 웹 제작

댓글은 글을 저장할 서버가 필요해서 HTML만으로는 만들 수 없습니다. Disqus는 댓글 저장과 로그인을 대신 맡아 주는 서비스로, 받은 코드 몇 줄을 붙이면 됩니다. 이 사이트의 글 아래 댓글이 Disqus입니다.

받은 코드에서 꼭 손볼 부분

Disqus가 주는 코드에는 주석으로 꺼져 있는 설정이 있습니다. 이 부분을 켜고 채우는 것이 중요합니다.

var disqus_config = function () {
  this.page.url = "https://githubtest2.pages.dev/articles/disqus-comments";
  this.page.identifier = "disqus-comments";
};

• page.url: 이 글의 대표 주소입니다. 주소 뒤에 #comments나 ?v=2가 붙어 들어와도 같은 댓글을 보여 주게 합니다.
• page.identifier: 이 글만의 고유 이름입니다. 나중에 주소가 바뀌어도 이 값이 같으면 기존 댓글이 이어집니다.

이 값을 정하지 않으면 Disqus는 지금 브라우저 주소를 기준으로 삼습니다. 그러면 같은 글인데도 주소가 조금 다르다는 이유로 댓글 창이 여러 개로 갈라질 수 있습니다. 글마다 다른 값을 써야 한다는 점도 잊지 마세요.

다크모드로 바꾸면 댓글 글씨가 안 보이는 문제

Disqus는 처음 열릴 때 페이지 배경색을 보고 글자색을 정합니다. 그래서 밝은 화면에서 연 뒤 다크모드로 바꾸면, 어두운 배경에 어두운 글씨가 남아 읽기 어려워집니다. 모드를 바꿀 때 댓글 창을 다시 불러오도록 해서 해결했습니다.

function reloadComments() {
  if (!window.DISQUS) return;
  // 배경색이 바뀌는 0.3초를 기다린 뒤 다시 불러오기
  setTimeout(() => DISQUS.reset({ reload: true, config: disqus_config }), 350);
}

배경색이 0.3초 동안 부드럽게 바뀌도록 해 두었기 때문에, 색이 다 바뀐 뒤에 다시 불러와야 Disqus가 새 배경색을 제대로 읽습니다.

붙이기 전에 생각할 것

• 댓글은 글이 있는 페이지에만 둡니다. 이 사이트도 홈과 문의 페이지에는 댓글을 두지 않았습니다.
• Disqus는 댓글 쓴 사람의 정보를 Disqus 쪽에서 처리합니다. 개인정보처리방침에 이 사실을 적어 두었습니다.
• 요금제에 따라 댓글 영역에 Disqus 자체 광고가 붙을 수 있습니다. 사이트 광고와 겹치지 않는지 확인하세요.