실무 첫걸음, 생성형 AI로 배우는 UX/UI & 프론트엔드
ChatGPT로 웹표준 검사하는 방법 (단계별 완벽 가이드)
웹페이지를 만들고 나면 꼭 확인해야 하는 것이 웹표준 준수 여부입니다.
기존에는 W3C Validator 같은 도구를 많이 사용했지만, 이제는 ChatGPT를 활용해 더 직관적이고 빠르게 검사할 수 있습니다.
이 글에서는 ChatGPT를 활용하여 웹표준을 검사하는 방법을 단계별로 정리해드립니다.
1단계: ChatGPT 사용 환경 준비
- https://chat.openai.com 접속
- 가능하면 ChatGPT Plus (GPT-4 모델) 사용 추천
- → 코드 이해력이 높아 더 정확한 분석 가능
첫 질문 예시:
웹표준에 맞는 HTML 코드를 작성하고 싶습니다. 아래 코드를 분석해서 문제점을 알려주세요.
2단계: 검사할 HTML 코드 붙여넣기
웹사이트에서 사용한 HTML 코드 전체 또는 일부를 복사해 ChatGPT에 붙여넣습니다.
예시 코드:
<!DOCTYPE html>
<html>
<head>
<title>My Web</title>
</head>
<body>
<div>
<h1>Welcome</h1>
<font color="red">Old Tag</font>
</div>
</body>
</html>
3단계: ChatGPT 분석 결과 확인
ChatGPT는 아래와 같은 항목 중심으로 분석합니다.
분석 항목 설명
| ❌ 폐기된 태그 사용 | <font>, <center> 등 |
| ✅ 시멘틱 태그 사용 여부 | <main>, <section> 등 |
| ❌ 접근성 속성 누락 | alt, label, lang 등 |
| ❌ 구조 오류 | 태그 중첩, 닫힘 누락 등 |
예시 분석 결과:
<font> 태그는 HTML5에서 폐기되었습니다. CSS로 대체하세요.<html> 태그에 lang="ko" 속성이 없습니다.meta charset이 누락되었습니다.
4단계: ChatGPT에게 수정 요청
문제점을 확인했으면, 이렇게 입력해보세요:
웹표준에 맞게 코드를 수정해줘.
수정된 예시 코드:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>My Web</title>
</head>
<body>
<main>
<h1>Welcome</h1>
<p style="color: red;">Modern styled text</p>
</main>
</body>
</html>
5단계: CSS, JS 코드도 검사 가능
CSS나 JavaScript 코드도 붙여넣고 동일하게 요청할 수 있습니다.
예시 요청:
아래 CSS 코드가 웹표준과 접근성 기준에 맞는지 확인해줘.
6단계: 반복 점검으로 완성도 높이기
수정할 때마다 ChatGPT에 코드를 다시 붙여넣고 확인하세요.
이 과정을 반복하면서 웹표준 준수 + 코드 품질을 동시에 높일 수 있습니다.
보조 도구 함께 활용하기
ChatGPT는 문맥 기반 분석에 강점이 있지만, 기계적인 코드 규칙 확인은 별도 도구와 병행하는 것이 좋습니다.
도구 설명
| W3C Validator | HTML5 문법 검사 |
| WebAIM WAVE | 접근성 분석 |
| axe DevTools | 브라우저 접근성 검사 도구 |
마무리 요약
단계 내용
| 1단계 | ChatGPT 사용 준비 |
| 2단계 | HTML 코드 붙여넣기 |
| 3단계 | 분석 결과 확인 |
| 4단계 | 수정 코드 요청 |
| 5단계 | CSS, JS도 검사 가능 |
| 6단계 | 반복 점검으로 완성도 향상 |
웹표준 준수는 검색엔진 최적화(SEO)나 접근성 향상, 유지보수 측면에서 필수입니다.
ChatGPT를 잘 활용하면 보다 쉽고 빠르게 웹표준을 점검할 수 있습니다.
💬 댓글
이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.
'프론트엔드 개발 실무 > 웹표준 & 웹접근성 실무 가이드' 카테고리의 다른 글
| [웹접근성 완벽가이드 ①] WAI-ARIA 이름의 의미 (0) | 2025.05.15 |
|---|---|
| 웹접근성 완벽가이드 (0) | 2025.05.15 |
| HTML5와 CSS3의 세부 속성별 표준 명세 및 코드 검사 방법 (0) | 2025.05.14 |
| 웹표준의 기술적 규칙 & 규격 (0) | 2025.05.14 |
| 웹표준 개요 와 시멘틱 태그 개념 (1) | 2025.05.14 |