때는 2021년 9월.
외주 프로젝트 진행 중 결제 과정에서 이슈를 하나 발견했었다.
결제 PG사는 이니시스를 쓰고 있었고 아임포트를 통해 가입했다.
프로젝트 특성상 해외 결제를 지원해야하기 때문에 결제 수단에 paypal 을 추가했다.
paypal 의 경우 보안 정책상 리다이렉트 url 또는 팝업으로 결제창을 띄워 결제를 진행했어야 했는데, 웹뷰에서는 팝업으로 처리하고 있었고, 모바일뷰의 경우 리다이렉트 url을 사용하고 있었다.
이렇게 두 가지 방법으로 나눈 이유는 웹뷰에서는 리디렉션을 하는 것이 유저 입장에서 더 뎁스가 늘어난다 생각해서 팝업을, 모바일 뷰의 경우 팝업으로 보여주기에는 디바이스가 너무 작았기에 리다렉트 url을 사용했다
오늘 얘기할 이슈는 모바일 뷰에서 결제 진행시 발생했다.
정확히 얘기하자면 모바일 뷰가 보이는 휴대폰 기기에서 발생하는 문제였다.
문제
- 사용자가 결제하는 과정에서
paypal을 결제 수단으로 고르고 결제창을 띄운다. - 이 후 뜨는 결제창에서 다시 뒤로 가는 경우를 고려해 뒤로갔을 때 발생하는 문제가 없는지 체크했다.
- 이전 페이지로 돌아갈 경우 url 자체는 이전 페이지를 가리켰지만
paypal로고가 계속 돌아가고 있다는 것이었다.
해당 이슈 해결을 위해 위 내용을 바탕으로 아임포트 기술지원팀에 문의를 진행했다.
1. 첫발
문의 후 회신이 왔다.
아임포트에서는 결제 테스트를 위해 데모 사이트를 제공해주고 있는데, 아임포트 측에서 테스트 진행시 정상작동한다는 내용이었으며, 아래는 테스트를 진행한 영상이다.
영상에서도 알 수 있듯이 뒤로가기를 눌렀을 때 정상작동하는 것을 확인할 수 있다.
똑같이 해보자
대략 내용은 이렇다.
아임포트에서 제공한 데모 사이트를 통해 결제 테스트를 진행해보았다.
테스트 디바이스는 총 2종(아이폰, 갤럭시) 그리고 xcode 시뮬레이터를 사용해서 진행했지만 여전히 같은 문제가 발생했으며, 자세한 분석을 위해 xcode 시뮬레이터 환경에서 데브툴을 통해 분석을 진행했다.
원인은…
데브툴로 확인한 결과, paypal 결제 페이지로 이동하면 div 엘리먼트가 하나 생성되고 body에서는 앞서 생성된 div의 class를 제외하고는 display: none; 처리가 되고 있었다.
그리고 뒤로 가기를 눌렀을 때 페이지는 정상적으로 뒤로 가지만 이전에 생성된 div 엘리먼트와 body에 매겨진 class는 그대로 남아있었다.
해당 내용을 바탕으로 다시 문의를 드렸고 답장이 왔다.
분석한 대로 생성되었던 상태 그대로 유지되던 것이 문제였다.
하지만 사파리에서만 발생하는 것이 아닌 크롬에서도 이슈가 동일하게 발생을 했고 이 부분에 대해서도 추가적으로 전달을 했다.
결국 원인은 웹킷! 아이폰에서 발생하는 이슈였다.
웹킷은 애플에서 개발한 브라우저 엔진으로, ios나 ipadOS에서는 강제되는 특성이 있다. 그렇기 때문에 모바일에서 테스트 진행 시 웹킷이 원인이 되었던 것이다.
해결
아임포트 측에서 차주 정기 배포일 때 반영을 해도 괜찮은지 회신이 왔었고, 아직은 구축 단계에서 발생한 이슈가 괜찮다고 회신을 했다.
그리고 차주 정기 배포일에 이슈가 수정되었다는 답변을 받았다.
결론
이 때 무언가 외부에서 발생한 이슈를 분석해서 해결에 기여했다는 것에 많은 성취감을 느꼈던 것 같다.
매우 뜻 깊은 경험이었으며, 개발에 대한 열정을 한층 더 올리는 계기 중 하나가 아니었나 생각한다.
