OK DDODDO LAB

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한테 물어봤더니 바로 나왔다’는 말이 자연스러운 시대에 살고 있습니다.

디자인과 마크업을 잇는 스마트한 자동화 전략

퍼블리셔 업무, 이제는 ‘AI와 협업’하는 시대

디자인을 받아 코드를 짜는 퍼블리셔의 업무는 과거와 달리 훨씬 복잡하고 다차원적입니다. 기획자와 디자이너, 개발자 사이에서 마크업을 중심으로 소통하는 역할을 담당하는 퍼블리셔는, 이제 단순한 HTML/CSS 작성에 그치지 않고 디자인 의도 해석, 접근성 구현, 반응형 구조 설계까지 관여하게 되었습니다.
이런 실무 환경에서 반복 작업을 줄이고, 다양한 툴과 협업 속도를 높이기 위해 주목받는 것이 바로 GPT 기반 AI 툴입니다. GPT는 자연어를 기반으로 마크업 코드를 생성해줄 수 있어 퍼블리셔의 반복 업무를 자동화하고, 초기 구조 설계나 컴포넌트 구성을 빠르게 도와줍니다. 또한, Figma나 Uizard 같은 AI UI 툴은 디자이너 없이도 시안을 시각적으로 구성해볼 수 있는 장점을 지니고 있어, 시안 제작 단계부터 퍼블리셔가 직접 주도하는 사례도 늘고 있습니다.
이제는 AI가 퍼블리셔의 도우미를 넘어, 협업 파트너로 자리 잡아가고 있는 셈입니다.

GPT를 활용한 마크업 자동화 실전 예시

퍼블리셔가 실제로 GPT를 활용하는 방식은 매우 다양하지만, 가장 대표적인 활용 사례는 반복적인 마크업 작성입니다. 예를 들어, 반복적으로 작성하는 리스트 구조, 카드 컴포넌트, 폼 구성 등은 다음과 같은 프롬프트로 손쉽게 생성할 수 있습니다:

GPT 프롬프트

"반응형 Tailwind CSS 카드 UI 마크업 생성해줘. 이미지, 제목, 설명, 버튼 포함하고 모바일에서는 한 줄에 하나씩 보여줘."
또는
"HTML5 시멘틱 태그를 사용한 접근성 고려된 마크업 예시 작성해줘. nav, main, section, footer 포함."

GPT는 이 요청에 따라 적절한 구조와 태그를 활용한 코드를 출력해주며, 퍼블리셔는 이를 바탕으로 커스터마이징하거나 디자인 팀과 연결해 빠르게 프로토타입을 만들 수 있습니다.

특히, aria-label, role, alt 등 접근성 마크업도 자동 생성이 가능하여 웹 표준에 맞는 마크업 구조를 처음부터 빠르게 구현할 수 있다는 장점이 있습니다.
실무에서는 이러한 방식으로 반복 마크업 업무 시간을 평균 40~70% 단축할 수 있으며, 신입 퍼블리셔의 경우에는 학습 도구로도 활용할 수 있는 매우 강력한 방식입니다.

UI 툴 조합 전략: Figma + GPT, Uizard, Locofy 활용법

디자인 협업 단계에서도 GPT와 AI UI 툴의 조합은 강력한 시너지를 발휘합니다.

퍼블리셔가 직접 기획 의도를 반영해 시안을 만들어야 하거나, 디자이너와의 협업 전에 기본 틀을 잡아야 할 때, 다음과 같은 툴 조합을 활용할 수 있습니다:

• Figma + GPT
  GPT에서 “3열 반응형 대시보드 UI 설명문”을 작성해 Figma에 넣으면, 디자이너나 퍼블리셔가 쉽게 시안 구조를 시각화할 수 있습니다. Figma의 Auto Layout 기능과 함께 쓰면, 빠르게 UI 프레임을 잡고 콘텐츠 배치를 도와주는 데 탁월합니다.
• Uizard
  텍스트 설명이나 손그림 하나로 시안을 만들어주는 AI 기반 툴입니다. GPT에서 구조 설명을 받아 Uizard에 넣으면, 자동으로 화면이 구성되어 빠른 피드백이 가능합니다. 디자이너 없이 1차 시안을 만들어야 하는 프리랜서나 스타트업 퍼블리셔에게 매우 유용합니다.
