UX 디자인의 플로팅 액션 버튼(Floating Action Button)

*잠깐, 이 글을 소개해드리는 위시켓은 2019년 시밀러웹 방문자 수 기준, 국내 1위 IT아웃소싱 플랫폼입니다. 현재 9만 이상의 개발업체, 개발 프리랜서들이 활동하고 있으며, 무료로 프로젝트 등록이 가능합니다. 프로젝트 등록 한 번으로 여러 개발업체의 견적, 포트폴리오 예상기간을 한 번에 비교해보세요📝

‘플로팅 액션 버튼'(FAB)은 안드로이드 앱에서 매우 흔히 사용되는 컨트롤입니다. UI 위의 둥근 아이콘의 형태로, 앱의 제품 이야기의 핵심 부분을 호출할 수 있는 디자이너를 위한 도구입니다. ‘플로팅 액션 버튼'(FAB)는 UI 구성 요소들을 구현하기 꽤 단순하고 쉽지만, 현실에서 디자이너들은 흔히 ‘플로팅 액션 버튼’FAB를 디자인에 잘못 통합하고는 합니다.

이 글에서 여러분은 다음 질문에 대한 답을 찾을 수 있을 것입니다.

FAB를 언제 사용해야 하는가?
FAB의 모범 사례들(best practices)
UX를 향상시키기 위해 FAB와 애니메이션이 어떻게 함께 작동할 수 있는가?

FAB를 언제 사용해야 하는가?

특징적인 행동(Hallmark actions)을 위해

‘플로팅 액션 버튼'(FAB)는 가장 관련성이 높거나 자주 사용되는 동작을 강조해줍니다. 이는 앱의 강력한 특징을 나타내는 동작에 사용되어야 합니다. 이상적으로 봤을 때, ‘플로팅 액션 버튼'(FAB)는 아래 예시에 나타난 것처럼 전체 앱의 핵심 기능을 대표해야 합니다.

‘플로팅 액션 버튼'(FAB)는 앱에서의 주요 동작을 대표합니다. 이 화면에서 재생의 멈춤 혹은 재개는 사용자들에게 이 앱이 음악 앱이라는 걸 알려줍니다.

길 찾기 도구로 사용

‘플로팅 액션 버튼'(FAB)는 사용자들에게 다음 해야 할 것을 알려주기 위한 자연스러운 신호입니다. Google의 연구조사에 따르면, 낯선 화면을 마주하면 많은 사용자들이 탐색하기 위해 ‘플로팅 액션 버튼'(FAB)를 사용한다고 합니다. 따라서 ‘플로팅 액션 버튼'(FAB)는 중요한 작업의 이정표로서 매우 유용합니다.

트위터는 FAB를 ‘트윗 작성’ 작업을 위해 활용합니다.

모든 화면이 FAB를 필요로 하는 것은 아니다.

‘플로팅 액션 버튼'(FAB)는 다채롭고, 인기를 얻고 있으며, 규격을 깨고 있습니다. 이 버튼을 발견하는 것은 그리 어렵지 않고, 이는 FAB가 눈에 띄도록 디자인되었기 때문입니다. 그러나 모든 화면에 이런 중요한 작업이 존재하는 것은 아니라는 점에서 모든 화면이 FAB를 사용해야 하는 것은 아닙니다.

언제나 FAB를 사용하는 것은 아닙니다. FAB는 중요한 작업만을 위한 것입니다!

하나의 좋은 사례는 안드로이드의 Google Photos 앱입니다. 앱은 갤러리 보기에서 열리고, 검색을 위한 FAB를 제공합니다. 이 FAB에는 2가지 문제점이 있습니다.

검색(Search)은 대부분의 사용자들을 위한 추가 작업입니다. 주요 작업은 사진 탐색(browsing)입니다. 따라서 이 FAB는 불필요합니다.
FAB의 존재는 주의를 산만하게 하고 주요 콘텐츠인 사진들에게서 사용자의 주의를 멀어지게 할 수 있습니다.

검색(Search)은 Google Photos에서 할 수 있는 추가 작업이고, FAB가 필요하지 않습니다.

팁: 화면에서 주요 작업이 무엇인지를 파악하는 것은 처음 보이는 것보다 훨씬 어려울 수 있습니다. 작업을 단순화하고 UI에 FAB가 필요한지 이해하기 위해 간단한 5분 규칙을 따라해보세요: 화면의 주요 작업이 무엇인지 찾는 것에 5분 이상을 사용했다면, 해당 화면에서는 FAB가 필요하지 않음이 분명합니다.

FAB의 모범 사례

미스터리 미트 네비게이션(Mystery meat navigation) 피하기

“Mystery meat navigation”이라는 용어는 Web Pages That Suck라는 유명한 웹사이트 제작자 Vincent Flanders에 의해 도입되었습니다. 이는 어떤 작업을 수행하는지를 설명해주지 않는 버튼이나 링크를 뜻합니다. 대신에 사용자들은 해당 버튼이나 링크를 눌러서 확인해봐야 합니다.

