Building LaunchPad: one product brief, 42 launch channels, and the bugs that almost sank it

개요

LaunchPad는 하나의 제품 소개글(brief)을 42개의 다양한 채널에 맞는 네이티브 게시물 초안으로 자동 생성하는 서비스로, 개발 과정에서 겪었던 여러 버그와 해결 과정을 공유한다.

주요 내용

* 기술 스택: React 18, Vite, AWS Amplify, Lambda, DynamoDB, API Gateway, Cognito, Terraform을 사용했으며, AI 레이어는 서버 측 없이 Chrome의 Gemini Nano 또는 사용자의 OpenAI/Claude API 키를 브라우저에서 직접 호출하는 방식으로 구현하여 개인 정보 보호 및 비즈니스 모델을 동시에 충족시킨다.
* AI 초안 삭제 버그: TipTap 에디터에서 setEditable(false)로 섹션을 잠근 상태에서 programmatic 변경이 onUpdate 이벤트로 감지되어, AI가 생성한 내용을 빈 값으로 덮어쓰는 버그가 발생했으며, useRef를 사용하여 자체 변경과 사용자 변경을 구분하는 방식으로 해결했다.
* 로컬 변경 사항 손실 버그: 페이지 마운트 시 발생하는 GET 요청이 사용자의 로컬 변경 이후에 도착하여 상태를 덮어쓰는 문제가 발생했으며, 버전 카운터를 사용하여 로컬 변경 사항이 우선권을 갖도록 처리했다.
* 캐릭터 제한 문제: 언어 모델은 캐릭터 수를 정확히 세지 못하므로, 프롬프트에 실제 제한을 명시하고 코드에서 출력을 측정하며, 필요시 수정 재시도를 거쳐 최종적으로 초과 시 사용자에게 직접 수정하도록 안내하는 방식으로 해결했다.
* 일괄 생성 시 문제점: 42개 채널의 동시 생성이 Rate Limit, 취소 로직, Toast 스팸 등의 문제를 야기했으나, 각 채널별 실행, 결과 수집 및 보고, 지속적인 자동 저장, 취소 시 작업 유지, 일괄 보고 등의 방식으로 개선했다.
* 결제 시스템 버그: 이메일을 기준으로 사용자를 업그레이드하는 과정에서, 동일 이메일로 여러 계정이 존재하는 경우 잘못된 계정이 업그레이드되는 문제가 발생했으며, 이메일과 일치하는 모든 계정을 업데이트하는 방식으로 해결했다.
* CSS 관련 버그: overflow-x: hidden이 position: sticky를 무력화시키는 문제와 backdrop-filter가 position: fixed 요소를 가두는 문제를 각각 overflow-x: clip과 document.body로 포털링하여 해결했다.
* 회귀 테스트 스위트: 21개의 Playwright 테스트로 구성된 회귀 테스트 스위트는 배포 시 릴리스 게이트로, 매일 밤 크론 작업으로 실행되어 보안 헤더, 딥 링크, UI 레이아웃, AI 파이프라인 등의 정상 동작을 검증하며, 실제 사용자 문제 발생 전에 버그를 탐지하는 역할을 한다.

시사점

LaunchPad는 다양한 채널의 특성을 고려한 콘텐츠 생성을 자동화하며, 개발 과정에서의 겪었던 기술적 난관과 이를 해결하는 실질적인 경험은 유사한 시스템 구축에 valuable한 참고 자료를 제공한다.