도현의 AI 워크플로우

inputmode="numeric" 은 숫자 입력에 맞는 가상 키보드를 보여주기 위한 힌트입니다. 이 속성 하나가 문자 입력을 금지하거나 제출값을 검사해 주지는 않습니다. AI에 ‘숫자만 받는 입력칸’을 부탁한 뒤 휴대폰에서 숫자 키패드가 보였다고 검토를 끝내기 쉽습니다. 무엇을 편하게 입력하도록 할지와 어떤 값을 허용할지는 따로 적어두세요. 목차 1. inputmode가 맡는 역할 2. 짧은 코드에서 빠진 조건 찾기 3. 검수 메모를 두 칸으로 나누기 4. 자주 묻는 질문 1. inputmode가 맡는 역할 MDN은 inputmode를 사용자가 입력할 데이터의 종류를 브라우저에 알려주는 힌트로 설명하고, 이 속성이 유효성 요구사항을 강제하지는 않는다고 명시합니다. numeric은 숫자 키보드, decimal은 사용자의 지역에 맞는 소수 구분자가 포함된 키보드를 위한 값입니다. 마이너스 키 제공 여부는 기기에 따라 달라질 수 있습니다. 따라서 코드 검토 메모에 ‘숫자 입력 완료’라고 한 줄만 쓰면 키보드가 편해졌다는 뜻인지, 값의 허용 조건을 확인했다는 뜻인지 알기 어렵습니다. 입력 화면에서 관찰한 것과 데이터 규칙에 대해 확인한 것을 분리하세요. 2. 짧은 코드에서 빠진 조건 찾기 <label for="sample-code">연습용 코드</label> <input id="sample-code" type="text" inputmode="numeric"> 위 코드는 학습용 예시입니다. 요구사항이 ‘숫자 네 자리’라면 코드를 보는 사람은 네 자리라는 조건을 어디에서 처리하는지 추가로 찾아야 합니다. 숫자 키보드를 기대하는 속성이 있다는 사실만으로 자릿수·빈 값·붙여넣기 처리까지 구현됐다고 표시하지 않습니다. AI에 수정 요청을 할 때도 ‘숫자만 되게’ 대신 실제 필요한 값의 형태를 적어보세요. 예를 들어 ‘이 연습용 칸은 네 자리 문자열을 받으...

