Figma 없이 시안 제작: 시안 제작에 직접 활용하는 5가지 방법

활용하는 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 활용법 예시

퍼블리셔	Tailwind 기반 마크업 구조 생성
기획자	서비스 플로우 설계, UI 컴포넌트 목록 생성
디자이너 없음	Mermaid 구조화, 코드 기반 시안 생성
콘텐츠 작성자	버튼 문구, 헤드라인, 설명문 자동 생성
1인 블로거	템플릿 없이 와이어프레임 + 마크업 + 스타일링까지 한번에