[UX 스터디] 계좌번호 복사-붙여넣기 UI with 토스/카카오뱅크

계좌이체할 때, 계좌번호를 다 외우시는 편인가요?
저는 매번 못 외워서 복사+붙여넣기 기능을 사용하곤 합니다.
그런데 이렇게 자주 쓰는 ‘계좌번호 복사 + 붙여넣기’ 기능의 UI가 어떻게 구성되어 있는지는 한 번도 주의 깊게 본 적이 없더라구요.
 
그래서 이번 글에서는 이 기능이 실제로 어떤 흐름과 구조로 이루어져 있는지 자세히 살펴보려고 합니다.
[복사]와 [붙여넣기] 두 가지 부분으로 나누어 살펴볼게요.
 

---

1. 복사

주로 계좌번호를 공유할 때 사용하는 카카오톡의 복사 기능을 살펴봤습니다.

1. 계좌번호가 적힌 말풍선을 꾸욱 눌렀을 때 : 여러 부가 기능이 나타남 → 복사 or 선택 복사
2. 계좌번호 숫자를 눌렀을 때 → 바텀시트가 나타남 → 복사 

위의 두 가지 방법으로 계좌 번호를 복사할 수 있었습니다.
다양한 부가기능이 함께 제공되는 1번 방법 보다는, 숫자를 바로 눌러서 복사하는 2번 방법이 더 쉽고 직관적인 것 같습니다.

---

2. 붙여넣기

이제 뱅킹앱을 켜서 복사한 계좌를 붙여넣을 차례인데요, iOS의 경우 한차례 더 관문이 남아 있습니다.

 
붙여넣기 허용 (iOS)

iOS에서는 아래와 같이 클립보드에 복사된 숫자가 있을 때, ‘붙여넣기 동작을 허용할 것인지’ 물어봅니다. 이때 허용을 해야 카카오톡에서 복사했던 계좌번호를 붙여넣을 수 있습니다.

허용을 요구하는 시점은 앱마다 조금씩 다를 수 있습니다.

1. 앱 실행 직후, 홈 화면에 진입할 때부터 묻는 경우 : 카카오뱅크
2. 계좌이체 메뉴에 들어갈 때 묻는 경우 : 토스

 
각각의 예시를 살펴보면요,
카카오뱅크의 경우 아래와 같이 홈 화면 진입 시 바로 토스트 메세지를 띄워 계좌이체로 이어질 수 있도록 합니다. 이를 통해 사용자의 맥락을 끊지 않고 빠르게 계좌이체 흐름에 진입할 수 있지요.

카카오뱅크 계좌번호 붙여넣기

 
토스의 경우 계좌이체(송금) 페이지에 진입했을 때 허용 여부를 묻고, 허용했을 때는 계좌번호 입력필드 하단에 [1231234 붙여넣기]라는 버튼을 생성해 줍니다. 이 버튼을 선택하면 계좌번호 입력 필드에 숫자가 자동으로 입력돼요. 이 방법은 실제 계좌번호가 필요한 순간에만 권한을 요청함으로써 사용자에게 불필요한 알림을 줄일 수 있고, 사용자가 계좌번호를 한번 더 확인할 수 있게 도와줍니다.

토스 계좌번호 붙여넣기

 
계좌이체의 끊김없는 빠른 흐름을 강조할 것이냐, 속도가 조금 늦춰지더라도 사용자가 번호를 한번 더 확인하고 신중하게 입력하도록 할 것이냐를 고민하여 각 서비스의 목적과 맥락에 맞게 적절한 방식을 선택하면 되겠습니다.

---

이렇게 오늘도 우리가 일상에서 무심코 지나쳤던 UX/UI를 함께 들여다보았습니다.
계좌이체와 같이 비교적 짧은 플로우 속에도 사용자를 배려한 기획자의 깊은 고민이 담겨 있다는 걸 느낄 수 있었죠.
 
그럼 오늘도, 좋은 서비스 만드시면서 나를 위해 일하는 하루 보내시길 바랍니다.