모바일 앱 UI 가이드라인: 한 손 조작, 내비게이션, 버튼, 입력

출발점: 모바일의 사용 맥락

모바일은 데스크톱 화면을 줄인 것이 아니다. 이동 중에, 한 손으로, 짧게 쓰는 경우가 많다. 그래서 기능을 덜어 내고, 계층을 얕게 하고, 엄지가 닿는 곳에 조작을 둔다. 웹의 관례를 그대로 옮기기보다 그 OS의 관례(뒤로 가기 위치, 설정 위치)를 따른다. 가이드라인은 절대 규칙이 아니지만, 무엇을 고르든 앱 전체에서 일관되게 쓰는 것이 더 중요하다.

화면 구조: 보는 영역과 조작 영역

영역	놓을 것
위쪽: 보는 영역(viewing area)	제목, 큰 숫자, 읽기만 하는 콘텐츠
아래쪽: 조작 영역(interaction area)	자주 쓰는 버튼, 탭 내비게이션, 사용자의 응답이 필요한 대화상자

엄지가 편하게 닿는 화면 아래쪽(thumb zone)에 주요 조작을 둔다. 화면 가운데 모달보다 아래에서 올라오는 시트(bottom sheet) 가 한 손으로 쓰기 쉽다.
반대로 삭제처럼 되돌리기 어려운 행동은 실수로 누르기 어려운 위치에 둔다.
화면 좌우에 터치를 받지 않는 여백을 둔다. 쥔 손이 화면 가장자리를 건드리는 오입력과 곡면·둥근 모서리에 요소가 가려지는 것을 막는다.
강조할 콘텐츠는 모서리를 크게 둥글린 카드형 컨테이너에 담고 배경과 대비를 크게 주면 시선이 먼저 간다.
접는 기기·태블릿·데스크톱 모드처럼 화면 크기와 비율이 바뀌면 레이아웃도 맞춰 바뀌어야 한다. 반응형 UI 패턴, 안전 영역과 폴더블 대응

원칙	내용
계층을 얕게	깊은 메뉴, 브레드크럼을 쓰지 않는다. 덜 쓰는 기능은 숨기거나 없앤다
하나만 고른다	햄버거 메뉴와 하단 탭 중 하나. 하단 탭은 최대 5개(보통 4개 안팎), 짧고 명확한 이름. 넘치면 「더보기」
중복 금지	한 화면에 뒤로 가기 수단은 하나. 하단 탭과 상단 바가 같은 기능을 반복하지 않는다. 탭을 중첩하지 않는다
상단 바는 간결하게	제목, 뒤로 가기, 현재 화면에 관한 컨트롤(편집·완료·공유) 정도만. iOS 관례는 뒤로 가기 옆에 이전 화면 이름, 가운데에 현재 화면 이름
콘텐츠를 가리지 않는다	내비게이션은 수단이다. 읽기 화면에서는 공유·댓글 같은 부가 조작을 읽기 경험 다음에 제안한다
맨 위로 버튼	필수는 아니다. 쓴다면 위로 스크롤할 때만 보인다
스크롤 단서	가로로 넘기는 목록은 옆 항목을 살짝 잘라 보여 더 있다는 것을 알린다

로그인 전 첫 화면에는 로그인 같은 핵심 행동만 두고, 사용자 상태(로그인 여부, 이용권 보유)에 따라 다른 화면을 보여 준다. 주요 기능을 인앱 웹뷰로 때우면 속도와 가독성이 떨어진다.

버튼

종류와 위계

종류	쓰임
채운 버튼(solid)	화면의 주 행동(CTA). 화면당 하나
외곽선·고스트 버튼	보조 행동
텍스트 버튼	3차 행동, 대화상자의 버튼
아이콘 버튼	툴바처럼 의미가 관례로 굳은 곳. 레이블을 함께 주면 더 좋다
파괴적 버튼	삭제처럼 되돌릴 수 없는 행동. 주 행동과 같은 자리에 두지 않는다

버튼 스타일은 버튼에만 쓴다. 섹션 제목 같은 요소에 버튼 모양을 쓰면 누를 수 있는 것처럼 보인다.
구매 같은 핵심 CTA는 스크롤해도 화면 아래에 고정해 둔다.
모바일에서는 링크와 버튼을 시각적으로 엄격히 나누지 않는다. 화면 이동은 링크, 행동 실행은 버튼으로 의미만 구분한다.

크기와 상태