• Locofy.ai
  Figma에서 만든 시안을 React, HTML, Vue 등 다양한 프레임워크 코드로 변환해주는 툴입니다. 시안을 마크업으로 변환하는 데 드는 시간을 크게 줄여주며, 디자인 → 코드 자동화의 가교 역할을 합니다. GPT가 만든 시안 설명 + Figma 시안 + Locofy 코드를 연결하면 퍼블리셔 입장에서 효율적인 워크플로우가 완성됩니다.

이러한 툴을 적절히 조합하면 디자인 → 마크업 → 개발 연계까지의 흐름을 훨씬 빠르고 효율적으로 설계할 수 있습니다.

퍼블리셔가 실무에 적용하는 AI 자동화 전략

실무에 바로 활용할 수 있는 AI 기반 퍼블리싱 전략을 간단히 정리하면 다음과 같습니다:

• 1단계: 기획 내용 구조화
  GPT로 시나리오 기반의 UI 구성 설명을 먼저 작성합니다. 예: “상품 목록 페이지, 필터와 카드 3열 구조, 상단에 카테고리 정렬 바 포함”
• 2단계: 시안 생성
  위 설명을 Figma에 입력하거나 Uizard로 자동 시안 생성 → Auto Layout 정리
• 3단계: 코드 변환
  Locofy나 GPT를 통해 HTML/CSS 코드로 전환 → Tailwind나 Bootstrap 기반 구조로 자동화
• 4단계: 접근성 및 반응형 마무리
  GPT로 접근성 점검 및 추가 마크업 요청 → 반응형 클래스 추가, aria 속성 점검
• 5단계: 디자이너/개발자와 연계
  작성된 시안과 코드, 설명 문서를 함께 전달 → 커뮤니케이션 비용 최소화

이런 전략을 통해 퍼블리셔는 단순 작업자를 넘어, **디자인과 개발을 잇는 '중심 허브 역할'**을 하게 됩니다.

특히 GPT를 통해 코드 품질을 일정 수준 유지할 수 있고, 반복 작업은 자동화하여 실무 효율을 극대화할 수 있습니다.
GPT는 도구일 뿐이지만, 어떻게 사용하느냐에 따라 퍼블리셔의 가치를 수직 상승시킬 수 있는 무기가 됩니다.

웹퍼블리셔를 위한 스마트 마크업

마크업 템플릿, 왜 자동화 ChatGPT 가 필요한가?

웹 프로젝트가 커질수록, 퍼블리셔는 수많은 컴포넌트와 레이아웃 마크업을 반복해서 작성하게 됩니다.
비슷한 구조의 UI요소들이 계속해서 등장하고, 페이지가 늘어날수록 템플릿화된 코드가 절실해지죠.
전통적인 방식이라면 별도의 코드 저장소나 텍스트 파일에서 복사해 쓰는 식이었지만,
지금은 GPT를 활용해 실시간으로, 상황에 맞게 자동 생성하는 마크업 템플릿이 더 유용한 방식이 되고 있습니다.

GPT는 단순한 코드 복사보다 똑똑하게 작동합니다. 입력한 조건에 맞춰 필요한 요소만 추려내고,
디자인 시스템이나 스타일 프레임워크까지 고려한 구조로 템플릿을 만들어줍니다.
예를 들어 “Tailwind 기반의 카드 UI 3개 만들어줘”라고 입력하면,
GPT는 레이아웃, 반복 요소, 텍스트 구조까지 완성도 높은 마크업을 제공합니다.

이는 단지 시간을 줄이는 것을 넘어, 작업 효율과 일관성, 유지보수성을 모두 높이는 전략이 될 수 있습니다.\

GPT로 만드는 마크업 템플릿의 구조와 접근법

자동화 템플릿을 만들기 위해선 GPT에게 "무엇을 어떻게 만들지" 명확히 설명해야 합니다.
다음은 GPT에게 템플릿을 요청할 때 실무에서 사용하기 좋은 접근 순서입니다.

✅ 1단계: 목적 정의

• 어떤 컴포넌트인지, 어디에 쓰이는지 명확히 설명합니다.
  GPT: "이벤트 리스트를 보여줄 ul/li 템플릿이 필요해요."

✅ 2단계: 구성 요소 나열

• 포함해야 할 요소를 구체적으로 전달합니다.
  GPT : "각 항목에는 날짜, 제목, 설명이 포함되어야 해요."

✅ 3단계: 디자인 시스템 반영

• 사용할 CSS 프레임워크(Tailwind, Bootstrap 등)를 지정합니다.
  GPT : "Tailwind를 기반으로 만들어줘."

✅ 4단계: 반복 수량 설정

