▲

내 블로그에 Bluesky 댓글 섹션을 추가했다

 (micahcantor.com)
4P by GN⁺ 15일전 | ★ favorite | 댓글 1개
  • 정적 사이트에서도 Bluesky API를 이용해 댓글을 표시할 수 있도록 구현한 사례
  • Bluesky가 계정 인증, 스팸 관리, 저장소, 모더레이션을 처리하므로 별도 서버 유지가 불필요
  • 구현은 약 200줄의 TypeScript 코드로 구성되며, @bluesky/api와 Tanstack react-query를 활용
  • 댓글은 읽기 전용 형태로 표시되며, 각 블로그 글의 메타데이터에 Bluesky 게시물 ID를 연결해 자동 로드
  • 개방형 소셜 플랫폼과 정적 블로그의 결합 가능성을 보여주는 실험적 구현

Bluesky 댓글 섹션 구현 배경

  • 정적 생성 사이트에서 댓글 기능을 직접 호스팅하기 어렵다는 점이 출발점
    • CDN에 배포된 정적 콘텐츠는 동적 데이터 저장이 불가능
    • 별도 VPS나 클라우드 서비스를 운영하면 비용과 관리 부담이 큼
  • Bluesky는 공개 API와 AT 프로토콜 기반의 개방형 플랫폼으로, 댓글 관리에 필요한 기능을 이미 제공
    • 계정 인증, 스팸 필터링, 저장소, 모더레이션을 Bluesky가 처리
    • 블로그 측에서는 단순히 API를 호출해 댓글을 표시하면 됨

다른 대안과 Bluesky 선택 이유

  • Twitter, Disqus, giscus(GitHub Discussions 기반) 등의 대안도 고려
  • Bluesky는 탈중앙화된 AT 프로토콜 위에 구축되어 특정 기업의 통제 위험이 낮음
  • GitHub 기반보다 대화 중심의 플랫폼으로서 댓글 호스팅에 적합

구현 방식

  • Cory Zue가 공개한 bluesky-comments 패키지를 참고했으나, 직접 구현을 선택
    • 사이트 스타일에 맞춘 커스터마이징과 향후 확장성을 위해 자체 코드 작성
    • 전체 구현은 UI 컴포넌트와 API 함수 포함 약 200줄 규모
  • 초기에는 OAuth를 통한 직접 게시 기능도 고려했으나, UI 복잡성과 시간 제약으로 제외
    • 결과적으로 읽기 전용 댓글 표시 기능만 구현

기술 구성

  • 사이트는 React Server Components와 Parcel을 사용해 구축
    • 콘텐츠는 MDX로 작성되어 JavaScript/JSX를 직접 포함 가능
    • 각 글의 metadata 객체에 bskyPostId를 포함해 Bluesky 게시물과 연결
  • Bluesky TypeScript SDK(@bluesky/api)를 사용해 getPostThread 엔드포인트에서 댓글 스레드 데이터 수신
  • API 요청은 Tanstack react-query로 관리
    • 오류, 로딩, 재시도 상태를 자동 처리

UI 설계

  • Bluesky 응답에서 텍스트 콘텐츠만 추출해 단순한 댓글 UI로 표시
  • 스레드 구조는 들여쓰기와 왼쪽 경계선으로 구분
    • 프로필 이미지와 게시 날짜는 Bluesky 디자인을 참고
  • 상단에는 원본 Bluesky 게시물로 이동하는 링크를 추가해 대화 참여 유도
  • 댓글 작성 기능은 없으며, 사용자는 Bluesky에서 직접 답글을 남김

향후 가능성

  • 필요 시 이 구현을 독립 패키지로 공개할 수 있음
    • 다만 현재 코드는 개인 사이트에 맞춰져 있음
    • 단순한 구조이므로 다른 개발자도 소스코드를 참고해 쉽게 구현 가능
  • Bluesky 댓글 연동이 블로그 참여도 향상에 도움이 될지 여부는 아직 미지수

Bluesky 사용자 반응

  • 여러 Bluesky 이용자들이 댓글로 “좋은 아이디어”, “빠른 반응 속도”, “Disqus 대안으로 적합” 등의 긍정적 반응을 남김
  • 일부는 스팸 관리, 중첩 댓글 처리, 첨부파일 지원 등에 대한 질문을 제기
  • 작성자는 Bluesky의 개인 모더레이션 기능으로 특정 댓글을 숨길 수 있다고 설명
