퍼블리셔가 자주 쓰는 버튼/리스트 마크업 GPT로 완성하기
ChatGPT HTML 마크업 반복적인 HTML 마크업 작업, GPT가 대신할 수 있을까?
웹 퍼블리셔는 프로젝트를 진행하며 수없이 반복되는 HTML 마크업 작업에 직면합니다. 특히 버튼(Button), 리스트(List), 카드(Card), 탭(Tab) 등의 공통 UI 요소는 거의 모든 페이지에 필수적으로 사용되죠. 하지만 정해진 디자인 가이드를 따라 일관되게 마크업을 구성하고, 반응형과 웹 접근성을 고려하다 보면 생각보다 시간이 많이 소모됩니다. 이럴 때 ChatGPT 같은 AI 도구를 활용하면 생산성을 대폭 향상시킬 수 있습니다.
예를 들어 "웹 접근성 고려한 기본 버튼 HTML 마크업 작성해줘" 또는 "ul 태그 기반의 리스트 마크업, 클래스는 Tailwind 기준으로 작성해줘"와 같이 명확한 요청을 GPT에게 전달하면, 몇 초 만에 완성도 높은 HTML 구조를 제안받을 수 있습니다. 또한 디자인 시스템에서 정의한 버튼 상태(hover, active, disabled 등)를 포함한 마크업을 빠르게 생성할 수 있기 때문에, 초기 세팅 시간을 절약하고 더 중요한 UI 설계나 사용자 경험 개선에 집중할 수 있습니다.
자주 쓰는 ChatGPT HTML 버튼 마크업, 이렇게 자동화할 수 있다
버튼은 웹사이트에서 가장 많이 사용되는 요소 중 하나입니다. 단순한 텍스트 버튼부터 아이콘이 포함된 버튼, 링크 버튼, 폼 제출용 버튼 등 다양한 형태가 존재하죠. 일반적인 퍼블리싱 업무에서는 디자인 시스템을 따라 버튼 클래스를 수동으로 구성하고 상태를 세팅하는 일이 잦습니다.
하지만 GPT에게 아래와 같은 명령을 주면 매우 실용적인 마크업 결과를 받을 수 있습니다:
GPT 프롬프트:
“Tailwind CSS 기준, 기본 버튼 / hover / disabled 상태 포함해서 웹접근성 고려한 버튼 마크업 코드 만들어줘”
GPT 응답:
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300 disabled:opacity-50" disabled> 제출하기 </button>
여기엔 기본 스타일, 마우스 hover, focus 상태, disabled 처리까지 포함되어 있어 실무에서 바로 사용할 수 있습니다. 여기에 아이콘을 넣고 싶다면, SVG 아이콘을 함께 요청하거나 "heroicons 아이콘 포함해줘"라고 추가 지시하면 됩니다. 실제 프로젝트에서는 이러한 자동화된 생성물이 프로토타입 단계부터 빠르게 적용되어 UI/UX 설계 속도를 크게 높여줍니다.
리스트 마크업도 GPT가 정형화된 구조로 빠르게 처리
리스트는 콘텐츠 정렬, 네비게이션, 기능 그룹핑 등에 자주 사용되며, 구조와 클래스 명세가 일정한 경우가 많습니다. 특히 Tailwind CSS를 사용하는 경우, 리스트 스타일링은 클래스 기반으로 반복 적용되기 때문에 GPT로 자동화하기에 매우 적합합니다.
GPT 프롬프트:
“ul 기반의 리스트 마크업 작성해줘. 각 항목에 hover 효과 있고, 접근성 속성 포함해서 작성해줘”
GPT 응답:
<ul class="space-y-2">
<li class="p-2 hover:bg-gray-100 focus:bg-gray-200 rounded" tabindex="0">항목 1</li>
<li class="p-2 hover:bg-gray-100 focus:bg-gray-200 rounded" tabindex="0">항목 2</li>
<li class="p-2 hover:bg-gray-100 focus:bg-gray-200 rounded" tabindex="0">항목 3</li>
</ul>
이 마크업은 tabindex="0"을 통해 키보드 포커스를 받을 수 있고, hover/focus 효과로 시각적 피드백도 제공됩니다. 반복되는 리스트 마크업을 수동으로 작성하지 않아도 되며, 디자인 시스템과의 일관성도 유지할 수 있습니다. 특히 JSON 데이터와 함께 연동하면, "리스트 아이템을 반복 출력하는 코드까지 같이 만들어줘"라고 하면 React/Vue 환경에서도 컴포넌트 코드까지 자동 생성이 가능합니다.
마크업 자동화의 한계와 퍼블리셔가 놓치지 말아야 할 점
GPT 기반 마크업 자동화는 매우 강력한 도구지만, 몇 가지 유의할 점도 있습니다. 먼저 AI가 생성한 마크업이 실제 프로젝트의 UI 컴포넌트 구조나 접근성 기준과 100% 일치한다고 가정해서는 안 됩니다. 프로젝트마다 사용하는 클래스 네이밍 규칙(BEM, Utility-first 등)이나 HTML 구조가 다를 수 있으므로, 항상 최종 코드는 퍼블리셔가 검수해야 합니다.
또한 접근성(ARIA 속성), 반응형 구조(media query), 동적 인터랙션(JavaScript 포함)까지 GPT가 모두 커버하긴 어렵기 때문에, 보완 작업은 필수입니다. 퍼블리셔는 AI가 생성한 마크업을 시작점(Starter)으로 활용하고, 이후 구조를 최적화하거나 사용자 행태에 따라 UI를 조정하는 것이 바람직합니다.
궁극적으로 퍼블리셔는 마크업의 정형화된 패턴을 GPT로 빠르게 세팅하고, 인간 퍼블리셔만이 할 수 있는 의도 파악과 사용자 중심 설계에 집중할 수 있어야 합니다. GPT는 도구이지 결과물이 아니며, 퍼블리셔의 전문성을 보완해주는 AI 파트너로 받아들여야 진정한 자동화의 이점을 누릴 수 있습니다.