결제 화면 설계, 입력 화면·오류 메시지·화면 흐름도로 이탈 줄이기
온라인 쇼핑몰에서 마음에 드는 물건을 고르고 결제 버튼을 눌렀는데, 주소 입력란이 너무 많거나 결제 금액이 갑자기 달라지는 순간이 있습니다. 사용자는 잠시 멈춰 다시 확인하다가 창을 닫기도 합니다. 운영자는 상품이 마음에 들지 않아서 떠났다고 생각할 수 있지만, 실제로는 결제 화면의 불편함이 원인일 수 있습니다.
결제 화면 설계를 살펴보면 어떤 정보를 먼저 보여줘야 하는지, 입력 실수를 어떻게 줄이는지, 오류가 발생했을 때 어떤 말을 해야 하는지 알게 됩니다. 예쁜 버튼을 만드는 데서 끝나지 않고, 사용자가 안심하고 마지막 행동까지 이어 가는 흐름을 만드는 기준을 다룹니다.
결제 화면 설계에서 먼저 정할 것
결제 화면은 상품을 소개하는 화면과 목적이 다릅니다. 상품 화면에서는 관심을 끌어야 하지만, 결제 화면에서는 사용자가 지금 무엇을 결제하는지 확인하고 실수 없이 끝내도록 도와야 합니다. 따라서 화면마다 주된 목적을 하나씩 정하는 것이 좋습니다.
- 확인 단계: 상품명, 수량, 선택 옵션, 배송비, 할인 금액, 최종 결제 금액을 보여줍니다.
- 입력 단계: 배송지, 연락처, 결제 수단처럼 실제로 필요한 정보만 받습니다.
- 완료 단계: 결제 결과와 주문 번호, 다음에 할 일을 안내합니다.
상품 정보와 결제 정보가 한 화면에 지나치게 섞이면 사용자는 무엇을 확인해야 할지 놓칩니다. 반대로 단계가 너무 많으면 진행 중이라는 느낌보다 번거롭다는 인상을 받습니다. 한 화면에 정보를 많이 넣기보다, 각 단계에서 사용자가 해야 할 선택을 줄이는 편이 안전합니다.
화면 설계 체크리스트
와이어프레임이나 프로토타입을 만들 때 다음 항목을 화면 옆에 적어 두면 빠뜨리는 내용을 줄일 수 있습니다. 와이어프레임은 색과 장식보다 구조를 먼저 보는 설계도입니다. 프로토타입은 실제로 눌러 보며 화면 이동을 확인하는 모형입니다.
- 최종 결제 금액이 화면 안에서 쉽게 보이는가?
- 상품 가격과 배송비, 할인 금액의 계산 기준이 분명한가?
- 필수 입력 항목과 선택 항목이 구분되어 있는가?
- 주소나 카드 정보 입력 중 앞 단계로 돌아가도 작성 내용이 사라지지 않는가?
- 결제 버튼의 이름이 ‘다음’처럼 모호하지 않고 행동을 설명하는가?
- 버튼을 여러 번 눌렀을 때 중복 결제를 막는 상태가 있는가?
- 결제 처리 중에는 사용자가 기다려야 한다는 사실을 알 수 있는가?
- 완료, 실패, 취소, 시간 초과 상태를 모두 설계했는가?
특히 결제 버튼은 금액과 가까이 배치하는 것이 좋습니다. 버튼을 누르기 직전에 사용자가 마지막 금액을 확인할 수 있기 때문입니다. 다만 색을 너무 많이 사용해 모든 요소를 강조하면 오히려 주요 행동이 흐려집니다.
입력 화면과 결제 수단의 차이
입력 화면 설계에서는 ‘정보를 많이 받는 것’보다 ‘나중에 꼭 필요한 정보만 받는 것’이 중요합니다. 예를 들어 배송 주문이라면 수령인 이름과 주소가 필요하지만, 디지털 상품이라면 주소 입력을 요구할 이유가 적습니다. 서비스의 종류에 따라 입력 항목을 줄여야 합니다.
| 상황 | 좋은 설계 기준 | 주의할 점 |
|---|---|---|
| 카드 결제 | 카드 번호와 유효기간 입력 순서를 자연스럽게 연결 | 보안 안내를 지나치게 길게 쓰지 않기 |
| 간편 결제 | 어떤 결제 수단으로 연결되는지 미리 표시 | 결제 뒤 다시 돌아오는 위치 확인 |
| 무통장 입금 | 입금자명, 계좌, 기한을 완료 화면에서 반복 안내 | 입금 확인 전 주문 상태를 혼동시키지 않기 |
| 구독 결제 | 이번 결제 금액과 다음 결제 조건을 함께 표시 | 자동 결제와 해지 조건을 숨기지 않기 |
결제 수단을 선택할 때 특정 항목만 눈에 띄게 만들어 사용자의 의도와 다른 선택을 유도하면 안 됩니다. 할인이나 추천 문구를 넣더라도 일반 결제, 정기 결제, 무료 기간 뒤 결제 여부를 알아보기 쉽게 표시해야 합니다. 서비스 정책과 환불 조건은 화면에 적용하기 전 관련 기관과 결제 사업자의 공식 안내에서 다시 확인해야 합니다.
화면 흐름도를 만드는 순서
화면 흐름도는 사용자가 어느 화면에서 어디로 이동하는지 선으로 연결한 그림입니다. 정상적인 이동만 그리면 실제 개발 단계에서 문제가 생기므로 예외 상황도 함께 표시해야 합니다.
- 시작점을 정합니다. 상품 선택, 장바구니, 재구매처럼 결제가 시작되는 위치를 정합니다.
- 필수 화면을 나눕니다. 주문 확인, 정보 입력, 결제 수단 선택, 처리 중, 완료 화면을 배치합니다.
- 분기 조건을 적습니다. 결제 성공, 실패, 사용자의 취소, 인증 만료를 각각 다른 경로로 연결합니다.
- 상태를 붙입니다. 입력 전, 입력 중, 오류, 처리 중, 완료 상태를 화면에 표시합니다.
- 처음부터 눌러 봅니다. 휴대전화의 작은 화면에서 버튼이 가려지거나 뒤로 가기 동작이 꼬이지 않는지 확인합니다.
예를 들어 결제 처리 중 사용자가 버튼을 다시 누르면 결제가 두 번 요청될 수 있습니다. 이때 버튼을 잠시 비활성화하고 ‘결제 처리 중입니다’처럼 현재 상태를 알려야 합니다. 단순히 버튼을 숨기면 화면이 멈춘 것으로 오해할 수 있습니다.
자주 생기는 실수와 고치는 방법
첫째, 오류 메시지가 너무 짧습니다. ‘오류가 발생했습니다’만 보여주면 사용자는 무엇을 고쳐야 하는지 알 수 없습니다. 문제가 생긴 위치와 해결 방법을 함께 적어야 합니다. ‘카드 번호 16자리를 입력해 주세요’처럼 입력란 가까이에 안내하면 좋습니다.
둘째, 오류가 난 뒤 입력 내용이 모두 사라집니다. 사용자는 같은 정보를 다시 입력해야 하므로 피로가 커집니다. 보안상 지워야 하는 정보가 아니라면 기존 입력을 유지하고, 잘못된 항목만 고치게 하는 편이 낫습니다.
셋째, 결제 금액이 마지막에 달라집니다. 배송비나 쿠폰 적용 결과를 결제 직전에 처음 보여주면 불신이 생깁니다. 금액이 바뀌는 조건과 적용 결과를 단계마다 일관되게 표시해야 합니다.
넷째, 완료 화면을 너무 빨리 닫습니다. 결제 성공 여부를 확인하기 전에 다른 화면으로 이동하면 사용자는 결제가 끝났는지 걱정합니다. 주문 번호, 결제 상태, 문의 방법을 남기고 문자나 전자우편 알림이 있다면 발송 시점도 알려주세요.
자주 묻는 질문
결제 화면은 한 페이지로 만드는 것이 좋나요?
항상 그렇지는 않습니다. 입력 정보가 적고 과정이 단순하면 한 페이지가 편할 수 있습니다. 반대로 배송지, 쿠폰, 여러 결제 수단이 함께 있으면 확인 단계와 입력 단계를 나누는 편이 이해하기 쉽습니다. 화면 수보다 사용자가 매 단계에서 해야 하는 판단의 양을 기준으로 정하세요.
결제 버튼 문구는 무엇이 좋은가요?
사용자가 버튼을 누른 뒤 일어나는 일을 알 수 있어야 합니다. ‘확인’보다 ‘결제하기’, ‘주문 확정하기’처럼 행동과 결과가 드러나는 문구가 낫습니다. 결제 금액을 함께 표시하면 마지막 확인에도 도움이 됩니다.
오류 메시지는 어디에 표시해야 하나요?
입력 오류는 해당 입력란 가까이에 표시하고, 결제 시스템 전체 오류는 화면 위쪽에 안내하는 방식이 이해하기 쉽습니다. 색만으로 오류를 표현하지 말고 문장과 아이콘을 함께 사용하세요. 색을 잘 구분하지 못하는 사용자도 내용을 알아야 하기 때문입니다.
설계가 끝났는지 어떻게 확인하나요?
정상 결제만 테스트하지 말고 잘못된 카드 정보, 네트워크 끊김, 뒤로 가기, 중복 클릭, 결제 취소까지 직접 눌러 보세요. 처음 보는 사람에게 화면만 보여주고 ‘지금 얼마를 결제하는지’, ‘오류가 났을 때 무엇을 해야 하는지’를 말해 달라고 요청하는 방법도 유용합니다.