OK DDODDO LAB

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

기존의 웹 퍼블리싱 프로세스는 명확한 분업 구조를 갖고 있었다. 디자이너가 시안을 만들고, 퍼블리셔는 그 시안을 토대로 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 기반으로 진화시켜 보길 권한다.

Markdown

Mermaid 다이어그램 확인하기

GPT가 생성한 Mermaid.js 구조 예시:

```mermaid
graph TD
     A[로그인 페이지] --> B[대시보드]
    B --> C[설정 페이지]
```

▶︎ 확인 가능한 환경:

• Mermaid Live Editor ← 붙여넣기만 하면 즉시 확인 가능
• Notion: 설정 → Labs → Mermaid 지원 켜기
• Obsidian, Typora, VS Code (Mermaid 플러그인 설치 필요)
• GitHub: 최근에는 일부 Mermaid 지원 (gist나 .md 파일에서 확인 가능)

HTML/Tailwind 코드 확인하기

GPT가 만든 HTML 코드는 다음과 같이 Markdown에 삽입합니다:

```html
<div class="flex">
     <div class="w-1/2 bg-gray-100">왼쪽</div>
     <div class="w-1/2">오른쪽</div>
</div>
```

확인 방법:

• Markdown 파일을 HTML로 변환해서 확인하거나,
• CodePen, JSFiddle, Vite + Tailwind 프로젝트에 붙여넣기

🔸 예: 코드 미리 보기 하고 싶다면

1. CodePen.io
2. HTML 영역에 GPT 코드 붙여넣기
3. Tailwind CDN 추가 → <script src="https://cdn.tailwindcss.com"></script>
4. 행하면 즉시 시안 확인 가능

요약

활용하는 5가지 방법

레이아웃 설계 프롬프트 활용

GPT 프롬프트:

"블로그 글 보기 화면을 구성해줘. 상단은 제목과 작성자 정보, 중단은 본문, 하단은 댓글과 공유 버튼이 있는 구조. tailwind css 기반으로 마크업 생성해줘."

이렇게 요청하면 GPT는 HTML 구조와 Tailwind 기반 스타일링까지 포함된 마크업을 바로 생성해줍니다. 이건 디자인 기획과 퍼블리싱을 동시에 준비할 수 있는 실전형 도구가 됩니다.

페이지 플로우/컴포넌트 구상 도우미

GPT 프롬프트:

"로그인 → 대시보드 → 상세 보기로 이어지는 3단계 페이지 흐름에 필요한 주요 UI 컴포넌트를 알려줘."

GPT는 버튼, 입력폼, 카드, 메뉴 등 핵심 컴포넌트를 리스트업해주며 UX 흐름 설계 초안을 도와줍니다.

디자이너 없이 시안 뼈대 구조 작성

GPT에게 간단한 기획서나 서비스 설명만 입력하면, 이를 바탕으로 구조적인 HTML 마크업 초안을 제공합니다.

GPT 프롬프트:

"카페24처럼 상품을 등록하고 판매할 수 있는 셀러페이지 구조 마크업을 생성해줘. 구성은 상품 등록, 목록, 주문 내역 탭 포함."

이렇게 하면 GPT는 구조화된 HTML 코드를 제공해주고, 이를 통해 디자이너 없이 시안 초안을 빠르게 시각화할 수 있습니다.

디자인 요소 제안 및 카피라이팅 보조

GPT는 단순히 코드만 생성하는 것이 아니라 다음과 같이 디자인 요소나 문구도 제안해줍니다.

GPT 프롬프트:

버튼에 쓸 문구 추천:
"CTA 버튼에 쓸 짧고 임팩트 있는 문구 5개 추천해줘. 쇼핑몰 결제 페이지용."

컬러톤, 폰트 분위기 설명:
"차분하고 안정적인 브랜드에 어울리는 컬러톤과 폰트 스타일을 추천해줘."

이런 방식으로 UI 컨셉을 구체화하는 과정을 도와주는 실무적인 역할을 합니다.

Figma 없이 GPT + Mermaid.js로 와이어프레임 그리기

GPT에게 Mermaid 다이어그램 문법으로 와이어프레임을 그려달라고 요청하면, 실제 플로우차트나 간단한 레이아웃 구조를 생성해줍니다

GPT 프롬프트:

"Mermaid.js를 사용해서 로그인 → 대시보드 → 설정 페이지로 흐르는 UI 플로우를 그려줘."

Markdown에서 확인 가능한 다이어그램이 생성되어 디자이너 없이도 팀원들과 공유 가능한 시각 자료가 됩니다.

실무 적용 대상 GPT 활용법 예시

 ChatGPT를 활용해 시안을 기획하고 마크업까지 완성

