인풋

받을 수 있는 모든 값을 글자로 받던 시절에는 같은 항목이 사람마다 다른 모양으로 들어왔습니다. 전화번호 칸 하나에 010-1234-5678 과 01012345678 과 +82 10 1234 5678 이 섞여 쌓이고, 날짜 칸에는 2026-09-16 과 16/09/2026 이 함께 들어왔습니다. 받아 놓은 쪽에서는 어느 것이 무슨 뜻인지 뒤늦게 추측해야 했습니다.

사용자 쪽 경험도 나빴습니다. 형식이 맞지 않으면 제출 버튼을 누른 뒤에 오류가 뜨는데, 그 오류가 어느 칸 때문인지 알려 주지 않는 경우가 많았습니다. 가입 화면에서 같은 오류를 세 번 보고 나가는 사람이 적지 않았고, 어디가 틀렸는지 모른 채 나갔기 때문에 문의도 남지 않았습니다.

그래서 값의 종류에 따라 받는 방식을 갈라 놓게 됐습니다. 목록을 만들 수 있는 값은 고르게 하고, 날짜처럼 형식이 갈리는 값은 데이트 피커로 달력에서 짚게 하고, 이름이나 검색어처럼 정말 목록을 만들 수 없는 값만 글자로 받습니다. 남은 자리를 맡는 부품이 이것이고, 그래서 이 부품에는 형식을 안내하고 어긋난 값을 되돌려 주는 일까지 함께 붙습니다.

칸 하나가 다섯 부분으로 이루어집니다.

1. 레이블. 무엇을 넣는 칸인지 알려 주는 말이고 칸 밖에 둡니다. 입력을 시작한 뒤에도 계속 보여야 합니다.
2. 입력 영역. 글자가 들어가는 자리이고, 한 줄이면 이름과 이메일, 여러 줄이면 설명과 메모에 씁니다. 여러 줄 칸은 높이로 기대하는 분량이 전해지므로 두 줄짜리와 열 줄짜리를 구분해 둡니다.
3. 보조 설명. 형식과 제약을 적습니다. 8자 이상이어야 한다거나 숫자만 넣으라는 안내가 여기이고, 입력을 시작하기 전에 보여야 값을 합니다.
4. 오류 문구. 칸 바로 아래에 둡니다. 화면 맨 위에 모아 두면 사용자가 어느 칸을 고쳐야 하는지 다시 찾습니다.
5. 상태. 기본, 포커스, 값이 들어간 상태, 오류, 비활성, 읽기 전용 여섯 가지를 함께 만듭니다. 이 가운데 읽기 전용이 자주 빠지는데, 권한이 없는 사용자가 열었을 때 쓸 자리가 없어집니다.

검사하는 시점이 사용성을 크게 가릅니다. 타이핑하는 동안 검사하면 이메일을 두 글자 쳤을 때부터 빨간 테두리가 뜹니다. 아직 다 쓰지도 않았는데 틀렸다고 말하는 셈입니다. 칸에서 커서가 빠져나갈 때 한 번 보고, 제출할 때 한 번 더 보는 쪽이 낫습니다. 반대로 고쳐 쓰는 중에는 즉시 검사해 주는 편이 좋습니다. 오류 상태에서 글자를 고치기 시작하면 그 자리에서 오류를 지웁니다.

어긋난 값을 거절하기보다 받아서 정리합니다. 전화번호에 하이픈을 넣든 빼든 받아들이고 저장할 때 한 형태로 맞춥니다. 앞뒤 공백도 지웁니다.

글자 수 제한은 막는 대신 보여 줍니다. 40자까지 받는 칸이라면 남은 글자 수를 세어 주고, 넘겼을 때 잘라 내지 않고 넘겼다고 알립니다. 잘라 내면 사용자는 자기 글이 왜 짧아졌는지 모릅니다.

