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

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


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

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

버튼 vs 링크

Image for post
Image for postImage for post

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

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

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

Image for post
Image for postImage for post

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

Image for post
Image for postImage for post

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

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

생각하게 하지 마세요.

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

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

Image for post
Image for postImage for post

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

Image for post
Image for postImage for post

짜증나는 비활성화(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. Watch

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

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store