디자인 시안을 만들 때 가장 흔히 떠오르는 도구는 Figma입니다. 하지만 매번 디자이너와 협업하거나, 복잡한 툴을 배우고 작업 환경을 세팅하는 일은 쉽지 않습니다. 특히 1인 창작자나 퍼블리셔, 혹은 스타트업 초기 멤버라면 ‘간단한 시안을 빠르게 만들 수 있는 방법’이 절실합니다.
이제는 Figma 없이도 ChatGPT를 활용해 시안을 기획하고 마크업까지 완성할 수 있습니다. 바로 이것이 실무 중심의 AI 기반 시안 제작 방식입니다.

시안 설계의 시작: 프롬프트로 구조 구상하기

GPT를 실무에 적용하는 가장 핵심적인 방법은 바로 프롬프트 작성입니다. ‘디자인 툴 없이 UI 구조를 구상할 수 있느냐’는 결국, 얼마나 명확하게 GPT에게 요구사항을 전달할 수 있느냐로 결정됩니다.

GPT 프롬프트:

“로그인 페이지 레이아웃을 구성해줘. 좌측은 이미지, 우측은 로그인 폼. TailwindCSS 기반 HTML 마크업으로 작성해줘.”

이 한 문장만으로도 GPT는 HTML, 클래스 스타일, 구조까지 자동으로 코드를 생성해줍니다.
기획자나 퍼블리셔가 빠르게 구조를 짜고, 이후 디자이너가 구체화하는 작업으로 이어지면 시간과 비용을 모두 아낄 수 있습니다. 특히 반복적으로 사용되는 UI(로그인, 회원가입, 대시보드 등)는 템플릿처럼 활용할 수 있어 더욱 유용합니다.

와이어프레임 도식화: Mermaid.js와 ChatGPT의 만남

GPT는 단순히 마크업 코드 생성만 할 수 있는 게 아닙니다. 복잡한 페이지 플로우를 다이어그램 형태로 시각화하는 것도 가능합니다. 그 대표적인 방식이 바로 Mermaid.js 문법을 활용한 UI 흐름도 생성입니다.

GPT 프롬프트:

“Mermaid로 로그인 → 대시보드 → 설정 페이지 흐름을 그려줘.”

graph TD
     A[로그인 페이지] --> B[대시보드]
     B --> C[설정 페이지]

이 코드를 Notion, Markdown 지원 에디터, Mermaid 온라인 에디터에 붙여넣으면, 실제 플로우차트를 바로 확인할 수 있습니다.

이는 특히 비전공 기획자나 초보 퍼블리셔에게 설명과 문서화 도구로도 매우 효과적입니다.

실전 예제: GPT로 만든 시안 코드

다음은 GPT를 통해 만든 실제 Tailwind CSS 기반 로그인 시안의 예입니다. 단 1개의 프롬프트로 얻은 결과물입니다.

<div class="flex h-screen">
   <div class="w-1/2 bg-gray-100 flex items-center justify-center">
        <img src="login-image.png" alt="Login Image" class="w-2/3">
   </div>
   <div class="w-1/2 flex flex-col justify-center items-center px-10">
        <h2 class="text-3xl font-bold mb-4">로그인</h2>
        <input type="text" placeholder="이메일" class="mb-2 border px-4 py-2 w-full">
        <input type="password" placeholder="비밀번호" class="mb-4 border px-4 py-2 w-full">
        <button class="bg-blue-500 text-white px-6 py-2 rounded">로그인</button>
    </div>
</div>

이 코드는 실제 시각적 구조가 잡힌 완성도 있는 로그인 UI입니다.
퍼블리셔는 이 구조를 기반으로 브라우저에서 바로 구현해볼 수 있고, 디자이너는 이를 참고해 비주얼 작업을 시작할 수 있습니다.
Figma 파일을 공유하거나 코멘트를 달기 전에 아이디어를 구조로 전환하는 스피드가 압도적으로 빨라집니다.

실무에서 GPT를 써야 하는 진짜 이유

GPT를 실무에 적용하는 진짜 이유는 단순한 ‘자동화’ 때문이 아닙니다.
기획-디자인-퍼블리싱의 연결고리를 줄여주는 브릿지 역할을 하기 때문입니다.
특히 다음과 같은 실무 상황에서 큰 효과를 발휘합니다:

• 디자이너가 없는 스타트업 초기 팀
• 기획자와 개발자의 커뮤니케이션 언어가 다른 경우
• 퍼블리셔가 구조 설계 없이 마크업부터 맡게 되는 상황
• 블로그, 포트폴리오, 쇼핑몰 등에서 반복되는 섹션 UI 필요 시

GPT는 이런 상황에서 초안 생성 → 구조화 → 코드화까지를 동시에 처리해줍니다.
따라서 "Figma를 열기 전, GPT에게 먼저 물어보는" 습관이 실무에서 훨씬 빠르고 효율적인 결과를 만들어줍니다.

Figma 없이 디자인 시안 작업

Figma 없이도 가능하다: AI와 시안 제작의 새로운 패러다임

UI/UX 디자인의 시작은 언제나 ‘시안 제작’입니다.

