ChatGPT로 반응형 마크업 10분 만에 끝내는 법
웹 퍼블리싱 업무를 하다 보면 디자인은 달라도 반복되는 작업이 많습니다.
카드 목록을 만들고, PC에서는 3열로 배치하고, 태블릿에서는 2열, 모바일에서는 1열로 바꾸는 작업도 그중 하나입니다.
이런 작업은 어렵지는 않지만 HTML 구조를 만들고 클래스명을 정한 다음 반응형 CSS까지 작성하려면 생각보다 시간이 걸립니다.
저는 요즘 반복적인 마크업 초안을 만들 때 ChatGPT를 활용하고 있습니다.
잘 작성된 프롬프트를 사용하면 HTML과 CSS 초안을 10분 안에도 만들 수 있습니다. 다만 AI가 만들어준 코드를 그대로 사용하는 것이 아니라, 웹 접근성과 프로젝트 환경에 맞게 검수하고 수정하는 과정은 반드시 필요합니다.
ChatGPT에게 “코드 만들어줘”라고만 하면 안 되는 이유
처음 ChatGPT를 사용할 때는 다음처럼 간단하게 요청하기 쉽습니다.
카드 목록을 반응형으로 만들어줘.이렇게 요청해도 코드는 만들어줍니다. 하지만 내가 원하는 구조와 다를 가능성이 높습니다.
예를 들면 다음과 같은 문제가 생길 수 있습니다.
- 클래스명이 프로젝트 규칙과 맞지 않는다.
- 불필요한 div가 너무 많이 생성된다.
- 모바일 기준이 임의로 적용된다.
- 접근성을 고려하지 않은 마크업이 만들어진다.
- 기존 프로젝트에서 사용하지 않는 CSS 문법이나 라이브러리가 포함된다.
- 디자인에는 없는 애니메이션과 효과가 추가된다.
ChatGPT로 좋은 마크업을 만들려면 단순히 결과를 요청하는 것이 아니라, 작업 환경과 구현 조건을 구체적으로 전달해야 합니다.
반응형 마크업 프롬프트에 꼭 넣어야 할 6가지
1. 작업 역할
ChatGPT가 어떤 관점으로 코드를 작성해야 하는지 알려줍니다.
너는 공공기관 웹사이트 구축 경험이 있는 웹 퍼블리셔야.2. 구현할 화면
무엇을 만들어야 하는지 구체적으로 설명합니다.
제목, 설명, 링크 버튼으로 구성된 서비스 카드 목록을 만들어줘.
카드는 총 3개야.3. 반응형 기준
브레이크포인트와 열 개수를 직접 지정합니다.
PC First 방식으로 작성해줘.
1025px 이상에서는 3열,
641px부터 1024px까지는 2열,
640px 이하에서는 1열로 배치해줘.4. 마크업 규칙
프로젝트에서 사용하는 구조와 네이밍 규칙을 전달합니다.
HTML5 시맨틱 마크업을 사용하고 클래스명은 케밥 케이스로 작성해줘.
클래스명 앞에는 ui-service를 사용해줘.5. 접근성 조건
공공기관 프로젝트라면 특히 빠뜨리면 안 되는 부분입니다.
키보드로 모든 링크에 접근할 수 있어야 하고,
아이콘이 장식용이면 aria-hidden="true"를 적용해줘.
링크의 목적을 텍스트만으로 이해할 수 있게 작성해줘.6. 사용 가능한 기술
현재 프로젝트의 기술 환경도 명확하게 알려줘야 합니다.
JavaScript는 사용하지 말고 HTML과 CSS만 작성해줘.
CSS Grid를 사용하되 IE 대응은 하지 않아도 돼.실무에서 바로 사용할 수 있는 프롬프트
다음 프롬프트는 카드형 목록뿐 아니라 다양한 반응형 마크업 작업에 응용할 수 있습니다.
너는 공공기관 웹사이트 구축 경험이 있는 13년차 웹 퍼블리셔야.
다음 조건에 맞는 반응형 서비스 카드 목록을 HTML과 CSS로 작성해줘.
[화면 구성]
- 서비스 카드는 총 3개
- 각 카드에는 아이콘, 제목, 설명, 바로가기 링크가 포함됨
- 카드 전체가 아니라 바로가기 링크만 클릭 가능하게 구성
[반응형 기준]
- PC First 방식
- 1025px 이상: 3열
- 641px 이상 1024px 이하: 2열
- 640px 이하: 1열 - 카드의 높이는 같은 행에서 동일하게 표시
[마크업 규칙]
- HTML5 시맨틱 마크업 사용
- 목록은 ul, li 구조 사용
- 클래스명은 케밥 케이스
- 클래스명 앞에 ui-service 사용
- 불필요한 div 사용 최소화
[접근성]
- 모든 링크는 키보드로 접근 가능해야 함
- 장식용 아이콘은 aria-hidden="true" 적용
- 링크 목적을 텍스트만으로 이해할 수 있도록 작성
- 의미 없는 role 속성은 사용하지 않음
[CSS]
- CSS Grid 사용
- JavaScript와 외부 라이브러리 사용 금지
- transition과 hover 효과는 최소화
- prefers-reduced-motion을 고려
- 각 코드에는 필요한 설명 주석 추가
HTML과 CSS를 구분해서 작성하고,
마지막에는 접근성 및 반응형 검수 항목을 정리해줘.
ChatGPT가 만들어주는 마크업 예시
위 프롬프트를 사용하면 다음과 같은 구조의 초안을 받을 수 있습니다.
<ul class="ui-service-list">
<li class="ui-service-item">
<span class="ui-service-icon" aria-hidden="true">
<img src="/images/icon-service01.svg" alt="">
</span>
<strong class="ui-service-title">안전정보 조회</strong>
<p class="ui-service-text">
생활 주변의 안전 관련 정보를 확인할 수 있습니다.
</p>
<a href="#" class="ui-service-link">
바로가기
</a>
</li>
<li class="ui-service-item">
<span class="ui-service-icon" aria-hidden="true">
<img src="/images/icon-service02.svg" alt="">
</span>
<strong class="ui-service-title">자료실</strong>
<p class="ui-service-text">
각종 보고서와 공개 자료를 확인할 수 있습니다.
</p>
<a href="#" class="ui-service-link">
바로가기
</a>
</li>
<li class="ui-service-item">
<span class="ui-service-icon" aria-hidden="true">
<img src="/images/icon-service03.svg" alt="">
</span>
<strong class="ui-service-title">고객지원</strong>
<p class="ui-service-text">
자주 묻는 질문과 이용 안내를 확인할 수 있습니다.
</p>
<a href="#" class="ui-service-link">
바로가기
</a>
</li>
</ul>.ui-service-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.ui-service-item { display: flex; min-width: 0; padding: 30px; flex-direction: column; border: 1px solid #d7dee7; border-radius: 16px; background-color: #fff; }
.ui-service-icon { display: flex; width: 64px; height: 64px; align-items: center; justify-content: center; }
.ui-service-icon img { display: block; max-width: 100%; }
.ui-service-title { margin-top: 24px; color: #222; font-size: 22px; line-height: 1.4; }
.ui-service-text { margin: 12px 0 24px; color: #555; font-size: 16px; line-height: 1.7; }
.ui-service-link { display: inline-flex; min-height: 44px; margin-top: auto; align-items: center; justify-content: center; color: #fff; text-decoration: none; border-radius: 8px; background-color: #087f73; }
.ui-service-link:focus-visible { outline: 3px solid #111; outline-offset: 3px; }
@media (max-width: 1024px) {
.ui-service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.ui-service-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ui-service-item { padding: 24px 20px; }
.ui-service-title { font-size: 20px; }
}이 정도면 기본적인 구조와 반응형 배치는 완성된 상태입니다.
프로젝트에 적용할 때는 실제 디자인에 맞춰 간격, 색상, 글자 크기, 이미지 경로 등을 수정하면 됩니다.
한 번에 완벽한 코드를 요구하지 않는 것이 중요하다
ChatGPT를 사용할 때 모든 조건을 한 번에 입력하려고 하면 프롬프트가 지나치게 길어질 수 있습니다.
저는 먼저 기본 구조를 만든 다음, 다음과 같이 단계별로 수정합니다.
현재 HTML 구조는 유지하고 CSS만 수정해줘.
640px 이하에서 아이콘과 제목이 한 줄에 배치되도록 변경해줘.카드가 1개 또는 2개만 있을 때 PC 화면에서 가운데 정렬되도록 수정해줘.
기존 3열 너비는 유지해야 해.현재 코드를 웹 접근성 관점에서 검토해줘.
문제가 있는 부분만 이유와 수정 코드를 알려줘.기존 클래스명은 변경하지 말고 중복된 CSS만 정리해줘.
변경 전과 변경 후의 차이도 설명해줘.이처럼 작업을 작은 단위로 나누면 원하는 결과에 더 빠르게 도달할 수 있습니다.
디자인 시안을 함께 제공하면 결과가 더 정확해진다
텍스트만으로 설명하는 것보다 디자인 캡처 이미지를 함께 제공하면 ChatGPT가 화면의 구조를 훨씬 정확하게 파악합니다.
이미지를 첨부할 때는 다음 내용을 함께 전달하는 것이 좋습니다.
첨부한 디자인을 분석해서 HTML 구조를 먼저 설계해줘.
바로 코드를 작성하지 말고 다음 항목부터 정리해줘.
1. 전체 영역 구분
2. 적절한 HTML 태그
3. 반복되는 컴포넌트
4. PC와 모바일에서 달라지는 배치
5. 접근성 구현 시 주의할 점
분석이 끝나면 HTML과 CSS를 작성해줘.이 과정을 거치면 디자인을 단순히 눈에 보이는 모양대로 복사하는 것이 아니라, 유지보수하기 좋은 구조로 설계할 수 있습니다.
AI가 만든 코드는 반드시 검수해야 한다
ChatGPT가 빠르게 코드를 만들어준다고 해서 결과가 항상 정확한 것은 아닙니다.
특히 다음 항목은 퍼블리셔가 직접 확인해야 합니다.
HTML 구조
- 제목 단계가 h1부터 순서대로 구성되어 있는가?
- 목록은 ul, ol, li로 표현되어 있는가?
- 링크와 버튼을 기능에 맞게 사용했는가?
- 의미 없는 div와 span이 과도하게 생성되지 않았는가?
웹 접근성
- 키보드만으로 모든 기능을 사용할 수 있는가?
- 포커스 표시가 명확하게 보이는가?
- 이미지의 alt가 적절하게 작성되어 있는가?
- 장식용 이미지는 빈 alt를 사용했는가?
- ARIA 속성이 실제 동작과 일치하는가?
반응형
- 콘텐츠가 길어져도 레이아웃이 깨지지 않는가?
- Grid와 Flex 아이템에 min-width: 0이 필요한지 확인했는가?
- 320px 정도의 작은 화면에서도 가로 스크롤이 발생하지 않는가?
- PC, 태블릿, 모바일의 중간 너비에서도 자연스럽게 표시되는가?
프로젝트 호환성
- 기존 CSS와 클래스명이 충돌하지 않는가?
- 프로젝트에서 지원하지 않는 최신 문법이 포함되지 않았는가?
- 불필요한 JavaScript와 외부 라이브러리를 추가하지 않았는가?
- 기존 디자인 시스템의 색상과 간격을 사용하고 있는가?
ChatGPT는 퍼블리셔를 대신하는 도구가 아니다
ChatGPT를 활용하면 반복적인 HTML 구조와 반응형 CSS 초안을 빠르게 만들 수 있습니다.
하지만 AI는 해당 프로젝트의 전체 구조, 기존 CSS, 운영 환경, 접근성 인증 기준까지 자동으로 이해하지는 못합니다.
결국 좋은 결과를 만드는 것은 다음 세 가지입니다.
- 요구사항을 정확하게 정리하는 능력
- 원하는 결과를 끌어내는 프롬프트 작성 능력
- 생성된 코드를 검수하고 수정하는 퍼블리싱 경험
AI가 초안을 만들고 퍼블리셔가 구조와 품질을 판단하는 방식으로 활용할 때 가장 효율적입니다.
저 역시 ChatGPT가 만든 코드를 그대로 붙여 넣기보다는 반복 작업 시간을 줄이는 출발점으로 사용하고 있습니다.
잘 만든 프롬프트 하나를 저장해두면 카드, 게시판, 검색폼, 탭, 아코디언 등 다양한 컴포넌트 제작에 재사용할 수 있습니다.