기본 요소! 버튼 디자인 어떻게 하면 좋을까?

버튼 디자인은 웹디자인에서 가장 기본적인 UI 요소로 좋은 버튼 디자인을 만들기 위해서 사용자가 웹에서 하고자 하는 행동을 빠르게 이해하고 실행할 수 있도록 설계되어야 합니다.

버튼과 UI 컴포넌트 설계에서는 모양뿐 아니라 누르기 전과 실행 중, 완료와 실패의 상태를 함께 정합니다. 같은 저장 버튼도 사용자가 지금 다시 눌러도 되는지 알 수 있어야 합니다.

Part1:버튼 디자인이란

버튼(Button)은 웹디자인에서 가장 기본적인 UI 요소입니다. 사용자는 버튼을 통해 의사를 표시하거나 화면을 전환하고 새로운 정보를 호출합니다.

좋은 버튼 디자인은 사용자가 하려는 행동과 실행 결과를 명확하게 안내합니다.

또한 버튼 디자인은 어떤 경우에 어떤 버튼을 사용해야 한다는 절대적인 룰은 없지만 일반적으로 버튼은 유형별로 시각적 계층 구조를 만들어야 합니다. 기획자는 이러한 버튼의 계층 구조에 맞게 버튼을 사용해 웹 또는 앱을 설계해야 합니다.

Part2:버튼 디자인의 트렌드

물리 버튼이 줄고 제스처로 이동하는 기기가 늘어도, 화면 안의 버튼이 불필요해지는 것은 아닙니다. 현재 화면에서 할 수 있는 행동과 그 결과를 눈에 보이게 제시하는 역할은 여전히 중요합니다.

이러한 변화는 사용자 인터페이스를 설계하는 방식에도 영향을 주었습니다. 메시지를 삭제하거나 페이지를 새로고침할 때 버튼이 아닌 제스처를 기반으로 간단한 애니메이션을 추가하는 등 변화가 시작되었습니다. 웹디자인 역시 UX에 대한 본질적인 관점의 변화를 필요로 하며, 보다 창의적이고 현대적이며 효과적인 UI설계를 요구하게 되었습니다.

  어도비(Adobe)에서 운영하는 온라인 크리에이티브 커뮤니티 비핸스에서 발표한 2022년 디자인 트렌드에서는 버튼 디자인에서 디테일에 대한 주의가 필요하다고 언급했습니다. 버튼, 아이콘, 로딩 등 작은 디테일이 디자인의 성패를 좌우하기 때문입니다.

뒤로 가기 같은 탐색 방식은 기기와 사용자 설정에 따라 다릅니다. 제스처만으로 중요한 작업을 수행하게 하기보다, 지원하는 입력 방식에서 같은 행동에 접근할 수 있는지 확인해야 합니다.

   2022년 모바일 앱 UI 디자인 아이디어 Top 10에서는 버튼 디자인에서 그라디언트(Gradient)를 언급합니다. 일반적으로 앱디자인에서 버튼과 앱의 배경에 그라디언트를 사용하고 있으며, 앱의 중요한 요소를 강조하고 시각적 위계를 구분하는 데 도움을 줍니다.

  모바일 앱 디자인의 투명한 요소는 깊이를 보여주고 특정 앱 부분에 대한 관심을 유도해 디자인을 더 명확하고 매력적으로 만듭니다. 또한 버튼에 그라디언트를 적용해 화면에서 돋보이게 할 수 있습니다.

Part3:버튼 디자인 설계 기법

1. 버튼은 버튼처럼 보이게 디자인합니다.

사용자들은 ‘시각적인 단서’를 통해 클릭할 수 있는 버튼인지 아닌지 알아보게 됩니다. 때문에 적절한 ‘시각적 시그니파이어(visual signifiers)’를 사용하는 게 중요합니다. 가장 안전한 버튼 모양은 오래전에 도입되어 사용자에게 익숙한 사각형이나 둥근 사각형입니다.

무엇보다 인터페이스 전반에 걸쳐 버튼 디자인의 일관성을 유지하여 사용자가 버튼으로 인식할 수 있게 해주는 것이 가장 중요합니다.

2. 명확하고 분명한 레이블을 붙여야 합니다.

사용자는 명확하지 않은 인터페이스 요소는 피하려 합니다. 때문에 모든 버튼에는 적절한 레이블이나 아이콘을 붙여야 사용자가 어떤 액션을 하는 버튼인지 쉽게 이해할 수 있습니다.

버튼 레이블에는 사용자가 수행할 행동을 동사로 명확하게 표현하는 것이 중요합니다. 예를 들어 네이버에서 회원가입을 할 때 하단에 “가입하기” 버튼을 쓰면 버튼을 눌렀을 때 어떤 결과가 나오는지 사용자가 명확히 알 수 있습니다.

