[UI 디자인] 버튼 타입 개념

UI 디자인에서 버튼은 단순한 요소 같지만,
사용성과 접근성을 동시에 책임지는 핵심 컴포넌트입니다.
버튼을 설계할 때 꼭 함께 고려해야 할 두 가지가 있습니다.

 

1. 버튼의 대표적인 3가지 타입

1️⃣ Filled 버튼

• 배경색이 채워진 버튼
• **주요 액션(Primary Action)**에 사용
• 예: 확인, 제출, 결제

2️⃣ Outlined 버튼

• 테두리만 있는 버튼
• 보조 액션(Secondary Action)에 적합
• 예: 취소, 이전

3️⃣ Text 버튼

• 배경·테두리 없이 텍스트만 사용
• 덜 중요한 액션, 링크성 동작에 활용
• 예: 자세히 보기

버튼 타입은 중요도와 시각적 위계를 표현하는 수단입니다.

버튼타입 예시

 

2. 버튼 높이 44px, 왜 권장될까?

많은 디자인 가이드에서

버튼의 최소 높이를 44px로 권장합니다.

 

그 이유는 명확합니다.

 

1️⃣  터치 정확도

• 손가락으로 누르기 충분한 크기
• 오작동(미스 터치) 최소화

2️⃣  접근성 기준

• Apple Human Interface Guidelines
• Google Material Design
  → 최소 터치 영역 44px 권장

 

정리하면

좋은 버튼 디자인이란
눈에 잘 보이고, 쉽게 눌리며, 역할이 명확한 버튼이다.

 

Filled / Outlined / Text 버튼을 목적에 맞게 사용하고
버튼 높이는 최소 44px을 유지하는 것이 기본이다.

• 버튼 타입 → 의미와 우선순위
• 버튼 크기(44px) → 사용성 & 접근성