웹퍼블리셔가 자주 쓰는 마크업, GPT로 빠르게 만드는 법

내 손보다 빠른 도구가 생겼다
실무자의 '작업 흐름' 중심으로 구성
GPT 활용을 명령어 레벨로 구체화
실제 마크업 구조 개선 사례 포함

 

 

복붙의 굴레에서 벗어나기: 실무자의 관점에서 본 마크업

웹퍼블리셔가 매일 마주치는 건 새롭지 않은 마크업이다.
디자인은 달라도 결국 구조는 반복된다. 카드형 레이아웃, 리스트, 버튼 그룹, 폼 필드... 구조는 같다. 달라지는 건 안의 텍스트와 클래스 정도다.

문제는 이것이 의외로 많은 시간을 잡아먹는다는 점이다.
특히 "복붙 → 수정 → 검토"의 3단계를 반복하는 사이, 우리가 집중해야 할 UI 설계, 시멘틱 구조, 접근성 검토는 늘 뒷전이 된다.

이제 GPT를 도구로 활용하면 이 구조가 바뀐다. 더 빠르게, 더 정확하게, 그리고 더 지루하지 않게 마크업 작업이 가능해진다.

 

 

반복되는 마크업, 명령어 한 줄로 끝내는 방식

GPT에게 마크업을 맡길 땐 단순히 "이거 만들어줘"보단, 명확한 명령어 구조가 필요하다.
아래는 실무에서 바로 쓸 수 있는 마크업 요청 방식이다.

 

GPT 프롬프트: 리스트 콘텐츠 구조 자동화  

ul/li로 뉴스 목록 5개 만들어줘. 각 항목은 날짜와 제목 포함. 최신순 정렬, Tailwind 클래스 포함해서.

 

GPT는 이 요청을 이해하고 다음과 같이 구조화된 마크업을 출력합니다.

GPT 응답 예시:

<ul class="space-y-2">
     <li class="text-sm">
          <span class="text-gray-400">2025.06.28</span> 오늘의 웹 디자인 트렌드
     </li>
...
</ul>

반복되는 뉴스 마크업을 수동으로 입력할 이유가 없다. 패턴만 인식시키면 나머진 GPT가 해결 합니다.

 

GPT 프롬프트: 다중 버튼 + 상태 변형 UI

Tailwind 기반의 탭 버튼 4개 만들어줘. 첫 번째 버튼은 active 클래스 포함해서

 

GPT 프롬프트: 로그인 폼 마크업 + 접근성 포함

이메일/비밀번호 입력 받는 HTML 폼 작성해줘. label 연결, aria 속성 포함해서 작성해줘

 

GPT는 for, id, aria-label, placeholder까지 모두 포함한 시멘틱 폼을 반환합니다.

 

---

GPT가 ‘잘’ 만드는 마크업 vs 사람이 직접 해야 하는 영역

GPT는 구조적으로 반복되는 마크업에는 탁월하지만, 다음 영역은 여전히 퍼블리셔의 몫이다.

 

마크업 작업 GPT에게 맡기기 사람이 해야 할 부분

카드 리스트 10개 생성	✅ 가능	콘텐츠 분류 판단
시멘틱 태그 구조화	✅ 가능	실제 UX 흐름 설계
폼 생성 + 라벨링	✅ 가능	실제 벨리데이션 기획
반응형 breakpoint 구성	⚠️ 부분 가능	디바이스 전략 설계
접근성 전반 대응	⚠️ 기본 가능	스크린리더 테스트 및 검증

 

GPT는 ‘빠르게 초안 잡기’엔 완벽하다. 그러나 마크업을 ‘사용 가능한 제품’으로 만드는 최종 결정권은 퍼블리셔에게 있다.

 

---

퍼블리셔의 역량은 손이 아니라 ‘질문력’에서 나온다

앞으로의 퍼블리셔는 HTML을 빨리 치는 사람이 아니다.
GPT를 어떤 식으로 **‘질문하느냐에 따라 결과물이 갈리는 디렉터’**가 되어야 한다.

예를 들어 똑같이 "리스트 만들어줘"라고 말해도,

• ❌ 단순: ul/li 리스트 5개 만들어줘
• ✅ 구체: ul/li 리스트 5개 만들어줘. 날짜, 제목 포함. Tailwind 사용. 최신순.

▶ 후자의 결과가 훨씬 실용적이고 정확하다.

 

즉, GPT는 내가 사고한 만큼만 따라온다.
앞으로 퍼블리셔는 코드를 많이 쳐야 하는 사람이 아니라, AI에게 지시할 수 있는 구조적 사고력이 핵심 역량이 된다.

이제는 손이 아니라, 머리로 마크업을 하는 시대다.