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

• 정적 사이트에서도 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의 개인 모더레이션 기능으로 특정 댓글을 숨길 수 있다고 설명