[📓아티클] 모바일 UI 디자인 기본 요소 - Tab bar

 

오늘의 아티클 :

https://brunch.co.kr/@chulhochoiucj0/29

모바일 UI 디자인 기본 요소 - Tab bar

 

---

 

1. 아티클 내용 요약

 

1. GNB

- 글로벌 내비게이션 바 (GNB)
: 앱과 웹사이트가 제공하는 콘텐츠의 전체적인 탐색을 지원하고, 페이지 전체에 걸쳐 화면의 동일한 위치에 유지된다.

 

- GNB의 구조
: 기본 구조는 왼쪽에 로고, 중앙에는 최상위 레벨의 콘텐츠 그룹, 우측에는 검색과 로그인 또는 장바구니 같은 기능이 있다. 옛날엔 GNB의 그래픽을 강조하는 경향이 있었으나 콘텐츠 중심으로 변하면서 GNB의 디자인 그래픽은 사용자가 콘텐츠를 보는데 집중할 수 있게 최소화되고 단순해지고 있다. (Ex 애플의 웹페이지 GNB)

 

- GNB의 위치
: 대부분의 GNB는 페이지를 아래로 스크롤해도 상단에 고정되어 지속적으로 노출한다. 스크롤할 때 사라지는 경우도 있으며, 모달을 제외한 웹사이트의 거의 대부분 페이지에 고정되어 있다.

 

- 디바이스 크기별 GNB
: 데스크톱 사양에서는 바 형태로 화면의 상단이나 사이드바를 활용해 좌측에 위치한다. 태블릿의 경우 사이드바를 활용해 좌측에 위치하고, 모바일에서는 화면의 하단에 위치한다. (Ex 인스타그램)

 

 

2. 탭바 Tab Bar

- 탭바  : 사용자가 앱 내에서 중요한 콘텐츠 사이를 빠르게 전환할 수 있도록 하는 글로벌 탐색 컨트롤. 모바일 앱에 최적화되어 있다. 화면 하단에 레이아웃하고 Thumb Zone에 있어야 한다.

 

- 탭바 명칭의 통일 : IOS에서는 탭바, 안드로이드에서는 navigation bar로 불린다.

 

- 탭 바의 구조 : 아이콘과 텍스트 레이블 조합의 탭 항목을 기본으로 하고, 최대 5개의 항목 탭으로 구성되어 있다. 아이콘, 라벨 텍스트, 컨테이너, 뱃지, (안드로이드의 경우) 액티브 인디케이터로 구성된다.

 

- 탭바 가이드라인

(1) 모달 상태에서는 탭바를 노출하지 않는다.

(2) 탭 바의 항목을 5개 이상 사용하지 않는다.

(3) 탭바에 지나친 그래픽요소는 사용하지 않는다.

 

 

3. 햄버거 메뉴

- 햄버거 메뉴

: 화면이 넓은 데스크톱 웹사이트의 많은 기능들을 화면이 작은 모바일 화면에 맞게 적용하기 위한 해결책

 

- 햄버거 메뉴로 대표되는 Navigation drawer의 문제점

(1) 최상위 레벨 간의 접근성이 떨어진다.

(2) 사용자가 현재 위치를 알기 어렵다.

 

 

 

2. 인사이트

- Tab bar, GNB 모두 이미 알고 있는 단어였는데도 두 단어가 환경에 따라 다르게 사용되는 단어라는 건 이번에 처음 알았다. GNB가 Tab bar의 개념을 포함하는 확장적 개념이라고 생각했었는데 데스크톱에서는 GNB를, 모바일 화면에서는 Tab bar라고 불린다고 한다.

 

- 화면 구조를 분석할 때 Tab bar라고 써야할 지, 네비게이션 바라고 말해야 할 지도 고민됐었는데 이 또한 환경에서 차이가 나는 것이었다. Ios 환경에서는 탭바고, 안드로이드 환경에서는 네비게이션 바라고 불린다. 나는 주로 Ios 환경으로 작업하니까 앞으로는 탭바라고 불러야지,,

 

- UXUI 심리학의 법칙에서 배운 Thumb Zone 원칙은 계속해서 나오는 것 같다. 모달과 랜딩페이지를 제외한 대부분의 화면에 탭 바를 엄지가 잘 닿는 위치인 하단에 위치시켜야 한다는 것을 잘 알아둬야 겠다.

 

- 햄버거 메뉴에 대해 더 자세하게 찾아보다가 재밌는 아티클을 찾았다. 평소에 궁금했던 아이콘들의 정확한 명칭을 알려주는 아티클인데, 신기한 부분은 햄버거메뉴와 마찬가지로 거의 다 음식 이름에서 따왔다. 지금까진 햄버거메뉴 정도만 알고 있었는데 이참에 다른 아이콘의 명칭도 다 알아둬야겠다.

https://chaeyeon-chaeyeon.tistory.com/67

[UI 명칭] [Menu UI] 이제 땡땡땡 아이콘 말고 진짜 이름으로 불러주세요.