• 반복되는 항목의 개수를 요청합니다.
  GPT : "샘플로 5개 항목을 만들어줘."

✅ 5단계: 시멘틱 요소 강조

• <section>, <article>, <label> 등 HTML5 시멘틱 태그 사용을 요청합니다.
  GPT : "시멘틱 태그를 사용해 구조화해줘."

이렇게 지시하면 GPT는 조건을 반영한 마크업 템플릿을 완성도 높게 생성합니다.
단순 생성이 아니라, 반복과 재활용을 전제로 한 '자동화 템플릿'을 실시간으로 구성해주는 점이 핵심입니다.

자동화 마크업 템플릿 실전 예제

아래는 GPT에게 입력할 수 있는 대표적인 템플릿 요청 예시입니다.
실무에서 자주 쓰이는 컴포넌트에 대한 자동 생성 활용입니다.

카드형 UI 템플릿

GPT 프롬프트:
"Tailwind CSS로 카드 컴포넌트를 3개 만들어줘. 이미지, 제목, 설명, 버튼이 포함되고, 반응형으로 만들어줘."

GPT 응답:
결과는 Grid 또는 Flex 기반의 반응형 카드 레이아웃이 자동 생성됩니다.

폼 템플릿

GPT 프롬프트:
"이름, 이메일, 메시지를 입력받는 폼 마크업을 만들어줘. label, placeholder, aria-label 포함해서 시멘틱하게 작성해줘."

GPT 응답:
<form>, <label>, <input>, <textarea> 구조를 정리하며 웹접근성을 고려한 마크업을 출력합니다

동적 리스트 템플릿

GPT 프롬프트:
"ul/li로 구성된 공지사항 목록 템플릿을 만들어줘. 날짜와 제목 포함. 최신순으로 나열해줘."

GPT 응답:
단순 반복 리스트가 아닌, 실전에서 바로 활용 가능한 구조를 제공합니다.

모달 컴포넌트 템플릿

GPT 프롬프트:
"모달 팝업 마크업 템플릿을 만들어줘. Tailwind로 스타일링하고, 헤더/본문/푸터로 구분해줘."

GPT 응답:
모달의 기본 구조를 HTML로 구성한 뒤, 클래스 단위로 분리된 UI를 제공합니다.

이처럼 GPT는 사용자의 요구에 따라 실시간으로 템플릿을 만들고,
마치 'UI 빌더'처럼 역할을 수행합니다.
필요한 건 단 하나, 명확한 요청과 조건 설명입니다.

마크업 템플릿 자동화 이후 퍼블리셔의 역할 변화

GPT가 마크업 템플릿을 자동 생성하게 되면, 퍼블리셔의 역할은 단순 구현자에서 설계자와 품질관리자로 이동하게 됩니다.

1. 템플릿 구조 기획
   GPT에게 지시를 내리기 전에, 어떤 마크업 구조가 필요한지 설계합니다.
   시멘틱 요소, 접근성, 재사용 가능성을 고려한 기획이 중요합니다.
2. 생성된 마크업의 품질 검토
   GPT는 빠르지만 완벽하지 않습니다. aria 속성이나 폼 연결이 누락되었을 수 있으므로,
   최종 마크업은 반드시 사람이 검토해야 합니다.
3. 디자인 시스템과의 정합성 유지
   스타일 클래스가 디자인 시스템과 일치하는지 확인하고, 내부 가이드에 맞춰 정리하는 역할도 퍼블리셔의 몫입니다.

이러한 변화 속에서 퍼블리셔는 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에게 맡기기 사람이 해야 할 부분

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

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

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

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

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

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

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

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

퍼블리셔 실무에 AI를 더하다

퍼블리셔의 고질병, 반복 마크업

웹 퍼블리셔로 일하다 보면 HTML 구조나 UI 컴포넌트를 반복적으로 마크업해야 하는 일이 끊임없이 이어집니다.
예를 들어 버튼 그룹, 리스트 아이템, 카드 컴포넌트, 폼 요소 같은 공통 패턴을 수십 번씩 복사-붙여넣기 하며 일부 속성만 바꾸는 일이 매우 빈번합니다. 이처럼 반복적인 마크업 작업은 개발 속도를 저하시키고, 실수 가능성도 높이며, 무엇보다 퍼블리셔의 리소스를 창의적인 작업에서 분산시키는 원인이 됩니다.

