728x90
[주제]
[선택과 이유]
우선 나의 선택은 하단 네비게이션 바의 좌측인 A이다
내가 가장 많이 사용하는 인스타그램이나 유튜브, 넷플릭스 같은 어플들의 하단 네비게이션 바에는 좌측에 홈 버튼이 있어서 익숙하기 때문에 골랐다.
보통의 스마트폰은 하단 내비게이션 바의 좌측부터 중앙, 우측까지 다 쉽게 접근할 수 있다.
요즘 대부분의 인기 앱들은 홈 버튼을 하단 내비게이션 바의 좌측에 배치하고 있고, 동일한 패턴을 유지하면 새로운 앱을 사용할 때도 사용자가 쉽게 적응할 수 있다.
✅ 엄지손가락의 움직임을 고려한 설계
- 대부분의 사용자는 스마트폰을 한 손으로 조작하며, 엄지손가락이 왼쪽에서 오른쪽으로 자연스럽게 이동
- 연구에 따르면, 하단 내비게이션 바의 좌측은 엄지가 쉽게 접근할 수 있는 영역
- 📖 출처: Steven Hoober, "The Thumb Zone: Designing for Mobile Users" (2013)
✅ 모바일 UX 패턴과 일관성 유지
- 대부분의 인기 앱들은 홈 버튼을 하단 내비게이션 바의 좌측에 배치
- 동일한 패턴을 유지하면 새로운 앱을 사용할 때도 사용자가 쉽게 적응
📌 주요 앱의 홈 버튼 위치 분석
앱내비게이션 바 버튼 순서 (좌 → 우)홈 버튼 위치홈 - 검색 - Reels - 쇼핑(기존) - 프로필 | 좌측 | |
YouTube | 홈 - Shorts - (+) - 구독 - 라이브러리 | 좌측 |
Twitter(X) | 홈 - 검색 - Spaces - 알림 - 메시지 | 좌측 |
TikTok | 홈 - 친구 - (+) - 알림 - 프로필 | 좌측 |
✅ 중앙에는 주요 액션 버튼 배치
- 최근 UX 트렌드는 홈 버튼을 중앙이 아니라, 사용자가 가장 많이 사용하는 "액션 버튼"을 중앙에 배치하는 방식
- 예:
- Instagram & TikTok: 중앙에 "콘텐츠 업로드(+) 버튼"
- YouTube: 중앙에 "+ 버튼" (동영상 업로드 기능)
- 사용자가 콘텐츠를 적극적으로 생성하는 앱일수록, 가장 중요한 액션을 중앙에 배치하는 방식을 따르고 있음을 의미
✅ 하단 내비게이션 바 중앙 버튼의 역할
1) 주요 액션 버튼(Primary Action Button)으로 활용
- 중앙 버튼은 네비게이션 버튼이라기보다, 사용자가 가장 자주 수행하는 **주요 액션(Primary Action)**을 담당하는 경우가 많음
- 예를 들어, 콘텐츠 생성, 업로드, 글쓰기, 결제 등과 같은 핵심 기능이 중앙 버튼에 배치
- 📌 예 :
- Instagram: "+" 버튼 (게시물 업로드)
- TikTok: "+" 버튼 (영상 업로드)
- YouTube: "+" 버튼 (영상 업로드/Shorts 생성)
- Facebook: "+" 버튼 (게시물 작성)
2) 홈 버튼이 아니라 특정 기능을 강조하는 자리
- 중앙 버튼이 홈 버튼이 아니라 특정 액션을 강조하는 이유는, 홈 버튼이 항상 필요한 기능이 아니기 때문
- 홈 화면으로 돌아가는 것은 중요하지만, 일반적으로 좌측에 배치해도 접근성이 충분함
- 사용자가 가장 많이 수행하는 액션을 중앙에 배치하면 직관적으로 기능을 사용할 수 있음
✅ 하단 중앙 버튼을 "액션 버튼"으로 배치하는 이유
📌 왜 하단 중앙에 주요 액션 버튼을 둘까?
1️⃣ 엄지손가락이 쉽게 닿는 위치
- 대부분의 사용자는 스마트폰을 한 손으로 조작하며, 엄지손가락이 중앙으로 쉽게 이동
- 연구에 따르면, 화면 중앙 하단은 엄지가 닿기 쉬운 위치로, 가장 자주 사용하는 기능을 배치하기 적합
2️⃣ 사용자의 주된 목표(Primary Goal)와 연결
- 앱의 핵심 목표가 "콘텐츠 생성"이라면, 콘텐츠 생성 버튼을 중앙에 배치하는 것이 효과적
- TikTok이나 Instagram에서는 사용자가 가장 많이 하는 행동이 "영상/사진 업로드"이므로 "+" 버튼이 중앙에 배치
3️⃣ 시각적 강조 효과
- 중앙 버튼은 사용자가 앱을 사용할 때 가장 먼저 눈에 띄는 위치
- 따라서, 중앙에 홈 버튼을 두는 것보다 "가장 중요한 기능"을 배치하는 것이 직관적
[마무리]
디자인 카타에서 내 의견에 맞게 정보를 찾고 정리하다보니 좌측이 답이다 라는 식으로 적게 되었는데 정해진 답이 있다기 보다는 사용자와 앱의 특성에 따라 알맞게 배치하는 것이 좋다고 생각한다.
그리고 오늘은 1주차 과제를 하루종일 붙잡고 있는데 거의 다 한 것 같지만 아직 마음에 들지 않아서 다시 만들어보는 중이다
와이어프레임 하나로 이렇게 오래 붙잡고 있을 줄이야ㅠㅠ
오늘은 좀 더 남아서 과제 마무리하고 내일은 2주차 과제해야지!
728x90
'내일배움캠프' 카테고리의 다른 글
[내일배움캠프] Day 15 - 디자인카타 (아이폰 사파리 탭, 무엇을 더 선호하시나요?) (0) | 2025.02.12 |
---|---|
[내일배움캠프] Day 14 - 역설계, 디자인 클론 (0) | 2025.02.11 |
[내일배움캠프] Day 13 - UI 차이점 찾아보기 (0) | 2025.02.07 |
[내일배움캠프] Day12 - 피그마 활용 심화 1주차 (웹과 앱의 UI 차이) (1) | 2025.02.07 |
[내일배움캠프] Day12 - 디자인카타 (스마트 티비 구성 화면, 어떤 것을 선호하시나요 ?) (1) | 2025.02.07 |