토스 : 송금 플로우 UX

송금



1. 받는 사람 선택 : 계좌·카카오톡·연락처·해외 4개 탭으로 입력 경로를 분리하고, 계좌번호 입력창 옆에 카메라 아이콘을 둬 카드·통장을 스캔해 번호를 긁어올 수 있게 함 > 숫자 16자리를 직접 타이핑하는 마찰을 원천 차단. '내 계좌 +10개'처럼 보유 계좌 수를 먼저 보여주고, '최근 보낸 내역'엔 은행별 브랜드 컬러 아이콘(K뱅크 파랑, 신한 블루S, 씨티 레드, SC제일 오렌지, KB국민 노랑)을 원형으로 나열해 텍스트를 읽지 않고도 색으로 먼저 인식하게 설계함. 각 항목 옆 별 아이콘엔 '별표를 눌러 즐겨찾기 해보세요'라는 온보딩 카피까지 붙여 제스처 자체를 가르침.


2. 금액 입력 : 화면 상단에 '내 지유토스뱅크에서 · 잔액 17,782원'을 먼저 못박아 보내는 주체와 한도를 각인시키고, '금액을 입력하세요' 같은 사무적 문구 대신 '얼마나 옮길까요?'라는 구어체 질문으로 톤을 낮춤. 입력창 placeholder에도 잔액(17,782원)을 다시 노출해 '이 이상은 못 보낸다'는 제약을 입력 시작 전부터 재확인시킴.


3. 금액 확정 : '10,000원'이라는 숫자 아래 '1만원'을 보조 표기 > 0이 여러 개 이어지는 한국어 숫자 표기 특성상 자릿수를 헷갈리기 쉬운 지점을 한글 단위 표기로 한 번 더 검증하게 만든 장치. 이 순간 비활성 상태였던 '다음' 버튼이 파란색으로 활성화됨.


4. 최종 확인 : '○○○으로 10,000원을 옮길까요?'라는 한 문장형 질문으로 전체 거래를 요약하고, 아래에 '받는 분에게 표시 / 출금 계좌 / 입금 계좌'를 구분해 특히 '받는 분에게 표시'는 상대방 화면에 뭐라고 뜨는지까지 미리 보여줌 > 내가 모르는 상대방 경험까지 통제감을 주는 디테일. '옮기기' 버튼 바로 아래 '평생 수수료 무료'를 고정 배치해 마지막 클릭 직전의 수수료 불안을 제거.


✤ 각 화면의 문구가 전부 '금액을 입력해 주세요' 식 사무 언어가 아니라 '얼마나 옮길까요?', '옮길까요?'처럼 친구에게 묻는 듯한 구어체로 통일돼 있다는 점이 전체 플로우를 관통하는 가장 구체적인 설계 원칙으로 보인다. 기능은 은행 업무인데 언어는 메신저에 가까움.