🌐
회원가입부터 결제까지 서비스의 모든 사용자 동선이 지나가는 웹이라, 새 기능보다 인증·결제·보안이 어긋나지 않는 것이 먼저였습니다.
배경
voidx.ai는 AI 에이전트 SaaS의 메인 웹입니다. 회원가입·로그인부터 데모 체험, 멤버십 결제, 에이전트 캐스팅까지 서비스의 모든 동선이 이 웹을 지나갑니다. 기존 구현을 Next.js로 이관하는 작업부터 시작해, 이관 후의 운영까지 맡고 있습니다.
한 일
- Next.js 이관 + 인증·프로필: 이메일·소셜 로그인/회원가입, 로그아웃·탈퇴, 프로필(이미지·닉네임·마케팅 수신동의) 조회·수정을 NextAuth 기반으로 구현했습니다. 미들웨어에서 JWT 에러를 자동 처리해 인증이 어긋난 세션이 화면 오류로 이어지지 않게 했습니다.
- 결제·멤버십: 멤버십 가격·서비스 조회부터 멤버십·재화 결제, 결제 내역, 결제수단 등록까지 결제 동선 전체를 구현했습니다. 이 화면들을 직접 만들었기 때문에, 이후 실결제 장애(케이스: 실결제 장애 대응)를 가장 먼저 발견하고 프론트엔드에서 차단할 수 있었습니다.
- 데모·캐스팅: 커머스·뷰티 데모의 튜토리얼·시뮬레이션 화면과 에이전트 캐스팅 동선을 구현했습니다. 데모에는 에드온 SDK를 실제로 심어 Next.js 환경에서의 동작을 함께 검증했습니다.
- 해킹 시도 대응·보안 강화: 운영 중 해킹 시도를 계기로 웹 보안을 전면 점검했습니다. HSTS·CSP·X-Frame-Options 등 보안 헤더 정비, 시크릿 환경변수화, dangerouslySetInnerHTML 구간 DOMPurify 적용, Server Actions 입력 검증(지식베이스 파일 타입·10MB 제한), React/Next.js 최신 버전 유지로 알려진 취약점에 대응했습니다.
- 다국어 정리: 한국어가 하드코딩돼 있던 24개 파일을 한/영 리소스로 일괄 정리해(next-intl) 이후 페이지 추가 시 국제화가 기본이 되게 했습니다.
결과
- LIVE: 가입 → 체험 → 결제 풀사이클 운영
- 24개 파일: 한국어 하드코딩 → 한/영 정리
- 보안 점검: 보안 헤더·CSP + XSS·입력 검증 정비
이관으로 시작해 인증·결제·보안·다국어까지, 메인 웹을 운영 단계에서 계속 담당하고 있습니다.
정리
이 웹에서 가장 중요한 일은 새 화면을 늘리는 것보다 인증·결제·보안이 어긋나지 않게 유지하는 것이었습니다. 결제 화면을 직접 구현해 둔 덕분에, 이후 실결제 장애도 가장 먼저 발견해 대응할 수 있었습니다.