ChatGPT·Claude로 HTML 수정하기 | 기존 코드에서 필요한 부분만 바꾸는 방법

AI로 HTML 수정하기 전, 변경 범위부터 정하세요

기존 HTML을 AI에 전달하기 전에 어떤 부분을 수정할지 먼저 정하는 것이 좋습니다.

예를 들어 홈페이지 서비스 소개 영역에 새로운 카드를 추가하려면 해당 영역의 HTML을 확인하고, 기존 카드에 사용된 태그와 클래스명을 살펴봅니다.

이때 준비할 내용은 크게 세 가지입니다.

여기에 화면 배치까지 변경해야 한다면 관련 CSS를, 버튼이나 메뉴처럼 기능이 연결된 요소라면 JavaScript 코드를 추가로 확인해야 합니다.

AI에 홈페이지 전체 소스를 무조건 전달할 필요는 없습니다. 수정할 영역을 중심으로 필요한 코드를 제공하고, 주변 구조가 영향을 줄 수 있다면 관련 부분을 함께 전달하는 방식으로 시작할 수 있습니다.

작업 전에는 원본 파일을 별도로 저장해 두는 것이 좋습니다. AI가 예상과 다르게 수정하거나 기존 기능에 문제가 생겼을 때 원래 상태로 되돌릴 수 있기 때문입니다.

외부 AI 서비스에 코드를 입력하기 전에는 해당 자료를 전달해도 되는지 확인하고, API 키나 비밀번호, 고객 개인정보처럼 민감한 정보는 제외해야 합니다.

HTML 수정 예제: 기존 서비스 카드에 항목 하나 추가하기

이번에는 서비스 소개 영역에 새로운 카드를 추가해 보겠습니다.

아래는 설명을 위해 작성한 HTML 예제입니다.

수정 전 HTML 코드

<section class="service-list" aria-label="서비스 목록">
  <article class="service-card">
    <h3>웹사이트 제작</h3>
    <p>프로젝트 목적에 맞게 화면을 구성합니다.</p>
  </article>

  <article class="service-card">
    <h3>유지보수</h3>
    <p>운영 중 필요한 수정 작업을 진행합니다.</p>
  </article>
</section>

현재 .service-list 영역에는 2개의 카드가 있습니다.

여기에 다음 내용을 가진 카드를 추가하려고 합니다.

기존 카드와 동일한 구조를 사용하면 되므로 새로운 HTML을 처음부터 작성할 필요는 없습니다.

단, 기존 카드의 클래스명이나 문구는 변경하지 않는다는 조건이 있습니다.

ChatGPT·Claude에 HTML 수정을 요청하는 프롬프트

AI에 코드를 전달할 때는 원하는 결과만 설명하기보다 변경하지 않을 부분까지 함께 지정하는 편이 좋습니다.

예를 들어 다음과 같이 요청할 수 있습니다.

이 프롬프트에서는 추가할 내용, 위치, 유지해야 할 코드를 각각 구분했습니다.

특히 클래스명을 유지하도록 요청한 이유는 기존 CSS나 JavaScript에서 해당 클래스를 사용하고 있을 수 있기 때문입니다.

ChatGPT와 Claude 모두 이러한 방식으로 코드 수정을 요청할 수 있습니다. 다만 실제 출력 결과는 도구와 입력한 코드, 대화 맥락에 따라 달라질 수 있습니다.

프롬프트에 조건을 명시하더라도 AI가 이를 항상 정확하게 지킨다고 볼 수는 없으므로 결과를 확인해야 합니다.

AI가 수정한 HTML, 원본과 비교해 보세요

앞서 작성한 프롬프트에서 기대하는 수정 결과는 다음과 같습니다.

수정 후 HTML 코드

<section class="service-list" aria-label="서비스 목록">
  <article class="service-card">
    <h3>웹사이트 제작</h3>
    <p>프로젝트 목적에 맞게 화면을 구성합니다.</p>
  </article>

  <article class="service-card">
    <h3>유지보수</h3>
    <p>운영 중 필요한 수정 작업을 진행합니다.</p>
  </article>

  <article class="service-card">
    <h3>랜딩페이지 제작</h3>
    <p>캠페인 목적에 맞는 단일 페이지를 제작합니다.</p>
  </article>
</section>

기존 카드 2개는 유지되고 마지막에 새로운 article 요소가 추가됐습니다.

새 카드에도 기존과 동일한 .service-card 클래스가 적용되어 있습니다.

VS Code를 사용한다면 원본 파일과 수정 파일을 비교할 수 있고, Git으로 관리하는 프로젝트라면 git diff를 통해 변경된 코드를 확인할 수도 있습니다.

비교 과정에서는 새 카드가 추가됐는지뿐 아니라 기존 코드의 클래스명, 속성, 문구가 의도치 않게 달라지지 않았는지도 살펴봐야 합니다.

예를 들어 AI가 기존 .service-card를 .service-item으로 변경했다면, 새 이름에 대응하는 CSS가 없을 경우 기존 스타일이 적용되지 않을 수 있습니다.

따라서 수정 코드가 정상적인 HTML 형태라고 해서 검토를 끝내기보다는 원본과 달라진 부분을 먼저 확인하는 편이 좋습니다.

HTML만 수정했는데 화면 배치가 달라지는 이유

