AI는 HTML 생성에 뛰어나지만, 기본 출력은 중첩된 <div>와 유틸리티 클래스가 뒤엉켜 깊은 컨테이너 트리로 변환되는 경우가 많습니다. 몇 가지 프롬프트 규칙만으로 이를 해결할 수 있습니다.
시맨틱 HTML 요청하기
모델에게 실제 태그를 사용하도록 지시하세요. 제목에는 <h1>–<h3>, 텍스트에는 <p>, 클릭 유도 버튼에는 <button>이나 <a class="button">, 목록에는 <ul>을 사용합니다. 네이티브 태그는 네이티브 위젯에 바로 매핑됩니다.
중첩 제한하기
다음 내용을 추가하세요. “DOM을 얕게 유지하세요 — 섹션당 하나의 래퍼만 사용하고 불필요한 중첩은 피하세요.” 이렇게 하면 변환 후 생성되는 컨테이너 계층 수가 직접적으로 줄어듭니다.
인라인 스타일 또는 단일 스타일 블록 선호하기
외부 프레임워크 대신 인라인 스타일이나 하나의 <style> 블록을 요청하세요. 변환기는 계산된 스타일을 읽기 때문에, 자체 완결형 CSS가 가장 잘 전달됩니다.
시작 프롬프트 예시
“[주제]를 위한 반응형 HTML 섹션을 생성하세요. 시맨틱 태그(h2, p, button, ul)를 사용하고, 블록당 하나의 래퍼로 DOM을 얕게 유지하며, 모든 CSS를 단일 스타일 블록에 담고, 아이콘에는 Font Awesome 아이콘 클래스를 사용하세요(인라인 SVG나 Base64 대신 <i class=”fas fa-check”>처럼). 외부 스크립트나 글꼴은 사용하지 마세요.”
결과물을 변환기에 붙여넣고 네이티브 컴포넌트 모드로 전환한 후 구조 맵을 확인하세요. 컨테이너 수가 훨씬 줄고, 대부분의 행이 녹색의 “직접 변환”으로 표시될 것입니다.