[UI 디자인] 사용자 입력 컴포넌트

로그인·회원가입 화면에서 가장 중요한 요소는
사용자 입력 컴포넌트(Input Field) 입니다.
입력 과정이 불편하면 사용자는 바로 이탈합니다.

 

1. 텍스트 입력 + 레이블은 함께 사용한다

입력 필드에는 **레이블(Label)**을 함께 사용하는 것이 좋습니다.

• 레이블: 무엇을 입력해야 하는지 명확히 전달
• 입력값이 있어도 의미가 사라지지 않음

플레이스홀더만 사용하는 것은 권장되지 않습니다.

 

2. 플레이스홀더는 “예시”로 사용한다

플레이스홀더는 설명용이 아니라 예시용입니다.

• 예:
  • boom@email.com
  • 영문, 숫자, 특수문자 8자 이상

사용자가 형식을 바로 이해하도록 돕는 역할

 

플레이스홀더 예시

 

3. 포커싱(Focus) 시 시각적 강조는 필수

입력 필드에 포커스가 갔을 때는
테두리 색상, 두께 변화 등으로 명확히 강조합니다.

• 현재 입력 위치를 즉시 인지
• 키보드·마우스 사용자 모두에게 중요

보통 브랜드 컬러를 활용해 강조합니다.

포커싱 예시

 

4. 입력 검증 상태는 즉각적으로 보여준다

1️⃣ 올바른 입력 (Success)

• 초록색 테두리
• 체크 아이콘 표시

 “입력이 잘 됐다”는 확신 제공

 

2️⃣ 잘못된 입력 (Error)

• 빨간색 테두리
• 에러 아이콘 표시
• 구체적인 에러 메시지 제공
  • 예: 이메일 주소에 '@'를 포함해 주세요.

사용자가 무엇을 고쳐야 하는지 바로 알 수 있게

입력 검증 상태 예시

 

 

정리하면

 

• 레이블 + 입력 필드 함께 사용
• 플레이스홀더는 예시로만 활용
• 포커싱 상태는 명확하게 강조
• 성공/실패 상태는 색상 + 아이콘 + 메시지로 표현