[제로베이스 UI/UX 파트타임 스쿨] 11주차 - (목) 하단 내비게이션 & 버튼과 나인패치 & 플로팅 액션 버튼

제로베이스 74일차 학습노트이다.
오늘은 컴포넌트 가이드라인 실습으로 하단 내비게이션, 버튼과 나인패치, 플로팅 액션 버튼에 대해 배웠다. 사용자 인터페이스의 주요 상호작용 요소들을 다루는 수업으로, 각각의 컴포넌트가 어떤 맥락에서 쓰이는지, 그리고 실제 UI 설계 시 어떤 기준으로 활용할 수 있는지에 대한 이해를 높일 수 있는 시간이었다.

---

오늘의 강의 내용

 

1. 하단 내비게이션 (Bottom Navigation)
하단 내비게이션은 앱의 주요 화면 간 빠른 이동을 가능하게 해주는 탐색 컴포넌트로, 주로 3~5개의 주요 메뉴를 하단에 고정해 보여준다. 사용자가 앱을 사용하는 중 어떤 위치에 있는지 명확하게 인지할 수 있도록 선택된 아이템은 컬러, 굵기, 혹은 아이콘의 변화로 시각적 피드백을 준다. 하단 내비게이션은 탭보다 앱의 메인 구조에 더 가까운 역할을 하며, 모바일 환경에 최적화된 형태다. Adobe XD에서는 아이콘과 텍스트의 정렬을 8dp 그리드 시스템에 맞춰 구성하고, 선택 상태의 스타일을 적용해 실제 앱의 하단바와 유사한 형태로 제작해보았다.

 

2. 버튼과 나인패치
버튼은 UI 상에서 가장 기본적이고 중요한 상호작용 요소다. 텍스트 버튼, 아웃라인 버튼, 컨테이너 버튼 등 다양한 형태가 있으며, 상태에 따라 기본/호버/비활성 등의 스타일을 구분해야 한다. 나인패치는 안드로이드에서 버튼이나 배경 이미지를 크기 조정할 때, 테두리나 텍스트가 왜곡되지 않도록 설정하는 방식으로, UI 요소를 다양한 크기로 활용할 수 있게 해준다. 오늘 강의에서는 버튼의 크기와 여백, 라운드 정도를 구분해보고, 나인패치를 통해 버튼의 반복 영역과 고정 영역을 시각적으로 이해할 수 있도록 실습했다.

 

3. 플로팅 액션 버튼 (Floating Action Button, FAB)
플로팅 액션 버튼은 화면 위에 떠 있는 형태의 버튼으로, 앱 내에서 가장 대표적인 주요 행동 하나를 강조하기 위해 사용된다. 일반적으로 동그란 형태에 플러스 아이콘이나 공유, 새로 만들기와 같은 기능이 들어가며, 그림자와 색상 대비를 통해 시각적으로 분리된다. FAB는 하단 우측에 위치하는 것이 일반적이며, 앱의 콘텐츠를 방해하지 않도록 배치해야 한다. Adobe XD에서 FAB를 디자인할 때는 기본 버튼보다 큰 크기와 강한 대비를 주고, 그림자 효과와 둥근 형태로 명확한 시각적 포인트를 설정했다.

 

---

오늘 학습한 하단 내비게이션, 버튼, FAB는 모바일 UI 설계에서 가장 기본적이지만 중요도가 높은 컴포넌트다. 앱 기획이나 프로토타입을 만들 때, 사용자 흐름을 고려해 어느 위치에 어떤 버튼을 두어야 하는지, 어떤 액션을 우선시해야 하는지를 판단하는 데 이 컴포넌트들이 매우 유용하게 쓰일 수 있다. 특히 FAB처럼 한 기능을 강조하는 버튼은 사용자 행동을 유도하는 데 효과적인 수단이므로, 추후 프로젝트 기획이나 XD 실습 시 적극적으로 활용해볼 수 있을 것 같다.

 

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