<aside>
📎
참고 출처
- The Guide to Wireframing — UXPin — 와이어프레임 제작의 전통적 프로세스와 핵심 요소를 설명한 자료로, AI 워크플로와의 비교 기준입니다.
- v0 by Vercel — 자연어 프롬프트로 Next.js·Tailwind·shadcn/ui 기반 UI를 생성하는 대표적 AI 도구의 공식 사이트입니다.
</aside>
앞 레슨에서 와이어프레임의 개념과 충실도를 이해했습니다. 그런데 손으로 한 화면씩 그리는 전통적 방식은 창업가가 혼자 여러 화면을 빠르게 만들기에는 시간이 너무 많이 듭니다. 이번 레슨에서는 AI 도구로 와이어프레임 초안을 수초 만에 생성하고 디자이너가 다듬는, AI 시대의 새로운 와이어프레이밍 워크플로를 익힙니다. 이 흐름을 이해하고 나면 다음 실습에서 직접 AI로 화면을 만들고 Figma에서 보완할 수 있게 됩니다.
AI 시대의 와이어프레이밍 워크플로
- AI는 와이어프레임 초안을 빠르게 만들어 주는 출발점이며, 최종 완성은 사람의 판단이 필요합니다.
- 이번 레슨의 목표는 전통적 워크플로와 AI 활용 워크플로의 차이를 이해하고, AI 도구를 어느 단계에 어떻게 끼워 넣을지 파악하는 것입니다.
전통적 워크플로 vs AI 활용 워크플로
- 전통적 와이어프레이밍 흐름
- 기획 → 손그림 스케치 → Figma에서 직접 제작 → 수정의 순서로 진행됩니다.
- 한 화면을 처음부터 끝까지 사람이 그려야 하므로, 여러 대안을 비교하기에는 시간이 오래 걸립니다.
- AI 활용 와이어프레이밍 흐름
- 기획 → AI 프롬프트 작성 → AI 생성 → Figma로 Import → 수정 및 보완의 흐름으로 진행됩니다.
- AI를 활용하면 초기 제작 시간을 대폭 단축하고, 다양한 레이아웃 대안을 빠르게 생성해 비교할 수 있습니다.
- 특히 최근에는 v0(Vercel)처럼 Next.js·Tailwind·shadcn/ui 기반 코드까지 함께 생성하는 도구도 등장해, 와이어프레임이 바로 MVP 개발로 이어지는 흐름이 가능해졌습니다. (이 도구들은 이후 'AI 디자인 도구' 영역에서 자세히 다릜니다.)
AI 활용 워크플로의 3단계
- 1단계: 생성(Generate)
- 명확한 프롬프트로 AI 도구에 와이어프레임을 요청합니다. 화면 유형, 플랫폼, 주요 구성 요소, 레이아웃 스타일을 구체적으로 적을수록 원하는 결과에 가깝습니다. (프롬프트 작성법은 'AI 디자인 도구' 영역의 프롬프트 엔지니어링 레슨에서 심화합니다.)
- 2단계: 가져오기(Import)
- 생성된 결과물을 Figma로 가져와 작업 환경을 구축합니다. 대부분의 AI 도구는 Figma 플러그인이나 파일 내보내기를 지원합니다. 이때 레이어 이름이나 구조가 정리되어 있지 않을 수 있으므로 본격 수정 전 레이어 정리가 필요합니다.
- 3단계: 수정(Refine)
- Figma에서 레이아웃, 정렬, 간격 등을 디자인 시스템에 맞게 조정하고 보완합니다. 앞서 배운 8pt 그리드와 시각 위계 원칙을 이 단계에서 적용합니다.
AI 도구의 역할과 한계
- AI 도구의 강점
- 빠른 초안 생성, 다양한 레이아웃 아이디어 제시, 반복 작업 자동화에 강점이 있습니다. 특히 비디자이너인 창업가가 기본 화면 구성을 빠르게 만들 수 있게 도와줍니다.
- AI 도구의 한계
- 브랜드 아이덴티티 반영, 정교한 그리드 시스템 적용, 일관된 디자인 시스템 유지에는 한계가 있습니다. 따라서 AI는 출발점을 제공하는 도구이며, 최종 완성은 디자이너의 전문성이 필요합니다.
- 효율적인 협업 프로세스
- AI가 생성한 와이어프레임을 팀과 공유해 초기 피드백을 받고, Figma에서 수정하며 변경 사항을 반영합니다. AI는 초안 제작 시간을 단축하고, 디자이너는 구조 최적화와 세밀한 조정에 집중할 수 있습니다.
요약 포인트