[ UX/UI ] 폼(Form) UX 용어 정리 – 개념, 예제
UX/UI 디자인에서 폼(Form)은 사용자 입력을 처리하는 중요한 요소입니다. 이번 포스팅에서는 폼의 주요 요소, 입력 필드 유형, 오류 메시지, UX 최적화 전략을 정리해보도록 하겠습니다.
✅ 각종 팁 모음
[정보공유 같이해요/Terms] - [ UX/UI ] 버튼(Button) UX 용어 정리 - 개념, 예제
[ UX/UI ] 버튼(Button) UX 용어 정리 - 개념, 예제
[ UX/UI ] 버튼(Button) UX 용어 정리 - 개념, 예제 UX/UI 디자인에서 버튼은 가장 중요한 요소 중 하나입니다. 이번 포스팅에서는 버튼의 유형, 상태, 인터랙션, 디자인 원칙을 정리하고, UX에서
it-ability.tistory.com
[ 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. 폼(Form)이란?
폼(Form)은 사용자가 정보를 입력하고 제출하는 UI 요소입니다. 회원가입, 로그인, 검색, 결제 등 다양한 기능에서 활용됩니다.
UX 설계에서 폼은 사용자가 최소한의 노력으로 정확한 데이터를 입력할 수 있도록 디자인하는 것이 핵심입니다.
2. 폼의 주요 요소
입력 필드 (Input Field)
✅ 사용자가 텍스트를 입력할 수 있는 박스
✅ 예제: 이메일 입력, 비밀번호 입력
드롭다운 (Dropdown / Select Box)
✅ 여러 선택지 중 하나를 고르는 방식
✅ 예제: 국가 선택, 카테고리 선택
체크박스 (Checkbox)
✅ 다중 선택이 가능한 입력 요소
✅예제: 이용약관 동의, 관심 카테고리 선택
라디오 버튼 (Radio Button)
✅ 여러 개의 옵션 중 하나만 선택 가능
✅ 예제: 성별 선택 (남성 / 여성 / 기타)
슬라이더 (Slider)
✅ 특정 범위 내 값을 선택하는 방식
✅ 예제: 가격 범위 설정, 음량 조절
제출 버튼 (Submit Button)
✅ 사용자가 입력을 완료하고 제출할 때 클릭하는 버튼
✅ 예제: "가입하기", "검색"
3. 폼 상태(State) 정리
기본 상태 (Default State)
🔸 입력 전 기본 상태
🔸 텍스트 입력 필드는 비어 있음
포커스 상태 (Focus State)
🔸 사용자가 입력 필드를 클릭하면 활성화되는 상태
🔸 테두리 강조, 배경색 변경 등의 피드백 제공
입력 중 상태 (Typing State)
🔸 사용자가 텍스트를 입력하는 중인 상태
🔸 자동완성, 제안 기능과 연계 가능
오류 상태 (Error State)
🔸 입력값이 유효하지 않을 때 발생
🔸 예제: 비밀번호가 너무 짧거나 이메일 형식이 올바르지 않을 때
성공 상태 (Success State)
🔸 입력값이 올바를 때 표시되는 상태
🔸 예제: 녹색 테두리 및 체크 아이콘 표시
4. UX에서 버튼 설계 시 고려할 점
최소한의 입력 요구
✔️ 너무 많은 입력 필드는 사용자의 이탈률을 높임
✔️ 필수 입력값과 선택 입력값을 구분할 것
실시간 피드백 제공
✔️ 입력 시 실시간으로 유효성을 검증하여 오류를 사전에 방지
✔️ 예제: "비밀번호가 너무 짧습니다" 경고 표시
명확한 오류 메시지
✔️ "오류 발생"보다는 "이메일 형식을 확인하세요" 같은 구체적인 메시지 제공
✔️ 색상(빨간색), 아이콘(⚠️)으로 시각적 피드백 추가
접근성(Accessibility) 고려
✔️ 라벨(Label)과 입력 필드를 명확히 연결 (<label for="email">이메일</label> <input id="email">)
✔️ 스크린 리더 지원을 위한 ARIA 속성 추가 ( aria-describedby="error-message" )
6. 🔗 관련 UI 컴포넌트 – 버튼 ( Button ) UX 용어 정리
폼은 버튼과 함께 동작하는 경우가 많습니다. 예를 들어, 사용자가 모든 입력을 완료해야 버튼이 활성화되는 UX 패턴이 존재합니다.
👉 [버튼 UX 용어 정리] 글에서 더 자세히 알아보세요!
