왜 떠 있는 버튼일까
FAB는 머티리얼 디자인(Google, n.d.)에서 한 화면의 가장 중요한 동작, 예를 들어 메일 쓰기나 새 메모처럼 자주 쓰는 동작 하나를 위해 만든 버튼이에요. 베르그스트룀-레흐토비르타와 울라스비르타(2014)의 연구처럼 한 손으로 폰을 쥐면 엄지가 아래쪽에 편하게 닿기 때문에 오른쪽 아래가 기본 위치예요. 크고 가까운 타깃일수록 빨리 누를 수 있다는 피츠(1954)의 법칙(피츠의 법칙)과도 맞아요. 크기는 터치 타깃 크기 기준보다 넉넉해야 해요.
자주 생기는 문제
FAB는 아이콘만 있는 경우가 많아, 노먼(1999)이 말한 관습에 기대야 해요. '+'는 익숙하지만 낯선 아이콘이면 무엇을 하는지 알기 어려워요. 그래서 '새 메일'처럼 글자를 붙인 확장형 FAB가 나왔어요. 스크롤할 때 FAB를 숨기면 화면은 넓어지지만, 가버(1991)가 말한 숨겨진 행동 유도가 되어 찾기 어려워질 수 있어요. 또 목록 마지막 항목이나 하단 내비게이션을 가리는 일도 흔해요.
잘 쓰는 법
FAB는 한 화면에 하나만 두고, 목록 끝에 FAB 높이만큼 여백을 주어 마지막 항목이 가려지지 않게 해요. 하단 탭과 함께 쓸 땐 탭 위로 겹치지 않게 띄워요. 여러 동작을 펼치는 '스피드 다이얼'은 펼친 작은 버튼도 파히와 동료들(2006)이 말한 엄지 크기를 지켜야 해요. 아이콘에는 접근성 이름을 붙이고, WCAG 2.2(W3C, 2023)의 2.5.8 타깃 크기와 2.4.11 초점 가림 기준을 확인해요.
자주 묻는 질문
- FAB는 꼭 오른쪽 아래에 있어야 하나요?
- 대부분 오른손 엄지가 닿기 쉬워 오른쪽 아래가 기본이지만, 가운데 아래에 두는 디자인도 있어요. 중요한 건 내용을 가리지 않는 거예요.
- iOS 앱에도 FAB를 써도 되나요?
- iOS에는 FAB가 기본 관례가 아니어서, 보통 상단 바나 하단 탭의 버튼을 써요. 플랫폼 관례를 먼저 따르는 게 좋아요.
출처 검토일: 2026-10-27
참고문헌
- Google. (n.d.). Floating action button (FAB). Material Design 3. FAB를 화면의 가장 중요한 동작 하나에만 쓰라는 공식 지침이라, 쓸지 말지 정할 때 참고하면 도움이 돼요.
- Bergstrom-Lehtovirta, J., & Oulasvirta, A. (2014). Modeling the functional area of the thumb on mobile touchscreen surfaces. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1991–2000). ACM. 한 손 엄지가 닿는 영역을 모델링한 연구라, FAB를 오른쪽 아래에 두는 근거로 참고하면 도움이 돼요.
- Fitts, P. M. (1954). The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology, 47(6), 381–391. 크고 가까운 타깃이 빠르다는 법칙이라, FAB 크기와 위치를 설명할 때 참고하면 도움이 돼요.
- Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of MobileHCI 2006 (pp. 203–210). ACM. 엄지 타깃 크기 연구라, FAB와 펼쳐지는 작은 버튼 크기를 정할 때 참고하면 도움이 돼요.
- Norman, D. A. (1999). Affordance, conventions, and design. Interactions, 6(3), 38–43. 관습과 지각된 행동 유도를 다뤄, 아이콘만 있는 FAB가 무엇을 하는지 알리기 어려운 이유로 참고하면 도움이 돼요.
- Gaver, W. W. (1991). Technology affordances. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 79–84). ACM. 숨겨진 행동 유도를 다뤄, 스크롤 때 FAB가 사라지는 설계를 볼 때 참고하면 도움이 돼요.
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 타깃 크기(2.5.8)와 가려짐 없는 초점(2.4.11) 기준이 있어, FAB가 내용을 가리지 않게 할 때 참고하면 도움이 돼요.