구글이 굳이 툴 바를 분리한 이유

카테고리

디자인

서브카테고리

UX 디자인

대상자

UI/UX 디자이너, 웹/앱 개발자, 디자인 시스템 구축 담당자

핵심 요약

• 앱 바(App Bar)와 툴 바(Toolbar) 는 내비게이션 기능과 작업 수행 기능을 분리하여 사용자 경험을 개선한 Material Design의 핵심 변화
• 플로팅형 툴 바(Floating Toolbar) 는 맥락에 맞는 작업(Contextual Actions) 을 직관적으로 제공하며, 레이아웃 유연성과 시각적 집중도 향상을 도모
• 고정형 툴 바(Docked Toolbar) 는 전역적 작업(Global Actions) 에 적합하며, 모서리 디자인과 높이(Elevation) 적용을 통해 사용자 인터랙션을 명확히 함

섹션별 세부 요약

1. 앱 바와 툴 바의 차이

• 앱 바 는 내비게이션 기능을 제공하는 UI 컴포넌트로, 하단 앱 바 는 작업 접근성을 강조
• 툴 바 는 Expressive 업데이트 이후 도입된 컴포넌트로, 앱 바와의 역할 분리를 통해 사용자 경험을 개선
• 하단 앱 바 는 화면 하단에 고정되어 있었으나, 툴 바는 플로팅 형태로 배치되어 유연성이 증가

2. 툴 바의 유형과 특징

• 고정형 툴 바(Docked Toolbar)

- 화면 하단에 전체 너비로 고정

- 전역 작업(Global Actions) 에 적합, 예: 내비게이션, 설정

- 뾰족한 모서리 사용 권장

• 플로팅형 툴 바(Floating Toolbar)

- 본문 콘텐츠 위에 떠 있는 형태

- 맥락에 맞는 작업(Contextual Actions) 에 적합, 예: 편집, 삭제

- 둥근 모서리 사용 권장, 높이(Elevation) 적용

3. 툴 바 설계 가이드라인

• 필수 작업만 포함하고, 사용자를 압도하는 컨트롤은 지양
• 플로팅 툴 바는 창 가장자리로부터 16dp, 수직 툴 바는 24dp 여백 유지
• 강조 아이콘 버튼 또는 FAB(Floating Action Button) 을 통해 작업 강조 가능
• 사각형 강조 버튼 사용은 시각적 균형을 해치므로 지양

4. 플로팅 툴 바의 주요 이점

• 맥락에 맞는 작업(Contextual Actions) 을 직관적으로 제공하여 사용자 인터랙션 향상
• 레이아웃 유연성 확보로 복잡한 UI에서도 시각적 간섭 최소화
• 모바일 환경에서의 집중도 향상 및 작업 계층 표현이 쉬워짐

5. 실무 사례 및 예시

• Figma: 상단 툴 바에서 플로팅형 툴 바로 전환하여 도구의 직관성 향상
• iOS 18 갤러리: 이미지 편집 시 플로팅형 툴 바로 기능 분리와 사용자 집중도 향상
• Timepage: 일정 관련 기능을 플로팅형 툴 바로 유기적으로 통합

결론

• 플로팅형 툴 바는 맥락에 맞는 작업을 강조하고, 레이아웃 유연성을 높이는 데 효과적.
• 고정형 툴 바는 전역 작업에 적합하며, 모서리 디자인과 높이 적용을 통해 명확한 사용자 인터랙션 제공.
• Material Design 가이드라인을 준수하고, 사용자 중심의 UI/UX 설계를 통해 일관된 인터페이스 경험 확보.