모바일 앱을 만들 때 가장 고민되는 부분이 바로 모바일 UI/UX 디자인 패턴다. 아무리 기능이 훌륭해도 사용자가 불편하면 앱은 금방 삭제되거든. 저도 여러 프로젝트를 진행하면서 "이 버튼 여기 놓는 게 맞나?", "네비게이션을 탭으로 할까, 드로어로 할까?" 같은 고민을 수없이 했다. 오늘은 그동안 실무에서 직접 적용하고 느낀 경험을 바탕으로, 핵심 디자인 패턴들을 총정리해 정리하겠다.
입력 및 폼 디자인 패턴
회원가입, 검색, 결제 등 사용자 입력이 필요한 화면은 모바일 UI/UX에서 가장 이탈률이 높은 구간다. 키보드가 화면의 절반을 가리는 모바일 환경에서는 데스크톱과 완전히 다른 접근이 필요한다.
플로팅 라벨(Floating Label) 입력 필드
입력 필드를 탭하면 플레이스홀더 텍스트가 위로 올라가면서 라벨이 되는 패턴다. Material Design에서 표준으로 채택한 이후 거의 업계 표준이 되었죠. 입력 전에는 힌트 역할을 하고, 입력 후에도 라벨이 유지되어 사용자가 어떤 필드에 무엇을 입력했는지 항상 확인할 수 있다. 실제로 이 패턴을 적용한 뒤 폼 작성 완료율이 개선된 사례가 많다. 단, 라벨이 위로 올라가는 애니메이션이 너무 빠르거나 느리면 오히려 어색하므로 200~300ms 정도의 자연스러운 전환 시간을 추천한다.
단계별 입력(Step-by-Step Form)
긴 폼을 한 화면에 다 보여주는 대신, 2~3개의 필드씩 나누어 여러 단계로 분리하는 패턴다. 토스 앱의 송금 과정이 대표적인 예시인데, 한 번에 하나의 질문만 던지기 때문에 사용자의 인지 부하가 크게 줄어듭니다. 다만 전체 진행 상황을 보여주는 프로그레스 바가 반드시 함께 있어야 한다. 이것 없이 단계만 나누면 "도대체 몇 단계나 더 남은 거야?"라는 불안감을 줄 수 있거든. 저도 처음에 프로그레스 바 없이 출시했다가 사용자 피드백을 받고 급히 추가한 경험이 있다.
인라인 유효성 검사(Inline Validation)
사용자가 입력을 마치는 즉시 해당 필드의 유효성을 체크해서 바로 피드백을 주는 패턴다. 이메일 형식이 맞는지, 비밀번호 조건을 충족하는지 등을 실시간으로 알려주면 폼 제출 후 에러 메시지를 받는 것보다 훨씬 나은 경험을 제공한다. 핵심은 타이밍인데, 입력 도중이 아니라 포커스가 빠져나갈 때(onBlur) 검증하는 것이 자연스럽다. 타이핑하는 도중에 빨간 에러 메시지가 계속 뜨면 상당히 거슬리거든.
