앱 바를 플렉시블하게 만드는 방법
앱 바의 특징과 사용방법
현재 페이지의 정보, 탐색, 액션 등을 제공하는 앱 바앱 바가 무엇인가요?
앱 바(App Bar)는 주로 화면 상단에 위치하여, 현재 페이지의 정보와 탐색 또는 주요 작업에 대한 액션을 제공하는 컴포넌트입니다. 이전 브런치북 가이드에서도 한 번 다룬 컴포넌트이니, 필요하신 분들은 아래 글을 참고하시면 좋겠습니다.
본 글에서는 M3 Expressive에서 새롭게 바뀐 구글의 앱 바의 특징과 사용방법에 대해 알아보겠습니다.
기존 M3의 앱 바와 M3 Expressive의 앱 바구글의 앱 바가 바뀌었다고요?
Google M3의 앱 바는 상단 앱 바와 하단 앱 바 두 가지 종류가 있었습니다. 그러나 Expressive 이후 하단 앱 바가 사라지고 여러 형태의 상단 앱 바만 남았습니다. 왜 상단 앱 바만 남긴 것일까요?
기존 M3의 앱 바
1️⃣ 상단 앱 바 (Top app bar)
2️⃣ 하단 앱 바 (Bottom app bar)
M3 Expressive의 앱 바
3️⃣ 앱 바 (App bar)
툴 바로 대체되며 사라진 하단 앱 바툴 바로 대체된 하단 앱 바
하단 앱 바는 툴 바(Toolbar)로 대체되었기 때문입니다. 내비게이션과 주요 액션을 목적에 따라 분리해, 각 UI의 역할을 더 명확하게 만들고 유연하게 조절할 수 있게 한 것이죠.
그렇다면 상단 앱 바는 어떻게 바뀌었을까요?
앱 바의 유형더욱 유연해진 앱 바
새로운 앱 바는 검색 앱 바와 플렉시블 한 소형, 중형, 대형 앱 바로 나뉩니다.
1️⃣ 검색 앱 바 (Search app bar)
2️⃣ 소형 (Small)
3️⃣ 중형 플렉시블 (Medium flexible)
4️⃣ 대형 플렉시블 (Large flexible)
기존의 중형, 대형 앱 바는 높이가 변하지 않았습니다. 반면 여기서 말하는 플렉시블(Flexible)이란 높이가 고정된 앱 바가 아닌, 스크롤 시 축소 및 확장되어 크기가 변하는 앱 바를 말합니다. 기존의 중형, 대형 앱 바는 플렉시블 앱 바로 대체되었습니다.
Expressive에 새롭게 추가된 툴 바에 대해 알고 싶다면 아래 글을 참고해 주세요.
앱 바의 구성 및 사용방법
앱 바의 구성 및 구체적인 사용방법을 알아보겠습니다.
앱 바의 구성1️⃣ 컨테이너 (Container)
2️⃣ 헤드라인 (Headline)
3️⃣ 선행 버튼 (Leading button)
4️⃣ 부제 (Subtitle)
5️⃣ 후행 아이콘 (Trailing icons)
곡선 모양의 컨테이너 모서리는 지양합니다.앱 바 컨테이너는 탐색 아이콘, 헤드라인, 버튼 등 화면 상단에 위치한 모든 정보와 작업을 담는 영역입니다. 컨테이너의 위치나 형태를 임의로 변경하지 않는 것이 중요합니다.
✅ 정사각형 모서리를 사용합니다. 앱 바는 직선적인 형태를 유지해야 합니다.
❌ 곡선 모양은 사용하지 않습니다. 곡선 형태는 상호작용 시 컨테이너가 확장될 수 있다는 잘못된 인식을 줄 수 있습니다.
앱 바는 기본 높이를 유지해야 합니다.앱 바는 항상 기본 높이를 사용하고, 창 너비 전체를 가로질러 배치해야 합니다.
✅ 기본 높이를 유지합니다. 기본 높이는 화면 요소의 가독성을 확보하기 위해 설정된 값입니다.
❌ 기본 높이보다 낮게 설정하지 않습니다. 앱 바의 높이를 줄이면 콘텐츠의 인지성과 접근성이 떨어질 수 있습니다.
앱 바에 로고를 사용할 수 있습니다.앱 바에 이미지 로고를 추가하면 브랜드 정체성을 강화하거나 시각적인 매력을 높일 수 있습니다. 작은 앱 바에서는 텍스트를 완전히 대체할 수 있고, 그 외 앱 바에서는 텍스트 위에 배치되는 형태로 함께 사용할 수 있습니다.
선행 버튼은 탐색을 위한 용도로 사용됩니다.선행 버튼(Leading button)은 제품 내 탐색을 위한 용도로 사용되어야 합니다. 일반적으로 다음 중 하나로 구성됩니다.
메뉴 아이콘: 모달 형태의 확장 내비게이션 레일을 엽니다.
뒤로 가기 화살표: 이전 화면으로 돌아갑니다.
헤드라인은 현재 페이지에 대해 설명합니다.헤드라인은 현재 페이지, 현재 섹션, 제품명을 설명할 수 있습니다. 텍스트는 앱 바에 자연스럽게 들어갈 수 있도록 간결하게 작성해야 합니다.
✅ 중간 유연 앱 바나 대형 유연 앱 바에서는 긴 헤드라인을 두 줄까지 줄 바꿈 할 수 있습니다.
❌ 작은 앱 바에서는 텍스트를 줄 바꿈 하지 마세요. 헤드라인 텍스트는 잘리지 않도록 해야 합니다.
선행 혹은 가운데 정렬할 수 있습니다.헤드라인은 선행 정렬(왼쪽 혹은 오른쪽)하거나 가운데 정렬할 수 있습니다. 헤드라인의 타이포그래피 크기와 스타일은 앱 바의 유형에 따라 달라집니다.
가장 자주 사용하는 작업을 왼쪽에, 덜 사용하는 작업을 오른쪽에 배치하세요.후행 아이콘 버튼은 전체 페이지에 영향을 미치는 작업을 담당해야 합니다. 작은 화면에서는 1~2개의 후행 버튼만 사용하고, 가장 자주 사용하는 작업은 선행 방향에 가깝게 배치합니다.
작업이 더 필요하다면 툴 바(toolbar)에 배치하고, 도구 모음을 사용할 수 없는 경우에만 앱 바에 메뉴를 사용합니다.
가시성이 높은 채워진 버튼을 권장합니다.가능하면 채워진 아이콘을 사용해 작업의 가시성을 높이는 것이 좋습니다. 윤곽선 아이콘은 필요에 따라 사용할 수 있으며, 특히 선택되지 않은 토글 버튼에 적합합니다.
✅ 명확하고 눈에 띄는 작업에는 채워진 아이콘을 사용하세요.
⚠️ 윤곽선 아이콘은 상황에 따라 사용하되, 선택되지 않은 토글 버튼일 경우에 특히 유용합니다.
앱 바는 현재 페이지와 관련된 콘텐츠와 작업을 제공합니다.앱 바에 포함된 정보와 작업은 해당 페이지에 특화된 맥락 기반이어야 하지만, 검색이나 알림처럼 글로벌한 제품 제어 요소도 함께 포함될 수 있습니다. 예를 들어 페이지 탐색, 헤드라인, 이미지, 1~2개의 핵심 작업 등이 포함될 수 있습니다.
앱 바에는 눈에 잘 띄는 작업 하나를 배치해 중요도를 강조할 수 있습니다.앱 바에는 작업 버튼을 하나만 배치하고, 꼭 필요할 경우에만 두 개까지 허용해야 합니다. 주요 작업은 페이지 전체를 변경하거나 종료하는 동작이어야 하며, 예를 들면 ‘보내기’, ‘저장’, ‘편집’ 등이 있습니다.
작업 항목이 많은 경우에는 툴 바(toolbar)에 배치하는 것이 바람직하며, 가능하다면 앱 바에 오버플로 메뉴는 사용하지 않는 것이 좋습니다.
아이콘을 채워진 버튼 혹은 톤 스타일 버튼으로 변경할 수 있습니다. 주요 작업의 가시성을 높이기 위해 아이콘 버튼의 스타일을 채워진(filled) 또는 톤(tonal) 스타일로 변경할 수 있습니다. 필요에 따라 넓은 아이콘 버튼을 사용하는 것도 고려할 수 있습니다.
✅ 중요한 작업에는 채워진 버튼이나 톤 버튼을 사용합니다.
❌ 앱 바에는 여러 개의 채워진 버튼이나 톤 버튼을 나란히 배치하지 않습니다.
검색 앱 바를 통해 검색 뷰로 진입할 수 있습니다. 검색 앱 바는 검색 뷰를 여는 강조된 진입점으로 사용됩니다. 헤드라인 텍스트 대신 검색 필드가 포함되어 있는 것이 특징입니다.
검색 창에는 검색이라는 단어가 포함되길 권장합니다.검색창에는 항상 ‘Search’라는 단어가 포함되어야 하며, 제품의 특성에 따라 다양한 대문자 표기 방식을 사용할 수 있습니다. 검색 대상에 따라 적절한 대소문자 표기를 사용하는 것이 중요합니다.
검색 바의 아이콘모바일 환경에서 검색 앱 바는 후행 아바타 외에 최대 두 개의 후행 아이콘 버튼을 포함할 수 있습니다. 이 아이콘들은 검색창 안쪽 또는 바깥쪽에 배치할 수 있습니다. 가장 자주 사용하는 작업은 왼쪽에, 덜 사용하는 작업은 오른쪽에 배치하는 것이 좋습니다.
선행 요소에 로고를 포함시킬 수 있습니다. 검색 앱 바의 선행 요소는 제품의 로고로 활용되어 앱의 전체적인 브랜드 경험을 강화할 수 있습니다. 이 로고는 단순한 장식일 수도 있고, 홈 화면으로 돌아가거나 새로 고침 하는 등의 동작을 트리거할 수도 있습니다. 단, 확장형 내비게이션 레일을 여는 용도로는 사용하지 않는 것이 좋습니다.
검색 앱 바에 아이콘 세 개와 아바타를 동시에 배치하지 않습니다.검색 앱 바에서는 아바타와 함께 두 개 이상의 후행 아이콘 버튼을 사용하지 않아야 합니다. 작업이 더 필요한 경우에는 툴 바(toolbar)에 배치하는 것이 적절합니다.
앱 바의 스크롤 인터랙션
앱 바의 경우 스크롤 시 인터랙션의 경우가 다양한데요. 어떻게 표현할 수 있는지 간략하게 알아보겠습니다.
앱 바의 배경과 콘텐츠 배경을 분리시켜야 합니다. 앱 바는 처음에는 배경과 동일한 색상으로 시작하고, 스크롤 시 대비되는 색상으로 채워져 배경과 시각적으로 구분되도록 해야 합니다.
스크롤 시 사라지는 앱 바앱 바는 페이지에 항상 고정되어 있을 수도 있고, 스크롤에 따라 숨겨졌다가 다시 나타나는 방식으로 동작할 수도 있습니다.
투명한 앱 바 컨테이너본문 콘텐츠에 더 집중할 수 있도록, 스크롤 시 앱 바 컨테이너를 투명하게 설정하는 방법을 고려할 수 있습니다. 이렇게 하면 버튼들이 콘텐츠 위에 떠 있는 형태로 표시됩니다.
아이콘 버튼에는 컨테이너 채우기가 적용되어 있어야 하며, 예를 들어 ‘뒤로 가기’와 같은 작업에는 좁은 너비의 아이콘 버튼을 사용해 공간 활용을 최소화할 수 있습니다.
다양한 맥락에 대응할 수 있게 된 앱 바마치며
앱 바는 페이지 제목, 탐색 아이콘, 주요 작업 버튼 등을 통해 사용자가 현재 위치와 가능한 작업을 빠르게 인식할 수 있도록 돕는 핵심 컴포넌트입니다. Material 3에서는 유형별 크기와 동작을 세분화해 다양한 화면과 맥락에 유연하게 대응할 수 있도록 설계했습니다.
스크롤에 따라 크기가 줄어들거나 투명하게 변화하고, 채워진 버튼으로 주요 작업을 강조하는 등 사용자 흐름에 맞춘 인터랙션이 강점입니다. 반면, 버튼을 과도하게 배치하거나 계층 구조가 불분명할 경우 오히려 혼란을 줄 수 있어 주의가 필요합니다.
앱 바에 대해 더욱 자세한 내용은 아래 가이드와 글에서 확인하실 수 있습니다.
