[제로베이스 UI/UX 파트타임 스쿨] 13주차 - (목) 컴포넌트 디자인 - Navigation drawer & Bottom navigation

제로베이스 88일차 학습노트이다.
오늘은 Sketch에서의 컴포넌트 디자인 중 Navigation Drawer와 Bottom Navigation에 대해 배웠다. 두 컴포넌트 모두 앱 내 탐색 흐름을 구성하는 데 필수적인 요소이며, 모바일 UX 디자인에서 빈번하게 사용되는 패턴이라는 점에서 중요한 강의였다.

---

오늘의 강의 내용

1. Navigation Drawer
Navigation Drawer는 주로 왼쪽에서 슬라이드되어 나타나는 사이드 메뉴로, 사용자가 앱의 주요 섹션을 쉽게 탐색할 수 있도록 도와준다. 오늘 실습에서는 햄버거 메뉴 아이콘을 눌렀을 때 열리는 구조를 가정해 사용자 프로필 정보, 메뉴 리스트, 하단 로그아웃 버튼이 포함된 내비게이션 드로어를 디자인해보았다.

드로어의 레이아웃은 세로 스크롤을 고려하여 구성되었고, 각 메뉴 항목에는 아이콘과 텍스트를 함께 배치하여 가독성과 인지성을 높였다. 드로어 전체를 하나의 심볼로 만들고, 오버라이드를 통해 각 메뉴명을 손쉽게 바꿀 수 있도록 설정하여 재사용성과 유지보수 편의성도 확보했다.

 

2. Bottom Navigation
Bottom Navigation은 화면 하단에 위치하는 내비게이션 바로, 주로 앱의 핵심 섹션 간 빠른 이동을 제공한다. 실습에서는 3개의 탭으로 구성된 기본 하단 내비게이션 바를 제작했고, 각각의 탭은 아이콘과 텍스트가 함께 들어가는 구조로 디자인했다.

탭 선택 여부에 따라 아이콘 색상이나 텍스트의 굵기, 또는 하이라이트 선 등으로 상태를 시각적으로 구분할 수 있게 구성했다. 각 탭은 심볼로 정의되어 있어 다양한 앱 구조에 빠르게 적용 가능하고, 향후 화면 흐름을 구성할 때 하단 고정 내비게이션 역할로 쓰일 수 있다.

---

이번 실습을 통해 디자인 시스템에서 탐색 관련 컴포넌트를 어떻게 구성하고 적용할 수 있는지를 익혔다. Navigation Drawer는 정보량이 많은 앱에서, Bottom Navigation은 주요 기능 간 빠른 접근이 필요한 앱에서 각각 유용하게 사용될 수 있으며, 앞으로 진행될 화면 구성 및 사용자 플로우 설계에서도 중요한 역할을 하게 될 것이다.

 

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