by
Sep 12. 2023
화면에 항상 노출되는 중요한 기능, 플로팅 버튼
알아두면 쓸 곳 있는 UI 가이드 - 1
서비스 기획자, 프로덕트 매니저의 핵심 능력은 이해관계자와의 원활한 커뮤니케이션이다. 개발자와 대화를 하든, 디자이너와 대화를 하든, 대화의 상대가 누구든 간에 그들의 언어를 해석하고 자신의 의도를 정확하게 전달할 수 있어야 한다.
제품 개발 프로세스의 끝에서 산출물을 잘 만들어 내기 위해서는 어떻게 해야 할까? 기획자 자신이 정의한 문제의 해결방안 혹은 검증하고 싶은 것을 개발자와 디자이너에게 명확하게 전달할 수 있어야 한다. 그래서 우린 이를 위해 화면을 설계하기도 하며, 디자이너, 개발자와 함께 회의실 티브이에 디자인을 띄워놓고 논의를 가지기도 한다.
결국 좋은 기획자가 되기 위해서는 UI에 대해서도 얘기를 할 수 있어야 한다. 단순히 디자이너의 모든 요구를 수용하는 것이 아닌, 개발 가능한 스펙과 이상적인 디자인 사이에서 아슬아슬한 줄타기를 잘해야 할 필요가 있다. 가령 토스트메시지와 알럿 모달 중 무엇이 더 상황에서 적절한 인터랙션인지, 텍스트 필드와 텍스트 에어리어 중 무엇이 더 적합한 사용자 경험인지와 같은 것들을 디자이너뿐 아니라 기획자도 판단할 수 있어야 한다.
즉, 기획자도 UI를 알아야 한다.
그래서 시작한 '알아두면 쓸 곳 있는 UI 가이드'.
나도 복기할 용도로 작성해 보려고 한다.
첫 번째 포스팅은 플로팅 버튼(Floating Action Button, FAB) 컴포넌트에 대한 것이다.
플로팅 버튼 ⓒ 327roy플로팅 버튼
플로팅 버튼이란?
플로팅 버튼 혹은 플로팅 액션 버튼(Floating Action Button)이라고 부른다. 이름의 유래는 상당히 직관적이다. 일반적으로 앱의 주요 인터페이스 위에 버튼이 둥둥 떠있게Floating 디자인되었기 때문이다.
즉, '플로팅'이라는 이름은 버튼이 화면 위에 떠 있는 것처럼 보이게 디자인을 의미하고, '액션 버튼'은 버튼을 통해 주요 액션을 사용자가 쉽게 수행할 수 있게 제공한다.
언제 사용해야 할까?
특정 행동 유도
네비게이터
1. 특정 행동 유도
보편적으로 플로팅 버튼은 서비스와 가장 관련이 높거나, 자주 사용하는 기능을 강조한다. 따라서 플로팅 버튼은 해당 서비스의 가치를 전달하기 위해 가장 핵심이 되는 기능을 사용자에게 제공한다.
가령 대표적인 메일 서비스, '지메일'의 경우 '편지쓰기' 기능을 플로팅 버튼으로 제공하고 있다. (다들 모바일 앱에선 메일을 작성하기보단 메일을 보기 위해 사용하는 것 같지만..)
ⓒ Gmail
'네이버지도'의 경우 내가 북마크한 '이 주변 저장 장소'를 플로팅 버튼으로 제공하고 있다. 해당 버튼을 클릭하면 내가 저장한 주변의 장소 리스트를 제공하는 Bottom Sheet가 올라온다.
ⓒ 네이버지도단, PC의 플로팅 버튼과 모바일 앱의 플로팅 버튼은 목적이 다를 수 있다. 모바일 앱과 유사하게 PC에서도 사용자의 특정 행동을 유도하는 버튼도 존재하지만, 단순 사용자 편의를 위한 '소통창구'로써 버튼을 사용하는 경우도 존재한다.
PC의 화면이 넓기 때문에, 플로팅 버튼이 모바일 앱에서 보다 눈에 덜 띄고, 이로 인해 중요도가 낮아지는 것을 원인으로 추측하고 있다.
ⓒ 채널톡2. 네비게이터
플로팅 버튼은 사용자들의 경험을 보다 매끄럽게Seamless 만들어 주기 위해 존재한다.
가령 1) 사용자가 스크롤을 하단으로 내렸다가 다시 상단 메뉴를 보는 시나리오나 2) 페이지 최하단을 보기 위해 스크롤을 내리는 시나리오를 말할 수 있다.
ⓒ 네이버 앱보통 이 경우 화면 우측 하단에서 클릭하면 페이지의 최상단 혹은 최하단으로 이동시켜 주는 화살표 모양, 혹은 TOP/DOWN이 적힌 플로팅 버튼을 많이 사용한다.
사소한 기능이지만 사용자가 해야 하는 행동을 도와주며 서비스의 사용자 경험을 높이고, 서비스 내 다른 기능을 사용할 수 있는 가능성을 증가시켜 준다.
플로팅 버튼의 특징
1. (모바일의 경우) 주로 엄지가 닿기 쉬운 위치(Thumb zone)에 존재한다.
2. 디자인적으로도 서비스 내에서 사용하는 보편적인 버튼과 차이를 두며 다른 UI 요소보다 눈에 띈다. 보통 동글동글하고, 우측하단에 그림자가 진 버튼으로 존재한다.
3. 하나의 화면에 하나의 플로팅 버튼만 사용하는 것이 좋다.
4. 플로팅 버튼에는 두 가지 유형이 존재한다.
- 클릭 시 기능이 즉시 동작하는 타입
- 확장되는 타입: 가끔 옵션처럼 여러 기능을 제공하는 경우가 나을 때도 있다. 이때는 보통 3~6개 정도가 적절하다고 한다.
확장 타입 플로팅 버튼 ⓒ 구글 드라이브, 네이버박스