버튼 디자인 — UI 컴포넌트 시리즈

Dong-gri
Dong-gri
Apr 26 · 13 min read
Image for post
Image for postImage for post


“버튼을 누르면, 알아서 사진을 찍어줍니다.” — Kodak 카메라는 매력적인 문구를 직접적으로 소비자에게 드러냈습니다.

(덧붙임) 과거의 카메라는 조리개, 초점, 셔터스피드를 일일히 조정해야 했지만 Kodak 카메라는 버튼하나로 이를 알아서 해준다는 점에서 위 문장을 이해하면 좋을것 같습니다.

Image for post
Image for postImage for post
버튼의 기원 — 옷의 단추부터 시작해 물리적인 버튼, 스크린 상의 버튼으로 진화되었습니다.

버튼 vs 링크

버튼은 사용자가 수행하려는 동작을 나타내고 전달합니다. 보통 대화상자(Dialogs), 양식(Forms), 툴바(Toolbars) 등에 위치하며 버튼과 링크의 차이는 아래와 같습니다.

  • 버튼은 주로 제출(Submit), 병합(Merge), 새로 만들기, 업로드와 같은 특정 작업(혹은 행동)을 수행할 때 사용합니다.
Image for post
Image for postImage for post

버튼의 상태(States)는 사용자에게 현재 어떤 상태인지를 알려줍니다.

버튼에 올바른 인터렉션과 스타일을 만드는 것은 디자인 프로세스에서 가장 중요한 부분 중 하나 입니다. 버튼의 상태(States)는 다른 상태와 주변 레이아웃과 명확히 구별되게 디자인 되어야 하며, 구성 요소를 크게 변경하거나 시각적인 방해요소를 만들어서는 안됩니다.

Image for post
Image for postImage for post
버튼의 6가지 상태(States)들

버튼은 다양한 색상, 모양 및 크기로 제공됩니다.

버튼의 가장 흔한 디자인은 모서리가 있는 스타일로, 쉽게 식별할 수 있고 입력 필드(input)옆에서도 잘 보입니다. 버튼에 적합한 스타일을 정하는 것은 디자인 대상의 목적, 플랫폼 및 지침에 따라 다릅니다. 가장 많이 사용되는 스타일은 다음과 같습니다.

Image for post
Image for postImage for post

버튼의 스타일은 동작 수행의 중요성을 알립니다.

버튼의 스타일을 통해 중요도를 구분하기 위해서 혹은 다양한 선택지가 있다는 것을 사용자에게 알려주는 일련의 힌트를 제공할 수 있습니다. 일반적으로 로 가장 눈에 띄는 버튼 (보통 이러한 스타일은 primary라고 말함)과 중간단계의secondary, 더 낮은 단계인 tertiary을 사용합니다.

Image for post
Image for postImage for post

기본값이 없는 버튼도 있습니다.

보통 가장 일반적으로 선택(혹은 사용)되는 버튼을 “default”(primary)로 두고 눈에 띄는 강조상태로 두어 행동을 유도하세요. 이는 대다수의 사용자가 작업을 더 빨리 완료하고 올바른 행동을 할 수 있도록 도와줍니다.

Image for post
Image for postImage for post
Approve를 강조스타일인 “default”(primary)로 두어 행동을 유도하는 모습

생각하게 하지 마세요.

Don’t Make Me Think (사용자를 생각하게 하지 마!)는 사용성 엔지니어 Steve Krug의 책 제목입니다. (덧붙임 — 실제로 최근 국내에서도 인기가 많습니다.) 책에서 강조하는 점 중 하나는 퍼즐이나 미로를 만들지 않고 사용자에게 인터페이스를 명확하게 전달하는 것이 중요하다는 것입니다. 버튼은 과거부터 시작해 지금까지 다양한 기기들에 적용되면서 어떻게 보이고 작동하는지에 대한 관습이 형성되어 있습니다. 관습(원문에선 표준)으로 보여지는 것과 크게 다르다면 사용자는 버튼을 인식하는데 시간이 오래걸리고 혼란을 겪게 됩니다.

Image for post
Image for postImage for post
버튼은 버튼다워야 인지하기 쉽습니다.

일관성은 속도와 정확성을 향상시킵니다.

Image for post
Image for postImage for post

원활한 클릭을 위해 버튼을 충분히 크게 만드세요.

버튼은 쉽고 간단하게 누를 수 있어야 합니다. 사용자가 버튼을 실수로 누르지 못하거나 근처 다른 요소를 누르게 된다면 시간이 낭비되고 부정적인 경험이 쌓이게 됩니다.

Image for post
Image for postImage for post

접근성을 위한 디자인

버튼 뿐만 아니라 모든 구성요소에 접근성을 고려해 디자인 해야합니다. 바로 위에 언급된 버튼의 크기는 접근성에 영향을 미치는 요소 중 하나였습니다. 이외에 글꼴의 크기, 색상, 대비도 있습니다. 접근성을 충족하는지 확인하는 측정하는 다양한 도구들이 있습니다.

Image for post
Image for postImage for post

제스처는 생각보다 많은곳에 적용되어 있습니다.

제스처는 사용자가 터치를 사용해 어플리케이션과 상호작용 할 수 있도록 도와줍니다. 기본적인 터치에서 진화된 다양한 방법(단순 클릭이 아닌 더블클릭, 스와이프 등)을 사용하면 작업을 수행하는데 있어 시간을 절약하고 다체로운 터치제어가 가능해집니다.

Image for post
Image for postImage for post

좋은 버튼 디자인은 사용자의 행동을 유도하는 이름을 사용합니다.

버튼의 이름(=label)은 버튼의 디자인 만큼 중요합니다. 잘못된 이름을 사용하면 사용자가 혼란스러워하고 시간 낭비와 실수가 발생할 수 있습니다.

Image for post
Image for postImage for post

확인/취소 또는 취소/확인, 두 버튼의 위치는 어느쪽이든 상관없습니다.

둘다 선택지일 뿐이며, 디자이너들은 자신의 선호도에 따라 몇시간 동안 논쟁 할 수 있습니다.

  • [취소/확인]
    “확인”을 마지막에 위치시키면 흐름이 개선됩니다. 이전, 다음과 같이 왼쪽에서 오른쪽으로 흘러가는 측면에서 보면 취소 다음에 “확인”이 오는 것이 적절하게 여겨집니다. 또한 사용자가 최종 “확인”버튼을 누르기 전에 모든 옵션을 검토함으로써 실수와 급한 결정을 막을 수 있습니다.
    Apple은 이러한 방식 사용
Image for post
Image for postImage for post

짜증나는 비활성화(Disabled) 버튼

모두가 이런 상황을 한번쯤 겪어봤을 겁니다. 화면에 몇 초 또는 몇 분동안 Disabled된 상태로 머물러져 있는 이유가 무엇이고, 이를 다시 활성화 하려면 어떻게 해야하는지를 모른체 해메는 경우를요.

Image for post
Image for postImage for post

번역 후기

처음 가볍게 훌터 봤을 때 브랜드의 기원(자기의 가축을 표시하기 위해 불도장을 만든것 부터 시작)과 같은 내용이 있을것 같아 번역을 시작했는데 뒤로 갈 수록 그러한 내용이 아니라서 실망했으나 좋은 내용이 많아 번역하면서 도움이 되었습니다.

guleum

Dong-gri LAB

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight.

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox.

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month.

Get the Medium app