시안부터 마크업까지 AI로 처리하기

 

퍼블리셔의 역할, 변화가 시작되다

기존의 웹 퍼블리싱 프로세스는 명확한 분업 구조를 갖고 있었다. 디자이너가 시안을 만들고, 퍼블리셔는 그 시안을 토대로 HTML과 CSS 마크업을 진행한다. 하지만 이 구조는 반복 작업이 많고, 작은 변경에도 많은 시간이 소요된다. 특히 소규모 프로젝트에서는 디자인, 퍼블리싱, 프론트 개발까지 한 명이 모두 처리해야 하는 경우도 흔하다.

 

이런 환경에서 AI 도구는 효율을 크게 높이는 해결책이 될 수 있다. ChatGPT, DALL·E, Figma AI 등은 텍스트 기반 명령만으로 시안 생성, 마크업 코드 출력, UI 구성 제안까지 가능하게 한다. 이번 실험은 그런 도구들을 활용해 "디자인부터 마크업까지의 전 과정을 얼마나 자동화할 수 있는가"를 퍼블리셔 관점에서 직접 수행해본 기록이다.

 

ChatGPT × DALL·E: AI에게 시안을 맡겨보다

첫 번째 단계는 "시안 제작"이다. 보통 와이어프레임 – 디자인 시안 – 마크업의 흐름으로 진행되지만, 이번엔 처음부터 AI 기반 생성만으로 접근해보았다.

 

GPT 프롬프트:

“쇼핑몰 배너용 카드형 UI 시안 구성. 상단 이미지, 타이틀, 설명, CTA 버튼 포함된 간단한 구성으로 요청.”

 

ChatGPT는 컴포넌트 요소를 분해한 구조 설명과 함께 레이아웃 추천을 해주었고, 이를 바탕으로 DALL·E를 통해 이미지 형태의 시안을 생성했다. 시안은 1~2분 내에 완성되었고, 이를 Figma에 불러와 간단한 보정과 텍스트 수정만으로 사용할 수 있었다.

 

이 과정을 통해 퍼블리셔가 단순히 전달받는 역할에서 시안 설계자로 확장될 수 있는 가능성을 확인했다. 텍스트만으로 와이어프레임 역할을 대체할 수 있었고, 반복적인 디자인 요청 없이 초안 다수 생성이 가능해 초기 기획 단계의 속도가 획기적으로 개선되었다.

---

마크업 자동화 실험: Tailwind CSS까지 대응

다음 단계는 시안을 마크업 코드로 전환하는 것이다. 일반적으로 디자이너의 시안을 보고 수동으로 HTML/CSS를 작성하지만, 이번 실험에서는 시안 설명을 ChatGPT에 입력해 자동으로 HTML5 마크업 + Tailwind CSS 코드를 생성했다.

 

GPT 프롬프트:

"상단 이미지, h2 타이틀, p 설명, a 버튼 포함 카드 UI. Tailwind CSS 사용. 반응형 고려. 접근성 기본 속성 포함."

 

결과로 받은 코드는 다음과 같은 특징이 있었다:

• 시멘틱한 HTML 태그 구조 (<figure>, <figcaption>, <article> 등)
• Tailwind 클래스 적용으로 모바일 대응 자동화
• alt, aria-label 등 접근성 속성 포함

코드 품질은 실무에서 바로 사용해도 될 정도였고, 퍼블리셔가 손으로 작업하던 구조 정의나 클래스 선택 과정을 AI가 대체해주었다. 특히 자주 사용하는 패턴을 프롬프트로 저장해두면 컴포넌트 단위 재사용도 가능했다.

단, 시각적 디테일 조정이나 디자인 시스템 통일성은 사람이 직접 체크해야 했다. 하지만 전체 작업 시간은 평균 50% 이상 단축되었으며, 유지보수 단계에서도 빠른 코드 생성은 큰 도움이 되었다.

---

AI와 함께 진화하는 퍼블리싱의 미래

이 실험의 핵심은 "AI가 퍼블리셔를 대체하느냐"가 아니라, AI를 도구로 얼마나 잘 다룰 수 있느냐에 있다. 시안 생성, 구조 분석, 마크업 자동화까지 AI가 일정 수준 이상 가능하게 되었지만, 프로젝트 내에서 여전히 사람이 해야 할 역할은 많다.

• 디자인 시안의 해석과 의도 반영
• UI 간 일관성과 반응형 대응
• 접근성, 웹 표준 검수
• 고객 피드백 및 수정 사항 대응

이러한 영역은 AI가 넘보기 힘든 영역이며, 퍼블리셔가 전략적으로 포지셔닝할 수 있는 지점이다.
특히 프롬프트 작성 역량, 도구 활용 능력, AI 결과물에 대한 검수 및 응용 능력은 앞으로의 퍼블리셔에게 중요한 경쟁력이 될 것이다.

AI를 퍼블리셔의 확장 도구로 받아들이고, 반복 업무를 줄이면서 더 창의적인 역할에 집중하는 것. 이것이 이 실험이 제안하는 퍼블리싱의 미래다. 실무에서도 바로 적용 가능한 실험이니, 다양한 도구와 조합으로 여러분의 작업 방식도 AI 기반으로 진화시켜 보길 권한다.