FAB는 아이콘 전용 버튼이고 문제는 아이콘이 다중 해석의 여지가 있기 때문에 이해하기 매우 어렵다는 점입니다. NNG가 지적하듯, 보편적으로 같은 의미로 인식되는 아이콘은 드뭅니다. 예를 들어, 여러분은 아래 예시에 나타난 버튼이 무엇을 의미하는지 추측할 수 있나요?

여기서 FAB는 무엇을 의미할까요?

눌러서 확인하기 전까지는 알 수 없습니다. 그리고 사용자가 추측해야 한다면, 여러분이 만든 버튼은 미스터리 미트(mystery meat)인 것입니다. 누군가는 아이콘의 의미를 파악하는 것에 소요되는 시간은 매우 짧고 예상 가능한 위험은 매우 낮다고 할 수 있습니다. 그렇습니다, 눌러서 아이콘의 의미를 파악하는 것에 소요되는 시간은 매우 짧을 수도 있습니다. 그러나 인지적 부조화(cognitive load)가 발생합니다.

사용자는 그 아이콘이 무엇을 의미했는지를 기억해야 합니다.

여기에 모든 앱에 존재하는 모든 미스터리 미트 아이콘을 곱하게 되면, 이는 결코 작은 노력이 아닙니다. 아이콘 전용 버튼을 사용하는 것은 허용되지만, 해당 버튼이 맥락 상 관련성이 있고 사용자들이 명확히 이해할 수 있는 경우에만 허용됩니다. 예를 들어, 메모장 앱이 있을 때 이 앱의 주요 목적은 메모를 작성하고 보는 것임이 매우 분명합니다. 그리고 이 맥락에서는 ‘펜’ 아이콘이 매우 적절하게 들어맞을 것입니다.

화면 당 단 하나의 FAB를 사용하기

FAB는 눈에 너무 잘 띄고 방해가 될 수도 있기 때문에, FAB는 한 페이지 당 한 번만 사용되거나 아예 사용되지 않아야 합니다.

화면 당 한 개를 초과하여 FAB를 사용하지 맙시다.

FAB를 긍정적 작업을 위해서만 사용하기

FAB는 특징이 있기에 일반적으로 생성, 공유, 탐색 등 긍정적인 작업을 수행하기 위해 사용됩니다. FAB는 삭제 혹은 보관 같은 파괴적인 작업이어야 합니다. FAB는 구체적이지 않거나 경고 작업에 사용되면 안되고, 잘라서 붙여넣기와 같은 제한적 작업에도 사용되면 안되며, 볼륨 변경처럼 도구모음(toolbar)에 있어야 하는 작업에도 사용되면 안됩니다.

해당 기능은 사용자가 FAB 사용을 긍정적으로 느끼고 무언가 잘못될까봐 절대 걱정하지 않아도 되는 작업에 사용되어야 합니다.

FAB와 애니메이션

FAB는 유연하게 디자인되었습니다. FAB는 확장, 변형, 반응이 가능합니다.

일련의 작업들로 확장하기

어떤 경우엔, 아래 Evernote 사례에서 볼 수 있는 것처럼 버튼이 회전해서 몇가지 다른 옵션들을 표시하는 것이 적절합니다. FAB는 일련의 보다 구체적인 작업으로 대체할 수 있고 FAB를 사용자들에게 있어서 맥락에 적합하게 설계할 수 있습니다. 그러나 다음 사항에 유의해야 합니다.

이러한 작업들은 FAB 자체가 표현하는 주요 작업과 관련되고 서로 관련되어야 합니다. 이렇게 공개된 작업들은 도구 모음에 배치될 경우 가능한 독립적인 것으로 취급하지 말아야 합니다.
일반적인 규칙으로, 원래의 FAB 대상을 포함하여 누를 때 3개 이상 6개 이하의 옵션을 갖도록 설정해야 합니다.

관련 작업을 내보내는 FAB입니다.

FAB는 새로운 표면(surface)으로 모핑(morph) 할 수 있습니다.

FAB는 단순히 둥근 버튼이 아니고, 이는 사용자가 화면과 화면 사이를 쉽게 이동할 수 있게 돕기위해 사용할 수 있는 몇가지 변형적인 특성입니다. FAB는 앱 구조의 일부인 보기(views)로의 변환이 가능합니다.

FAB는 화면 간의 전환을 개선할 수 있습니다.

FAB를 모핑(morphing)할 때, 시작 위치와 종료 위치 사이를 논리적인 방식으로 전환합니다. 예를 들어, 아래 예시에 나타나는 애니메이션은 사용자의 방향 감각을 유지하면서 사용자가 화면의 레이아웃에서 방금 발생한 변화, 변화를 촉발한 요인, 그리고 필요한 경우 그 변화를 또 일으키는 방법을 사용자가 이해할 수 있도록 도와줍니다.