ChatGPT 같은 생성형 AI에게 “파란색 배경의 소개 페이지를 HTML로 만들어줘”라고 요청하면 몇 초 안에 긴 코드가 나타납니다. 제목과 문단뿐 아니라 버튼, 표, 카드, 여백, 색상까지 포함된 코드를 보면 AI가 머릿속에서 웹페이지를 완성한 뒤 HTML로 변환하는 것처럼 느껴질 수 있습니다.

하지만 실제 과정은 조금 다릅니다. AI는 브라우저처럼 HTML을 해석해 화면을 직접 그리지도 않고, 사람이 사용하는 디자인 프로그램처럼 화면 위에 요소를 배치하지도 않습니다. 기본적으로는 사용자의 입력과 현재 대화 내용을 토큰 단위로 처리한 뒤, 그다음에 이어질 가능성이 높은 코드 조각을 연속적으로 생성합니다.

그렇다고 단순히 태그를 무작위로 이어 붙이는 것은 아닙니다. AI는 학습 과정에서 접한 HTML 문서, 웹 개발 설명, 코드 예제, 태그 조합과 문서 구조의 관계를 바탕으로 어떤 목적에는 어떤 구조가 자연스러운지를 패턴으로 익힙니다. 그래서 블로그 글을 요청하면 제목과 본문 중심의 구조를 만들고, 로그인 화면을 요청하면 입력창과 버튼을 포함하며, 상품 비교표를 요청하면 table 요소나 카드형 구성을 선택할 수 있습니다.

1. AI는 완성된 웹페이지보다 텍스트를 먼저 만든다

AI가 HTML을 생성하는 과정을 이해하려면 먼저 HTML도 결국 텍스트 데이터라는 점을 알아야 합니다. 사람이 보기에는 div, h1, p, a 같은 태그가 특별한 명령처럼 보이지만, 언어 모델의 입력 단계에서는 일반 문장과 마찬가지로 문자와 기호가 결합된 토큰의 연속으로 처리됩니다.

예를 들어 AI가 제목을 만들 때 처음부터 완성된 제목 박스를 생성하는 것이 아닙니다. 먼저 여는 꺾쇠괄호와 태그 이름에 해당하는 토큰을 출력하고, 속성이나 스타일을 이어서 만든 다음, 제목 문구와 닫는 태그를 차례대로 생성합니다. 이 과정은 응답이 끝날 때까지 반복됩니다.

중요한 점은 각 토큰이 완전히 독립적으로 선택되지 않는다는 것입니다. 모델은 사용자의 요청뿐 아니라 자신이 이미 출력한 앞부분도 계속 참고합니다. 앞에서 파란색을 기본 색상으로 사용했다면 뒤에 나오는 버튼과 제목에서도 비슷한 색상을 유지하려 하고, 외부 컨테이너의 최대 너비를 정했다면 내부 요소도 그 범위에 맞게 작성하려는 경향을 보입니다.

따라서 “다음 토큰을 예측한다”는 설명이 곧 “한 글자 앞만 보고 무작위로 작성한다”는 뜻은 아닙니다. 실제로는 현재 사용할 수 있는 컨텍스트 안에서 요청, 코드 구조, 디자인 조건, 앞서 생성한 태그를 함께 고려하면서 다음 출력을 결정합니다.

2. 요청에서 필요한 HTML 구조를 추론하는 과정

사용자가 HTML을 요청할 때 항상 태그를 하나씩 지정하는 것은 아닙니다. “제품 비교 페이지를 만들어줘”, “워드프레스에 붙여넣을 블로그 글을 작성해줘”, “모바일에서도 잘 보이는 신청 폼을 만들어줘”처럼 목적만 설명하는 경우가 많습니다.

AI는 이런 자연어 요청에서 화면에 필요한 구성 요소를 추론합니다. 제품 비교라면 제목, 제품 설명, 사양 표, 장단점, 구매 버튼이 필요할 가능성이 높습니다. 블로그 글이라면 큰 제목, 요약, 여러 개의 소제목, 본문 문단, 표, FAQ 같은 구성을 선택할 수 있습니다. 신청 폼이라면 label, input, select, textarea, button처럼 입력과 제출에 필요한 요소를 예상합니다.

이 과정은 사람이 작성한 고정 템플릿을 그대로 검색해 복사하는 방식과는 다릅니다. 모델은 요청에 포함된 단어, 일반적인 웹 문서의 패턴, 현재 대화에서 제시된 예시와 조건을 결합하여 새로운 출력 순서를 구성합니다. 같은 요청이라도 대화 맥락이나 세부 조건이 달라지면 태그 구조와 스타일이 달라질 수 있는 이유입니다.

요청이 구체적일수록 추론해야 할 범위는 줄어듭니다. 반대로 “예쁘게 만들어줘”처럼 기준이 모호하면 AI가 색상, 여백, 구성, 버튼 형태를 자체적으로 선택해야 하므로 결과의 편차가 커집니다. 원하는 디자인이 있다면 최대 너비, 색상, 카드 모양, 모바일 조건, 포함할 섹션과 제외할 요소를 명확하게 적는 것이 좋습니다.

