고객이 원한 결과를 만드는 프론트엔드 개발자

페이 시스템 카테고리화 및 서버 데이터 동적 처리로 결제 시스템 구조 개선

도메인에 대한 깊은 이해를 바탕으로 페이먼츠 시스템의 근본적인 문제를 해결했습니다. 기존에는 새로운 결제 수단이 추가될 때마다 개별 페이지와 컴포넌트를 구현해야 했고, 협력사가 늘어날수록 시스템 관리의 복잡도가 증가하는 문제가 있었습니다. 이를 해결하기 위해 결제 수단을 신용카드, 은행 계좌이체, 대체 결제 수단(APM) 등으로 카테고리화하고, 각 카테고리별 표준 플로우를 설계했습니다.

카테고리별 결제 플로우를 표준화하면서, 신용카드의 경우 카드 선택 → 금액 입력 → 결제 진행 단계로, APM의 경우 금액 입력 → 결제 진행 단계로 플로우를 단순화했습니다. 이 과정에서 Funnel 패턴을 도입하여 각 단계별 상태를 체계적으로 관리하고, URL을 통한 임의 접근을 방지하여 안정적인 결제 플로우를 구현했습니다. 또한 Suspense와 ErrorBoundary를 도입하여 에러 핸들링과 로딩 상태를 선언적으로 처리했고, 코드의 가독성과 유지보수성을 크게 향상시켰습니다. 이러한 구조화된 설계를 통해 개발자가 전체 결제 프로세스를 직관적으로 파악하고 관리할 수 있는 기반을 마련했습니다.

특히 서버 데이터를 동적으로 처리하는 방식을 도입하여, 프론트엔드 코드 수정 없이도 새로운 결제 수단을 추가할 수 있는 확장 가능한 구조를 구축했습니다. 더불어 사용자 경험 개선을 위해 결제 수단별 수수료와 최대 입금 한도 등 핵심 정보를 한눈에 비교할 수 있도록 UX를 개선했습니다.

이러한 개선 작업을 통해 시스템의 확장성을 확보하고 개발 생산성을 향상시켰을 뿐만 아니라, CS 문의와 사용자 이탈률 감소라는 가시적인 성과를 달성할 수 있었습니다. 이 과정에서 도메인에 대한 깊은 이해가 개발의 질을 결정한다는 것을 체득했으며, 기획자, 디자이너와의 적극적인 협업을 통해 더 나은 사용자 경험을 만들어낼 수 있었습니다.