인풋 필드(Input Field)

인풋 필드(Input Field)는 웹사이트에서 사용자가 데이터를 입력할 수 있는 가장 기본적인 인터페이스입니다. 단순히 글자를 입력하는 상자처럼 보이지만, 사용자와 서비스가 소통하는 핵심 통로이기 때문에 UX적으로 매우 정교하게 설계해야 합니다.

인풋 필드 이미지 예시

인풋 필드의 해부학 (Anatomy)

• 레이블(Label): "이름", "이메일"처럼 이 칸에 무엇을 넣어야 하는지 알려주는 제목입니다. 항상 노출하는 것이 원칙입니다.
• 플레이스홀더(Placeholder): 입력란 안에 흐릿하게 보이는 예시 텍스트입니다. "예: 홍길동" 등 형식을 안내하는 용도로 씁니다. (절대 레이블을 대체해서는 안 됩니다!)
• 헬퍼 텍스트(Helper Text): 비밀번호 조건(8자 이상, 특수문자 포함)처럼 부가적인 설명을 제공합니다.
• 피드백(Validation): 입력이 끝난 후, 성공(초록색 테두리)인지 오류(빨간색 테두리와 에러 메시지)인지 알려줍니다.

입력 타입에 따른 분류

실전 디자인 & 개발 체크리스트

• 레이블은 필수입니다: 플레이스홀더는 글자를 입력하는 순간 사라집니다. 만약 입력하다가 내용이 기억나지 않으면 사용자는 다시 지워봐야 합니다. 레이블을 인풋 상자 위에 항상 배치하세요.
• 피드백은 즉각적으로: 사용자가 입력하자마자 오류를 확인하게 하는 것이 좋습니다. (예: 이메일 형식이 틀렸을 때 실시간으로 경고)
• 포커스 상태(Focus State) 표시: 사용자가 현재 어디에 입력하고 있는지 명확하게 알려주기 위해, 클릭했을 때 테두리 색상이 바뀌거나 그림자가 생기도록 CSS를 설정해야 합니다.

실전 코드 예시 (HTML/CSS/jQuery)

HTML

<div class="input-group">
  <label for="username">사용자 이름</label>
  <input type="text" id="username" placeholder="이름을 입력하세요">
  <span class="error-msg" style="display:none; color:red;">이름을 입력해주세요!</span>
</div>

CSS

.input-group { margin-bottom: 20px; }

label { display: block; margin-bottom: 8px; font-weight: bold; }

input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
}

input:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: 0 0 5px rgba(0,123,255,0.5);
}

jQuery (간단한 유효성 검사)

$(document).ready(function() {
  $('#username').on('blur', function() {
    if ($(this).val() === "") {
      $(this).css('border-color', 'red');
      $(this).next('.error-msg').show();
    } else {
      $(this).css('border-color', '#ccc');
      $(this).next('.error-msg').hide();
    }
  });
});

"많은 초보 개발자들이 플레이스홀더를 레이블처럼 사용하려고 합니다. 하지만 이는 접근성(스크린 리더)이나 사용성 측면에서 피해야 할 관행입니다. 레이블은 항상 밖에 꺼내두세요. 그것이 가장 친절하고 전문적인 UI입니다."

실제 데모