PG 결제창, 왜 팝업으로 뜰까? 웹 결제의 보안과 UX

온라인 쇼핑이 일상화되면서 안전하고 편리한 결제 시스템의 필요성이 커진 지 오래입니다. 이제는 많은 분들에게 이런 결제 과정이 익숙할 텐데, 이 때 흔히 볼 수 있는 것이 바로 팝업 창을 통한 PG(Payment Gateway) 결제입니다. 이 글은 웹 브라우저에서 결제 시 왜

을 사용한 팝업 방식으로 연동하는 지에 대한 글입니다.

PG(Payment Gateway, 전자결제대행사)는 온라인 상에서 안전하게 결제를 처리할 수 있도록 도와주는 시스템입니다. PG사는 여러 카드사와 은행사를 통해 결제할 수 있는 다양한 결제 수단(신용카드, 계좌이체, 가상계좌 등)을 비롯하여 결제취소, 환불, 가상계좌 발급 등을 제공하고 안전하게 중개하는 서비스를 제공하는 회사를 말합니다. 대표적으로 KG이니시스, 토스페이먼츠, 한국정보통신, NICE페이먼츠 등이 있습니다.

결제 기능을 구현하고 사용자에게 제공하기 위해서는 UI, 각 카드사 및 은행사와 연동, 통신 데이터 보안 등이 필요하며 그 외에도 전자금융거래법 및 개인정보보호법 등의 각종 규제와 요구사항을 충족시켜야합니다. 결제에 대한 필요성은 존재하지만 그를 위한 제반사항들을 모두 충족시키기 어렵기 때문에 수수료가 조금 들더라도 이를 중개해 줄 PG사를 찾게 됩니다.

일반적으로 사용자의 PG 결제 프로세스는 별도의 팝업 창에서 진행하게 됩니다. 조금 더 내부적으로는, 서비스의 결제 요청 정보를 토대로 PG사에서 제공하는 URL을 통해 사용자가 결제를 진행할 수 있는 화면을 제공합니다. 서비스에서는 성공/실패 시 실행 될 콜백 함수나 팝업 창이 닫히는 것을 감지하여 후속 프로세스를 진행하게 됩니다.

어떤 질문에 팝업을 사용한다는 답을 내렸는지 생각해보면 결국 우리가 PG사에 요구하는 것은 간단합니다.

그렇다면 이 요구사항을 토대로 어떻게 구현하면 좋을 지를 찾아보겠습니다.

우선 사용하는 곳에서는 단순히 연동만 시키면 결제와 관련된 모든 것을 위임할 수 있어야 합니다. 이를 위해 API를 사용할 수도 있고, PG사의 서비스를 바로 이용할 수도 있습니다.

API 연동 방식은 별도의 UI 개발이 수반되어야 합니다. PG사가 제공하는 UI를 그대로 사용하기 위해서는 PG사의 서비스를 바로 이용하는 방식이 필요합니다. 여기서 편리한 지 아닌 지는 각 PG사에 달렸습니다.

API 연동 방식으로는 보안을 모두 위임하기 어렵습니다. 데이터 통신 과정이 노출될 수 있으며 그 책임은 서비스에 있습니다. 이 과정에서 여러 법적 규제와 요구사항들을 충족시켜야하는데, 우리는 이 과정도 PG사가 모두 알아서 해주기를 바랍니다.

그렇다면 사용자가 PG사의 서비스를 바로 이용할 수 있어야 하는데, 결제한 이후 다시 기존 서비스를 이용할 수 있어야 하는 것을 고려해보면 다음 세 가지 정도를 생각해 볼 수 있습니다.

현재 페이지의 이동 없이 외부 콘텐츠를 볼 수 있는 방식입니다. 하지만 사용자가 결제 URL을 확인할 수 없고, 클릭재킹 및 XSS 공격 등의 외부 공격에 매우 취약합니다. 중요한 요구사항인 ‘안전’에 대한 리스크를 가져갈 수는 없습니다.

CSP(Content Security Policy) 정책을 통해 특정 도메인만 iframe 사용을 허용할 수도 있지만, CSP로 브라우저의 보안 취약점을 모두 차단할 수 없으며 설정 누락에 대한 리스크도 존재하는만큼 보안이 중요할수록 iframe은 사용하지 않는 것이 좋습니다.

가장 일반적으로 외부 URL을 사용하는 방식입니다. 기존 컨텍스트를 유지하면서 새로운 콘텐츠를 볼 수 있으며, 언제든 돌아갈 수 있고 비교할 수 있습니다. URL과 HTTPS 인증서를 통해 사용자가 신뢰할 수 있는 사이트인지 확인할 수도 있습니다.

그렇다면 이제 기존 탭에서 이동할 것인지, 새 탭으로 이동할 것인지에 대해 생각해 볼 수 있습니다.

UX 측면에서 새 탭으로 여는 것은 별로 좋지 못합니다. 결제 프로세스라는 새로운 컨텍스트는 사용자한테 오래 유지되어야 할 필요가 없기 때문에 결제가 완료되면 기존 컨텍스트로 자연스럽게 돌아가기를 원합니다. 새 탭에서 열게 된다면 그저 닫히고 끝나버릴 것입니다.

기존 화면에서 이동하게 될 경우에는 팝업 차단 문제를 해결하고, 모바일 웹에서도 좋은 사용자 경험을 보여줄 수 있습니다. 하지만 결제가 완료된 이후의 처리 문제가 존재하며 화면 상에 기존 컨텍스트가 모두 사라지고 완전히 다른 서비스로 이동되는 당혹감, 높은 해상도에서 결제 관련 UI만 표시되는 어색함 등이 느껴질 수 있습니다.

현재 PG 결제 프로세스에서 사용되고 있는 방식입니다. 팝업이라는 별도의 분리된 환경을 통해 iframe의 단점을 보완하고, 팝업을 닫기만 하면 기존 컨텍스트로 돌아갈 수 있으므로 리다이렉트 방식의 단점도 보완할 수 있습니다. 결제가 완료되었거나 사용자가 결제를 중단하기를 원할 경우 그냥 팝업을 닫기만 하면 됩니다. 팝업의 크기와 위치를 조정하여 사용자가 보기 편하게 조절할 수도 있습니다.

웹 브라우저 내에서는 팝업 차단기 등을 통해 열리지 않을 수 있거나, 모바일 환경에서는 새 탭으로 보여지게 되는 단점이 존재하지만 그래도 현재까지는 보안과 UX 사이에서 가장 적절한 방식입니다.

사실 모바일 웹을 이용하는 많은 사용자들은 이미 탭을 이동하는 과정이 익숙하기 때문에 UX에 치명적인 수준도 아닙니다. 그저 시급을 다투는 구매 과정에서 팝업 차단기로 인해 늦어질 수 있는 정도입니다. (물론 사용자는 분노할 것입니다.)

사실 팝업을 통한 사용은 이미 널리 사용되는 방식이다보니 기존 사용자의 멘탈 모델과도 강하게 결합되어 있습니다. 이 글은 기존에 익숙한 방식이 왜 그렇게 되었는 지를 따라가 보는 과정으로, 왜 PG 결제 시 팝업을 통해 연동하는 것이 제일 합당할 수 있었는지에 대한 생각을 정리하는 과정이었습니다.