오늘은 결제 시스템 구축의 핵심적인 날이었습니다. 포트원 V2(한국)와 Lemon Squeezy(해외) 두 결제 수단을 모두 연동하고 실교차 테스트를 완료했습니다. 또한 사용자 경험(UX) 향상을 위한 UI 개선 및 향후 앱스토어 배포를 위한 전략을 확정했습니다.
오늘 한 일
💳 포트원 V2 결제 연동 (한국 — KRW)
크레딧 충전 페이지와 결제 검증 API를 풀스택으로 구현했습니다.
- 플랜 구성: 4,000원(40cr) / 10,000원(120cr, 인기) / 30,000원(400cr)
- 보안 로직:
/api/payments/prepare에서 주문 생성 후,confirm단계에서 포트원 API를 통해 금액 변조를 방지하고 크레딧을 원자적으로 증가시킵니다. - 비동기 처리: 웹훅(Webhook)을 통해 실패나 환불 건에 대한 상태를 실시간으로 업데이트합니다.
테스트 결과: QR 결제 및 토스페이먼츠 채널을 통한 100 크레딧 충전 성공 ✅
🍋 Lemon Squeezy 결제 연동 (해외 — USD)
해외 사용자를 위한 결제 인프라를 처음부터 끝까지 구축했습니다.
- 스토어 설정: Hwajodang(#343739) 스토어 생성 및 정산 계좌(신한 SWIFT) 등록 완료.
- 상품 매핑: $3 / $7 / $20 단위의 상품을 생성하고 API 키를 발급받아 연동했습니다.
- 보안 검증: HMAC 서명 검증을 통해 웹훅의 무결성을 보장하며 크레딧을 지급합니다.
테스트 결과: 테스트 카드를 활용한 외부 체크아웃 페이지 결제 및 리다이렉트 성공 ✅
🔀 locale 기반 결제 자동 분기
사용자의 언어 설정(Locale)에 따라 최적화된 결제 수단을 자동으로 노출합니다.
- 한국어(/ko): 포트원 SDK 기반의 국내 전용 결제창 팝업.
- 영어(/en): Lemon Squeezy 외부 결제 페이지 리다이렉트.
🎨 네비게이션 UI 개선
웹 환경에서의 조작감과 시각적 피드백을 대폭 강화했습니다.
- 레이아웃: 헤더 높이를
h-16으로 확장하여 가독성을 확보하고, 언어 스위처와 아바타 크기를 키웠습니다. - 인터랙션: 모든 버튼에
cursor-pointer를 명시하고, 호버 시 글로우 효과 및 클릭 시 눌림 효과(active:scale-95)를 추가했습니다. - 메뉴 확장: 유저 메뉴 내에 💎 크레딧 충전 링크를 추가하여 접근성을 개선했습니다.
📱 앱스토어 배포 전략 확정
웹앱을 네이티브 앱 환경으로 확장하기 위한 로드맵을 수립했습니다.
- 기술 스택: Capacitor를 활용하여 기존 Next.js 코드를 래핑.
- 정책 대응: 소셜 로그인 시 Apple Sign In 필수 구현 및 한국 전기통신사업법에 근거한 웹 결제 리다이렉트 유지(수수료 회피).
다음 할 일
- PWA 설정: manifest.json 및 서비스 워커 구성을 통한 앱 아이콘 및 설치 환경 구축.
- Apple Sign In: Apple Developer Program 가입 및 소셜 로그인 구현.
- 심사 준비: 토스페이먼츠 실결제 심사 신청 및 Lemon Squeezy 계정 최종 승인 대기.
커밋 로그
3884b07feat: 포트원 V2 결제 시스템 + 크레딧 충전 페이지a39b3d0feat: Lemon Squeezy 해외 결제 연동 (USD)fd80d04fix: 네비게이션 UI 개선 — 헤더 높이, 호버, 크레딧 링크