UI/UX 버튼 종류; Button States

버튼 상태(Button State)가 중요한 이유

버튼은 사용자 인터페이스(UI) 디자인에서 핵심적인 요소입니다. 잘 설계된 버튼은 사용자가 어떻게 상호작용해야 하는지 직관적으로 이해할 수 있도록 돕습니다. 버튼의 레이블(문구)도 중요하지만, 버튼의 상태(state) 를 시각적으로 명확하게 전달하는 것 또한 매우 중요합니다.

 

UI/UX 디자인을 하다 보면 버튼을 수없이 많이 사용하게 됩니다. 이 글에서는 버튼의 상태(state) 와 함께, 자주 사용되는 버튼 스타일(button style) 에 대해서도 정리해보겠습니다.

 

---

버튼의 기본 상태 6가지

버튼은 다양한 상태를 가지며, 각 상태는 사용자에게 현재 가능한 행동이나 시스템의 피드백을 알려주는 역할을 합니다.

출처: Nielsen Norman Group

 

상태명사용 시점시각적 특징:

 

Enabled	사용자가 클릭 가능한 기본 상태	또렷한 색상, 명확한 형태로 표시되어 사용 가능함을 나타냅니다.
Disabled	아직 클릭할 수 없는 상태	색상을 흐리게 처리하여 비활성 상태임을 명확히 전달합니다.
Hover	마우스가 버튼 위에 올라갔을 때	색상 변화나 그림자 효과 등으로 버튼이 반응하고 있음을 보여줍니다.
Focus	키보드로 탭(Tab) 이동 시 현재 위치	테두리 강조, 아웃라인 등으로 초점이 있는 요소를 표시합니다.
Pressed	버튼을 누르는 순간	색이 어두워지거나 눌린 효과로 ‘클릭 중’임을 시각적으로 표현합니다.
Loading	작업이 처리 중일 때 (예: 제출 중)	버튼 내 로딩 아이콘(스피너)을 표시하고, 임시로 비활성화됩니다.
Selected	선택 상태가 유지되는 버튼 (예: 필터)	색상 변화나 강조 효과로 현재 선택된 상태임을 전달합니다.

 

디자인을 할 때는 기본적으로 enabled, hover, focus 세가지를 가장 많이 씁니다. 기본상태와 가장 시각적으로 차이가 많이 나기 때문이죠. 

 

---

버튼 상태(state) vs 버튼 스타일(style)

버튼의 상태는 시간에 따라 변화하는 버튼의 반응을 의미하며, 스타일은 버튼의 역할이나 중요도에 따른 시각적 표현 방식을 뜻합니다. 둘은 함께 고려되어야 일관성 있고 직관적인 UI가 완성됩니다.

---

버튼 스타일의 유형

스타일 유형사용 목적시각적 특징

Primary Button	가장 중요한 액션 (예: ‘제출’, ‘확인’)	강조된 색상과 강한 시각적 대비로 사용자 주목을 유도합니다.
Secondary Button	보조적인 액션 (예: ‘취소’, ‘설정 변경’)	기본보다 덜 강조되며, 보통 테두리 스타일로 표현됩니다.
Tertiary Button	중요도가 낮은 행동 (예: 링크 버튼)	플랫(flat) 스타일로 단순하게 표현되며, 강조가 거의 없습니다.
Destructive Button	삭제나 제거 등 부정적인 액션	빨간색 계열을 사용하여 경고 또는 주의를 환기시킵니다.
Disabled Button	조건이 충족되지 않아 클릭 불가할 때	텍스트 및 배경의 대비를 낮춰 비활성 상태임을 시각적으로 표현합니다.

 

---

마무리하며

버튼의 상태와 스타일은 단순히 ‘예쁘게 보이기 위한’ 디자인 요소가 아닙니다. 이는 사용자가 시스템과 효과적으로 상호작용할 수 있도록 돕는 중요한 정보 전달 수단입니다. 각 상태와 스타일을 잘 활용하면 사용성은 물론, 전반적인 UX 품질도 크게 향상시킬 수 있습니다.

---

출처: Nielsen Norman Group