과거에는 Figma, Adobe XD와 같은 툴이 필수였지만, 이제는 AI 기반 도구들이 디자이너의 업무를 대체하거나 보조하는 수준을 넘어, 비디자이너도 손쉽게 시안을 제작할 수 있는 시대가 도래했습니다. 특히 초기 스타트업, 1인 퍼블리셔, 혹은 디자인 리소스가 부족한 팀에게는 혁신적인 접근 방식이 됩니다.

예를 들어, 텍스트 기반의 명령어만으로 와이어프레임을 생성할 수 있는 ChatGPT와 같은 AI 모델이나, Uizard, Galileo AI, Relume Library 등의 생성형 디자인 도구는 UI 컴포넌트, 레이아웃 구조, 페이지 흐름까지 자동으로 설계해줍니다. 이 방식은 마우스를 드래그하고 픽셀 단위로 조정하는 수고를 줄이고, 구조적인 오류 없이 빠르게 초기 시안을 확보할 수 있는 장점이 있습니다.

AI 기반 와이어프레임 도구 소개 및 사용법

• Uizard: 키워드 입력만으로 UI 레이아웃을 자동으로 제안해주며, 텍스트 문장을 기반으로 버튼, 카드, 입력창 등의 컴포넌트를 배치합니다. 특히 모바일·웹 구분 없이 반응형 디자인이 가능하고, 피그마 없이 바로 ‘시각화’가 가능하다는 점에서 진입 장벽이 낮습니다.
• Galileo AI: 챗봇 형태의 인터페이스를 통해 사용자 입력을 해석하여 전체 페이지 UI를 구성합니다. 예: “로그인 페이지, 구글 소셜 로그인 포함, 다크모드 스타일”과 같은 지시만으로 적절한 와이어프레임을 구성해줍니다.
• ChatGPT + Mermaid.js / Markdown + Tailwind: 와이어프레임이 꼭 시각적인 요소만을 의미하지는 않습니다. Markdown이나 Mermaid를 활용한 구조화된 UI 스케치도 시안의 일종입니다. 특히 개발 협업 시에 코드 기반 와이어프레임은 빠른 피드백 사이클과 유지 보수에 매우 유리합니다

각 도구는 사용자가 직접 조작하는 디자인 툴과 달리 ‘의도 전달’에 집중합니다. 따라서 디자이너의 언어적 사고가 시각적 결과물로 변환되는 과정을 AI가 빠르게 가속시켜주는 셈입니다.

AI로 제작한 와이어프레임, 어디까지 실무에 쓸 수 있을까?

많은 이들이 “AI가 만든 시안이 실제 프로젝트에 적용 가능할까?”라는 의문을 가집니다. 결론부터 말하면, AI 와이어프레임은 MVP, 테스트 페이지, 클라이언트 제안서, 초기 UI 토의 등 다양한 상황에서 유효합니다.

특히 퍼블리셔나 프론트엔드 개발자에게는 구조적인 HTML 마크업을 빠르게 정리하거나, 스타일 가이드 없이 기본적인 레이아웃을 잡는 데 매우 유용합니다. 예를 들어, GPT를 통해 다음과 같은 요청을 하면 실제로 빠르게 시안을 확인할 수 있습니다:

GPT 프롬프트:

“로그인 페이지 구성: 좌측은 이미지, 우측은 아이디/비번 입력창과 로그인 버튼, tailwindcss 적용”

이와 같은 요청은 바로 구조화된 코드 결과물로 반환되며, 이를 그대로 코드에 삽입해 시각적 결과를 확인할 수 있습니다. 이는 디자이너가 아닌 퍼블리셔나 PM에게도 기획과 개발 사이의 격차를 줄이는 데 크게 기여합니다.

Figma가 필요 없는 미래: 퍼블리셔·기획자의 새로운 도구

Figma는 강력한 협업 도구지만, 학습 비용과 협업 환경 설정, 유료 플랜 등 다양한 진입 장벽이 존재합니다.

반면, AI 기반 와이어프레임 생성은 **‘누구나 접근 가능한 디자인’**을 지향합니다. HTML이나 CSS를 몰라도, 디자인 감각이 없어도 기획자, 개발자, 1인 창작자가 스스로 시안을 만들고 의사소통할 수 있습니다.

AI 기반 시안 제작의 가장 큰 강점은 속도와 반복성입니다. 수십 가지 레이아웃을 몇 분 만에 제안받고, 그중 가장 적합한 것을 선택해 수정하는 방식은 기존의 디자인 프로세스를 획기적으로 줄여줍니다. 특히 티스토리, 브런치, 노션 블로그를 운영하는 1인 퍼블리셔에게는 ‘아이디어를 바로 시안화하고 구현하는 것’이 콘텐츠 생산성을 결정짓습니다.

이제 우리는 ‘Figma가 없어서 시작 못 한다’는 말 대신, ‘GPT한테 물어봤더니 바로 나왔다’는 말이 자연스러운 시대에 살고 있습니다.