왜 AI 시안인가
와이어프레임 작업에 AI 도구를 결합하는 실무자가 빠르게 늘고 있다. v0(Vercel), Uizard, Midjourney 같은 도구를 순서에 맞게 활용하면 기획 브리프 당일에 구조를 검증할 수 있는 초기 시안을 확보하는 것이 현실적으로 가능해졌다. 핵심은 도구 선택이 아니라 프롬프트 설계와 작업 순서를 이해하는 것이다. 아래 5단계가 그 흐름을 정리한다.
1단계 — 컨텍스트 프롬프트 작성
좋은 시안은 좋은 브리프에서 나온다. AI에게 넘기기 전에 다음 네 가지를 한 문단으로 정리하라.
- 서비스 유형: “반려동물 건강 기록 iOS 앱”처럼 구체적으로
- 타깃 사용자: “30대 초반, 스마트폰 능숙, 감성 디자인 선호”
- 핵심 화면: 온보딩·대시보드·상세 페이지 중 먼저 뽑을 화면 1~2개
- 레퍼런스 무드: “Notion의 여백감 + Linear의 다크 모드 색감”
이 네 요소가 빠지면 AI는 범용적인 SaaS 대시보드 형태의 결과물을 내놓는 경향이 있다.
2단계 — v0로 첫 HTML/CSS 시안 생성
v0.dev에 1단계 브리프를 붙여넣는다. v0는 React + Tailwind 기반 컴포넌트를 실시간 미리보기와 함께 출력한다. 이 단계의 목표는 “완벽한 시안”이 아니라 구조 검증이다. 레이아웃이 논리적인지, 정보 계층이 읽히는지를 우선 확인하라. 통상 두세 번 재생성하면 작업 가능한 뼈대가 나온다.
- 재생성 팁: “이전 결과에서 네비게이션을 하단 탭 바로 바꾸고 카드 간격을 넓혀줘”처럼 변경점만 구체적으로 지시한다
- Tailwind 클래스가 과하게 붙으면 “클래스를 최소화하고 의미 있는 컴포넌트로 분리해줘”를 추가한다
3단계 — Midjourney로 비주얼 무드 레퍼런스 생성
v0 결과물은 구조는 잡히지만 비주얼 감성이 단조롭다. 이때 Midjourney에서 UI 목업 이미지를 생성해 팀과 방향을 맞춘다.
프롬프트 예시: mobile app UI, pet health tracker, dark mode, soft gradient, card-based layout, iOS style, clean typography, --ar 9:16 --style raw
생성된 이미지를 그대로 사용하는 것이 아니라, 색상 팔레트·폰트 무게·여백 감각을 v0 컴포넌트에 반영하는 참고 자료로 활용한다.
4단계 — Figma로 픽셀 다듬기
v0에서 내보낸 HTML 구조를 Figma의 Builder.io 플러그인(HTML to Figma)으로 가져오면 레이어 구조로 변환할 수 있다. 변환 품질은 코드 복잡도에 따라 달라질 수 있으므로 가져온 뒤 다음 세 가지를 점검하라.
- 오토 레이아웃 정리: 절대 좌표로 배치된 요소를 프레임 기반으로 교체
- 디자인 토큰 적용: 색상·타이포·간격을 변수로 등록해 이후 수정 비용을 줄인다
- 인터랙션 프로토타입: 핵심 플로우 2~3개를 Figma 프로토타입으로 연결해 사용자 테스트 가능한 상태로 만든다
5단계 — 반복 루프와 핸드오프
시안 확정 전 Uizard Autodesigner를 활용해 대안 레이아웃을 빠르게 비교한다. Uizard는 텍스트 설명이나 스케치 이미지를 바탕으로 여러 변형안을 생성할 수 있어 방향 선택 회의 시간을 줄이는 데 유용하다.
핸드오프 단계에서는 Figma의 Dev Mode를 활성화해 개발자가 CSS 값을 직접 참조할 수 있게 한다. v0에서 출발한 파이프라인이므로 실제 코드와 디자인 간 간격이 처음부터 작다는 점이 이 워크플로의 주요 이점이다.
자주 하는 실수 세 가지
- 첫 생성 결과에 집착: AI 시안은 출발점이다. 재생성을 주저하지 마라
- 전체 화면을 한 번에 완성하려는 시도: 화면 하나씩, 컴포넌트 하나씩 검증하며 쌓아라
- 접근성 무시: 색 대비, 터치 타깃 크기(iOS 기준 최소 44×44pt)는 AI가 자동으로 확인하지 않는다. 직접 점검하라
도구는 계속 바뀐다. 하지만 컨텍스트 → 구조 → 무드 → 픽셀 → 반복이라는 순서는 바뀌지 않는다. 이 흐름을 익혀 두면 새로운 AI 도구가 나와도 파이프라인에 빠르게 편입할 수 있다.