이제 이런 문제를 해결해줄 도구가 있습니다. 바로 ChatGPT입니다. 단순한 챗봇이 아니라, 마크업 구조를 이해하고 반복 패턴을 자동화해주는 퍼블리셔의 AI 어시스턴트로 활용할 수 있는 것이죠. 특히 ChatGPT를 통해 반복 마크업 작업의 80% 이상을 자동화할 수 있는 전략이 현실이 되고 있습니다.

ChatGPT에게 반복 패턴을 인식시키기

ChatGPT를 반복 마크업 작업에 활용하기 위해선 먼저 패턴 인식 학습이 중요합니다. 마크업 구조의 규칙성과 반복성을 명확하게 전달하면, GPT는 이를 기반으로 다양한 변형 마크업을 자동으로 생성할 수 있습니다.

예를 들어보겠습니다.

카드 레이아웃이 있다고 가정해보겠습니다.

<div class="card"> <h3 class="card-title">타이틀</h3> <p class="card-desc">설명 텍스트입니다.</p> </div>

이 패턴이 10개 반복된다면, 수동으로 복사해서 내용을 하나하나 수정하기보다는 GPT에게 명령합니다.

GPT 프롬프트:

"타이틀과 설명이 다른 카드 컴포넌트를 10개 만들어줘. 클래스명은 유지하고 각 콘텐츠는 다양하게 해줘."

그 결과, 10개의 서로 다른 콘텐츠를 포함한 카드 마크업이 자동 생성됩니다.

이 과정에서 가장 핵심은 명확한 패턴 + 지시어입니다. ChatGPT는 단순한 지시보다, 반복 요소의 구조와 규칙을 인지할 수 있는 형태로 설명할 때 훨씬 더 정확한 출력을 제공합니다.

실무 활용 예제: 버튼, 리스트, 폼까지 자동화

실제 퍼블리싱 실무에서는 버튼 그룹, 리스트 항목, 입력 폼 등 다양한 반복 마크업 구조가 존재합니다. ChatGPT는 이 모든 요소를 다룰 수 있으며, 아래와 같은 실전 활용이 가능합니다.

GPT 프롬프트: 버튼 그룹 자동 생성

"Tailwind CSS를 사용해서 버튼을 5개 만들고, 각각 다른 아이콘과 텍스트를 넣어줘."

결과는 다음과 같은 Tailwind 기반 마크업이 생성됩니다.

GPT 응답 예시:

<button class="btn"><i class="fa fa-home"></i> 홈</button>
<button class="btn"><i class="fa fa-user"></i> 프로필</button>
<!-- 이하 생략 -->

GPT 프롬프트: 리스트 항목 자동 생성

"상품 목록을 ul/li 구조로 만들어줘. 8개 항목, 클래스는 동일하게 주고 내용은 다양하게."

GPT는 리스트 마크업을 자동 생성하며, li 내부의 텍스트도 자연스럽게 바꿔줍니다.

GPT 프롬프트: 입력 폼 자동 생성

"이름, 이메일, 전화번호를 받는 입력 폼을 만들어줘. HTML5 속성과 라벨도 포함해줘."

이 명령어만으로도 올바른 <label>, for 속성, input 유형이 포함된 시멘틱한 폼이 완성됩니다.

이러한 자동화 작업을 통해 마크업 작성 속도를 비약적으로 높이고, 반복에 의한 실수를 줄일 수 있습니다.

반복 마크업 자동화의 미래와 퍼블리셔의 변화

이제 퍼블리셔는 마크업을 "직접 일일이 작성하는 사람"이 아니라, AI에게 적절한 지시를 내리고 구조를 설계하는 디렉터의 역할로 진화하고 있습니다. ChatGPT는 도구일 뿐이며, 결국 마크업의 품질은 퍼블리셔의 기획력, 정보구조 판단력, 그리고 커뮤니케이션 역량에 달려 있습니다.

단순 반복 업무를 줄이면 퍼블리셔는 더 높은 수준의 UI 설계, 사용자 접근성 검토, 유지보수성을 고려한 설계 등 더 중요한 일에 집중할 수 있습니다. 특히 여러 페이지나 앱 전반에 걸쳐 공통 컴포넌트를 관리해야 할 경우, GPT를 활용해 기초 마크업 템플릿을 대량 생성하는 전략은 매우 유효합니다.

앞으로는 Figma에서 설계된 구조를 기반으로 GPT로 마크업까지 빠르게 연결하거나, 퍼블리셔 스크립트 툴과 GPT를 연계해 실시간 마크업 자동화를 실현하는 방향도 기대해볼 수 있습니다.