UX 패턴6분 읽기·Updated 2026년 10월·ExodeUI 팀
플로팅 작업 버튼: FAB를 사용해야 하는 경우 및 애니메이션을 적용하는 방법
플로팅 액션 버튼이 도움이 될 때, 아플 때 화면당 하나의 FAB, 확장된 FAB 및 FAB 메뉴, 스크롤 동작 및 모션.
핵심 요약과 정의
핵심 포인트
작성이나 만들기 등 화면에서 가장 중요한 단일 작업에 플로팅 작업 버튼을 사용하세요. 화면당 하나만 표시하고, 명확한 기본 작업이 없는 화면에서는 건너뛰고, 아이콘만 명확하지 않은 경우 레이블이 있는 확장 FAB를 사용하고, 확장하거나 스크롤할 때 접거나 메뉴를 열 때 의도적인 모션을 유지하세요.
FAB의 목적
Material Design 3은 FAB를 화면의 기본 작업으로 설명하고 한 화면에 여러 FAB를 표시하지 않도록 조언합니다. 또한 이미지가 이미 기본 작업을 나타내는 경우와 같이 모든 화면에 FAB가 필요한 것은 아닙니다.
변형
머티리얼은 여러 가지 형태를 제공합니다.
- 표준 FAB: 작성과 같은 잘 알려진 작업에 대한 아이콘입니다.
- 확장 FAB: 아이콘과 라벨이 더해져 덜 명확한 작업과 더 큰 화면에서 더 명확해집니다.
- 대형 FAB: 눈에 띄는 기본 작업을 위해 태블릿 및 펼쳐진 폴더블과 같은 더 넓은 창에 적합합니다.
- FAB 메뉴: FAB는 짧은 관련 작업 세트를 엽니다.
사용하지 않을 때
주요 작업이 이미 명확하고 중요한 콘텐츠나 컨트롤을 다루는 화면에서 사소하거나 파괴적인 작업의 경우 FAB를 건너뜁니다. iOS에서 FAB는 기본 패턴이 아닙니다. 도구 모음이나 탐색 모음 버튼은 iPhone 사용자에게 더 친숙합니다.
운동
FAB는 사람들이 스크롤할 때 확장에서 표준으로 축소된 다음 다시 확장되는 경우가 많으며 탭하면 시트나 메뉴로 변환될 수 있습니다. 이러한 전환은 작업이 진행된 위치와 해당 콘텐츠의 출처를 설명합니다. 짧게 유지하고, 스크롤할 때마다 튀는 것을 피하고, 움직임이 줄어든 것을 존중하세요.
기억할 핵심 원칙
- 기본 작업을 위해 화면당 하나의 FAB
- 모든 화면에 하나가 필요한 것은 아닙니다.
- 아이콘이 명확하지 않은 경우 확장 FAB를 사용하세요.
- 사소하거나 파괴적인 작업에는 FAB를 피하세요.
- 모션을 사용하여 FAB 콘텐츠의 출처를 표시하세요.
자주 묻는 질문
출처
- FAB guidelines — Material Design 3