FAB, Material Design이 만든 그 동그란 버튼

한 줄로

화면 오른쪽 아래에 떠 있는 그 동그란 버튼. 2014년 Google이 발표하면서 모든 안드로이드 앱에 한 번에 퍼졌습니다.

어디서 왔나

2014년 6월, Google I/O 컨퍼런스. Google이 Material Design을 발표했습니다. 종이와 잉크라는 메타포로 안드로이드 전체 디자인 언어를 재구성한 시스템. 그 안에 있던 새로운 컴포넌트가 Floating Action Button, 줄여서 FAB였습니다.

특징은 동그란 모양(사각형 버튼이 아닌), 화면 오른쪽 아래 위치(한 손 엄지로 닿는 영역), 다른 콘텐츠 위에 떠 있음(z-axis로 elevation 4dp), 그림자로 입체감, 한 화면에 하나만(가장 중요한 동작 1개)입니다.

FAB의 의도는 명확했습니다. 각 화면에서 가장 자주, 가장 빠르게 해야 할 동작 하나를 항상 같은 위치에 둠. Gmail에서는 "새 메일", 캘린더에서는 "새 일정", 노트 앱에서는 "새 메모"입니다.

Material Design은 곧 안드로이드의 사실상 표준이 됐고, FAB는 거의 모든 안드로이드 앱에 들어갔습니다. iOS는 별도로 FAB를 표준화하지 않았지만, 일부 앱(Uber, Tinder)이 차용해 크로스플랫폼에서도 흔해졌습니다.

지금 우리가 쓰는 방식

Standard FAB는 단일 동작(40~56dp), Mini FAB는 작은 크기(40dp), Extended FAB는 텍스트가 붙은 가로 버튼("새 일정 +"), Speed dial FAB는 누르면 여러 옵션이 펼쳐짐(Gmail의 답장/전체답장/전달)입니다.

비판도 있습니다. FAB은 화면 콘텐츠를 가립니다. 긴 리스트의 마지막 항목을 가리는 경우가 흔합니다. 해결책으로 스크롤할 때 일시적으로 사라지는 동작이 일반적입니다.

바이브 메이커가 챙길 한 가지

FAB의 핵심은 "가장 자주 누르는 동작 단 하나"입니다. 만약 본인 앱에서 가장 중요한 동작이 뭔지 즉답할 수 없다면, FAB을 만들기 전에 그 질문부터 답해야 합니다. FAB이 없는 것보다, 잘못된 동작이 FAB에 들어간 것이 더 나쁩니다.

관련

Material Design · Fitts's Law · CTA