Angular 21, Supabase, 그리고 Claude API로 Releasely를 구축한 방법

저는 방금 인디 SaaS 창업자들을 위한 AI 변경 로그(Changelog) 생성기인 Releasely를 출시했습니다. 본업을 병행하며 파트타임으로 작업하여 첫 커밋부터 배포된 제품에 이르기까지의 과정입니다.

전체 기술 스택과 제가 배운 점들을 소개합니다.

아이디어

새로운 릴리스를 배포할 때마다 저는 똑같은 변경 로그를 세 번씩 작성해야 했습니다. 한 번은 팀을 위한 기술적인 언어로, 한 번은 사용자를 위한 쉬운 영어로, 그리고 한 번은 X(구 트위터)를 위한 임팩트 있는 마케팅 톤으로 말이죠. 이는 릴리스 당일의 추진력을 깎아먹었습니다.

일반적인 AI 도구들은 하나의 결과물만 제공합니다. 저는 하나의 입력값으로부터 세 가지의 타겟 오디언스 맞춤형 버전을 얻고 싶었습니다.

기술 스택

프론트엔드(Frontend) — Angular 21

• Standalone components만 사용 (NgModules 미사용)
• Zoneless change detection (zone.js 미사용)
• 전반적인 Signal inputs/outputs 활용
• @if / @for 새로운 제어 흐름(control flow)
• inject(), toSignal(), computed() 패턴
• Vercel에 배포

백엔드(Backend) — Node.js + Express

• Railway에 배포 (항상 켜져 있음, 콜드 스타트 없음)
• 인증(auth), 속도 제한(rate limiting), 정화(sanitization)를 위한 Express 미들웨어
• 모든 Claude API 호출은 서버 사이드에서만 수행

데이터베이스 + 인증(Database + Auth) — Supabase

• 모든 테이블에 RLS(Row Level Security) 활성화
• Resend SMTP를 통한 브랜드 이메일이 포함된 매직 링크(Magic link) 인증
• 사용자 가입 시 자동 프로필 생성 트리거(Auto-profile trigger)

AI — Claude Sonnet 4.6

• 세 가지 서로 다른 시스템 프롬프트 (톤마다 하나씩)
• 프롬프트 인젝션(prompt injection) 방어를 위해 사용자 입력을 XML 태그로 감쌈
• 반복되는 컨텍스트를 위한 프롬프트 캐싱(Prompt caching)

결제(Payments) — Lemon Squeezy

• 인도에서는 Stripe가 초대 전용이므로, Lemon Squeezy가 가장 깔끔한 대안이었습니다
• 기록 판매자(Merchant of record)가 글로벌 세금을 자동으로 처리
• Webhook 기반의 Supabase 프로필 플랜 업그레이드

GitHub App 통합

• 설치 토큰을 위한 @octokit/app
• 저장된 토큰을 위한 AES-256-GCM 암호화
• OAuth 흐름에서의 CSRF 상태(state) 파라미터
• Webhook 서명 검증

중요한 아키텍처 결정 사항

1. 백엔드 전용 API 키

Claude API 키는 Angular 번들(bundle)에 절대 포함되지 않습니다. Angular는 제 Node 백엔드의 /api/generate를 호출하며, 백엔드에서 인증을 확인하고 할당량(quota)을 강제한 뒤 Claude를 호출합니다. 이는 모든 AI SaaS에서 타협할 수 없는 사항입니다.

2. 2단계 속도 제한 (Two-layer rate limiting)

• IP 레벨: express-rate-limit 사용, 분당 20회 요청 제한
• 사용자별: Supabase의 usage_logs를 통해 일일 할당량 확인 (무료/Solo/Team 플랜별로 각각 5/100/300회)

3. XML로 감싼 사용자 입력 (XML-wrapped user input)

모든 사용자 입력은 Claude로 전송되기 전에 <commits>...</commits> 태그로 감싸집니다. 시스템 프롬프트(system prompt)에는 해당 태그 내부의 콘텐츠를 오직 데이터로만 취급하고, 절대로 명령(instruction)으로 처리하지 말라고 명시되어 있습니다. 단순하지만 효과적인 프롬프트 인젝션 (prompt injection) 방어책입니다.

4. 모든 항목에 Supabase RLS 적용

데이터베이스 레벨에서 행 단위 보안 (Row Level Security, RLS)을 강제하여, 사용자는 오직 자신의 행만 읽을 수 있습니다. 애플리케이션 코드에 버그가 있더라도 데이터베이스가 사용자 데이터를 보호합니다.

예상보다 오래 걸린 작업들

• GitHub App vs OAuth App: 어떤 것을 사용할지 결정하는 데 반나절을 보냈습니다. (정답: 더 세밀한 권한 설정과 웹훅 (webhook)을 위해 GitHub App을 사용해야 합니다.)
• 이메일 도달률 (Email deliverability): 초기에는 매직 링크 (magic link)가 스팸함으로 들어갔습니다. Resend를 통해 적절한 SPF/DKIM 설정을 갖춘 커스텀 SMTP를 구축하여 해결했습니다.
• 서브도메인을 위한 와일드카드 DNS (Wildcard DNS): {user}.releasely.io 형태의 공개 변경 로그 페이지를 호스팅하기 위해 Vercel에서 와일드카드 DNS 설정이 필요했습니다.

예상보다 빨랐던 작업들

• Supabase 인증 흐름 (auth flow): 매직 링크가 작동하기까지 30분 소요
• Lemon Squeezy 웹훅 (webhooks): 가입부터 실제 결제 활성화까지 2시간 소요
• Claude 프롬프트 튜닝 (prompt tuning): 약 5번의 반복 작업 후 3가지 톤(tone)이 잘 작동함
• Railway 배포: git에 푸시하면 바로 배포됩니다. 별도의 설정이 필요 없습니다.

인디 SaaS 빌더들을 위한 교훈

1. 제품 이름을 정하기 전에 경쟁사를 철저히 조사하세요. 저는 제 제품의 이름을 "ChangelogAI"라고 지었지만, 나중에 changelogai.dev가 이미 존재한다는 것을 알게 되었습니다. 결국 개발 중간에 Releasely로 리브랜딩(Rebrand)해야 했습니다.

2. AI는 중심에 두고, 통합(Integration)을 해자로 만드세요. 누구나 Claude를 채팅 인터페이스로 감싸서(Wrap) 만들 수 있습니다. 진정한 방어력(Defensibility)은 GitHub OAuth, Slack 봇, Jira 동기화 등 ChatGPT가 접근할 수 없는 영역에서 나옵니다.

3. 완벽해지기 전에 출시하세요. 저에게도 개선하고 싶은 부분들이 있습니다. 하지만 상관없습니다. 완벽하게 다듬다가 선반 위에 방치되는 것보다, 일단 출시하여 피드백을 받는 것이 언제나 승리합니다.

4. 스튜디오 모델은 복리 효과를 냅니다. Releasely는 제 Devcraft 스튜디오의 세 번째 제품입니다 (다른 제품은 UI 키트와 대시보드 키트입니다). 각 제품은 다음 제품을 더 쉽게 출시할 수 있도록 도와줍니다.

체험해보기

Releasely — 월 5개의 변경 로그까지 무료, 무제한 이용 시 월 $9.

솔직한 피드백을 환영합니다. 코드를 배포하면서 릴리스 노트(Release notes) 작성을 싫어하신다면, 이 도구가 당신을 위한 것입니다.