Figma 없이 시안 제작: 와이어프레임 만들기
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에게 먼저 물어보는" 습관이 실무에서 훨씬 빠르고 효율적인 결과를 만들어줍니다.