모바일에서는 키보드 종류를 함께 지정합니다. 숫자만 받는 칸에 숫자 키패드가 뜨면 입력 시간이 눈에 띄게 줄어듭니다. 접근성 쪽에서 가장 먼저 걸리는 것은 레이블을 입력 요소에 연결해 두는 일입니다. 연결이 없으면 화면 낭독기가 칸만 읽고 무엇을 넣는 칸인지는 읽지 못합니다.

이 부품이 맞는 자리는 넷입니다.

1. 목록을 만들 수 없는 값입니다. 이름, 제목, 검색어가 대표적입니다.
2. 형식이 정해진 짧은 값입니다. 이메일과 비밀번호가 여기이고, 형식 안내와 오류 문구가 가장 많이 필요한 자리입니다.
3. 긴 서술입니다. 여러 줄 칸으로 두고 문의 내용이나 설명을 받습니다.
4. 검색입니다. 치는 동안 결과가 좁혀지는 자리라 다른 자리와 달리 검사가 필요 없습니다.

맞지 않는 자리도 분명합니다. 선택지가 정해져 있으면 셀렉트로 접고, 후보가 수십 개를 넘으면 입력하면서 후보를 좁히는 콤보박스로 바꿉니다. 나라 이름 200개를 글자로 받으면 대한민국과 한국과 South Korea 가 함께 쌓입니다.

페이지덱의 가입 화면에서 이 판단을 한 번 바꿨습니다. 처음에는 회사 규모를 글자로 받았는데, 들어온 값이 30명, 서른명, 30-50, 50이하처럼 스무 가지가 넘었습니다. 민서가 다섯 구간 라디오 버튼으로 바꾸자 값이 다섯 가지로 정리됐고, 가입 이탈도 조금 줄었습니다. 반대로 직무 칸은 글자로 남겼습니다. 목록을 만들어 보니 매번 기타가 절반이었기 때문입니다.

"이 칸은 인풋 말고 셀렉트로 바꾸죠. 값이 스무 가지로 들어옵니다."

목록을 만들 수 있는 값이니 고르게 하자는 제안입니다.

"형식 설명이 플레이스홀더에 있어서 입력 시작하면 사라집니다."

필요한 순간에 안내가 없어진다는 지적입니다.

"타이핑 중에 빨간 테두리 뜨는 건 빼고, 칸 벗어날 때만 검사해 주세요."

검사 시점을 옮겨 달라는 요청입니다.

이런 말이 나오는 자리는 시안 리뷰와 구현 직전입니다. 민서가 칸의 상태 여섯 가지를 다 그려 오면 태오가 검사 시점과 저장할 때의 형태를 묻습니다. 이 두 가지가 정해지지 않은 채 구현에 들어가면 나중에 데이터를 한 번 더 정리해야 합니다.

칸 안에 흐리게 적어 둔 예시로 설명을 대신할 수 있다고 보는 경우가 많습니다. 자리를 아끼면서 안내까지 되는 것처럼 보이니 그렇습니다. 하지만 플레이스홀더는 입력을 시작하면 사라집니다. 형식을 확인하려는 순간은 글자를 치고 있는 순간이라, 정작 필요할 때 그 안내가 화면에 없습니다. 레이블 대신 쓰면 더 나쁩니다. 값을 다 채운 화면에서는 어느 칸이 무엇을 받는 칸이었는지 아무 표시도 남지 않습니다.

입력을 조이면 데이터가 깨끗해진다고 보는 것도 흔합니다. 받는 값을 좁히면 뒤에서 정리할 일이 줄어드니 그렇게 보입니다. 하지만 막는 쪽은 사용자이고 걸러지는 것은 잘못된 값만이 아닙니다. 특수문자를 거부하면 이름에 하이픈이나 어포스트로피가 들어가는 사람이 가입하지 못하고, 붙여넣기를 막으면 비밀번호 관리자를 쓰는 사람이 막힙니다. 넓게 받아서 저장할 때 한 형태로 맞추는 편이 데이터도 더 깨끗해집니다.