3. 태그는 어떤 기준으로 선택할까?

HTML에는 같은 모양을 만들 수 있는 여러 방법이 있습니다. 큰 글씨는 h1으로도 만들 수 있고, 일반 div에 큰 font-size를 적용해서 만들 수도 있습니다. 목록은 ul과 li를 사용할 수도 있고, 여러 개의 div를 반복해서 표현할 수도 있습니다. AI는 요청의 의미와 학습한 코드 패턴을 바탕으로 이 가운데 적절해 보이는 구성을 선택합니다.

좋은 HTML은 단순히 화면이 비슷하게 보이는 코드가 아닙니다. 제목은 heading 요소, 문단은 p 요소, 링크는 a 요소, 표 형식의 데이터는 table 요소처럼 콘텐츠의 의미에 맞는 태그를 사용하는 것이 중요합니다. 이를 시맨틱 HTML이라고 하며, 브라우저뿐 아니라 검색엔진과 보조 기술이 문서 구조를 파악하는 데 도움을 줍니다.

다만 AI가 언제나 가장 의미론적인 태그를 선택하는 것은 아닙니다. 학습 데이터에 div 중심의 코드가 많거나 사용자가 디자인만 강조한 경우에는 div와 span을 과도하게 사용할 수 있습니다. 겉보기에는 정상이어도 제목 단계가 뒤섞이거나, 버튼처럼 보이는 요소가 실제 button이 아니거나, 표 형태의 정보를 div로만 구성할 수 있습니다.

따라서 접근성이나 검색엔진 최적화가 중요하다면 프롬프트에 “시맨틱 HTML을 사용하고 제목 계층을 지켜줘”, “입력창마다 label을 연결해줘”, “클릭 동작에는 적절한 a 또는 button 요소를 사용해줘” 같은 조건을 추가하는 편이 좋습니다.

4. 인라인 CSS와 레이아웃도 같은 방식으로 생성된다

AI가 HTML 안에 CSS까지 작성할 때도 별도의 그래픽 엔진으로 색상과 간격을 계산하는 것은 아닙니다. 웹에서 자주 사용되는 CSS 속성의 조합과 사용자가 지정한 디자인 조건을 바탕으로 적절한 코드 패턴을 생성합니다.

예를 들어 “파란색 그라데이션 Hero 영역”이라는 요청을 받으면 background에 linear-gradient를 사용하고, 둥근 모서리를 위해 border-radius를 추가하며, 내부 여백에는 padding을 적용하는 조합을 선택할 수 있습니다. 카드 디자인에는 흰색 배경, 옅은 테두리, 그림자, 둥근 모서리를 함께 사용하는 경우가 많습니다.

이처럼 AI는 하나의 속성만 선택하는 것이 아니라 여러 속성이 함께 사용되는 패턴을 학습합니다. 그래서 특정 디자인 언어를 예시로 제공하면 이후 영역에서도 비슷한 색상, 그림자, 여백을 반복하여 전체적인 통일감을 만들 수 있습니다.

하지만 CSS 속성은 서로 영향을 주기 때문에 코드가 문법적으로 맞는다고 해서 항상 원하는 화면이 나오는 것은 아닙니다. 고정 너비가 모바일 화면보다 크거나, 흰색 배경에 흰색 글자를 지정하거나, 부모 요소의 overflow 때문에 콘텐츠가 잘릴 수 있습니다. AI는 화면을 실제 브라우저에서 실행하지 않은 상태로 코드를 생성할 수 있으므로 이런 시각적 충돌을 완전히 피하지 못할 때가 있습니다.

5. 브라우저는 생성된 HTML을 어떻게 화면으로 바꿀까?

AI의 역할은 HTML 문자열을 생성하는 단계에서 끝납니다. 코드가 실제 웹페이지처럼 보이려면 브라우저가 이를 받아 해석해야 합니다. 브라우저는 HTML 문서를 위에서 아래로 읽으면서 태그와 속성을 분석하고, 요소 사이의 부모·자식 관계를 가진 DOM 트리를 만듭니다.

예를 들어 외부 div 안에 h1과 p가 들어 있다면 브라우저는 div를 부모 노드로, h1과 p를 그 아래의 자식 노드로 구성합니다. 이후 CSS를 분석해 각 요소에 적용할 스타일을 계산하고, 화면에서 차지할 크기와 위치를 정한 다음 픽셀로 그려냅니다.

HTML에는 오류를 어느 정도 복구하는 규칙도 있습니다. 닫는 태그가 일부 빠졌거나 요소가 잘못 중첩되어 있어도 브라우저가 문서를 최대한 표시하려고 구조를 보정할 수 있습니다. 이 때문에 AI가 만든 코드에 문제가 있어도 화면이 그럴듯하게 보일 때가 있습니다.

