[ UX/UI ] 버튼(Button) UX 용어 정리 - 개념, 예제
UX/UI 디자인에서 버튼은 가장 중요한 요소 중 하나입니다. 이번 포스팅에서는 버튼의 유형, 상태, 인터랙션, 디자인 원칙을 정리하고, UX에서 버튼을 효과적으로 설계하는 방법을 설명 하려고 합니다.
✅ 각종 팁 모음
[ AI 툴 ] 2025년 주목할만한 AI 이미지 생성 도구 TOP 20 ( 특징,장점,단점 분석,후기 )
[ AI 툴 ] 2025년 주목할만한 AI 이미지 생성 도구 TOP 20 ( 특징,장점,단점 분석,후기 )
[ AI 툴 ] 2025년 주목할만한 AI 이미지 생성 도구 TOP 20 ( 특징,장점,단점 분석 ) 최근 인공지능 기술의 눈부신 발전과 함께, 이미지 생성 도구들이 급격히 발전하고 있습니다. 디자이너, 마케터,
it-ability.tistory.com
[정보공유 같이해요/Terms] - 2025 꼭 알아야할 UI / UX 관련 용어 총정리 ( 지속적인 업데이트 예정 )
2025 꼭 알아야할 UI / UX 관련 용어 총정리 ( 지속적인 업데이트 예정 )
# 1. UI, UX 용어 총정리 UI (User Interface) 사용자가 디지털 제품(웹, 앱 등)이나 기기를 사용할 때 직접 눈으로 보고, 손으로 조작하는 화면이나 조작 요소를 의미합니다.💡예시: 웹사이트의 버튼,
it-ability.tistory.com
[정보공유 같이해요/Trend] - [ 프론트엔드 ] UI/UX 프로토타이핑 툴 7종 추천
[ 프론트엔드 ] UI/UX 프로토타이핑 툴 7종 추천
웹 개발 또는 화면 기획을 할때 화면 설계는 빼놓을 수 없는 작업입니다. 이번 포스팅에서는 현업에서 많이 쓰이는 다양한 종류의 UI / UX 프로토타이핑 툴 을 소개하도록 하겠습니다. 목차 1. Figma
it-ability.tistory.com
[정보공유 같이해요/TECH] - [ 프론트엔드 ] 웹 개발자를 위한 필수 UI/UX 레퍼런스 사이트 5 종 모음 2024
[ 프론트엔드 ] 웹 개발자를 위한 필수 UI/UX 레퍼런스 사이트 5 종 모음 2024
웹 개발자는 사용자가 접하는 인터페이스를 가장 효과적으로 구현하는 중요한 역할을 담당합니다. 그러나 단순히 기능적인 웹사이트를 넘어서, 아름답고 직관적인 UI(User Interface)를 구현하는 것
it-ability.tistory.com
1. 버튼이란?
버튼(Button)은 사용자가 특정 작업을 수행하도록 유도하는 가장 기본적인 UI 요소입니다. 버튼을 클릭하거나 탭하면 사용자의 액션이 발생하며, 이는 폼 제출, 페이지 이동, 모달 창 열기 등 다양한 인터랙션을 포함할 수 있습니다.
2. 버튼의 주요 유형
기본 버튼 ( Primary Button )
✅ 가장 중요한 액션을 수행하는 버튼
✅ 시각적으로 강조되어 있으며, 주요 CTA(Call to Action)에 사용됨
✅ 예제: "가입하기", "구매하기"
보조 버튼 (Secondary Button)
✅ 보조적인 역할을 하는 버튼
✅ 기본 버튼보다 덜 강조되지만 여전히 중요한 기능 수행
✅ 예제: "자세히 보기", "취소"
텍스트 버튼 (Text Button)
✅ 배경 없이 텍스트만 있는 버튼
✅ 공간 절약이 필요할 때 사용되며, 보조적 기능을 수행
✅ 예제: "더보기", "링크 텍스트"
아이콘 버튼 (Icon Button)
✅ 아이콘만 포함된 버튼으로, 직관적인 UI 제공
✅ 텍스트 없이 사용될 수 있으며, 빠른 액션 수행에 적합
✅ 예제: "검색 🔍", "닫기 ✖️"
토글 버튼 (Toggle Button)
✅ 두 가지 상태를 전환하는 버튼
✅ 예제: "좋아요(♥)" 버튼, "다크 모드 온/오프"
플로팅 액션 버튼 (FAB - Floating Action Button)
✅ 화면 위에 떠 있는 원형 버튼으로, 주요 액션을 빠르게 실행
✅ 예제: "+" 버튼 (새로운 항목 추가)
3. 버튼 상태(State) 정리
기본 상태 (Default State)
🔹 버튼의 초기 상태로, 사용자가 아직 클릭하지 않은 상태
호버 상태 (Hover State)
🔹 사용자가 버튼 위에 마우스를 올렸을 때 나타나는 시각적 변화
🔹 예제: 버튼 색상이 살짝 밝아짐
활성 상태 (Active State)
🔹 버튼이 클릭되었을 때의 상태
🔹 예제: 버튼이 눌린 듯한 시각적 효과 적용
비활성 상태 (Disabled State)
🔹 버튼을 사용할 수 없는 상태 (회색 처리되거나 클릭이 불가능함)
🔹 예제: 필수 입력란을 채우지 않았을 때 "제출하기" 버튼 비활성화
4. 버튼 과 인터랙션(Interaction) 요소
버튼 피드백 (Feedback)
🔸 클릭 시 색상 변경, 애니메이션 등을 통해 피드백 제공
🔸 예제: 버튼을 클릭하면 0.2초 동안 색상이 변함
버튼 크기와 터치 영역
🔸 모바일 환경에서는 최소 48px × 48px 크기 유지 필요
🔸 너무 작은 버튼은 사용성이 떨어지고, 터치 오류 발생 가능
애니메이션 효과
🔸 버튼 클릭 시 "Ripple Effect" 또는 "Scale Effect" 적용
🔸 적절한 애니메이션을 추가하면 사용자 경험이 향상됨
5. UX에서 버튼 설계 시 고려할 점
버튼 색상과 대비
✔️ 주요 버튼(Primary)은 눈에 띄는 색상으로 강조
✔️ 버튼 텍스트와 배경색의 대비율은 WCAG 기준 4.5:1 이상 유지
버튼 텍스트 가독성
✔️ 명확하고 직관적인 액션을 설명하는 텍스트 사용
✔️ 예제: "확인"보다는 "신청 완료"처럼 구체적인 표현 사용
접근성(Accessibility) 고려
✔️ 스크린 리더가 버튼의 역할을 올바르게 인식할 수 있도록 <button> 태그 사용
✔️ ARIA 속성 활용: aria-label="닫기" 등 추가
6. 🔗 관련 UI 컴포넌트 – 폼(Form) UX 용어 정리
버튼은 폼(Form)과 함께 사용될 때가 많습니다. 예를 들어, 로그인 폼에서 사용자가 모든 필드를 입력해야 버튼이 활성화되는 UX 패턴이 있습니다.
👉 [폼 UX 용어 정리] 글에서 더 자세히 알아보세요!
