FAB(Floating Action Button)은 UI 내 특정 위치에 고정되어 떠 있는 버튼으로, 사용자에게 중요한 행동을 언제든지 클릭할 수 있도록 제공하는 UI 요소입니다. 주로 안드로이드에서 자주 사용되는 유형으로, 리스트나 콘텐츠 위에 고정되어 사용자의 행동을 유도합니다. FAB는 화면에서 항상 쉽게 접근할 수 있는 위치에 배치되며, 앱에서 가장 중요한 기능을 수행하는 데 활용됩니다.
FAB의 특징과 사용 예시
- 고정 위치: FAB는 화면에 고정되어 떠 있는 형태로, 사용자가 스크롤을 해도 항상 접근할 수 있습니다.
- 주요 기능 강조: FAB는 앱의 주요 액션을 유도하기 위해 사용됩니다. 예를 들어, 이메일 앱에서는 “새 메일 작성”, 쇼핑 앱에서는 “장바구니” 기능을 제공할 수 있습니다.
- 다중 FAB 사용 가능: 한 화면 내에서 하나의 FAB만 사용하는 것이 일반적이지만, 필요에 따라 두 개의 FAB를 배치할 수 있습니다. 예를 들어, 주 기능과 보조 기능을 각각 제공하기 위해 두 개의 FAB를 사용할 수 있습니다.
- 확장형 FAB: FAB를 클릭하면 여러 개의 숨겨진 버튼이 나타나는 확장형 FAB로 구성할 수 있습니다. 이를 통해 사용자가 더 많은 기능을 선택할 수 있도록 유도할 수 있습니다.
FAB 사용 시 주의사항
확장형 FAB 사용 시 주의
확장형 FAB는 여러 옵션을 제공할 수 있지만, 과도한 기능을 포함하면 사용자 경험을 해칠 수 있습니다. 주요 기능과 보조 기능을 균형 있게 포함해야 합니다.
사용 빈도가 낮은 기능에는 FAB 사용을 지양
FAB는 화면에서 시각적으로 두드러지므로, 자주 사용하는 기능을 배치해야 합니다. 사용 빈도가 낮은 기능에 FAB를 할당하면 오히려 사용성을 떨어뜨릴 수 있습니다
간결하고 명확한 아이콘 사용
FAB는 일반적으로 아이콘만 표시되므로, 아이콘은 기능을 직관적으로 전달할 수 있어야 합니다. 불명확한 아이콘은 사용자가 FAB의 목적을 파악하는 데 혼란을 줄 수 있습니다.
단일 액션 유지 권장
한 화면에 하나의 FAB만 배치하는 것이 일반적이며, 주요 액션만을 담당하도록 권장됩니다. 여러 FAB가 있을 경우 사용자가 주요 액션을 파악하기 어려울 수 있습니다.
FAB 사용 예시
| FAB 기능 | 예시 앱 | 역할 |
|---|---|---|
| 새 메일 작성 | 이메일 앱 | 사용자에게 언제든지 새 메일을 작성할 수 있게 유도 |
| 장바구니 추가 | 쇼핑 앱 | 현재 보고 있는 상품을 장바구니에 추가 |
| 채팅 시작 | 메시지 앱 | 새로운 대화를 시작할 수 있도록 유도 |
| 사진 촬영 | 사진 앱 | 카메라 기능을 바로 사용할 수 있도록 지원 |
