도현의 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...

AI 초안의 이미지가 로컬 미리보기에서 보였다고 공개 글에서도 같은 주소로 로딩되는 것은 아닙니다. 상대 경로는 기준이 되는 문서 주소에 따라 해석됩니다. 업로드한 파일의 공개 주소와 저장된 src를 직접 대조해야 합니다. 목차 1. 상대 경로는 문자열 두 개를 이어 붙이는 규칙이 아닙니다 2. 끝 슬래시와 맨 앞 슬래시를 대조하는 예시 3. 공개 검수에서 남길 네 가지 증거 4. 자주 묻는 질문 1. 상대 경로는 문자열 두 개를 이어 붙이는 규칙이 아닙니다 MDN은 상대 참조를 현재 디렉터리, 상위 디렉터리, 사이트 루트 등을 기준으로 해석한다고 설명합니다. HTML 이미지의 src에는 상대 주소나 절대 주소를 쓸 수 있지만, CMS에서 저장한 글의 위치와 내 컴퓨터 폴더는 같은 기준이 아닙니다. 예시 도메인과 경로는 아래 비교를 위해 만든 것입니다. 실제 사이트나 이미지를 제공하는 주소가 아닙니다. 공개 글에는 자신의 허용된 미디어 저장소에 실제로 올라간 파일 주소를 사용하세요. 2. 끝 슬래시와 맨 앞 슬래시를 대조하는 예시 기준 주소 src 예시 해석되는 주소 https://example.com/posts/guide/ photo.jpg https://example.com/posts/guide/photo.jpg https://example.com/posts/guide photo.jpg https://example.com/posts/photo.jpg https://example.com/posts/guide/ /images/photo.jpg https://example.com/images/photo.jpg 첫 두 행은 기준 주소 끝의 슬래시가 다릅니다. 마지막 행의 src는 사이트 루트에서 시작합니다. 이 표를 보고 내 CMS의 파일 경로를 추측해 새로 만들지는 마세요. 경로 해석의 차이를 이해한 뒤 실제 저장된 이미지 주소를 확인하는 용도입니다. 파일이 컴퓨터에만 있다면 먼저 플랫폼의 정상 업로드 기능으로 저장합니다. 업로드 성공 메시지, 파일의 공개 주...

공개 화면에 &amp; 가 그대로 남았다면, 먼저 HTML 원문을 넣은 것인지 일반 텍스트로 넣은 것인지 확인하세요. HTML 문자 참조를 두 번 변환한 경우와 코드 예시로 일부러 보여 주는 경우도 나누어야 합니다. 목차 1. 원문과 화면은 같은 문자열이 아닙니다 2. 작은 예시로 변환 횟수 확인 3. 전체 치환 전에 의도부터 나누기 4. 자주 묻는 질문 1. 원문과 화면은 같은 문자열이 아닙니다 WHATWG HTML 표준의 이름 있는 문자 참조 목록은 amp; 를 U+0026의 & , lt; 를 < , gt; 를 > 에 대응시킵니다. HTML 본문의 텍스트로 해석될 때 원문에 적힌 문자 참조와 화면에 보이는 문자는 달라질 수 있습니다. 편집기의 HTML 모드와 일반 글쓰기 모드는 입력을 다루는 방식이 다를 수 있습니다. AI가 준 문자열을 붙여 넣기 전에 현재 모드가 무엇인지 확인하고, 저장한 뒤 실제 미리보기에서 보이는 결과를 읽어야 합니다. 원문에서만 검색하고 검수를 끝내면 표시 문제를 놓칠 수 있습니다. 2. 작은 예시로 변환 횟수 확인 HTML 텍스트 원문 화면의 결과 해석할 질문 Tom &amp; Jerry Tom & Jerry 한 번 해석된 문자 참조인가? Tom &amp;amp; Jerry Tom &amp; Jerry 원하는 결과보다 한 번 더 변환됐나? 코드 예시로 문자 참조를 설명함 &amp; 자체를 보여 줌 의도적으로 보존할 예시인가? 위 표는 화면 결과를 직접 비교하는 예시입니다. 일반 텍스트 편집기에 같은 문자열을 넣었을 때는 HTML로 해석되지 않을 수 있으므로, 표의 결과를 모든 입력창에 그대로 대입하지 마세요. 가상의 제목 “Tom & Jerry”가 목적이라면 제목 칸과 본문 HTML에서 각각 저장 후 표시를 확인합니다. 제목·본문·검색 설명은 별도 입력 항목이므로 한 곳이 맞는다는 이유로 나머지도 맞다고 추정하지 않습니다. 3. 전체 치환 전에 의도부터 나누기...

