구글 머티리얼 디자인: Expressive 업데이트의 핵심, 툴 바(Toolbar) 활용 가이드

핵심 기술: 본 글은 구글 머티리얼 디자인의 Expressive 업데이트를 통해 기존의 하단 앱 바(App Bar)가 툴 바(Toolbar)로 대체되면서 발생한 변화와 새로운 툴 바의 사용법, 디자인 가이드라인을 상세히 다룹니다.

기술적 세부사항:
* 앱 바(App Bar)에서 툴 바(Toolbar)로의 변화: 하단 앱 바는 사용자의 빠른 작업 접근을 돕는 역할을 했으나, Expressive 업데이트로 상단 앱 바와 구분이 명확해지며 하단에서 분리된 플로팅 형태로 툴 바가 대체되었습니다.
* 툴 바의 목적: 현재 페이지와 관련된 작업을 사용자에게 빠르게 제공합니다.
* 툴 바 유형:
* 고정형 툴 바 (Docked Toolbar): 화면 하단에 전체 너비로 고정되며, 여러 페이지에 걸쳐 전역적인 작업을 제공하는 데 적합합니다. 뾰족한 모서리 사용이 권장됩니다.
* 플로팅 툴 바 (Floating Toolbar): 본문 콘텐츠 위에 떠 있는 형태로, 특정 페이지나 상황에 맞는 맥락적(Contextual) 작업을 제공하는 데 적합하며, 둥근 모서리 사용이 가능합니다.
* 툴 바 구성 요소: 컨테이너(Container)와 요소(Element)로 구성됩니다.
* 사용 방법 및 고려사항:
* 플로팅 툴 바는 현재 페이지 관련 작업을, 고정형 툴 바는 글로벌 컨트롤을 표시할 수 있습니다.
* 모든 작업을 담기 어려울 경우 메뉴를 추가할 수 있습니다.
* 색상은 표준형(낮은 강조도)과 강조형(높은 강조도)으로 구성할 수 있습니다.
* 툴 바와 내비게이션 바는 동시에 표시해서는 안 됩니다.
* 플로팅 툴 바는 관련 후속 페이지 간 탭으로 사용되어 페이지 그룹화에 도움을 줄 수 있습니다.
* 디자인 지침: 과도한 컨트롤 지양, 필수 작업만 포함, 창 가장자리 넘지 않기, 시각적 구분 시 높이(Elevation) 제거, 강조 아이콘 또는 FAB 사용 시 혼합 사용 금지, 사각형 강조 버튼 지양, 적절한 여백 유지(수평 16dp, 수직 24dp).
* 플로팅 툴 바의 장점: 맥락에 맞는 작업 명확 구분, 레이아웃 유연성 및 디자인 다양성 확보, 모바일 환경 집중도 향상, 작업 강조 및 계층 표현 용이.
* 사례: Figma, iOS 18 갤러리 뷰 및 이미지 편집, Timepage.

개발 임팩트: 플로팅 툴 바 도입을 통해 사용자에게 더욱 맥락적이고 직관적인 인터페이스를 제공할 수 있으며, 레이아웃의 유연성을 높여 복잡한 디자인 구현이 가능해집니다. 이는 사용자 경험(UX) 개선과 더 나은 인터랙션을 디자인하는 데 중요한 기반이 됩니다. 구글의 이러한 변화는 사용자 경험의 흐름을 자연스럽게 연결하고 인터페이스의 적응성과 유연성을 높이려는 전략적 접근을 보여줍니다.

커뮤니티 반응: (원문 자체에 커뮤니티 반응에 대한 직접적인 언급은 없습니다.)

톤앤매너: 전문적이고 명확한 정보를 전달하며, 디자이너와 개발자가 실제로 적용할 수 있도록 구체적인 가이드라인과 사례를 제시합니다.