캡스홈 구독 요금 즉시 표시와 결제 단계 통합

기존 캡스홈 구독 화면에서는 사용자가 옵션을 고른 뒤 별도 버튼을 눌러야 요금을 다시 계산해 확인할 수 있었습니다. 옵션을 바꾸는 동작과 바뀐 금액을 확인하는 동작이 나뉘어 있었습니다.

가입·결제 과정도 본인 인증 및 할인 확인·선택, 주소 입력, 선택 상품 확인, 결제 정보 입력 등으로 구분되어 있었습니다. 디자이너와 기존 사용성을 검토하면서 옵션 선택 결과를 바로 보여 주고, 관련 단계를 합쳐 진행 과정의 피로도와 이탈을 줄이는 방향으로 개선했습니다.

옵션 선택에 따른 요금은 제품·옵션별 단가를 받아 클라이언트에서 계산하고 즉시 표시하도록 바꿨습니다.

가입·결제에서는 관련 정보를 입력하고 확인하는 구간을 다음과 같이 통합했습니다.

옵션 선택 이후의 주요 입력·확인 구간을 두 단계로 묶었습니다.

디자이너와 사용성 개선 및 단계 통합을 논의하고, ERP 개발 담당자·서버 개발자와 제품 및 옵션별 단가를 받아오는 방식을 협의했습니다. 저는 받은 단가를 바탕으로 클라이언트에서 요금을 계산하고, 옵션을 선택하면 화면에 바로 반영되도록 구현했습니다.

선택 중에 표시하는 요금과 최종 확인 금액은 다음과 같이 처리했습니다.

• 옵션 선택 중에는 제품·옵션별 단가로 클라이언트에서 계산한 요금을 표시했습니다.
• 금액을 취합해 보여 주는 최종 확인 단계에서는 서버에서 새로 받은 금액을 표시했습니다.
• 최종 결제 요청 시에는 표시 요금과 결제 금액을 비교했습니다.

개발과 함께 구독·결제 테스트 시나리오를 작성하고 실행했습니다.

시나리오를 작성하면서 여러 엣지 케이스를 정의하고 그 기준에 따라 검수했습니다.

프로젝트의 기본 업무 흐름은 요청 접수, 구현 방식·예상 작업 시간 정리, 현업 책임자와의 논의, 개발, 개발 배포와 테스트, 운영 배포와 테스트 순서였습니다. 작업의 경중에 따라 일부 단계는 생략했으며, 개발 PM 업무와 직접 구현을 함께 진행했습니다.

사용자가 별도 재계산 버튼을 누르지 않아도 옵션 선택에 따른 요금을 바로 확인할 수 있도록 바꿨습니다. 본인 인증·할인과 주소 입력, 상품·결제 정보 확인과 결제 정보 입력도 각각 한 단계로 합쳐, 가입·결제 과정의 피로도와 이탈을 줄이는 방향으로 흐름을 정리했습니다.

옵션·할인·오류 표시·상태 유지에 대한 테스트 시나리오를 작성하고, 그 기준으로 직접 검수했습니다.