그러나 브라우저가 화면을 표시했다는 사실이 코드가 정확하다는 의미는 아닙니다. 브라우저가 태그를 예상과 다르게 보정하면 CSS가 엉뚱한 요소에 적용되거나, 특정 브라우저에서만 레이아웃이 달라질 수 있습니다. 생성 결과를 검증할 때는 눈으로 보이는 디자인뿐 아니라 문서 구조도 함께 확인해야 합니다.

• 외부 컨테이너의 너비와 기본 글꼴
• Hero와 버튼에 사용하는 대표 색상
• 제목 단계와 섹션 순서
• 카드의 테두리, 그림자와 모서리 값
• 모바일에서 넘치지 않는 너비 설정
• 열린 태그와 아직 닫지 않은 태그의 관계
• 사용자가 금지한 요소와 반드시 포함해야 할 항목

• 외부 wrapper의 닫는 태그가 정확한지
• 링크 주소가 실제로 존재하는 공식 페이지인지
• 새 창 링크에 적절한 rel 속성이 있는지
• 버튼의 글자색과 배경색이 충분히 구분되는지
• 표와 긴 코드가 모바일 화면을 넘지 않는지
• 같은 id가 한 문서 안에서 반복되지 않는지
• 사용자 입력을 넣는 코드에 보안 문제가 없는지

• 사용 목적: 블로그, 이메일, 상품 설명, 안내 페이지 등
• 사용 환경: 워드프레스, 일반 웹문서, 앱 내부 웹뷰 등
• 필수 구조: Hero, 요약, 표, FAQ, 버튼 등
• 스타일 방식: 인라인 CSS, 내부 CSS, 외부 CSS 여부
• 디자인 기준: 대표 색상, 너비, 여백, 카드 형태
• 반응형 조건: 모바일에서 한 열, 가로 넘침 방지 등
• 금지 조건: JavaScript, 이미지, 외부 라이브러리 제외 등
• 검증 조건: 태그 닫힘, 링크, 대비, 접근성 점검

• h1은 핵심 제목으로 사용하고 제목 단계를 자연스럽게 구성했는지
• 링크 문구만 읽어도 이동 목적을 알 수 있는지
• 입력 요소와 label이 정확히 연결되어 있는지
• 키보드만으로 링크와 버튼을 사용할 수 있는지
• 글자와 배경 사이의 대비가 충분한지
• 표의 제목 셀과 데이터 셀 관계가 명확한지
• 색상 하나만으로 중요한 상태를 구분하지 않는지

1. HTML 태그 중첩과 닫힘 상태를 확인합니다.
2. 데스크톱 브라우저에서 전체 레이아웃을 확인합니다.
3. 모바일 너비에서 표, 버튼과 긴 문장을 확인합니다.
4. 배경색과 글자색의 대비를 점검합니다.
5. 모든 내부 링크와 공식 링크를 직접 열어봅니다.
6. 제목 계층과 시맨틱 요소를 확인합니다.
7. 워드프레스 편집기가 스타일을 제거하지 않는지 확인합니다.
8. 실제 게시 전 미리보기에서 마지막으로 점검합니다.

정해진 문서를 그대로 꺼내는 방식이라기보다 학습한 코드 패턴과 현재 요청을 바탕으로 다음 토큰을 생성합니다. 태그의 일반적인 조합과 구조를 학습했기 때문에 새로운 주제의 HTML도 만들 수 있습니다.

항상 브라우저에서 실행된 최종 화면을 확인하면서 작성하는 것은 아닙니다. 코드 생성과 실제 렌더링은 구분되므로 브라우저 미리보기와 모바일 검사가 필요합니다.

가능합니다. 생성 과정에는 여러 후보 중 하나를 선택하는 특성이 있으며 대화 컨텍스트도 결과에 영향을 줍니다. 고정 템플릿과 구체적인 규칙을 제공하면 편차를 줄일 수 있습니다.

단순 정보 페이지라도 태그 구조, 모바일 화면, 색상 대비와 링크를 확인한 뒤 사용하는 것이 좋습니다. 로그인, 결제, 개인정보 입력 기능은 개발자와 보안 검토가 추가로 필요합니다.

사용 환경에 따라 다릅니다. 워드프레스의 단일 글처럼 독립된 콘텐츠에는 인라인 CSS가 편할 수 있지만, 여러 페이지를 운영하는 웹사이트에서는 외부 CSS와 재사용 가능한 클래스가 유지보수에 유리합니다.

검증된 마스터 템플릿과 변경 금지 규칙을 제공하면 일관성을 높일 수 있습니다. 색상 값, 섹션 순서, 카드 스타일처럼 확인 가능한 조건을 구체적으로 정하는 것이 중요합니다.

그렇지는 않습니다. 브라우저는 일부 잘못된 HTML을 자동으로 보정해 표시할 수 있습니다. 화면이 정상적으로 보여도 태그 구조와 접근성, 브라우저별 동작을 따로 확인해야 합니다.

AI는 웹페이지를 직접 그리는 것이 아니라 요청과 코드 패턴을 바탕으로 HTML 토큰을 순서대로 생성하며, 실제 화면은 브라우저가 구조를 해석하고 CSS를 적용하면서 완성합니다.