AI가 만든 숫자 입력칸의 step: 1.5가 범위 안인데 거부되는 이유
AI가 만든 number 입력칸에서 1.5가 거부되면 최솟값·최댓값만 보지 말고 step도 확인하세요. min=0인 예제에서 step을 생략하면 기본 간격은 1이므로, 범위 안의 소수라도 유효성 검사를 통과하지 못할 수 있습니다.
1. 범위 안이라는 말과 유효하다는 말
min과 max는 숫자의 범위를, step은 기준값에서 허용되는 간격을 정합니다. MDN은 number 입력의 기본 step을 1로 설명하며, 간격의 기준은 min이 있으면 min, 그렇지 않으면 value, 둘 다 없으면 0이라고 안내합니다.
그래서 검수 메모에는 “0부터 10까지”만 쓰지 말고 “0부터 10까지, 0.5 간격”처럼 의도한 단위까지 남기는 편이 좋습니다. AI에게 요청한 문장과 생성된 속성을 나란히 대조할 수 있습니다.
2. 같은 범위에서 간격만 바꾼 예제
<input type="number" min="0" max="10">
<input type="number" min="0" max="10" step="0.5">| 입력 예시 | 기본 간격 1 | 0.5 간격 |
|---|---|---|
| 1 | 간격에 맞음 | 간격에 맞음 |
| 1.5 | 간격에 맞지 않음 | 간격에 맞음 |
| 1.25 | 간격에 맞지 않음 | 간격에 맞지 않음 |
| 11 | 최댓값 초과 | 최댓값 초과 |
위 표는 표시한 두 코드와 값의 수학적 관계를 정리한 자체 예제입니다. 모든 브라우저의 오류 문구나 화살표 모양이 같다는 뜻은 아닙니다. 실제 편집기에서 저장된 속성과 사용자가 값을 입력한 뒤의 검증 결과를 함께 확인하세요.
3. any와 pattern을 다른 역할로 읽기
간격 제한이 필요 없는 수치라면 step="any"가 있습니다. 다만 min·max 같은 다른 조건까지 없어지는 것은 아닙니다. “소수 허용”이라는 요구가 임의 소수인지, 정해진 단위인지를 먼저 정해야 합니다.
number 입력은 pattern 속성을 지원하지 않는다고 MDN은 설명합니다. AI가 숫자 필드에 정규식만 덧붙였다면 그것으로 원하는 규칙이 적용됐다고 보고하지 마세요. 전화번호처럼 계산용 수치와 다른 데이터는 입력 형식 자체부터 별도로 설계해야 합니다.
클라이언트 검증은 서버 검증을 대신하지 않습니다. 브라우저 화면에서 통과한 값도 서버에서는 의도한 범위와 형식을 다시 검증해야 합니다.
4. AI 초안에 돌려줄 구체적인 수정 요청
수정 요청 예: “이 필드는 0 이상 10 이하이며 0.5 단위의 수치를 받습니다. min·max·step을 그 조건에 맞추고, 1·1.5·1.25·11의 예상 결과를 설명해 주세요.” 이 예시는 실제 결제나 개인정보 신청 폼이 아닌 연습용 요구사항입니다.
빈 값이 허용되는지와 숫자의 간격도 다른 질문입니다. 입력 길이나 필수 여부를 확인할 때는 관련 글과 함께 조건별 점검표를 만들어 보세요.
5. 자주 묻는 질문
step="any"면 11도 통과하나요?
간격 제한을 없애는 값입니다. 예제의 max=10 범위 제한까지 없애지는 않습니다.
소수점 두 자리만 보이게 하는 옵션인가요?
step은 값의 간격에 관한 조건입니다. 화면에 항상 두 자리로 표시하는 서식과 같은 기능으로 취급하지 마세요.
2026년 10월 18일 확인한 공식 기술 자료: MDN: input type="number" — step·검증·pattern.
대표 기술 삽화는 AI로 제작했으며 실제 서비스 화면이 아닙니다. 본문 비교 이미지와 코드 예제는 직접 구성했습니다.
댓글
댓글 쓰기