플로팅 액션 버튼은 새로운 햄버거 메뉴인가?

구글의 머터리얼 디자인은 꾸준하게 대중적인 웹 디자인의 중심에 서 있습니다. 플랫한 스타일에, 구글의 브랜드 가이드라인으로 디자인된 원칙을 가지고 레이어 기반으로 UI 디자인에 접근하고 있습니다. 

규범적인 컬러 조합, 개성이 절제된 타이포그래피, 디즈니풍의 애니메이션을 제외하고는 머터리얼 디자인의 플로팅 버튼 컨셉은 아마 가장 특징적인 측면의 스타일일 것입니다. 그러나 플로팅 액션 버튼이 햄버거 메뉴를 그대로 따라가는 듯 보인데요, 단 몇 개월만에 구원자에서 천대받는 꼴이 됬다고나 할까요.

플로팅 액션 버튼은 원형에 미니멀한 형태로 콘텐트 위에 둥둥 떠 있습니다. 이것은 원래 지난 몇 년간 유행했던 스티키 헤더sticky header에서 자연스럽게 발전한 것입니다. 플로팅 액션 버튼은 모바일 웹의 급부상에 크게 영향을 받았는데, 엄지 손가락으로 탭하기 쉽도록 스크린 오른쪽 아래에 플로팅 액션 버튼을 놓은 것이죠. 

구글 플러스Google+ 리디자인에서 플로팅 액션 버튼의 사용이란 사용자에게 콘텐츠를 소비하기 보단 포스팅하는 것에 집중하도록 유도하고 있습니다. 또한, 큰 화면으로 갈수록 플로팅 액션 버튼의 정반대편에 있는 나머지 내비게이션으로의 이동과 사용이 불편합니다. 

폰에서 편하게 탭하기 위해 놓여있던 오른쪽 아래의 위치는, 스크린이 커질수록 되려 장애가 되고 있습니다. 이전에 햄버거 메뉴에서처럼 플로팅 액션 버튼에서도 ’모바일-우선 해결책’이 언제나 데스크탑에 적용될 수 없다는 것을 보여줍니다. 

플로팅 액션 버튼의 형태, 위치, 컬러가 다른 UI와 차별화를 주는 것은 확실합니다. 왜냐하면 현재 트렌드인 플랫, 세미-플렛, 머터리얼 디자인의 스타일의 요소들이 주로 사각형을 이루기 때문이죠. 그러나 확실히 알아야 할 부분은 플로팅 액션 버튼이 단지 페이지에서 시각적으로 눈에 잘 띄어보이려고 할 뿐이지, 넓은 범위에서 서로 다른 프로젝트끼리 시각적으로 구별짓지는 못한다는 것입니다. 

머터리얼 디자인은 가장 선두에 있는 기업 브랜드인데 고객 비지니스의 핵심 자산 중 하나인 브랜드 아이덴터티에 구글의 디자인을 차용하거나 흉내낸다면, 고객 비지니스에 그닥 좋은 가치를 부여하지는 못할 것 같습니다.  

VK플레이어 앱은 토글 컨트롤로서 플로팅 액션 버튼을 사용하고 있는데요, 보기에는 좋아보이지만 플레이/멈춤 버튼이 최상위 액션이어야 하지 않나요?

'머터리얼 디자인 설명서'에 따르면 플로팅 액션 버튼은 숏컷으로써 페이지의 최상위 액션으로 사용되어야 한다고 명시되어 있습니다(새로운 아이템을 추가하거나, 새로운 검색을 개시). 이러한 시나리오라면 기능을 위한 아이콘은 비교적 표준에 해당하며, 버튼이 가지고 있는 액션은 잘못된게 없습니다. 그러나 각각의 개별 아이콘은 자주 기능을 적절히 표현하지 못합니다. 

더 큰 문제점은 개별 사용자에게 사이트나 앱의 사용빈도를 줄이게 만든다는 겁니다. 테오 유 시앙Teo Yu Siang의 '플로팅 액션 버튼의 세부 비평'을 보면, 플로팅 액션 버튼의 사용은 디자이너의 의도를 사용자에게 강요하는 것이라고 말합니다. 이것은 사용자가 메일을 읽고 싶을 때에도 메일을 작성하게 유도한다거나, 예전 이미지를 다시 보고 싶을 때에도 새로운 이미지를 업로드하게 유도한다는 것이죠. 

플로팅 액션 버튼이 편리함을 위해 의도적으로 UI에서 최상위 액션으로 나온 것인데요, 그러나 만약 UI가 최상위 액션을 필요할 때에는 왜 거기에 더 집중하지 않았을까요?

비짓Beegit은 플로팅 액션 버튼을 도움 메시지와 뉴스 업데이트로 사용자가 빠르게 접속할 수 있도록 사용하고 있습니다. 이것이 바로 페이지 상에서 최상위 기능을 올바르게 사용한 예가 아닐까요? 

흔히 디자인계에서 하는 말로, "잘못된 디자인 패턴은 없다, 오직 잘못된 디자이너만 있을 뿐이다."인 거죠. 햄버거 메뉴에서 처럼, 플로팅 액션 버튼도 좋은 사용사례를 가지고 있습니다. 그러나 그러한 사용사례는 흔히 있지 않습니다. '플로팅 버튼에 관한 머터리얼 디자인 섹션'에서 플로팅 액션 버튼은 "중요하고 보편적"이어야 한다라고 명시되어 있지만, 실상은 주로 스타일 위주로 사용되고 있는게 현실입니다.

햄버거 메뉴처럼, 플로팅 액션 버튼도 사용자가 아닌 디자이너가 가진 문제를 해결하기 위해 존재하는 것 같습니다.

원문: "Is the floating action button new hamburger menu?" by Benjie Moss

Refresh Studio

해외 최신 웹/모바일/UX 디자인 글과 동향을 소개해 드립니다.