3. 사용자가 찾을 수 있는 곳에 버튼을 배치시켜야 합니다.

네이티브 앱(Native App)을 디자인한다면, 버튼의 적합한 위치와 순서를 선택할 때 플랫폼 GUI 가이드라인을 따라야 합니다. 사용자의 기대에 맞는 일관성 있는 디자인을 적용해야 사용자의 시간을 절약해 줄 수 있기 때문입니다.

반면, 웹 기반에서는 어디에 버튼을 놓는 것이 사용자에게 가장 좋은지 테스팅을 통해 알아봐야 합니다.

4. 적절한 사이즈로 버튼을 만들어야 합니다.

버튼 디자인에서 버튼의 사이즈와 간격은 사용자가 버튼과 상호작용을 할 때 핵심적인 역할을 합니다. 버튼의 사이즈는 페이지에 있는 다른 요소와도 조화를 이루어야 하지만 동시에 사용하는 사람이 상호작용하기에도 충분히 커야 합니다.

WCAG 2.2의 최소 타깃 크기 기준(영어)은 예외를 제외하고 포인터로 조작하는 영역에 최소 24×24 CSS px를 요구합니다. 간격 등의 예외 조건도 있으므로 숫자만 비교하지 말고, 실제 클릭 영역과 인접 버튼 사이의 관계를 확인하세요. 작은 아이콘이라도 클릭할 수 있는 영역은 더 넓게 설계할 수 있습니다.

또한 버튼의 간격은 두 컨트롤을 분리시켜주고 인터페이스에 숨 쉴 공간을 줍니다.

5. 비주얼 피드백을 제공해야 합니다.

버튼은 여러 상태를 가지므로 현재 상태를 구분할 수 있는 시각적 피드백을 제공해야 합니다. 아래 그림은 기본, 포커스, 누름, 비활성화 상태를 비교합니다. 버튼 위에 마우스를 올렸을 때 혹은 활성화되었을 때 버튼의 상태를 다르게 보여주는 것을 고려해야 합니다.

저장 버튼은 실행 결과까지 하나의 흐름으로 설계합니다.

설정을 수정한 뒤 저장하는 화면이라면, 사용자는 입력값이 서버에 반영되었는지 알아야 합니다. 아래 상태를 같은 버튼과 안내 영역으로 연결해 보세요.

Pixso에서 이 상태들을 컴포넌트의 배리언트로 정리하고, 저장 전후 화면을 비교합니다. 실패 후에도 입력값이 남는 화면을 함께 두면, 개발자에게 단순한 버튼 색상표가 아니라 복구 동작을 전달할 수 있습니다.

6. 가장 중요한 버튼은 시각적으로 강조합니다.

행동유도 버튼 (Call to Action Button) 같은 중요한 버튼은 배경과 대비되는 색상을 이용합니다. 사용자가 이용하는 경로에 배치해서 디자인되어야 합니다. 예를 들어 아래 지메일UI를 살펴보면, 보내기 버튼에는 파란색을 사용하고 본문 하단에 배치해 본문 작성을 끝내고 나면 바로 인지할 수 있도록 만들었습니다. CTA버튼에 대해 더 알고 싶다면, 이 <중요! 더 많은 클릭을 부르는 CTA 버튼 놓치면 안 돼!>글을 보고 더 많은 지식을 얻을 수 있습니다.

7. 너무 많은 버튼을 사용하지 마십시오.

이는 많은 앱과 웹사이트에서 공통적으로 발생하는 문제입니다. 너무 많은 옵션을 제공하면 사용자는 아무것도 하지 않게 됩니다. 앱이나 웹에서 버튼 디자인을 할 때 사용자가 해야 할 가장 중요한 작업에 대해서만 생각해 보세요.

8. 사용하기 좋은 도구를 선택해야 합니다.

Pixso에서는 버튼의 크기, 간격, 텍스트와 상태별 외관을 같은 파일에서 정리할 수 있습니다. 실제 서비스에 사용할 짧은 문구와 긴 문구를 넣고, 기본·포커스·실행 중·실패 상태를 함께 비교해 보세요. 팀원은 해당 버튼에 댓글을 남겨 라벨과 동작을 검토할 수 있습니다.

무료 이용

결론

버튼 디자인은 매우 간단한 UI 요소처럼 보이지만 가장 중요한 요소 중에 하나입니다. 사용자 경험(UX)을 개선해주는 효과적인 버튼 디자인을 만들기 위해서는 기본적인 설계 기법을 활용해야 합니다. 특히 명확하고 분명한 레이블, 버튼스러운 모양, 적절한 사이즈와 간격, 사용자가 찾기 쉬운 위치와 순서 등을 버튼 디자인에 반영해야 합니다. 그리고 작업에 맞는 도구도 선택해 보세요. Pixso에서 버튼의 모양과 상태를 만들고 팀과 함께 검토할 수 있습니다.