📌 Floating Action Button(FAB)란?
FAB(Floating Action Button)은 화면 위에 떠 있는 원형 버튼으로, 사용자가 가장 자주 사용하는 핵심 액션을 빠르게 실행할 수 있도록 설계된 UI 요소입니다. 일반적으로 화면 하단 우측에 위치하며, 단일 주 액션을 강조하는 역할을 합니다.
📍 FAB을 일반적으로 사용하는 경우
1. 주요 생성(Create) 액션 수행
사용자가 새로운 콘텐츠를 생성하는 기능이 핵심일 때 FAB을 사용합니다.
- 📝 새로운 문서 작성 → Google Docs, 메모 앱
- 📷 사진 촬영 및 업로드 → Instagram, Snapchat
- 📧 새 이메일 작성 → Gmail
- 🛍️ 새 제품 등록 → 쇼핑몰 관리자 앱
- 🗓️ 새 일정 추가 → Google Calendar
2. 빠른 탐색 및 이동(Quick Access)
FAB을 눌렀을 때 자주 사용하는 화면으로 이동하는 경우.
- 🏠 홈 버튼 역할 → 특정 서브페이지에서 메인 화면으로 이동
- 🗺️ 지도에서 현재 위치 찾기 → Google Maps
- 📍 길 찾기 시작 → 네비게이션 앱에서 경로 검색
3. 긴급하거나 반복적인 주요 액션 제공
자주 사용하는 기능을 빠르게 실행할 때 FAB을 활용합니다.
- 📞 빠른 전화 연결 → 긴급 전화 앱
- 🎤 음성 검색 활성화 → Google Assistant
- 🔄 새로고침 버튼 → 데이터가 자주 업데이트되는 대시보드
4. 멀티 액션 버튼(Expanding FAB)
FAB을 눌렀을 때 여러 개의 세부 액션이 확장되는 경우 사용됩니다.
- ➕ 소셜미디어 공유
- 예: 트윗 작성, 이미지 업로드, 라이브 방송 시작
- 🎬 미디어 업로드
- 예: 동영상 촬영, 기존 파일 업로드
- 📋 다양한 필터 적용
- 예: 리스트 정렬 방식 변경, 태그 추가
⚠️ FAB을 사용할 때 주의할 점
1. FAB은 한 화면에 하나만 사용해야 함
- FAB은 가장 중요한 액션을 강조하는 역할을 하기 때문에 여러 개를 동시에 배치하면 혼란을 줄 수 있음.
- 멀티 액션이 필요하면 확장형 FAB(Expanding FAB)을 고려.
2. FAB은 단일 핵심 액션에만 사용
- 사용자가 자주 수행하는 주요 작업에만 사용해야 하며, 일반적인 네비게이션 버튼으로 오용하면 안 됨.
- 예: 단순한 ‘뒤로 가기’ 또는 ‘메뉴 열기’ 버튼을 FAB으로 사용하면 부적절함.
3. FAB의 위치는 일관성을 유지해야 함
- 일반적으로 화면 오른쪽 하단에 배치해야 사용자가 쉽게 인식하고 접근 가능.
- 앱 내에서 페이지가 바뀌어도 FAB의 위치는 일관되게 유지하는 것이 중요.
4. FAB 사용이 적절하지 않은 경우
- 액션이 화면에서 이미 쉽게 접근 가능한 경우 (예: 네비게이션 바에 있는 버튼)
- 사용자가 다중 선택을 해야 하는 경우 (체크박스나 리스트 선택이 더 적절)
- 화면이 이미 복잡한 경우 (FAB이 추가되면 UI가 과부하될 수 있음)
✅ 결론
FAB은 사용자가 가장 자주 사용하는 주요 액션(Primary Action)을 강조하는 역할을 합니다. 특히 콘텐츠 생성, 빠른 이동, 반복적인 액션이 필요한 경우 유용합니다. 하지만 FAB은 단 하나의 핵심 액션에만 사용해야 하며, 네비게이션용으로 남용하지 않도록 주의해야 합니다.
#플로팅액션버튼 #FAB #모바일UI #UI디자인 #UX디자인 #UI컴포넌트 #주요액션 #생성버튼 #버튼디자인 #모바일버튼 #UI패턴 #머티리얼디자인 #확장형FAB #사용성 #UI일관성 #앱디자인 #인터페이스디자인 #사용자경험 #프로덕트디자인