UX 디자이너로 살아남기

55. 토스 위젯, PG사, 결제 로직 심화 분석

U.X Um 2025. 3. 11. 20:10

이전 글에서 카카오페이, 네이버페이 등 주요 간편결제 서비스의 UX 로직을 다뤘다. 하지만 요즘 간편결제는 더 발전하고 있다.
토스(Toss)처럼 위젯을 제공하는 결제 서비스도 있고, 결제 프로세스의 핵심 역할을 하는 PG(Payment Gateway)사에 대한 이해도 필요하다.
 
이 글에서는 UX 기획자가 간편결제 서비스를 설계할 때 반드시 이해해야 할 개념들을 더 깊이 다뤄보겠다.
 

 

1. 토스(Toss) 위젯 결제: 간편결제의 또 다른 방식

https://pay.toss.im/
토스는 단순한 금융 앱을 넘어, 간편결제 UX를 한 단계 더 발전시킨 서비스다. 카카오페이, 네이버페이처럼 결제 수단으로 연동되는 방식뿐만 아니라, ‘위젯 기반 결제’라는 새로운 흐름을 만들고 있다.
 
토스 결제 UX 특징

  • 위젯 방식 제공 → 사용자가 결제 과정에서 토스 앱을 열지 않고, 결제 위젯에서 바로 인증 가능
  • 자동 로그인 & 생체인증 지원 → 사용자가 별도로 로그인할 필요 없이 바로 결제 가능
  • 즉시 계좌이체 기반 → 카드뿐만 아니라 은행 계좌에서도 빠르게 결제 가능

토스 결제는 UX 기획 관점에서 어떻게 설계해야 할까?
 
토스 위젯 결제 UX 흐름

  1. 사용자가 ‘토스페이’ 결제 선택
  2. 결제 위젯이 팝업되며, 토스 앱 없이 바로 인증 가능
  3. 결제수단(계좌, 카드) 선택 후 지문 or Face ID 인증
  4. 결제 완료 후, 서비스로 돌아가기

UX 기획자의 체크포인트

  • 위젯 방식이므로 결제 프로세스가 단축됨 → 이탈률 감소
  • 토스 계정이 없는 사용자의 플로우도 고려해야 함
  • 다양한 결제 수단(은행, 카드 등)을 어떻게 보여줄지 고민해야 함

2. PG(Payment Gateway)란? 간편결제의 핵심 개념

UX 기획자가 간편결제를 설계할 때, PG(Payment Gateway) 개념을 이해하는 것이 중요하다. PG사는 결제를 처리하는 중간 역할을 담당하며,카카오페이, 네이버페이 같은 간편결제 서비스도 PG사를 통해 결제를 처리한다.
 
PG사(Payment Gateway)란? 

  • PG사는 카드사, 은행, 결제 서비스와 사용자를 연결하는 역할을 하는 결제 대행사
  • 온라인 결제에서 카드사, 은행과 직접 연결하는 대신 PG사를 통해 처리함으로써 보안성과 안정성을 보장

주요 PG사

  • KG이니시스 → 국내 대표적인 PG사, 다양한 간편결제 지원
  • 토스페이먼츠 → 토스가 인수한 PG사, 빠른 연동 강점 https://www.tosspayments.com/
  • 카카오페이 PG → 자체 결제 시스템을 보유한 PG사 
  • 네이버페이 PG → 네이버 결제 시스템을 운영하는 PG사

UX 기획 관점에서 PG사를 이해하는 이유?
 
1) PG사에 따라 결제 UX가 달라진다.

  • 예를 들어, 토스페이먼츠는 토스 위젯과 연동이 잘 되지만, 일부 PG사는 위젯 지원이 부족할 수도 있다.
  • PG사를 선택할 때, 어떤 간편결제 서비스를 지원하는지 UX 기획자가 체크해야 한다.

2) PG 연동 방식에 따라 결제 과정이 달라진다.

  • 간편결제는 PG사를 통해 결제가 이루어지므로, UX 설계 시 PG 연동 로직을 고려해야 한다
  • 자동결제(정기결제), 1회성 결제, 계좌이체 등 다양한 결제 유형을 지원하는지 확인 필요

3) 보안 & 인증 로직을 PG사에서 담당한다.

  • PG사를 거치면 결제 정보(카드번호 등)를 직접 저장할 필요 없이 보안이 강화됨
  • UX 기획 시 사용자 인증(OTP, 생체인증 등)이 PG사의 정책에 따라 달라질 수 있으므로 이를 고려해야 한다

3. UX 기획자가 간편결제 설계 시 반드시 고려해야 할 5가지

1) 결제 수단 선택 UX 최적화

  • 사용자가 가장 많이 사용하는 카카오페이, 네이버페이, 토스를 기본으로 제공
  • PG사가 지원하는 결제 옵션을 확인한 후 UX 설계

2) 결제 과정에서 이탈률을 줄이는 설계

  • 위젯 기반 결제(토스)처럼 최소 클릭으로 결제 가능하도록 설계
  • 결제 오류 발생 시 대체 결제 수단을 추천하는 UX 추가

3) PG사 정책에 맞춰 결제 UI & 인증 로직 설계

  • 카드결제, 계좌이체, 정기결제 등 PG사의 지원 범위를 고려해야 함
  • 생체인증(Face ID, 지문) 등 사용 가능한 인증 방식 확인 필요

4) 정기 결제(구독 서비스) UX 고려

  • 결제 UX 설계 시 정기결제(구독) 옵션을 함께 고려
  • 사용자가 쉽게 구독 취소 & 관리할 수 있는 UI 제공 필

5) 모바일 & 웹 결제 환경에 따라 최적화

  • 모바일에서는 앱 내 결제 & 위젯 결제 최적화
  • 웹 환경에서는 팝업 방식 or PG사별 연동 방식 고려

UX 기획자는 결제 로직의 흐름까지 이해해야 한다!

간편결제 UX 설계를 잘하려면?

  • PG사 개념을 이해하고, 어떤 결제 방식을 지원하는지 확인해야 한다.
  • 결제 수단에 따라 사용자 경험이 달라질 수 있으므로 UI & UX 최적화가 필요하다.
  • 토스처럼 위젯 기반 결제는 UX 관점에서 큰 강점이 될 수 있다.
  • 결제는 서비스의 핵심 기능이므로, 최대한 빠르고 직관적으로 설계해야 한다.
UX 기획자는 단순히 버튼 하나 추가하는 것이 아니라, 사용자의 결제 경험 전체를 설계하는 역할을 해야 한다. 간편결제 시스템은 UX 기획에서 사용자 경험(UX) + 보안 + 서비스 운영이 결합된 복합적인 요소다. 결국 중요한 것은 사용자가 결제 과정에서 최소한의 노력으로 결제를 완료할 수 있도록 설계하는 것!
반응형