터치 영역은 플랫폼 기준을 따른다. Apple은 44×44pt, Material은 48×48dp를 권한다. WCAG 2.2의 최소 기준은 24×24 CSS px다. 보이는 크기가 작아도 터치 영역은 넓힌다.
상태는 기본·눌림·포커스·비활성·진행 중·완료를 구분한다. 비활성 상태는 같은 색에 투명도만 주지 말고 다른 색으로 확실히 구분해 누를 수 없음을 드러낸다.
상태를 색만으로 표시하지 않는다. 테두리·아이콘·표시선 같은 형태 차이를 함께 준다. 버튼 배경과 레이블은 대비 4.5:1(최소 3:1)을 지킨다.

레이블

「예」, 「확인」, 「OK」처럼 맥락 없는 말 대신 실행될 동작을 쓴다(「이체하기」, 「삭제」). 레이블만 읽고도 누르면 무슨 일이 일어날지 예측할 수 있어야 한다. 문구 원칙은 UX 라이팅에 있다.

대화상자

항목	관례
경고창의 닫기 X	두지 않는다. 확인·취소 버튼과 역할이 겹친다
전체 화면 입력 대화상자	닫기는 왼쪽 위, 완료는 오른쪽 위
긍정·부정 버튼 순서	긍정(확인)은 오른쪽, 부정(취소)은 왼쪽. 앱 전체에서 같게
버튼 모양	대화상자 안은 텍스트 버튼

되돌릴 수 없는 삭제·입력 취소 앞에서는 한 번 더 확인받고, 가능하면 실행 취소(undo) 로 복구할 길을 둔다. 사용자가 공들여 만든 정보(장바구니, 작성 중인 글)는 쉽게 사라지지 않게 한다. 확인 대화상자 구현은 확인 다이얼로그에 있다.

선택 컨트롤 고르기

상황	쓸 것
상호 배타적인 단일 선택	라디오 버튼. 옵션 안에 다른 컨트롤을 중첩하지 않는다
정렬·화면 상태 전환	라디오 대신 세그먼트 컨트롤이나 탭
켜기·끄기 설정, 예/아니요·동의	토글 스위치나 체크박스
옵션 5개 이하	드롭다운에 숨기지 말고 바로 펼쳐 보인다. 드롭다운은 옵션이 많을 때(대략 7개 이상)
수량 바꾸기	드롭다운보다 스테퍼(−/+)

입력

원칙	내용
맞는 키보드	전화번호는 숫자 키패드, 이메일은 @ 키가 있는 키보드, 검색은 검색 키가 있는 키보드. 검색창 옆 별도 버튼보다 키보드의 검색 키를 쓴다
실시간 피드백	형식 오류는 입력하는 동안(또는 필드를 떠날 때) 알린다. 다 입력한 뒤 경고창으로 몰아 띄우지 않는다
오류 예방	필수 항목이 다 채워지기 전에는 제출 버튼을 비활성화하고, 필수 항목을 눈에 띄게 표시한다
지우기 버튼	텍스트 필드에는 내용을 한 번에 지우는 버튼
비밀번호	기본은 가리고, 보기 토글을 준다. 작은 키보드의 오타를 확인할 수 있게
키보드에 가리지 않기	키보드가 올라와도 로그인 같은 핵심 버튼이 보여야 한다
한 화면 한 행동	많은 정보를 한 번에 묻지 않고 단계로 나눈다

inputmode·autocomplete 같은 웹의 구현 방법은 폼 사용성에 있다.

글과 색

본문 행간은 넉넉히(약 150% 이상), 한글은 영문보다 조금 더 넓게 잡는다. 긴 글은 왼쪽 정렬한다. 가운데 정렬은 줄 시작점이 흩어져 읽기 어렵다.
중장년층 사용자까지 고려하면 글자를 충분히 키우고 시스템 글자 크기 설정을 따른다.
불필요한 테두리와 색을 줄이고 여백과 근접성으로 관련 정보를 묶는다.
색은 메인 색 하나와 보조 색 두세 개로 제한하고, 상태 차이는 명도·채도로 준다. 버튼 색을 일반 콘텐츠에 쓰면 누를 수 있는 것과 헷갈린다.
다크 모드를 함께 제공한다. 다크 모드와 테마

정리

화면 위는 보는 곳, 아래는 조작하는 곳. 주요 조작은 엄지 영역에, 파괴적 행동은 멀리.
내비게이션은 얕게, 하나만, 중복 없이. 하단 탭은 5개 이하.
버튼은 위계(주 행동 하나)와 행동 중심 레이블로. 상태는 색만으로 표시하지 않는다.
입력은 맞는 키보드, 즉시 피드백, 실수를 막고 되돌릴 길을 둔다.
어떤 관례든 앱 전체에서 일관되게 쓴다.

댓글