도현의 AI 워크플로우

AI가 만든 HTML 폼에서 체크하지 않은 항목이 전송 데이터에 없다고 해서 바로 저장 오류라고 판단하지 마세요. 일반 HTML 체크박스는 미선택 상태에서 이름과 값 자체가 전송되지 않는 동작을 합니다. 목차 1. 화면의 빈 체크칸과 false 값은 다릅니다 2. 선택적 뉴스레터 항목의 예시 3. AI 폼 검수 질문 네 가지 4. 저장 버그로 판단하기 전에 1. 화면의 빈 체크칸과 false 값은 다릅니다 MDN의 HTML 체크박스 문서는 선택하지 않은 체크박스의 이름과 값이 서버에 제출되지 않는다고 설명합니다. 선택한 경우에는 name과 value가 전달되며, value를 생략했으면 기본값 on을 사용합니다. 따라서 빈 체크칸이 보인다는 것, false라는 값이 전송됐다는 것, 수신 데이터에 항목이 없다는 것은 서로 다른 상태입니다. 폼과 서버의 약속이 어떻게 되어 있는지를 확인해야 합니다. 2. 선택적 뉴스레터 항목의 예시 가상의 선택 항목을 name="news" value="yes" 인 체크박스로 만들었다고 가정합니다. 일반 HTML 폼 전송에서 체크하면 news=yes가 전달되고, 체크하지 않으면 news 항목이 빠집니다. 화면·코드 상태 전송 결과의 예시 news를 체크함 news=yes news를 체크하지 않음 news 항목 없음 체크했으나 value를 생략함 news=on 이는 선택적 기능을 설명하는 예시이며 실제 개인정보 동의 양식을 구현한 완성 예시는 아닙니다. 어떤 값을 필수로 받아야 하는지는 제품의 요구와 실제 처리 방식에 맞춰 별도로 정해야 합니다. 3. AI 폼 검수 질문 네 가지 질문 확인할 내용 현재 상태인가? checked 속성의 기본값과 사용자의 현재 선택 구분 이름이 있는가? 전송에 사용할 name과 화면 라벨 구분 값이 무엇인가? 명시한 value와 생략 시 기본값 구분 항목 없음은 어떻게 읽나? 서버가 미선택·누락·오류를 어떻게 처리하는지 필수 동의나 사용자 선택을 임의로 체크한 상태로 바...

입력 칸을 고칠 수 없게 보이게 했다고 제출 데이터까지 같아지는 것은 아닙니다. 텍스트 입력의 readonly와 disabled를 나누어 실제 FormData 항목 을 확인하세요. 목차 1. 보이는 상태와 제출 데이터를 나누기 2. 작은 폼에서 차이 확인 3. 서버 검증은 별도로 유지 4. 자주 묻는 질문 1. 보이는 상태와 제출 데이터를 나누기 WHATWG HTML 표준은 readonly를 사용자 편집을 막는 속성으로 설명합니다. disabled와 같은 뜻이 아니며 readonly는 텍스트 계열 입력에 적용됩니다. 체크박스나 버튼에 같은 효과가 있다고 가정하지 마세요. AI가 작성한 프로필 수정 화면을 검토한다면, 변경 불가 ID를 readonly로 보여 주는지 disabled로 비활성화하는지 먼저 읽습니다. 이 선택이 서버에서 필요한 값을 빠뜨리거나 예상과 다른 제출을 만들 수 있습니다. 2. 작은 폼에서 차이 확인 직접 구성한 로컬 예제는 name="account" value="reader" readonly와 name="plan" value="basic" disabled를 같은 폼에 두고 new FormData(form)을 읽습니다. 확인 결과 account=reader는 포함되고 plan은 제외됐습니다. 실제 서비스의 계정 정보나 인증 자료는 사용하지 않았습니다. 예제 입력 편집 상태 FormData 확인 account / readonly 사용자 수정 제한 account=reader 포함 plan / disabled 비활성화 plan 항목 제외 속성만 보고 판단 화면이 비슷해 보임 실제 키·값을 함께 비교 3. 서버 검증은 별도로 유지 readonly는 접근 권한을 보장하는 보안 경계가 아닙니다. 서버는 전달된 값을 별도로 검증해야 합니다. 제출 전에 값을 복구하는 숨은 스크립트를 더하기보다, 어떤 필드가 제출돼야 하는지와 서버의 기대 형식을 먼저 명확히 하세요. 검토 기록 확인 질...

