FAB 버튼이 메뉴가 된다고요?
FAB 메뉴의 사용방법과 좋은 사례
왼쪽부터 FAB, 확장형 FAB, FAB 메뉴FAB(Floating Action Button)은 화면에서 가장 중요한 주요 작업을 나타내는 버튼입니다. 일반적으로 화면 하단 우측에 원형 형태로 배치되며, 다른 UI 요소 위에 떠 있는(floating) 형태로 시각적 강조를 줍니다. 사용자가 화면에서 가장 자주 수행하게 될 핵심 액션을 빠르게 실행할 수 있도록 돕는 역할을 하죠.
M3 Expressive에서는 기존의 FAB 버튼과는 별개의 컴포넌트인 FAB 메뉴를 공개했습니다. 같은 FAB인데 FAB과 FAB 메뉴를 분리한 이유가 무엇일까요? 본 글에서는 FAB 메뉴에 대한 배경과 사용방법에 대해 집중해서 알아보겠습니다.
들어가기에 앞서, FAB을 포함한 버튼의 종류에 대해서 더 자세히 알고 싶으신 분들은 아래 글을 참고해 주세요.
Airbnb와 Speak의 확장형 FAB, Google Fit의 FABFAB 버튼이란?
사실 FAB(Floating Action Button)에는 Button이라는 단어가 이미 포함되기 때문에, FAB 버튼보다는 FAB이라고 하는게 자연스럽습니다.
FAB(Floating Action Button)은 화면 내에서 가장 핵심이 되는 주요 액션을 수행할 수 있도록 고안된 버튼입니다. 일반적으로 오른쪽 하단에 원형으로 배치되며, UI 위에 떠 있는 듯한 시각적 강조를 통해 사용자의 주의를 끌어당깁니다.
FAB은 한 화면에서 단 하나만 존재해야 하며, 그 화면의 목적과 명확하게 연결되어야 합니다.
FAB을 누르면 열리는 FAB 메뉴구글이 새로 공개한 FAB 메뉴란?
M3 Expressive에서는 기존 FAB의 확장형인 FAB 메뉴를 새롭게 소개했습니다. FAB 메뉴는 하나의 FAB을 눌렀을 때 여러 개의 관련 액션이 함께 확장되어 나타나는 구조입니다.
M2에서는 이러한 패턴을 FAB에 포함시켜 Speed Dial이라고 불렀는데요. FAB 메뉴는 이를 대체하는 개념으로 아이콘과 텍스트 레이블이 함께 노출되는 버튼들이 부드러운 애니메이션과 함께 펼쳐집니다. 다양한 기능을 한 번에 묶어 보여줄 수 있기 때문에, 공간이 제한된 모바일 UI 환경에서 특히 유용하게 사용될 수 있습니다.
FAB 메뉴의 구성 및 사용방법
FAB 메뉴의 구성과 사용방법에 대해 먼저 알아보겠습니다.
1️⃣ 닫기 버튼 (Close button)
2️⃣ 리스트 항목 (List item)
FAB 메뉴는 항목이 하나뿐일 경우 사용하지 않아야 합니다FAB 메뉴에는 2개에서 6개의 항목을 포함할 수 있습니다. 이 항목들은 하나의 주요 동작과 밀접하게 연관된 것이어야 합니다. 서로 관련 없는 액션을 동일한 FAB 메뉴에 묶는 것은 피해야 합니다.
아이콘은 꼭 필요한 경우가 아니라면 제거하지 말고, 텍스트도 반드시 함께 제공해야 합니다FAB 메뉴 항목에는 항상 텍스트가 포함되어야 합니다. 아이콘은 각 항목을 쉽게 식별할 수 있도록 도와주기 때문에 제거하지 않는 것이 좋습니다. 반대로 아이콘만 있고 텍스트가 없는 경우도 피해야 합니다. 텍스트 레이블이 없으면 의미를 오해하거나 접근성이 떨어질 수 있습니다.
FAB은 괜찮지만, FAB 메뉴는 괜찮지 않습니다FAB이 플로팅 툴바나 내비게이션 레일 같은 다른 컴포넌트와 함께 배치될 경우, FAB 메뉴는 사용하지 않아야 합니다. 예를 들어, 툴바 옆에 FAB 버튼을 두는 것은 괜찮지만, 그 FAB 버튼에 FAB 메뉴를 추가하는 것은 피해야 합니다. 툴바와 FAB 메뉴가 동시에 존재하면 기능이 중복되거나 시각적 혼란을 줄 수 있기 때문입니다.
✅ FAB 버튼은 툴바 옆에 배치 가능
❌ 툴바 옆에 있는 FAB에 FAB 메뉴를 함께 사용하는 것은 피해야 함
창 크기에 맞는 FAB 사이즈와 함께 사용하는 것이 사용자 경험을 향상시킵니다FAB 메뉴는 어떤 크기의 FAB에서도 열 수 있습니다. 다만, 화면 크기에 적합한 FAB 크기와 함께 사용하는 것이 중요합니다. 더 큰 화면에서는 대형 FAB를 사용하는 것이 권장되며, 작은 화면에서는 표준 크기의 FAB가 더 적절합니다.
데스크톱 환경에서는 더 큰 FAB와 넉넉한 여백을 적용해 가독성과 접근성을 높이는 것이 좋습니다.FAB 메뉴는 화면 크기가 변하더라도 항상 동일한 모서리나 가장자리에 고정되어 있어야 합니다. 특히 대형(Large) 및 초대형(Extra-large) 화면에서는 FAB 및 FAB 메뉴의 마진이 16dp에서 24dp로 증가해야 하며, FAB 크기 역시 더 크게 조정하는 것이 적절합니다.
창 높이가 짧아 모든 항목을 한 번에 표시할 수 없는 경우, FAB 메뉴는 스크롤을 통해 유연하게 대응할 수 있어야 합니다세로 공간이 제한된 경우(예: 휴대폰을 가로 방향으로 볼 때), FAB 메뉴 항목은 스크롤이 가능해야 합니다. 이때 FAB 메뉴는 닫기 버튼 뒤로 항목이 스크롤되어야 하며, 닫기 버튼은 항상 화면에 고정되어 있어야 합니다.
FAB과 FAB 메뉴FAB과 FAB 메뉴의 다른 점이 뭔가요?
FAB은 단 하나의 가장 중요한 액션을 즉시 수행하게 만드는 반면, FAB 메뉴는 여러 관련 액션을 선택할 수 있도록 단계적인 흐름을 제공합니다. FAB은 버튼 하나, 행동 하나지만, FAB 메뉴는 버튼 하나에서 여러 행동이 갈라져 나오는 구조인 셈이죠.
FAB이 직접적이고 빠르다면, FAB 메뉴는 유연하고 선택지를 제시합니다. 디자인과 인터랙션 구조 측면에서도 FAB 메뉴는 작은 원형 버튼이 아니라 레이블이 포함된 확장형 버튼들로 구성되며, 더 높은 표현력과 시각적 계층을 요구합니다.
왜 FAB과 FAB 메뉴를 별개의 컴포넌트로 분리했을까요?
Material Design 3는 하나의 컴포넌트에 하나의 역할을 제공하고자 하는 경향이 있습니다. FAB과 FAB 메뉴는 시각적으로는 유사해 보여도, 사용 목적, 동작 흐름, 구조가 다릅니다. FAB은 단일 액션, FAB 메뉴는 액션 묶음으로, 이를 하나의 컴포넌트로 통합하면 문서화, 테마 정의, 디자인 토큰 관리에 혼란이 생길 수 있습니다. 따라서 Google은 이 둘을 명확히 분리해 각각의 용도와 책임을 구분하기로 한 것으로 보입니다.
M3에 표현력과 유연성을 더한 Expressive의 FAB 메뉴그렇다면 왜 처음부터 포함되지 않았을까요?
Material Design 3는 핵심 액션 중심의 단순화가 주요 방향으로 보입니다. 그래서 FAB도 가장 기본적인 형태만 우선 제공되었고, 복잡한 구조를 가진 Speed Dial과 같은 메뉴형 패턴은 제외되었죠.
그러나 표현력을 중시한 Expressive 업데이트를 통해 FAB 메뉴가 다시 등장하게 되었습니다. 단순화를 기반으로 시작했지만, 점차 사용자 경험과 유연성을 고려해 확장된 형태를 도입한 셈입니다.
FAB 메뉴의 좋은 사례
FAB이 메뉴 형태로 펼쳐진 사례를 많이 찾기는 어려웠지만, 아래 사례를 참고하여 활용하면 좋겠습니다.
Sumeria일반적인 FAB 메뉴처럼 탭할 시 추가 버튼이 닫기 버튼으로 전환되면서 상단에 선택지가 나열됩니다. 본 스크린에서는 FAB 메뉴 전환 시 Dim을 통해 메뉴를 강조하고 있습니다.
Karrot당근은 다소 변형된 FAB 메뉴를 제공하고 있었는데요. 하단으로 스크롤하면 확장된 FAB이 일반 FAB처럼 텍스트가 사라지고 아이콘만 남아, 탐색 시 시각적인 노이즈를 줄이는 역할을 합니다.
탭할 시, 유사 선택지를 컨테이너로 그룹핑하여 더 정보를 쉽게 구별할 수 있게 하였습니다. 다양한 유형을 선택지를 가진 당근만의 좋은 최적화 사례라고 느껴집니다.
마치며
FAB 메뉴는 하나의 버튼에서 여러 관련 액션을 펼칠 수 있는 확장형 UI로, 공간을 효율적으로 활용하고 시각적 집중을 유도하는 데 유리합니다. 특히 모바일 환경에서 복수의 연관 기능을 자연스럽게 묶어 제공할 수 있다는 점이 강점입니다.
조금은 다른 사용성을 지닌 FAB과 FAB 메뉴하지만 액션까지 한 번 더 눌러야 한다는 흐름 지연과, 잘못 구성할 경우 사용자 혼란이나 접근성 문제, 다른 UI 요소와의 시각적 충돌 같은 단점도 존재합니다. 따라서 FAB 메뉴는 기능보다 맥락과 흐름이 명확한 상황에서 신중하게 사용해야 합니다.
FAB과 FAB 메뉴는 같은 맥락에서 출발하지만, 하나는 ‘즉시성’, 하나는 ‘선택지’를 제공합니다. 이 둘의 역할과 차이를 명확히 이해하고, 사용자 맥락에 맞게 적절히 선택하는 것이 중요할 것 같습니다.
FAB 메뉴에 대한 더욱 자세한 내용은 아래 가이드에서 확인하실 수 있습니다.
