[제로베이스 UI/UX 파트타임 스쿨] 11주차 - (화) 상단 앱바

제로베이스 72일차 학습노트이다.
오늘은 컴포넌트 가이드라인 실습 챕터 중 하나인 상단 앱바(Top App Bar)에 대해 학습했다. 앱을 사용할 때 가장 먼저 보이는 상단 영역으로, 단순히 타이틀을 보여주는 것을 넘어 내비게이션과 액션을 조율하는 중요한 컴포넌트라는 점이 인상 깊었다. 오늘 강의에서는 Material Design의 공식 가이드를 참고해 XD에서 직접 구성해보는 과정을 통해, 디자인 시스템을 컴포넌트 단위로 적용하는 실질적인 방법을 익혔다.

---

오늘의 강의 내용

 

1. 상단 앱바(Top App Bar)
상단 앱바는 앱이나 웹에서 화면의 최상단에 위치하여 현재 화면의 제목을 표시하고, 탐색 및 주요 액션을 제어하는 핵심 UI 요소이다. 기본 구성은 타이틀, 내비게이션 아이콘(예: 햄버거 버튼, 뒤로가기), 그리고 하나 이상의 액션 아이콘(예: 검색, 설정 등)으로 이루어진다. Material Design에서는 이 컴포넌트를 다양한 유형으로 제시하는데, 일반형(Regular), 스크롤 반응형(Scrolled), prominent 앱바(콘텐츠 강조형) 등 용도에 따라 다르게 설정할 수 있다.

 

오늘 강의에서는 Material Design의 공식 사이트에서 상단 앱바의 가이드를 참고해, Adobe XD에서 직접 해당 구성요소들을 구현해보았다. 우선 타이틀과 아이콘을 배치하기 위해 8dp 그리드 시스템을 활용하였고, 아이콘은 Material Icons에서 SVG 형식으로 불러왔다. 아이콘과 텍스트 간의 간격, 앱바의 전체 높이(보통 24px), 좌우 여백 등을 가이드에 맞춰 세팅하면서, 실제 제품에 적용 가능한 컴포넌트를 체계적으로 설계하는 방법을 체득했다. 또한 각 구성요소를 XD의 컴포넌트 기능으로 묶어 관리함으로써, 동일한 앱바를 여러 화면에 일관되게 사용할 수 있도록 설정하는 과정도 익혔다. 추후 상태에 따라 변화하는 앱바(ex. 스크롤 시 줄어드는 형태)도 함께 구성해 볼 수 있을 거라는 생각을 했으며, 상호작용을 고려한 디자인 구성도 함께 학습할 수 있었다.

---

오늘 학습한 상단 앱바는 실무에서 모바일 앱이나 웹 페이지의 헤더 영역을 설계할 때 바로 활용할 수 있는 중요한 컴포넌트이다. 특히 디자인 시스템에 따라 구조, 간격, 아이콘 크기 등을 정해두면 디자이너뿐 아니라 개발자와 협업할 때도 효율성이 크게 향상될 수 있다. 향후 다양한 앱의 레이아웃을 구성할 때 상단 앱바를 유형별로 응용하고, 브랜드 가이드에 맞게 커스터마이징하는 데 오늘 배운 내용을 적용할 수 있을 것 같다.

 

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