폼 안의 “미리보기” 버튼을 눌렀는데 제출이 실행된다면 버튼 글자보다 type 속성을 먼저 확인하세요. 일반적인 form에 연결된 button에서 type을 생략하면 기본 제출 동작이 적용됩니다. 목차 1. “미리보기”라는 글자가 동작을 정하지 않습니다 2. 세 가지 역할을 표로 정하기 3. 같은 연습 폼에서 한 항목씩 확인하기 4. 자주 묻는 질문 1. “미리보기”라는 글자가 동작을 정하지 않습니다 MDN은 button의 type으로 submit, reset, button을 설명합니다. 일반적인 폼 안에서 type이 생략된 버튼은 제출 버튼으로 동작할 수 있습니다. 폼 검증에서 제출이 막히는 경우도 있으므로, 눌렀을 때 화면이 바뀌지 않았다는 사실만으로 type이 올바르다고 판단하지 않습니다. <form> <button>미리보기</button> <button type="submit">제출</button> </form> 위 코드는 첫 버튼의 이름과 기본 역할이 어긋날 수 있는 예시입니다. 실제 개인정보나 운영 중인 신청서로 시험하기 전에 복사한 연습 화면에서 확인하는 편이 좋습니다. 2. 세 가지 역할을 표로 정하기 하려는 일 type의 기본 의미 함께 확인할 것 최종 제출 submit 제출 대상과 검증 조건 일반 클릭 동작 button 미리보기 등을 수행할 별도 처리 폼 값 되돌리기 reset 사용자가 입력한 값에 미치는 영향 <button type="button">미리보기</button> <button type="submit">제출</button> type="button"을 쓰면 그 자체의 기본 제출 동작은 없습니다. 그렇다고 미리보기 기능이 자동으로 생기지는 않습니다. 클릭을 처리하는 코드가 필요하고, 그 코드가 다시 제출을 호출하도록 작성돼 있다면 별도로 점검해야 합니다...

HTML의 details에 open="false"를 써도 처음부터 열립니다. open은 불리언 속성이어서 값의 문자열보다 속성이 존재하는지가 기준이기 때문입니다. 처음에 닫힌 상태를 원하면 open 속성 전체를 제거하세요. 목차 1. false라는 글자가 닫힘 스위치는 아닙니다 2. 시작 상태를 비교하는 짧은 예제 3. 코드와 공개 페이지를 함께 확인 4. 자주 묻는 질문 1. false라는 글자가 닫힘 스위치는 아닙니다 MDN은 open이 불리언 속성이라고 설명합니다. 속성이 있으면 펼쳐지고, 없으면 기본적으로 내용이 숨겨집니다. 문자열 "false"를 넣어도 존재하는 속성인 점은 같으므로 닫힌 상태가 되지 않습니다. AI가 만든 HTML 초안이나 다른 예제를 검토할 때 “false라는 단어가 있으니 닫혔겠지”라고 판단하기 쉬운 부분입니다. 코드의 단어 뜻과 브라우저가 속성을 처리하는 규칙을 나눠 보세요. 2. 시작 상태를 비교하는 짧은 예제 작성한 시작 태그 초기 상태 <details> 닫힘 <details open> 열림 <details open="false"> 열림 아래는 이 글을 위해 만든 최소 예제입니다. 닫힌 초기 상태를 원하므로 시작 태그에서 open을 뺐습니다. 펼치는 제목은 summary에 넣고 본문은 그 다음에 둡니다. <details> <summary>준비물 확인</summary> <p>필요한 준비물을 적습니다.</p> </details> 열린 초기 상태를 원할 때만 첫 줄을 <details open> 으로 바꿉니다. 닫힘을 만들려고 빈 문자열이나 "false"로 값을 바꾸는 대신 속성의 존재 여부를 확인하세요. 3. 코드와 공개 페이지를 함께 확인 MDN은 summary를 클릭하거나 포커스가 있을 때 스페이스 키로 펼침 상태를 바꾸는 동작을 설명합니다. ...

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"> 처럼 표현할 수 있습니다. 아래 예시는 언어 속성의 위치를 보여 주기 위한 짧은 코드이며 완성된 웹페이지가 아닙...