html5
CHAPTER 3 / 33
읽기 약 2분
SYNTAX
AI 프롬프트로 HTML5 200% 활용하기
핵심 개념
HTML5를 배우면서 AI를 코딩 파트너로 활용하는 기초·중급·심화 프롬프트 11개. 4단계 공식(역할+맥락+지시+형식)을 익혀서 AI 답변 품질을 끌어올린다.
본문
이 챕터는 특별합니다. HTML5를 배우면서 AI를 '코딩 파트너'로 활용하는 구체적인 프롬프트를 기초부터 심화까지 단계별로 제공합니다.
OHS의 철학: '코딩을 외우지 마세요. AI를 지휘하는 언어로 배우세요.'
🟢 기초 단계 — AI에게 설명 요청하기
프롬프트 1: 태그의 의미 이해
나는 HTML5를 처음 배우는 학생이야.
<header>, <nav>, <main>, <footer> 태그의
역할과 차이를 실생활 건물에 비유해서 설명해줘.
각 태그를 언제 써야 하는지 예시도 포함해줘.→ 활용 시점: 새로운 태그를 처음 만났을 때 → 기대 결과: 암기가 아닌 '왜 이 태그를 쓰는지' 이해
프롬프트 2: 코드 분석 요청
아래 HTML 코드를 한 줄씩 설명해줘.
각 태그가 무슨 역할을 하는지,
빠지면 어떤 문제가 생기는지 알려줘.
[여기에 코드 붙여넣기]→ 활용 시점: 예제 코드를 이해하고 싶을 때 → 기대 결과: 코드의 각 줄이 왜 필요한지 파악
프롬프트 3: 쉬운 비유 요청
HTML5의 DOM(Document Object Model)이 뭔지
초등학생도 이해할 수 있게 설명해줘.
가족 관계도에 비유해서 부모-자식-형제 관계를 알려줘.→ 활용 시점: 개념이 추상적으로 느껴질 때 → 기대 결과: 복잡한 개념을 직관적으로 이해
🟡 중급 단계 — AI에게 코드 생성·수정 요청하기
프롬프트 4: 구조 생성 요청
HTML5 시맨틱 태그를 사용해서
개인 블로그의 기본 구조를 만들어줘.
포함할 섹션:
- 헤더 (로고 + 네비게이션)
- 메인 (최신 글 3개 카드 형태)
- 사이드바 (카테고리 목록)
- 푸터 (저작권 + SNS 링크)
접근성(aria-label)도 포함해줘.→ 활용 시점: 새 프로젝트의 뼈대를 잡을 때 → 기대 결과: 시맨틱하고 접근성 좋은 HTML 구조
프롬프트 5: 에러 디버깅 요청
아래 HTML 코드에서 문제를 찾아줘.
1) 시맨틱 태그 사용이 올바른지
2) 접근성 문제가 있는지
3) SEO에 불리한 부분이 있는지
각 문제의 수정 코드도 함께 알려줘.
[여기에 코드 붙여넣기]→ 활용 시점: 코드가 동작하지만 품질을 높이고 싶을 때 → 기대 결과: 기능 외에 시맨틱·접근성·SEO까지 개선
프롬프트 6: 폼(Form) 생성 요청
HTML5 폼 태그로 회원가입 양식을 만들어줘.
필수 입력:
- 이름 (text, required)
- 이메일 (email, required)
- 비밀번호 (password, minlength=8)
- 생년월일 (date)
- 성별 (radio)
- 관심 분야 (checkbox, 3개 이상)
- 자기소개 (textarea, maxlength=500)
브라우저 기본 유효성 검사를 최대한 활용해줘.
pattern 속성으로 비밀번호에 영문+숫자 조합을 강제해줘.→ 활용 시점: 입력 폼을 만들 때 → 기대 결과: JS 없이 HTML5 자체 검증으로 동작하는 폼
프롬프트 7: 반응형 이미지·미디어 요청
HTML5의 <picture>, <source>, srcset을 사용해서
반응형 이미지 갤러리를 만들어줘.
조건:
- 모바일(~768px): 작은 이미지
- 태블릿(769~1024px): 중간 이미지
- 데스크톱(1025px~): 큰 이미지
- WebP 우선, 미지원 시 JPG 폴백
- loading="lazy" 적용
각 속성이 왜 필요한지 주석으로 설명해줘.→ 활용 시점: 이미지 최적화가 필요할 때 → 기대 결과: 성능과 호환성을 모두 갖춘 이미지 마크업
🔵 심화 단계 — AI에게 아키텍처·최적화 요청하기
프롬프트 8: SEO 최적화 구조 설계
SEO에 최적화된 블로그 글 페이지의 HTML5 구조를 설계해줘.
포함해야 할 것:
- Open Graph 메타 태그 (SNS 공유용)
- JSON-LD 구조화 데이터 (Article 스키마)
- 시맨틱 heading 구조 (h1은 1개만)
- canonical URL
- 모바일 viewport
- 대체 텍스트(alt)가 있는 이미지
각 메타 태그가 검색 엔진에 미치는 영향을 주석으로 설명해줘.→ 활용 시점: Google 검색 상위 노출이 목표일 때 → 기대 결과: 검색 엔진과 SNS 공유에 최적화된 HTML
프롬프트 9: 접근성(a11y) 감사 요청
아래 HTML 코드의 접근성을 WCAG 2.1 AA 기준으로 감사해줘.
체크할 항목:
1) 모든 이미지에 적절한 alt 텍스트가 있는가
2) 폼 요소에 label이 연결되어 있는가
3) 색상 대비가 4.5:1 이상인가
4) 키보드만으로 모든 기능을 사용할 수 있는가
5) ARIA 속성이 올바르게 사용됐는가
6) 스크린 리더로 읽었을 때 논리적 순서인가
각 항목의 통과/실패 여부와 수정 코드를 알려줘.
[여기에 코드 붙여넣기]→ 활용 시점: 실제 서비스 배포 전 접근성 점검 → 기대 결과: 법적 기준을 충족하는 접근성 확보
프롬프트 10: 성능 최적화 HTML 설계
Core Web Vitals(LCP, FID, CLS) 점수를 최적화하는
HTML5 구조를 설계해줘.
포함:
- 크리티컬 CSS 인라인 삽입 위치
- 스크립트 로딩 전략 (defer vs async)
- 리소스 힌트 (preload, prefetch, preconnect)
- lazy loading 대상 요소
- 이미지 크기 명시 (CLS 방지)
각 최적화가 어떤 Core Web Vitals 지표에 영향을 미치는지
표로 정리해줘.→ 활용 시점: Lighthouse 점수를 90+ 달성하고 싶을 때 → 기대 결과: 성능·SEO·접근성 만점 HTML 구조
프롬프트 11: 풀 페이지 구조 설계
HTML5 + SEO + 접근성 + 성능 최적화를 모두 갖춘
이커머스 상품 상세 페이지의 전체 HTML 구조를 설계해줘.
섹션:
- 상품 이미지 갤러리 (picture + srcset + lazy)
- 상품 정보 (구조화 데이터 Product 스키마)
- 가격 + 장바구니 버튼 (폼)
- 상품 설명 탭 (details/summary 또는 탭 구조)
- 리뷰 섹션 (Review 스키마)
- 관련 상품 추천
시맨틱 태그를 정확히 사용하고
aria-label로 스크린 리더 지원을 완벽하게 해줘.→ 활용 시점: 실전 프로젝트에서 복잡한 페이지를 설계할 때 → 기대 결과: 시맨틱·SEO·접근성·성능 모두 만점인 프로덕션급 HTML
💡 AI 프롬프트 작성 공식
모든 프롬프트에 적용할 수 있는 4단계 공식:
1. 역할: 나는 [HTML5를 배우는 학생 / 주니어 개발자]이야
2. 맥락: [무엇을 만들고 있는지 / 어떤 상황인지]
3. 지시: [구체적으로 무엇을 해달라는지]
4. 형식: [코드 / 표 / 비교 / 주석 포함 등]나쁜 프롬프트: 'HTML 알려줘' 좋은 프롬프트: '나는 HTML5를 배우는 학생이야. 시맨틱 태그를 사용해서 뉴스 기사 페이지의 HTML 구조를 만들어줘. header, article, aside, footer를 포함하고 각 태그를 왜 사용하는지 주석으로 설명해줘.'
→ 구체적일수록 AI의 답변 품질이 올라갑니다.
⚠️ AI 사용 시 주의사항
- AI 코드를 그대로 복붙하지 마세요 — 반드시 한 줄씩 이해한 후 사용
- AI가 틀릴 수 있습니다 — 특히 최신 HTML5 스펙은 교차 검증 필수
- 직접 써봐야 합니다 — AI 설명을 읽는 것과 직접 코딩하는 것은 다릅니다
- 주 2회는 AI 없이 코딩하세요 — 독립적 코딩 능력이 진짜 실력입니다
AI는 최고의 학습 파트너이지만, 대신 배워주지는 않습니다. 다음 챕터부터 직접 HTML5 코드를 작성해봅시다!
💻 실전 코드 비교
<!-- AI 프롬프트 4단계 공식 실전 예시 --> <!-- ❌ 나쁜 프롬프트로 생성된 코드 --> <!-- 프롬프트: 'HTML 만들어줘' --> <div> <div>헤더</div> <div>내용</div> <div>푸터</div> </div> <!-- 문제: 시맨틱 태그 없음, 접근성 0점, SEO 0점 --> <!-- ✅ 좋은 프롬프트로 생성된 코드 --> <!-- 프롬프트: '시맨틱 HTML5로 블로그 글 페이지를 만들어줘. SEO 메타 태그, 접근성(aria), 구조화 데이터 포함.' --> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="HTML5 시맨틱 태그 완벽 가이드"> <!-- Open Graph (SNS 공유) --> <meta property="og:title" content="HTML5 시맨틱 태그 가이드"> <meta property="og:description" content="웹 표준에 맞는 시맨틱 마크업"> <meta property="og:type" content="article"> <!-- 구조화 데이터 (Google 검색 결과) --> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "HTML5 시맨틱 태그 완벽 가이드", "author": { "@type": "Person", "name": "OHS" }, "datePublished": "2026-04-21" } </script> <title>HTML5 시맨틱 태그 완벽 가이드</title> </head> <body> <header role="banner"> <nav aria-label="메인 네비게이션"> <a href="/">홈</a> <a href="/blog">블로그</a> <a href="/about">소개</a> </nav> </header> <main> <article> <h1>HTML5 시맨틱 태그 완벽 가이드</h1> <time datetime="2026-04-21">2026년 4월 21일</time> <section>
<h2>1. 시맨틱 태그란?</h2>
<p>의미를 가진 태그로 구조를 표현합니다.</p>
</section>
<section>
<h2>2. 왜 중요한가?</h2>
<p>SEO, 접근성, 유지보수 — 3가지 이유.</p>
<figure>
<img src="semantic.webp"
alt="시맨틱 태그 구조도: header, nav, main, aside, footer"
loading="lazy"
width="800" height="400">
<figcaption>HTML5 시맨틱 레이아웃 구조</figcaption>
</figure>
</section>
</article>AI 프롬프트
🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트
Claude
무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6
내가 만든 HTML5 페이지에 AI를 활용해서 시맨틱·SEO·접근성을 자동 점검받는 프롬프트 템플릿 3종을 설계해줘.
ChatGPT
무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro
HTML5 학습에 ChatGPT를 활용하는 실전 시나리오 5가지(코드 변환, 디버깅, 접근성, SEO, 리팩토링)를 바로 쓸 수 있는 프롬프트와 함께 보여줘.
Gemini
무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro
HTML5 페이지 전체 코드를 AI로 분석할 때 Claude/ChatGPT/Gemini/Grok 각각이 가장 잘하는 영역과 적합한 프롬프트 패턴을 비교 정리해줘.
Grok
무료: Grok 4.1 / SuperGrok $30/mo
2026년에 AI 코드 어시스턴트로 HTML5를 배우는 게 책·강의보다 빠른지, 어떤 한계가 있는지 솔직하게 평가해줘.
⭐ 이것만 기억하세요
AI 프롬프트로 HTML5 200% 활용하기는 이 3가지만 확실히 잡으세요
1.AI 프롬프트 4단계 공식: 역할 + 맥락 + 지시 + 형식 — 구체적일수록 AI 답변 품질이 올라간다
2.기초(설명 요청) → 중급(코드 생성·디버깅) → 심화(아키텍처·최적화) — 단계별로 AI 활용 수준을 높인다
3.AI는 최고의 학습 파트너이지만 대신 배워주지 않는다 — 주 2회는 AI 없이 직접 코딩하자
공유하기
진행도 3 / 33