HTML에 카드를 하나 추가했다고 해서 화면 배치까지 자동으로 원하는 형태로 바뀌는 것은 아닙니다.

다음과 같은 CSS가 적용되어 있다고 가정해 보겠습니다.

.service-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

이 코드는 서비스 카드를 한 줄에 2개씩 배치하도록 설정합니다.

기존 카드가 2개였다면 한 줄에 나란히 표시되지만, HTML에 세 번째 카드를 추가하면 다음 줄로 배치됩니다.

카드를 3개로 늘렸는데도 기존처럼 2열로 보이는 이유는 HTML이 아니라 CSS에서 열 개수를 지정했기 때문입니다.

PC 화면에서 세 카드를 한 줄에 배치하려는 목적이라면 해당 설정을 다음처럼 변경하는 방법을 검토할 수 있습니다.

.service-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

다만 이 코드는 3열 배치의 예시일 뿐입니다. 실제 홈페이지에서는 콘텐츠 폭과 기존 미디어쿼리, 모바일 레이아웃을 함께 확인해야 합니다.

화면 너비가 좁아졌을 때 카드가 지나치게 작아지거나 텍스트가 불편하게 줄바꿈된다면 모바일용 열 설정도 조정해야 할 수 있습니다.

먼저 HTML에 필요한 요소를 추가한 뒤 화면을 확인하고, 배치 변경이 필요한 경우에만 관련 CSS를 수정하는 방식입니다.

AI가 수정한 HTML을 적용한 뒤 확인할 부분

AI가 작성한 코드를 실제 홈페이지에 적용했다면 HTML 구조뿐 아니라 화면과 기능도 확인해야 합니다.

AI가 요청하지 않은 코드까지 바꿨다면?

AI가 수정한 결과에서 기존 클래스명이 달라지거나 다른 콘텐츠가 삭제됐다면, 변경된 부분을 구체적으로 알려주고 다시 요청할 수 있습니다.

예를 들어 다음과 같은 프롬프트를 사용할 수 있습니다.

AI에 전체 코드를 다시 만들어 달라고 요청하기보다는 어떤 부분을 복원하고 무엇을 유지해야 하는지 지정하는 방식입니다.

원본과 수정 결과를 함께 전달하면 AI가 변경된 부분을 비교하는 데 도움이 됩니다.

다만 AI가 설명한 변경 내역도 실제 코드와 일치하는지 확인해야 합니다.

작업 범위가 커질수록 문구 변경, 카드 추가, CSS 수정처럼 작업을 나누어 진행하면 문제가 발생했을 때 원인을 파악하기 수월합니다.

디자인키트 HTML 소스와 AI를 함께 활용하는 방법

기존 HTML을 AI로 수정하는 방법은 디자인키트에서 제공하는 HTML 소스에도 활용할 수 있습니다.

예를 들어 디자인키트에서 선택한 HTML 템플릿을 메인페이지로 사용하고, 필요한 문구나 콘텐츠를 ChatGPT·Claude로 수정하는 방식입니다.

이때 메인페이지에 사용된 HTML과 CSS, 공통 레이아웃 정보를 함께 전달하면 기존 디자인과 연결되는 화면을 구성하는 데 도움이 됩니다.

다만 AI가 생성한 결과물을 그대로 사용하는 것은 권장하지 않습니다. 메인페이지와 서브페이지의 스타일이 일관되게 적용되는지 확인하고, 메뉴와 링크 연결, 반응형 레이아웃, CSS·JavaScript 호환 여부도 점검해야 합니다.

디자인키트에서는 이러한 작업에 참고할 수 있도록 Design Kits × AI GUIDE를 제공하고 있습니다.

디자인키트의 메인 디자인을 바탕으로 ChatGPT·Claude 등 AI를 활용해 서브페이지를 제작하는 과정을 살펴볼 수 있습니다.

Design Kits × AI GUIDE 바로가기

또한 기존 HTML 소스에서 직접 수정해야 할 부분을 찾고 싶다면 공식 HTML 소스 사용 가이드를 참고할 수 있습니다.

디자인키트 HTML 소스 사용 가이드 확인하기

메인페이지의 디자인을 처음부터 새로 구성하는 대신 준비된 HTML 소스로 시작하고, 반복적인 코드 수정이나 필요한 서브페이지 제작에 AI를 활용하는 방식입니다.

단, 실제 작업 방식은 선택한 템플릿의 구조와 수정 범위에 따라 달라질 수 있으므로 결과물을 확인하면서 진행하는 것이 좋습니다.

자주 묻는 질문

필요한 부분만 수정하고, 결과를 비교해 보세요

ChatGPT나 Claude는 기존 HTML에서 필요한 요소를 추가하거나 코드를 변경하는 작업에 활용할 수 있습니다.

서비스 카드 하나를 추가하는 작업이라도 변경할 위치와 유지할 조건을 구체적으로 지정하면 수정 범위를 관리하기 쉽습니다.

작업이 끝난 뒤에는 원본과 변경된 코드를 비교하고, CSS와 JavaScript 연결 상태 및 실제 화면을 확인해야 합니다.

홈페이지를 새로 제작한다면 디자인키트 HTML 템플릿으로 메인페이지를 구성하고, 이후 필요한 수정이나 서브페이지 제작에 AI를 활용하는 방법도 고려할 수 있습니다.