문서
거꾸로 입력하는 가입 화면, 처음에 어떻게 떠올렸을까?
정희연 · 토스 · 토스 기술 블로그
소개
토스의 회원 가입 화면에선 스크롤을 내릴 필요가 없어요. 필요한 정보들을 거꾸로 입력하기 때문이죠. 어색하지 않을까 걱정했지만, 이제는 업계의 표준이 되었죠. 많은 앱에서 이 형태를 적용하고 있어요. 처음 이 화면을 디자인하게 된 과정을 소개해드릴게요.
AI 핵심 요약
2018년 토스 가입 화면은 입력 도중 휴대폰·통신사 필드가 갑자기 나타나고, 키보드에 CTA와 필드가 가려져 다음 행동을 알아보기 어려웠습니다. 이를 해결하기 위해 이름 입력 후 데이터 형식에 맞춰 다음 필드를 자동으로 추가하고, 스크롤을 줄이도록 입력 필드를 역순으로 쌓는 인터랙션을 설계했습니다. 사용성 테스트에서는 사용자가 역순 배치를 거의 알아차리지 못했는데, 이는 커서가 있는 입력 영역에 집중해 주변 배치를 놓치는 인지 특성으로 설명할 수 있었습니다. 이 경험은 기존의 화면 분할 방식에 얽매이지 않고 사용자의 주의와 입력 흐름을 세밀하게 고려하는 것이 매끄러운 UX를 만든다는 교훈을 남겼습니다.
- 화면 크기와 키보드 높이에 따라 CTA나 입력 필드가 가려지는지 실제 구현 상태에서 확인하세요.
- 입력값의 형식이 정해져 있다면, 앞선 입력을 바탕으로 다음 필드를 단계적으로 노출할 수 있습니다.
- 사용자가 한곳에 집중하면 주변의 변화는 알아차리지 못할 수 있으므로, 사용성 테스트로 낯선 인터랙션을 검증하세요.
- 화면을 나누거나 필드를 한꺼번에 보여주는 방식 외에도, 입력 순서와 배치를 바꾸는 해결책을 탐색할 수 있습니다.