🌐
회원가입부터 결제까지 서비스의 모든 사용자 동선이 지나가는 웹입니다. 새 기능보다 인증·결제·보안이 어긋나지 않는 것이 먼저였습니다.
배경
voidx.ai는 AI 에이전트 SaaS의 메인 웹입니다. 회원가입·로그인부터 데모 체험, 멤버십 결제, 에이전트 캐스팅까지 서비스가 실제로 팔리는 동선 전체가 이 웹을 지나갑니다. 기존 구현을 Next.js로 이관하는 작업부터 시작해 이관 후의 운영까지 맡고 있습니다.
한 일
- 진입 동선 전체를 기획까지 맡아 구현: 메인 웹을 Next.js 16 / React 19로 올려 정식 운영에 붙이고, 가입·인증 → 결제·멤버십 → 캐스팅 → 위젯 설치 온보딩을 하나의 동선으로 이었습니다. 라우트 54개 중 53개를 직접 작성했습니다. 인증은 NextAuth 기반으로 이메일·소셜 로그인, 탈퇴, 프로필 조회·수정을 붙였고, 미들웨어에서 JWT 오류를 자동 처리해 어긋난 세션이 화면 오류로 이어지지 않게 했습니다.
- 내 초기 구조를 스스로 되돌린 것이 두 건: 캐스팅 완료 후 외부 관리 사이트로 이탈하던 경로를 없애 본 사이트 프로필 영역으로 통합했고, 하드코딩해 둔 회원 콘솔 전반의 한국어를 한/영 다국어로 일괄 전환했습니다. 네임스페이스 24개, 키 약 2,500개 규모입니다.
- 운영 어드민을 만들어 팀에 공유: 대시보드·회원·멤버십·결제·페르소나·안전·감사까지 13화면 규모입니다. 초기 콘솔은 단독 구축했고 v2 재구축은 동료와 분담했습니다. 실결제 장애를 가장 먼저 발견한 창구가 바로 이 도구에 들어온 문의였습니다.
- 해킹 시도를 계기로 보안 정비: HSTS·CSP·X-Frame-Options 등 보안 헤더를 정비하고 시크릿을 환경변수로 옮겼습니다. dangerouslySetInnerHTML 구간에 DOMPurify를 적용하고, Server Actions 입력 검증(지식베이스 파일 타입·10MB 제한)을 붙였습니다.
- 검증 인프라를 함께 깔음: Storybook에 접근성 애드온을 붙이고, MSW로 목 계층을 세우고, Playwright로 가입부터 구독 관리까지 이어지는 여정 e2e를 짰습니다. 탈퇴 같은 파괴적 시나리오가 포함돼 운영 환경에는 돌리지 않고 로컬 실스택에서만 수행하는 것으로 기준을 정했습니다. 어드민에는 MSW 계약 테스트를 세우고 실서버 읽기 스모크를 별도로 돌려 목과 실서버가 어긋난 지점을 잡아냈습니다.
- 백엔드 전면 재설계에 프론트엔드를 맞추는 중: 결제 사고를 계기로 백엔드가 248개 엔드포인트(9개 영역)로 다시 지어졌습니다. 화면 단위로 붙이는 대신 사업 목표부터 다시 점검해 사용자 시나리오를 세우고 그 순서대로 옮기고 있습니다. 연동 진척을 코드로 다시 셌습니다. 백엔드가 게이트웨이 접속 로그를 근거로 연동률을 16.9%로 공유했는데, 화면 코드의 호출 지점을 전수 대조해보니 248개 중 145개가 이미 연결돼 있었습니다. 로그에 남지 않는 경로 때문에 생긴 차이였고, 이 대조로 남은 작업량을 다시 잡았습니다.
- 권한 때문에 사용자가 갇히는 문제를 찾아 고침: 멤버십이 없는 계정으로 들어오면 화면이 403을 받고 나갈 길이 없어졌습니다. 회원 등급과 멤버십 상태를 별개 축으로 분리해 화면 접근 조건을 다시 짰습니다.
결과
- 라우트 54개 중 53개: 직접 작성, 가입 → 체험 → 결제 풀사이클 정식 운영 중
- 어드민 13화면: 초기 콘솔 단독 구축 (v2 재구축은 동료와 분담)
- 24개 네임스페이스: 한/영 다국어 전환, 키 약 2,500개
- 248개 중 145개: 백엔드 재설계 엔드포인트 연동 실측 확인
정리
이 웹에서 가장 중요한 일은 새 화면을 늘리는 것보다 인증·결제·보안이 어긋나지 않게 유지하는 것이었습니다. 결제 화면을 직접 구현하고 어드민을 만들어 둔 덕분에 실결제 장애도 가장 먼저 발견해 대응할 수 있었습니다.