버튼 Button - 서비스 기획자의 UI 요소 공부 (1)

좋은 서비스 기획자로 성장하기 위해서는 배워야 하는 것이 많습니다. UI 요소 역시 그중 하나입니다. 의도에 맞게 UI를 세팅하기 위해서는 UI의 특성을 알아야 하고, 자신의 의도를 디자이너와 개발자에게 정확히 전달하기 위해서는 각 UI를 어떻게 부르는지도 공부해야 합니다.

 

버튼

버튼은 가장 기본적인 UI 요소입니다. 사용자는 버튼을 통해 의사를 표시하거나 화면을 전환하고 새로운 정보를 호출합니다. 좋은 버튼은 사용자가 하고자 하는 행동을 자연스럽게 안내하고 그 과정에서 서비스가 원하는 목적, 예를 들면 '구매'를 달성하도록 유도합니다.

 

네이버 스마트스토어 하단 버튼

 

버튼을 보다 세부적으로 나누게 되면, 그 형태와 따라 솔리드 버튼 / 고스트 버튼 / 아웃라인 버튼 / 텍스트 버튼 등으로도 나눌 수 있습니다. '어떤 경우에 어떤 버튼을 사용한다'라는 절대적인 룰이 있는 것은 아니지만 버튼의 유형별로 시각적 계층 구조가 만들어지고, 기획자는 그 계층 구조에 맞게 버튼을 사용할 필요가 있습니다.

 

 

예를 들어, 시각적으로 인지도가 높은 솔리드 버튼을 주요 액션에 사용하고 상대적으로 중요도가 낮은 액션에 텍스트 버튼을 사용합니다. 부수적인 액션 중에서 그래도 가시적으로 사용자에게 인지시킬 필요가 있는 경우 고스트 버튼이나 아웃라인 버튼을 사용합니다. 이를 통해 서비스는 사용자에게 각 액션의 중요도를 직관적으로 제시할 수 있고 자연스러운 사용자 경험을 만들어낼 수 있습니다.

 

네이버 버튼 구성에서 보이는 액션의 계층 구조

 

버튼은 박스와 레이블로 구성할 수도 있지만 레이블 없이 아이콘만 사용하거나, 레이블과 아이콘을 모두 사용해서 구성할 수도 있습니다. 아이콘만 사용하는 버튼의 경우 디자인이 보다 깔끔하다는 인상을 줄 수 있지만, 버튼의 기능을 사용자에게 안내하는 데 어려움을 겪을 수 있으니 유의 깊게 사용성을 체크해보아야 합니다.

 

 

FAB (플로팅 버튼)

FAB (Floating Action Button) 은 스크롤이나 탭 전환 등을 통해 사용자가 화면을 움직여도, 그 위에 떠 있는 것처럼 고정되어 표시되는 버튼입니다. 해당 화면에서 가장 빈번하게 사용되는 과업이나 서비스가 가장 강조하고 싶은 기능이 있을 경우 제공합니다. 메일 어플리케이션의 '메일 작성하기' 액션, 혹은 캘린더 어플리케이션의 '일정 추가' 액션을 플로팅 버튼으로 제공하는 것이 대표적입니다.

 

좌: 네이버메일 우: 구글캘린더

 

플로팅 버튼은 주로 우측 하단에 배치되어 사용합니다. 우측 최하단 구석의 경우 상대적으로 터치가 어려운 구역이지만, 화면에 표시되는 정보를 가리지 않는다는 장점이 있습니다. 만약 우측 최하단에 배치하는 경우 원형 버튼이 아닌 가로로 조금 길게 늘어져있는 버튼을 사용할 경우 보다 터치가 쉬워 사용자 친화적입니다. (ex. Gmail)

 

좌: Gmail 우: 네이버지도

 

흔한 경우는 아니지만 화면 전반을 플로팅 버튼으로 구성하는 경우도 있습니다. 지도 어플리케이션의 경우 화면의 이동이 가장 빈번한 서비스 중 하나이기 때문에 각 요소들을 FAB처럼 제공합니다. 물론 이 경우에도 화면을 최대한 가리지 않도록 배치하여 서비스 이용에 지장을 주지 않도록 하는 것이 중요합니다.

 

참고: 버튼의 상태 / 반응성

플랫폼, 디바이스별로 차이가 있지만 버튼의 상태에 따라 어떻게 버튼을 보여줄 것인지 또는 사용자 액션에 따라 버튼이 어떻게 반응하는 지 정의해두는 것은 기획자가 유의해야 하는 부분입니다. 

 

 

버튼의 활성화된 기본 상태(Normal)와 완료 상태(Active), 비활성화된 상태(Disabled) 등을 지원하는 경우가 많고 마우스를 올려놓은 상태(Hover) 나 눌린 상태(Pressed), 선택된 상태 (Focus) 나 진행 중 상태 (Progress) 를 추가로 제공하는 경우도 있습니다.

 

모바일 디바이스의 경우 마우스를 올려놓은 상태(Hover)나 선택된 상태(Focus)를 지원하기 어렵지만, 완료 상태(Active)나 눌린 상태(Pressed)를 지원해서 사용자로 하여금 자신이 버튼을 제대로 눌렀고 서비스가 그 행동을 인지했음을 알려주는 것이 좋습니다.