React에서 멀티 플랫폼 결제 시스템 구현하기

🎯 들어가며

• 왜 결제 시스템이 복잡한 이유?
• PC, 모바일, 앱 환경별 차이점

🏗️ 아키텍처 설계

PaymentService 패턴 도입

• 왜 Service 레이어를 분리했는가?
• 환경 감지 로직의 중요성
• 코드 재사용성 확보

💻 핵심 구현 내용

1. 환경 감지 로직

// PC/모바일/앱 환경을 정확히 구분하는 방법
const isInApp = typeof window.ReactNativeWebView !== 'undefined';
const isMobileDevice = /android.*mobile|iphone/i.test(userAgent);

2. 플랫폼별 결제 처리

• PC: iframe 기반 결제창
• 모바일: 폼 제출 방식
• 앱: postMessage 통신

3. 결제 완료 처리

• 0원 결제 케이스 처리
• 결제 실패 시 복구 로직
• URL 파라미터 vs postMessage

🚨 실무에서 마주친 문제들

문제 1: 환경 감지 오작동

문제: 태블릿을 모바일로 잘못 인식
해결: 더 정확한 userAgent 검사 로직

문제 2: 모바일 결제 후 복귀 실패

문제: 결제 완료 후 앱으로 돌아오지 않음
해결: localStorage 활용한 상태 관리

문제 3: 결제 데이터 구조 불일치

문제: 서버 응답 구조가 환경별로 다름
해결: 유연한 데이터 파싱 로직

🔧 코드 개선 포인트

Before (문제가 있던 코드)

// 환경 감지가 부정확했던 초기 버전
const isMobile = /Mobile/i.test(navigator.userAgent);
if (isMobile) {
  // 모바일 처리
} else {
  // PC 처리
}

After (개선된 코드)

// 정확한 환경 감지와 우선순위 적용
const isPC = windowWidth >= 1024 && !isMobileDevice && !isInApp;
const isMobile = !isPC;

📊 성능 및 사용자 경험 개선

최적화 포인트

1. 결제창 로딩 시간 단축: iframe 사전 로딩
2. 오류 처리 강화: 사용자 친화적 에러 메시지
3. 상태 관리 개선: localStorage 활용

사용자 경험 개선

• 결제 진행 상태 표시
• 뒤로가기 방지
• 결제 취소 시 원래 페이지로 복귀

🎓 배운 점과 팁

개발 팁

1. 환경 감지는 여러 조건을 조합하라
2. 결제 데이터는 항상 검증하라
3. 에러 처리를 꼼꼼히 하라

실무 조언

• PG사 문서를 꼼꼼히 읽어라
• 테스트 환경에서 충분히 검증하라
• 로그를 상세히 남겨라

🔮 마무리

• 결제 시스템 개발의 핵심은 안정성
• 사용자 환경을 정확히 파악하는 것이 중요
• 지속적인 모니터링과 개선 필요

📚 참고 자료

• [PG사 API 문서]
• [React 결제 모듈 best practices]
• [모바일 웹 결제 가이드]