▲
GN⁺ 15일전  [-]
Hacker News 의견들

  • 블로그나 웹사이트를 정적 사이트 생성기(static site generator) 로 렌더링한다면, 댓글을 콘텐츠 파일로 가져와 빌드 과정에 포함시키는 방법을 제안함

    1. 이메일, CGI 스크립트, 서버 프로그램 등으로 댓글을 수집하고
    2. 수동으로 검토해 스팸을 삭제한 뒤
    3. 댓글을 .md나 .html 파일로 저장하고
    4. 사이트 빌드 시 함께 렌더링하는 방식임
      이 과정은 손이 많이 가지만, 스팸 차단과 데이터 완전한 소유권이라는 장점이 있음
    • 나도 비슷한 시스템을 이메일 기반으로 구현했음. 자세한 내용은 내 블로그 글에 정리했음
    • 작은 웹사이트라면 하루에 몇 개 안 되는 댓글만 관리하면 되므로, 수동 검토가 충분히 가능함. 또 Markdown 파일 자동 업데이트로 쉽게 자동화할 수도 있음
    • “나는 팩스로만 댓글을 받음 ;)”이라며 농담을 던짐
    • “끔찍하게 들림”이라며 비효율적이라고 반응함

  • React를 쓰지 않고 싶다면, 내가 만든 Bluesky 댓글 웹 컴포넌트를 참고할 수 있음
    GitHub 저장소와 테마 플레이그라운드에서 확인 가능함.
    매우 테마 커스터마이징이 쉬움

  • 원글의 아이디어를 참고해 Mastodon 기반 댓글 시스템으로 구현했음
    자세한 내용은 내 블로그 글에서 볼 수 있음

    • 사실 이런 Fediverse 댓글 통합은 예전부터 Mastodon이나 Bluesky로 시도되어 왔음
      참고: 관련 블로그 글

  • EU의 혐오발언 관련 법률 때문에 사이트 운영자가 댓글을 필터링하지 않으면 처벌받는다는 이야기가 있는데, 그게 실제로 어떤지 궁금함
    그래서 나는 아예 댓글 기능을 꺼버렸음

    • 법률 전문가는 아니지만, 이런 위험은 정치적 의도로 과장되는 경우가 많음. EU 법은 사이트 규모와 목적을 고려함. 작은 개인 사이트가 처벌받은 사례는 들어본 적 없음
    • Bluesky의 moderation labeler를 활용하면 사전 필터링이 가능함. EU 기준에 맞춘 건 없지만, 직접 라벨러를 만들어 문제 있는 댓글만 걸러낼 수도 있음
    • 법 이전에, 내 이름이 걸린 사이트에 혐오 발언이 올라오는 건 원치 않음

  • 내 블로그는 완전 정적 구조이고, 50줄짜리 Cloudflare Worker 스크립트로 댓글을 받아 Markdown에 바로 추가함.
    댓글 기능을 임베드하지 않고도 구현 가능함

    • 댓글을 Pull Request로 자동 커밋하는 식으로, PR을 댓글 검토 도구로 쓰면 재미있을 것 같음
    • “그게 진짜 ColdFusion이면 더 멋질 듯”이라며 농담함
    • “링크나 구현 세부정보를 공유해줄 수 있냐”고 묻는 사람도 있음

  • Bluesky API를 활용해, 특정 블로그 링크를 포함한 첫 번째 게시글을 자동으로 찾아 댓글로 연결하는 식으로 자동화할 수도 있음

  • Bluesky 성장에도 도움이 될 것 같아 테스트용으로 계정을 만들었음. 꽤 재미있는 성장 해킹 아이디어 같음

    • 하지만 영리 목적 SNS는 결국 Twitter처럼 될 것이라 생각함.
      이상적으로는 자체 호스팅이나 Fediverse 기반 댓글 시스템이 더 지속 가능함
    • “우리는 그 다른 플랫폼이 아니다”라는 메시지만으로는 성공하기 어렵다는 의견도 있음

  • 내 블로그는 인기가 많지 않지만, 예전에 스팸과 혐오 댓글 지옥을 겪은 적이 있음
    그래서 다시는 개인 블로그에 댓글 기능을 열 생각이 없음

  • Bluesky 기반 시스템이라도, 직접 라벨러(labeler) 를 추가해 특정 라벨이 붙은 댓글을 필터링하는 식으로 자체 검열을 할 수 있음

  • 나도 비슷한 아이디어로, 내 블로그 외에 cartes.app에서 OSM 장소별 댓글 기능을 추가했음
    ATproto 계정으로 리뷰를 남길 수 있고, 데이터는 사용자 소유 JSON 형태로 PDS에 저장됨

    • “정말 멋지다. 그 데이터를 어떻게 모으냐, 혹시 Bluesky firehose를 듣는 방식이냐?”고 묻는 댓글이 달림
답변달기