모달창 버튼 하단 배치
UX 디자인 가이드라인 배우기 #8
모달창 버튼 하단 배치
PC 버전과 구별되는 모바일 디자인의 핵심 원칙들을 소개하겠습니다.
모바일 기기의 작은 화면 크기와 터치 기반 입력 방식은 PC 버전과 근본적인 차이를 만듭니다. 따라서 모바일 사용 맥락을 고려하여 기능을 최소화하고 내비게이션 구조를 단순화해야 합니다.
예를 들어, PC 버전의 모달창은 닫기 버튼을 상단과 하단 영역에 동시에 제공하지만, 모바일의 확인/닫기 모달창 버튼은 하단 영역에만 배치합니다. 이는 사용자가 손가락으로 버튼을 터치하기 쉽도록 하기 위함입니다.
사진: Unsplash그렇다면 모바일 UI/UX 디자인에서 모달창의 확인/닫기 버튼을 하단에 배치하는 이유에 대해 살펴보겠습니다.
첫째. 손 도달성 향상
모바일 기기는 PC와 달리 터치 기반 입력 방식을 사용합니다. 따라서 사용자가 손가락으로 쉽게 닿을 수 있는 하단 영역에 버튼을 배치하는 것이 중요합니다. 이를 통해 사용성과 편의성을 높일 수 있습니다.
둘째. 사용자 행동 패턴 고려
일반적으로 모바일 사용자들은 한 손으로 기기를 잡고 다른 손으로 화면을 터치하는 경우가 많습니다. 이때 엄지손가락이 주로 하단 영역을 조작하게 됩니다. 따라서 확인/닫기 버튼을 하단에 배치하면 사용자의 자연스러운 손 동작에 부합하게 됩니다.
셋째. 시각적 접근성 향상
모바일 화면은 PC에 비해 상대적으로 작습니다. 따라서 사용자의 시야에 가장 잘 들어오는 하단 영역에 중요한 버튼을 배치하면 사용자가 쉽게 인지하고 조작할 수 있습니다.
사진: Unsplash의Alejandro Escamilla넷째. 오류 방지
팝업창의 닫기 버튼이 상단에 있다면 실수로 잘못 누를 가능성이 있습니다. 하지만 하단에 배치하면 사용자가 의도적으로 버튼을 누르게 되어 오류를 줄일 수 있습니다.
다섯째. 일관성 있는 경험 제공
많은 모바일 앱에서 확인/닫기 버튼을 하단에 배치하고 있습니다. 이를 통해 사용자에게 익숙한 UI 패턴을 제공하여 일관성 있는 경험을 줄 수 있습니다.
정리하면, 모바일 모달창의 확인/닫기 버튼을 하단에 배치하는 것은 사용자의 손 도달성, 행동 패턴, 시각적 접근성, 오류 방지, 일관성 있는 경험 제공 등을 고려한 최적의 UI/UX 설계 방식입니다.
예를 들어 쿠팡과 11번가의 모달창의 확인 혹은 닫기 버튼이 하단에 배치하여 누르기 편합니다.
감사합니다.
전민수 UX 컨설턴트 소개
(UX 실무 경력: 27년차 UX 전문가: LG전자, 서울시청 등 약 300회 이상 UX 컨설팅 수행)
(UX 강사 경력: 23년차: 삼성, SK, KT 등 약 1,000회 이상 UX 강의 진행)
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 최소 1개에서 최대 4개 강좌 (온라인) 줌 Live 강좌 진행) (PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
[VOD 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(인프런에서 총 20개 VOD UX 강좌를 오픈했습니다)
(PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
https://www.inflearn.com/users/196290
