나만의 해커 뉴스(Hacker News) 이메일 다이제스트를 지금 바로!
개인화된 해커 뉴스(Hacker News) 이메일 다이제스트를 구축하고 예약할 수 있는 웹 애플리케이션(Web Application) 출시
CopilotKit 기반의 챗 에디터(Chat Editor)를 통해 사용자가 원하는 뉴스 섹션을 쉽게 추가하고 필터링 가능
Resend, Next.js, Neon Postgres, Upstash QStash 등 다양한 기술 스택을 활용하여 안정적인 서비스 제공
AES-256-GCM 암호화를 통해 Resend API 키 및 사용자 데이터를 안전하게 보호
QStash를 사용하여 사용자별로 이메일 전송 스케줄링을 지원하며, 데이터 미저장 정책(Zero-Retention Policy)을 준수
챗 에디터(Chat Editor) 아키텍처
본문에서 챗 에디터(Chat Editor)는 CopilotKit을 사용하여 LLM(Large Language Model) 기반의 도구 호출(Tool Call)을 구현한다.
useFrontendTool 훅(Hook): Zod 스키마(Zod Schema)와 핸들러(Handler)를 받아 LLM이 선택한 도구의 파라미터를 검증하고 실행
핸들러(Handler) 내 중복 섹션 방지 및 유효하지 않은 파라미터 제거를 통해 데이터 무결성(Data Integrity) 유지
/api/preview 엔드포인트를 통해 React Email 템플릿을 서버 측에서 렌더링하여 실시간 미리보기 제공
결과적으로 LLM이 생성한 HTML이나 JSON을 직접 사용하지 않고, 안전한 샌드박스 환경(Sandbox Environment)에서 사용자 정의 가능한 뉴스레터를 생성한다.
데이터 보안 및 암호화
HN Digest는 AES-256-GCM 암호화를 통해 Resend API 키를 안전하게 보호하며, 데이터 미저장 정책(Zero-Retention Policy)을 준수한다.
Resend API 키: 데이터베이스(Database)에 저장되기 전 AES-256-GCM으로 암호화되며, 전송 시 메모리에서 복호화
마법 링크(Magic Link): JWT(JSON Web Token)를 사용하여 서명하고 30분 만료 시간 설정
QStash: CRON_SECRET 헤더(Header)를 통해 /api/send 엔드포인트에 대한 무단 접근 방지
결과적으로 사용자 데이터는 안전하게 보호되며, 데이터 격리 아키텍처(Data Isolation Architecture)를 통해 보안을 강화한다.
QStash를 활용한 스케줄링
HN Digest는 Upstash QStash를 사용하여 사용자별 이메일 전송 스케줄링을 구현한다.
Vercel Hobby Cron의 제약 극복: 각 사용자별로 다른 시간대와 빈도로 이메일을 전송하기 위해 QStash 활용
toCron 함수: 사용자 지정 시간대(Timezone)를 CRON 표현식으로 변환하여 QStash 스케줄 생성
/api/send 엔드포인트: CRON_SECRET 헤더 검증을 통해 QStash에 의해서만 호출되도록 보호
결과적으로 사용자는 원하는 시간에 개인화된 뉴스레터를 받아볼 수 있으며, 확장성(Scalability)과 유연성(Flexibility)을 확보한다.
React Email을 활용한 이메일 템플릿 렌더링
본문에서는 React Email을 사용하여 이메일 템플릿을 렌더링하고, 실시간 미리보기를 제공한다.
서버 측 렌더링(Server-Side Rendering): /api/preview 엔드포인트에서 React Email 템플릿을 렌더링하여 HTML 생성
캐싱(Caching): config 해시(Hash)를 기반으로 렌더링 결과를 캐싱하여 불필요한 재 렌더링 방지
동적 데이터 로딩: 매번 최신 Hacker News 데이터를 가져와 최신 정보를 제공
결과적으로 사용자는 실제 이메일과 동일한 형태의 미리보기를 확인할 수 있으며, 성능(Performance)과 사용자 경험(User Experience)을 향상시킨다.
아키텍처 및 기술 스택
HN Digest는 다양한 기술 스택을 활용하여 개인화된 뉴스레터 서비스를 제공한다.
Next.js: 프론트엔드(Frontend) 및 백엔드(Backend) 개발에 사용
Neon Postgres: 데이터베이스(Database)로 사용하여 사용자 설정 및 스케줄 정보 저장
Resend: 이메일 전송 서비스로 사용
CopilotKit: 챗 에디터(Chat Editor) 구현에 사용
결과적으로 최신 기술 트렌드(Technology Trend)를 반영하여 사용자 친화적인 서비스를 구축했다.
