구글이 굳이 툴 바를 분리한 이유
새로운 툴 바의 사용방법과 좋은 사례
앱 바가 Expressive에서 달라진 점
하단 앱 바(App Bar)는 Expressive 업데이트 이후 툴 바(Toolbar)로 변경되었습니다. 그런데 앱 바와 툴 바는 무엇이 다르길래 변경된 걸까요? 본 글에서는 변경된 툴 바의 사용방법과 좋은 사례를 알아보겠습니다.
앱 바와 툴 바의 차이
앱 바는 내비게이션 UI의 한 형태로, 상단 앱 바, 하단 앱 바, 내비게이션 바 등으로 나뉩니다. 이 중 하단 앱 바는 목적지로 이동하는 내비게이션 기능보다는, 사용자가 다양한 작업에 빠르게 접근할 수 있도록 돕는 역할에 더 가깝습니다.
(앱 바에 대해 더 알고 싶으시다면 위 글을 참고해 주세요)
왜 하단 앱 바에서 툴 바로 바뀌었을까요?
하단 영역과 분리된 플로팅 툴 바로 대체하단 앱 바는 이러한 특성 때문에 상단 앱 바와의 구분이 더욱 명확해졌고, Expressive 업데이트를 통해 툴 바(Tool Bar)로 대체되었습니다. 특히 기존의 하단 앱 바가 화면 하단에 고정되어 있던 것과 달리, 툴 바는 하단에서 분리되어 플로팅 형태로 배치됩니다.
이러한 변화는 더 다양한 기능을 담고, 복잡한 작업을 지원하며, 레이아웃 구성의 유연성을 높이기 위한 목적에서 이루어졌습니다. 그렇다면 새롭게 등장한 툴 바는 어떤 특징을 가지고 있을까요? 지금부터 자세히 살펴보겠습니다.
툴 바의 유형
툴 바(Toolbar)는 현재 페이지와 관련된 작업을 사용자에게 빠르게 제공하기 위한 컴포넌트입니다. 툴 바에는 두 가지 유형이 있습니다.
1️⃣ 고정형 툴 바 (Docked Toolbar)
화면 하단에 전체 너비로 고정
여러 페이지에 걸쳐 전역적인(Global) 작업을 제공할 때 적합
2️⃣ 플로팅 툴 바 (Floating Toolbar)
Expressive 업데이트에 추가된 유형
본문 콘텐츠 위에 떠 있는 형태
특정 페이지나 상황에 맞는 맥락적(Contextual) 작업에 적합
툴 바의 구성
1️⃣ 컨테이너(Container)
2️⃣ 요소(Element)
컨테이너는 툴 바 구성하는 틀입니다. 고정형 툴 바는 창의 전체 너비에 걸쳐져 있으며 주로 뾰족한 모서리가 사용됩니다. 플로팅형 툴 바는 본문 콘텐츠 위에 떠있으며 둥근 모서리를 사용할 수 있습니다.
툴 바의 사용방법
툴 바의 사용방법을 이어서 알아보도록 하겠습니다.
플로팅 툴 바는 현재 페이지와 관련된 작업을 제공합니다.
고정형 툴 바는 여러 페이지에 반복적으로 등장할 수 있으므로, 내비게이션과 같은 글로벌 컨트롤이 표시될 수 있습니다.
툴 바에 모든 작업을 담을 수 없다면 메뉴를 추가할 수 있습니다.
툴 바는 두 가지 유형의 색상으로 구성할 수 있습니다.
1️⃣ 표준형
낮은 강조도의 색 구성으로, 본문 콘텐츠에 주의를 집중시키기에 적합합니다.
2️⃣강조형
높은 강조도의 색 구성으로, 컨트롤(버튼 등)에 시선을 끌기 위해 사용됩니다. 또한 편집 모드 진입 등 페이지 동작의 일시적인 변화를 나타낼 때도 활용될 수 있습니다.
툴 바와 내비게이션 바는 모두 창의 하단에 위치하므로, 동시에 표시해서는 안 됩니다. 기본 페이지에는 내비게이션 바를, 작업이 포함된 후속 페이지에는 툴 바를 표시하는 것을 권장합니다.
1️⃣ 기본 페이지의 내비게이션 바
2️⃣ 상황별 작업이 포함된 보조 페이지의 툴 바
플로팅 툴 바는 제품 계층 구조에서 관련된 후속 페이지 간의 탭으로 사용할 수 있습니다. 이 방식은 유사한 페이지들을 그룹화하는 데 도움이 되며, 선택한 항목이 아래의 본문 콘텐츠에 영향을 준다는 것을 시각적으로 보여줍니다.
✅ 내비게이션을 명확히 구분하고, 특정 페이지에서 로컬 내비게이션을 표시할 때 툴바를 사용하세요.
❎ 내비게이션 바와 내비게이션 기능이 있는 툴바를 동시에 화면에 표시하지 마세요.
고정형 툴 바에는 둥근 모서리보다는 뾰족한 모서리를 권장합니다. 둥근 모서리를 사용하면 사용자가 인터랙션 할 때 컨테이너가 확장되거나 변경될 수 있기 때문입니다.
사용자를 압도하는 너무 많은 컨트롤은 지양합니다.
화면에 표시할 가장 필수적인 작업만을 포함해야 합니다. 플로팅 툴 바는 창이나 패널의 가장자리를 넘어가면 안 됩니다.
플로팅 툴 바는 기본적으로 높이(Elevation)가 적용됩니다. 툴 바 아래의 콘텐츠가 시각적으로 구분되는 경우에는 높이(드롭 쉐도우)를 제거할 수 있습니다.
툴 바는 다양한 유형의 작업을 포함할 수 있습니다.
툴 바에서 강조된 동작을 만들기 위해 두 가지 방법을 사용할 수 있습니다. 툴 바 내에 강조 아이콘 버튼을 사용하거나 FAB과 함께 사용할 수 있습니다.
강조 아이콘 버튼과 FAB을 동시에 사용하여 여러 작업을 강조하면 안 됩니다. 또한 다양한 디자인의 컨트롤을 하나의 플로팅 툴 바에 혼합해서 사용하면 안 됩니다. 일관된 컨트롤 디자인을 유지해야 명확한 UI를 만들 수 있습니다.
툴 바에 사각형의 강조 버튼 사용을 지양합니다. 플로팅 툴 바 자체가 둥근 형태이고, 시각적 균형과 통일감을 위한 지침으로 보입니다.
수평 툴 바는 창 가장자리로부터 최소 16dp 떨어져 있어야 하며, 수직 툴 바는 최소 24dp의 여백을 유지해야 합니다.
구글은 왜 툴 바를 분리했을까요?
위 가이드를 통해 툴 바를 플로팅형으로 분리한 이유를 유추해 볼 수 있습니다.
페이지마다 다른 작업임을 암시하는 플로팅 툴 바맥락에 맞는 작업을 더 명확하게 구분
고정형 툴 바는 여러 페이지에서 동일하게 유지되며 전역적인 작업을 처리하는 데 적합했습니다. 그러나 이러한 고정된 구조는 페이지마다 달라지는 작업 콘텍스트를 표현하기에는 한계가 있었습니다. 플로팅형 툴 바는 본문 콘텐츠 위에 자연스럽게 떠오르며, 현재 페이지에서 수행할 수 있는 상황에 맞는 작업(Contextual Actions)을 훨씬 직관적으로 제공합니다.
필요한 만큼만의 공간을 차지레이아웃 유연성과 디자인 다양성 확보
플로팅 툴 바는 고정된 그리드나 화면 하단 구조에서 벗어나 필요한 만큼의 공간만 차지합니다. 이는 복잡한 레이아웃에서도 시각적 간섭을 최소화하며, 여러 도구 모음을 조합하거나 구역별로 기능을 분리하는 등 디자인 확장성에도 유리합니다.
내비게이션 바와 쉽게 구별되는 플로팅 툴 바모바일 환경에서의 집중도 향상
플로팅형 툴 바는 본문 위에 독립적으로 배치되며, 내비게이션과의 역할 구분이 명확해지고 사용자 집중도도 향상됩니다.
작업에 대한 강조작업 강조 및 계층 표현이 쉬워짐
플로팅 툴 바는 시각적으로도 부각되기 때문에, 특정 작업(예: 편집, 삭제, 강조 표시 등)을 더 명확하게 표현할 수 있습니다. 또한 버튼에 채움(filled)을 적용하거나 FAB(Floating Action Button)과 조합해 행동의 우선순위나 계층 구조를 시각적으로 보여주는 데도 유리합니다.
툴 바의 좋은 사례
플로팅형 툴 바를 중심으로 좋은 사례를 선별해 보았으니, 참고하여 활용하면 좋겠습니다.
FigmaFigma는 상단 툴 바에서 플로팅형 툴 바로 전환한 대표적인 사례로 생각됩니다. 내비게이션과 툴 바의 역할을 분리하고, 다양해진 도구를 더 직관적으로 담고 있습니다.
iOS 18 갤러리 뷰iOS 갤러리에서 여러 이미지가 모인 갤러리 뷰 하단에는 위와 같이 플로팅형 툴 바가 존재합니다. 양 옆에는 FAB의 형태처럼 단독으로 분리된 정렬 · 닫기 버튼이 존재하며, 중앙에는 이미지 분류와 관련된 기능만을 배치하여 분리하였습니다.
iOS 18 갤러리 내 이미지 편집iOS 갤러리에서 이미지에 진입하면, 마찬가지로 플로팅형 툴 바가 존재합니다. 양 옆에는 FAB의 형태처럼 단독으로 분리된 공유 · 삭제 버튼이 존재하며, 중앙에는 이미지를 제어할 수 있는 기능이 포함됩니다.
TimepageTimepage 역시 일정과 관련된 기능들을 모아둔 플로팅형 툴 바를 사용하고 있습니다. 단독으로 분리된 FAB 버튼이 아닌, 컨테이너 안에 포함된 버튼을 통해 일정을 추가하거나 원하는 대로 제어할 수 있다는 점을 암시합니다.
마치며
고정형 툴 바는 여전히 지원되지만, 구글은 이제 맥락 중심의 플로팅 툴 바를 더 권장하고 있습니다. 이는 단지 시각적 트렌드가 아니라, 사용자 경험의 흐름을 자연스럽게 연결하고, 인터페이스의 적응성과 유연성을 높이기 위한 전략적 변화입니다.
툴 바는 Expressive 업데이트 항목 중에서도 시각적 노이즈는 적지만, 간결하고 유연하게 확장 가능한 컴포넌트로, 앞으로 더욱 활발히 활용될 것으로 기대됩니다. 또한 기존에 정의되어 있던 앱 바의 유형을 사용성에 따라 재분류하고 재정의하려는 움직임에서도, 구글의 방향성과 진화가 더욱 기대됩니다.
툴 바에 대한 자세한 내용은 아래에서 자세히 확인하실 수 있습니다.
