블루스카이 댓글 기능을 내 블로그에 구축하기

• 기존 댓글 시스템(Disqus, 자체 호스팅, GitHub Issues 등)은 속도, 추적, 유지보수 부담, 사용자 제한 등의 문제로 사용하지 않음
• Bluesky는 인프라 유지 필요 없음, 리치 콘텐츠 지원, 실명 기반 계정, 크로스 플랫폼 대화가 가능해 블로그 댓글에 적합
• 구현 방식은 블로그 글을 게시 → Bluesky에 공유 → AT URI를 블로그 포스트 메타데이터에 추가 → 해당 포스트의 댓글 스레드를 불러와 표시하는 구조
• 컴포넌트는 댓글 전체 표시, 개별 댓글+대댓글 표시, 이미지·링크 등 임베드 처리의 3개로 분리
• 재귀 방식으로 최대 5단계 대댓글 표시, 이미지 그리드·모달, 링크 카드, 미지원 임베드는 대체 문구로 처리
• Astro + React 통합, client:load로 클라이언트에서 로드, frontmatter에 DID와 postCid 추가로 활성화
• 타입 안정성을 위해 @atcute/client TypeScript 타입 활용, 자바스크립트 비활성화 시에도 본문은 정상 표시되는 프로그레시브 인핸스먼트 구조
• 서버·DB 없이 Bluesky API와 CDN을 활용해 성능 확보
• 이 접근법은 소셜 기능을 사이트별로 재구현하는 대신, 사용자가 이미 쓰는 플랫폼과 연결하는 방식으로 확장성과 독립성을 확보함

Bluesky를 댓글 시스템으로 선택한 이유

• 인프라 유지 필요 없음
• 이미지·링크·인용 포스트 등 풍부한 콘텐츠 지원
• Bluesky 계정 기반의 신뢰성과 책임성
• 블로그와 소셜미디어 간 트래픽 교차 가능
• 콘텐츠 소유권 분리(블로그 글은 본인, 댓글은 작성자 소유)

AT 프로토콜 이해

• DID: 탈중앙화 사용자 식별자
• CID: 콘텐츠 식별자
• AT URI: at://did:.../app.bsky.feed.post/... 형태 주소
• getPostThread API 호출로 댓글 스레드 가져오기 가능, 인증 불필요

컴포넌트 구조

• 메인 댓글 컴포넌트
• 개별 댓글+대댓글 렌더링 컴포넌트
• 이미지·링크 등 임베드 처리 컴포넌트

중첩 댓글 처리

• 재귀 렌더링, 최대 깊이 5단계 제한
• 시각적 들여쓰기로 계층 표현

리치 콘텐츠 처리

• 이미지: CDN 제공, 다중 이미지 그리드·모달 뷰
• 외부 링크: 썸네일·설명 포함 카드 렌더링
• 기타 임베드: 대체 문구 표시

Astro 통합

• React 컴포넌트 + client:load 사용
• frontmatter에 Bluesky DID, postCid 추가로 댓글 활성화

개발 경험

• TypeScript 타입 지원으로 안정성 확보
• Progressive Enhancement로 API 장애 시에도 본문 영향 없음
• 서버·DB 부하 없이 Bluesky 인프라 활용

결론

• 기존 댓글 시스템의 문제를 피하고, 사용자가 이미 있는 플랫폼과 연결
• Bluesky 성장과 함께 참여자 증가 가능
• ATProto 기반이라 다른 AppView나 자체 구현으로 전환도 용이