Google M3 Expressive 앱 바 가이드: 변화된 구성 요소와 효과적인 활용 전략

핵심 디자인 컨셉

Google Material 3 Expressive 디자인 시스템은 앱 바(App Bar) 컴포넌트를 재정의하며, 기존의 상단 및 하단 앱 바 구분을 없애고 툴 바(Toolbar)를 통해 기능을 분리했습니다. 새롭게 도입된 다양한 형태의 상단 앱 바와 그 구성 요소들의 명확한 사용법을 제시하며 사용자 경험의 일관성과 효율성을 높이는 데 초점을 맞춥니다.

디자인 방법론 및 원칙

• 앱 바 유형의 변화: 기존 M3의 상단/하단 앱 바에서 Expressive 이후 하단 앱 바가 사라지고, 툴 바(Toolbar)로 대체되어 내비게이션과 주요 액션이 목적에 따라 분리되었습니다. 상단 앱 바는 검색 앱 바, 소형, 중형 플렉시블, 대형 플렉시블 앱 바로 재편되었습니다.
• 플렉시블 앱 바: 중형 및 대형 앱 바는 스크롤 시 축소 및 확장되는 플렉시블(Flexible) 형태로 변화하여 동적인 사용자 경험을 제공합니다.
• 앱 바 구성 요소의 역할 정의:
  • 컨테이너: 직선적 형태와 정사각형 모서리를 유지하며, 높이 및 너비를 임의로 변경하지 않고 기본 높이를 사용해야 합니다. 곡선 모서리는 상호작용 오해를 유발할 수 있어 지양합니다.
  • 헤드라인: 현재 페이지, 섹션, 제품명을 명확하게 설명하며, 중간/대형 플렉시블 앱 바에서는 최대 두 줄까지 줄 바꿈이 가능하나 소형 앱 바에서는 줄 바꿈을 피하고 텍스트가 잘리지 않도록 주의해야 합니다.
  • 선행 버튼: 제품 내 탐색(메뉴 아이콘, 뒤로 가기 화살표) 용도로만 사용합니다.
  • 후행 아이콘: 전체 페이지에 영향을 미치는 자주 사용하는 작업을 왼쪽에 배치하고, 덜 사용하는 작업은 오른쪽에 배치합니다. 가시성을 위해 채워진(filled) 아이콘 사용을 권장하며, 윤곽선 아이콘은 선택되지 않은 토글 버튼 등에 활용 가능합니다.
• 로고 활용: 브랜드 정체성 강화를 위해 앱 바에 이미지 로고를 사용할 수 있으며, 텍스트와 함께 사용하거나 대체할 수 있습니다.
• 작업 항목 제한: 앱 바에는 눈에 띄는 작업 하나를 배치하고, 꼭 필요한 경우 두 개까지 허용합니다. 주요 작업은 페이지 변경이나 종료와 관련된 액션(예: 보내기, 저장, 편집)이며, 작업 항목이 많을 경우 툴 바 사용을 권장합니다.
• 검색 앱 바: 검색 뷰 진입점 역할을 하며, 검색 필드를 포함하고 'Search'라는 단어를 포함하는 것이 권장됩니다. 후행 아이콘은 최대 두 개까지 가능하며, 선행 요소에 로고를 활용하여 브랜드 경험을 강화할 수 있습니다.

디자인 임팩트

새로운 앱 바 디자인은 사용자에게 페이지의 맥락을 더 명확하게 전달하고, 주요 기능에 대한 접근성을 높여 전반적인 앱 사용 경험을 향상시킵니다. 플렉시블 앱 바는 시각적인 동적 효과를 통해 사용자 참여를 유도하며, 명확한 구성 요소 사용 원칙은 디자인 일관성을 확보하는 데 기여합니다.

업계 반응 및 트렌드

Google의 Material Design 업데이트는 업계 전반에 큰 영향을 미치며, 새로운 디자인 언어는 일관된 사용자 경험을 제공하려는 최신 트렌드를 반영합니다. 특히 Expressive는 디자인의 표현력을 강화하려는 시도로, 인터페이스 디자인의 미학적, 기능적 발전을 이끌고 있습니다.