파일 입력칸에 accept=".png,.jpg"가 있다고 해서 서버가 이미지 파일만 받도록 검증된 것은 아닙니다. accept는 파일 선택을 돕는 힌트이며, 실제 파일 형식과 크기·전송 처리의 검증은 별도로 확인해야 합니다. 목차 1. accept는 선택창 안내입니다 2. 확장자와 MIME 형식을 구분해 읽으세요 3. 민감하지 않은 작은 샘플로 결과를 비교하세요 4. 자주 묻는 질문 1. accept는 선택창 안내입니다 MDN은 accept 속성을 브라우저가 올바른 파일을 고르도록 돕는 힌트로 설명합니다. 많은 환경에서는 사용자가 다른 파일도 선택할 수 있으므로, 선택된 파일이 요구 조건을 충족하는지는 서버 쪽에서 검증해야 합니다. 가령 AI 초안에 <input type="file" accept=".png,.jpg"> 가 있다면, 먼저 화면의 안내 문구와 실제 허용하려는 형식을 비교하세요. 파일 선택창에서 이미지가 잘 보였다는 결과만으로 파일 내용이나 용량 검사까지 통과한 것으로 기록하지 않습니다. 2. 확장자와 MIME 형식을 구분해 읽으세요 accept에는 점으로 시작하는 확장자, MIME 형식, image/*와 같은 형식 범주를 쓸 수 있고 여러 값은 쉼표로 나눕니다. “사진 한 장만”을 받으려는 화면인지, 여러 이미지를 받으려는 화면인지도 먼저 정해 두세요. 여러 파일 선택은 multiple이라는 별도 속성이 담당합니다. 초안에서 본 것 검수할 질문 accept=".png,.jpg" 안내한 파일 형식과 맞는가 accept="image/*" 범위를 넓게 받으려는 의도인가 multiple 여러 개 선택이 실제 요구사항인가 제출 완료 메시지 선택만 했는지, 전송·접수도 끝났는지 같은 “이미지”라도 운영 목적에 따라 필요한 형식과 용량이 다를 수 있습니다. AI에게 “이미지만 받게 해줘”라고 요청한 뒤 속성 하나를 추가한 결과로 끝내지 말고, 수신부의 조건과 사...

AI가 만든 number 입력칸에서 1.5가 거부되면 최솟값·최댓값만 보지 말고 step도 확인하세요. min=0인 예제에서 step을 생략하면 기본 간격은 1이므로, 범위 안의 소수라도 유효성 검사를 통과하지 못할 수 있습니다. 목차 1. 범위 안이라는 말과 유효하다는 말 2. 같은 범위에서 간격만 바꾼 예제 3. any와 pattern을 다른 역할로 읽기 4. AI 초안에 돌려줄 구체적인 수정 요청 5. 자주 묻는 질문 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"가 있습니다. 다...

AI가 만든 텍스트 입력칸에 minlength="3"이 있어도 빈칸을 반드시 막는 것은 아닙니다. 최소 길이 조건과 필수 입력 조건은 다르기 때문입니다. 필수로 받을 정보라면 required도 확인하고, 빈칸·짧은 값·충족한 값을 실제로 입력해 각각 검수하세요. 목차 1. 최소 길이와 필수 여부를 나누기 2. 목적을 정한 뒤 required 추가 3. 실제 입력으로 검수 기록 남기기 4. 자주 묻는 질문 1. 최소 길이와 필수 여부를 나누기 MDN은 minlength가 required를 뜻하지 않으며, 필수가 아닌 입력칸은 빈 문자열인 상태로 제출할 수 있다고 설명합니다. 입력한 값의 길이 조건과 아예 값을 넣어야 하는 조건을 같은 것으로 읽지 마세요. 여기서는 일반 text 입력칸의 브라우저 기본 검증을 예로 듭니다. 길이는 UTF-16 코드 단위로 계산하므로 이모지 등이 포함되면 눈에 보이는 글자 수와 다를 수 있습니다. 아래 표는 이 차이가 생기지 않는 영문 ab·abc 예시로 비교합니다. <label for="nickname">별명</label> <input id="nickname" name="nickname" type="text" minlength="3"> 같은 입력칸에서 검수 minlength="3"만 있을 때 required도 있을 때 빈칸 필수 조건이 아니므로 빈 값 허용 필수 값 누락 확인 직접 입력한 ab 최소 길이 미달 확인 최소 길이 미달 확인 직접 입력한 abc 길이 조건 충족 이 두 조건 충족 MDN minlength의 빈 값 조건 확인 2. 목적을 정한 뒤 required 추가 정말 필수로 받아야 하는 값인지 먼저 정하세요. 모든 칸을 필수로 바꾸는 것이 검수의 목적은 아닙니다. 필수 항목에는 사용자에게 보이는 안내와 적절한 이름표도 필요합니다. 화면에 별표를 붙였다는 사실과 H...

라디오 선택지마다 글자가 붙어 있어도 “무엇을 고르는 질문인지”가 빠질 수 있습니다. 관련 선택지는 fieldset으로 묶고 legend에 짧은 질문을 쓰세요. 각 선택지의 label도 따로 필요합니다. 목차 1. 질문을 읽지 않고도 선택지를 이해할 수 있나요? 2. 수령 방법 예시를 요소별로 읽어 보세요 3. AI 초안을 검수할 때는 관계를 질문하세요 4. 자주 묻는 질문 1. 질문을 읽지 않고도 선택지를 이해할 수 있나요? “직접 수령”, “택배 수령”은 선택지의 이름입니다. 이 둘이 답하는 질문은 “수령 방법”입니다. 화면에 질문을 굵게 쓰는 것과 입력 요소에 그 관계를 전달하는 것은 별도로 검수해야 합니다. W3C WAI는 관련 폼 요소를 시각적으로, 코드 안에서도 묶으라고 안내합니다. fieldset은 관련 요소의 컨테이너이고 legend는 묶음의 제목입니다. 라디오 버튼 그룹은 이 구분을 확인하기 좋은 예입니다. W3C 폼 요소 묶기·legend 공식 예시 보기 2. 수령 방법 예시를 요소별로 읽어 보세요 <fieldset> <legend>수령 방법</legend> <input type="radio" id="pickup" name="delivery" value="pickup"> <label for="pickup">직접 수령</label> <input type="radio" id="shipping" name="delivery" value="shipping"> <label for="shipping">택배 수령</label> </fieldset> 요소 이 예시의 역할 legend “수령 방법”이라는 그룹 질문 label for 각 input의 고유id와 연...

AI가 만든 HTML 폼에 이름표가 보이는데 이를 눌러도 입력칸에 연결되지 않는다면, label의 for와 입력칸의 id를 먼저 비교하세요. 화면에서 가까이 놓였다는 것과 코드로 연결됐다는 것은 별개의 확인입니다. 목차 1. for는 입력칸의 id와 연결합니다 2. 보기에는 비슷해도 연결이 끊어진 예시 3. 저장한 화면에서 클릭과 키보드를 함께 확인 4. 입력칸을 label 안에 넣는 방식도 있습니다 5. 자주 묻는 질문 1. for는 입력칸의 id와 연결합니다 W3C WAI의 폼 이름표 안내는 명시적으로 연결할 때 label의 for 값과 폼 컨트롤의 id 값을 정확히 일치시키도록 설명합니다. 먼저 같은 철자로 연결됐는지 확인하고, 화면의 배치만 보고 연결됐다고 판단하지 마세요. <label for="visitor-name">방문자 이름</label> <input id="visitor-name" name="visitor" type="text"> 위 예시에서 이름표는 visitor-name이라는 id를 가리킵니다. 입력칸의 name은 visitor입니다. for가 name을 찾는 것으로 생각해 두 값을 함께 바꿀 필요는 없습니다. 전송에 쓰는 이름과 화면 이름표의 연결을 따로 검수하세요. 항목 이 예시의 값 검수할 질문 label의 for visitor-name 연결할 입력칸의 id와 같은가 input의 id visitor-name 이름표가 가리키는 대상인가 input의 name visitor 전송 항목 이름으로 의도한 값인가 2. 보기에는 비슷해도 연결이 끊어진 예시 <label for="visitor-name">방문자 이름</label> <input id="guest-name" name="visitor" type="text"> 두 번째 예시는 label...