한국어로 된 HTML 초안이라면 글자가 잘 보이는지만 보지 말고 언어 선언도 확인하세요. AI가 영문 예제 틀을 사용하면 lang="en" 같은 값이 본문 언어와 맞지 않게 남을 수 있습니다. 실제로 그런 오류가 있는지는 초안과 저장된 페이지를 대조해야 알 수 있습니다. 이 글은 웹페이지 전체를 만드는 HTML과 CMS 본문에 넣는 조각을 구분해 검수하는 방법입니다. 언어 선언 하나를 고쳤다고 번역, 접근성 검수, 검색 노출까지 모두 끝났다고 보고하지는 마세요. 목차 1. UTF-8과 lang은 다른 질문입니다 2. 전체 문서와 본문 조각을 구분하기 3. 다른 언어 문장과 저장 결과 확인하기 4. 자주 묻는 질문 1. UTF-8과 lang은 다른 질문입니다 W3C의 언어 선언 안내는 페이지의 기본 텍스트 언어를 html 요소의 언어 속성으로 선언하도록 설명합니다. 반면 문자 인코딩은 자연어를 하나로 식별하는 값이 아닙니다. 같은 UTF-8 문서 안에 여러 언어가 들어갈 수 있으므로 두 항목을 따로 확인해야 합니다. 검수 질문 확인 대상 그것만으로 끝나지 않는 일 글자가 깨지는가? 파일·전송의 인코딩 본문 언어의 정확한 선언 기본 언어가 무엇인가? 페이지 html 요소의 lang 다른 언어 구간의 표시 본문 일부가 다른 언어인가? 해당 구간을 감싼 요소 번역 정확성과 문체 검수 CMS가 그대로 저장했는가? 공개 페이지의 실제 구조 초안 파일만의 확인 예를 들어 한글이 정상 출력되는 페이지라도 기본 언어 값은 따로 확인할 수 있습니다. 반대로 언어 값이 맞아도 글자 깨짐의 원인이 해결됐다고 판단할 수는 없습니다. 증상과 설정의 관계를 한 칸씩 나누는 것이 검수의 출발점입니다. 2. 전체 문서와 본문 조각을 구분하기 직접 만드는 일반 HTML 문서의 한국어 기본 언어 예시는 <html lang="ko"> 처럼 표현할 수 있습니다. 아래 예시는 언어 속성의 위치를 보여 주기 위한 짧은 코드이며 완성된 웹페이지가 아닙...

Markdown에서 [설명](주소) 는 링크이고  는 이미지 문법입니다. AI 초안의 이미지가 글자 링크로만 보이면 맨 앞의 느낌표와 실제 편집기의 Markdown 지원부터 확인하세요. 주소가 있다는 것만으로 이미지가 올라간 것은 아닙니다. 이번 검수는 문법, 완성 이미지의 내용, 공개 경로를 따로 보는 방식입니다. 아래 예시는 설명용이며 reading-room.jpg 라는 실제 파일을 제공하거나 업로드한 주소가 아닙니다. 목차 1. 느낌표와 대괄호의 역할 2. alt와 선택 제목을 나눠 검수하기 3. 저장 뒤 공개 화면에서 확인 4. 자주 묻는 질문 1. 느낌표와 대괄호의 역할  CommonMark 안내는 이미지가 링크와 비슷하지만 느낌표로 시작한다고 설명합니다. 대괄호는 대체텍스트 자리이며 내용이 비어 있어도 문법의 대괄호 자체는 필요합니다. 괄호 안에는 이미지 경로를 넣습니다. 문법을 맞췄어도 HTML 전용 편집기나 일반 텍스트 입력칸에서는 소스가 그대로 남을 수 있습니다. 이때 느낌표를 계속 추가하기보다 편집기가 제공하는 이미지 삽입 기능을 사용하는 것이 맞는지 확인하세요. 2. alt와 선택 제목을 나눠 검수하기 항목 확인 질문 잘못된 완료 판단 대체텍스트 완성된 그림과 본문 맥락을 설명하는가 제작 프롬프트를 그대로 넣음 선택 제목 title 덧붙일 설명이 실제 필요한가 title을 넣었으니 alt도 있다고 생각 이미지 경로 공개 독자가 접근할 수 있는가 내 PC에서 열리니 업로드 완료 공개 표시 이미지가 로딩되고 문구가 잘리지 않는가 편집 미리보기만 확인 대체텍스트에는 이미지 생성 지시를 남기지 마세요. “따뜻한 느낌으로 그려줘”보다 그림의 실제 대상과 관계를 설명하는 문장이 독자에게 도움이 됩니다. 선택 제목을 넣었다고 대체텍스트 검수가 끝나는 것은 아닙니다. 3. 저장 뒤 공개 화면에서 확인 먼저 원고 한 벌을 보존하고, 해당 편집기가 처리하...