[제로베이스 UI/UX 파트타임 스쿨] 11주차 - (수) 탭 & 내비게이션 드로워

제로베이스 73일차 학습노트이다.
오늘은 컴포넌트 가이드라인 실습의 일환으로 탭(Tab)과 내비게이션 드로워(Navigation Drawer)에 대해 학습했다. 두 컴포넌트 모두 앱의 구조와 콘텐츠를 효과적으로 탐색할 수 있게 해주는 요소로, 각자의 역할과 용도에 따라 적절히 구분해 사용하는 것이 중요하다는 점을 배웠다. Adobe XD를 활용한 실습을 통해 직접 구성해보며 이해도를 높일 수 있었다.

---

오늘의 강의 내용

 

1. 탭(Tab)
탭은 동일한 정보 계층 내에서 여러 콘텐츠 영역을 전환할 수 있게 해주는 컴포넌트이다. 일반적으로 상단에 고정되어 있으며, 사용자는 탭을 터치하거나 클릭해 화면을 전환하게 된다. 탭은 텍스트만 있는 탭, 아이콘이 포함된 탭, 텍스트와 아이콘이 함께 있는 탭으로 나뉘며, 선택된 탭은 컬러, 밑줄, 굵기 등을 통해 시각적으로 강조된다.

오늘 실습에서는 Material Design의 가이드를 참고해 Adobe XD 상에서 고정형 탭과 스크롤 탭을 각각 구성했다. 3~5개의 항목을 기본으로 구성하고, 선택 상태의 탭은 브랜드 컬러로 강조하여 사용자가 현재 위치를 인지할 수 있도록 설계했다. 탭 간 간격, 정렬, 텍스트 크기 등을 8dp 그리드에 맞춰 세팅하면서 실무에서도 그대로 활용 가능한 구조로 다듬었다.

 

2. 내비게이션 드로워(Navigation Drawer)
내비게이션 드로워는 앱의 구조적 탐색을 가능하게 해주는 사이드 메뉴로, 주로 햄버거 아이콘을 눌렀을 때 화면 측면에서 나타나는 방식이다. 앱의 전체 메뉴, 설정, 사용자 정보 등 다양한 항목을 계층적으로 배치할 수 있으며, 공간을 절약하면서도 구조적인 탐색이 가능하다는 점에서 유용하다. 드로워는 기본형(temporary), 고정형(persistent), 미니형(mini) 등으로 나뉘며 사용 맥락에 따라 선택할 수 있다.

Adobe XD에서는 햄버거 버튼과 함께 드로워 레이어를 설정하고, 반복 그리드 기능을 활용해 메뉴 항목들을 효율적으로 구성했다. 사용자 프로필, 메뉴 구분선, 아이콘과 텍스트 정렬 등을 조정하며 실제 앱에서 사용되는 구조를 시뮬레이션하였다. 특히 드로워가 열리고 닫히는 시점과 위치, 아이템 간 간격 등을 정교하게 설정하면서 UX 관점에서 드로워의 역할을 다시금 이해할 수 있었다.

---

탭과 내비게이션 드로워는 서로 다른 맥락에서 콘텐츠를 탐색하도록 도와주는 컴포넌트로, 정보의 계층 구조에 따라 적절히 선택해야 한다. 오늘 학습한 내용을 바탕으로, 향후 앱 기획 시에는 단순한 콘텐츠 전환에는 탭을, 전체적인 정보 구조의 탐색이 필요할 때는 드로워를 적용해 사용자 중심의 내비게이션 설계를 할 수 있을 것 같다. Adobe XD 실습 경험을 통해 컴포넌트의 설계 원칙을 시각적으로 체득할 수 있었던 유익한 시간이었다.

 

이 글은 제로베이스 UI/UX 파트타임 강의 자료 일부를 발췌하여 작성되었습니다.