FAB 버튼이 메뉴가 된다고요?

카테고리

디자인

서브카테고리

UI 디자인

대상자

모바일 앱 및 웹 디자이너, Material Design 사용자

핵심 요약

• FAB(Floating Action Button) 은 단일 핵심 액션 수행을 위한 버튼으로, 화면 하단 우측에 위치
• FAB 메뉴 는 FAB 클릭 시 관련 액션 2~6개를 확장하여 제공, 모바일 환경에서 공간 효율성 향상
• FAB 메뉴 사용 시 주의사항: 다른 컴포넌트(툴바, 네비게이션 레일)와 중복 방지, 항상 텍스트 포함 및 화면 크기에 맞는 FAB 크기 적용

섹션별 세부 요약

1. FAB의 정의 및 역할

• FAB는 화면 내 핵심 액션을 빠르게 수행할 수 있도록 원형 버튼으로 설계됨
• 하나의 화면에 단일 FAB만 존재해야 하며, 해당 화면의 목적과 명확히 연결되어야 함
• M3 Expressive에서 FAB 메뉴를 별도 컴포넌트로 분리하여 제공, 기존 Speed Dial 패턴 대체

2. FAB 메뉴의 구성 및 사용법

• FAB 메뉴는 2~6개의 관련 액션을 포함, 닫기 버튼과 리스트 항목으로 구성
• 항상 텍스트 포함해야 하며, 아이콘은 식별성을 위해 포함 가능
• FAB 메뉴는 툴바와 같은 다른 컴포넌트와 중복 시 사용 금지

3. FAB 메뉴의 디자인 가이드라인

• 화면 크기에 맞는 FAB 크기 적용 (대형 화면: 대형 FAB, 소형 화면: 표준 크기)
• 세로 공간 제한 시 스크롤 지원 (예: 휴대폰 가로 방향)
• 대형 화면에서는 여백 확대 및 가독성 향상을 위한 FAB 크기 조정 권장

4. FAB vs FAB 메뉴의 차이점

• FAB: 즉시성 제공 (단일 액션)
• FAB 메뉴: 선택지 제공 (관련 액션 묶음)
• Material Design 3은 FAB과 FAB 메뉴를 명확히 분리, 시각적 혼란 방지

5. 사례 및 최적화 팁

• Sumeria: FAB 메뉴 전환 시 Dim 효과로 메뉴 강조
• Karrot: 확장형 FAB로 텍스트 제거, 시각적 노이즈 감소
• FAB 메뉴는 맥락과 흐름이 명확한 상황에서만 사용 (예: 복수 연관 기능 제공 시)

결론

• FAB 메뉴는 모바일 환경에서 공간 효율성 향상을 위해 사용, 2~6개 관련 액션 묶음 제공
• 사용 시 주의사항: 텍스트 항상 포함, 툴바와 중복 방지, 화면 크기에 맞는 FAB 크기 적용
• Material Design 3의 Expressive 업데이트를 통해 FAB 메뉴가 확장형 UI로 재도입됨