입력 필드

정의

입력 필드는 사용자가 이름이나 이메일 같은 값을 직접 적어 넣는 요소입니다. 겉으로는 네모난 칸 하나처럼 보이지만, 실제로는 무엇을 적는 칸인지 알려 주는 라벨, 값을 받는 입력 영역, 그리고 형식이나 오류를 안내하는 도움말과 에러 메시지가 한 세트로 함께 움직입니다. 또한 입력 필드는 아무것도 안 한 기본 상태, 커서가 들어간 포커스 상태, 값이 잘못된 에러 상태, 손댈 수 없는 비활성 상태처럼 여러 상태를 오갑니다. 그리고 그 상태마다 테두리 색이나 배경이 조금씩 달라져야, 사용자가 지금 이 칸에서 무슨 일이 일어나고 있는지 눈으로 바로 이해할 수 있습니다.

왜 중요한가

입력 필드는 폼에서 사용자와 가장 자주 부딪히는 지점입니다. 여기서 조금만 헷갈려도 사용자는 무엇을 어떻게 적어야 할지 몰라 멈칫하고, 회원가입이나 결제처럼 중요한 흐름이 그대로 끊깁니다. 반대로 라벨이 또렷하고 상태가 분명하면 사용자는 안심하고 값을 채워 나갑니다. 특히 에러 상태를 잘 설계하면 무엇이 왜 틀렸는지 바로 알려 줄 수 있어, 같은 실수를 반복하며 지치는 일을 막아 줍니다. 또한 입력 필드는 폼에서 개수가 가장 많은 요소라, 여기서 정한 라벨 위치나 여백 규칙이 화면 전체의 인상을 좌우합니다. 결국 입력 필드의 완성도가 폼 전체의 성공률을 정하므로, 화면에서 가장 공들여 다듬어야 할 요소 중 하나입니다.

흔한 실수

• 라벨을 없애고 placeholder만으로 대신하는 경우입니다. placeholder는 입력을 시작하는 순간 사라지기 때문에, 값을 절반쯤 적다가 이 칸이 무엇이었는지 다시 헷갈리게 됩니다. 라벨은 언제나 눈에 보이도록 위나 옆에 고정해 두는 편이 안전합니다.
• 포커스나 에러, 비활성 같은 상태를 설계하지 않고 기본 모습 하나만 만드는 것입니다. 값이 틀려도 아무 표시가 없으면 사용자는 무엇이 잘못됐는지 알 길이 없어, 같은 화면에서 계속 헤매다 결국 포기하게 됩니다.
• 필수 항목과 선택 항목을 구분해 알려 주지 않는 것입니다. 어디까지 꼭 채워야 하는지 모르면 사용자는 필요 없는 칸까지 붙잡고 고민하거나, 반대로 필수 칸을 비운 채 제출해 오류를 만나게 됩니다.

실무 팁

• 기본과 포커스, 에러, 비활성 네 가지 상태를 처음부터 함께 설계하세요. 라벨은 항상 보이게 두고, placeholder는 예시 값처럼 보조 용도로만 쓰면 어떤 상태에서도 무엇을 적는 칸인지 흔들리지 않습니다.
• 에러 메시지는 칸 바로 아래에 두고, 무엇이 왜 틀렸는지 구체적으로 적으세요. '잘못된 값'이라고만 하지 말고 '이메일에 @가 빠졌습니다'처럼 알려 주면 사용자가 곧바로 고칠 수 있습니다.
• 키보드 종류나 입력 형식을 필드 성격에 맞게 지정하세요. 숫자 칸에는 숫자 키패드가, 이메일 칸에는 @가 있는 키보드가 뜨면 모바일에서 입력이 눈에 띄게 편해집니다.

관련 개념