왜 AI 시안인가
디자이너가 첫 시안을 잡는 데는 프로젝트 규모와 숙련도에 따라 상당한 시간이 소요된다. 방향이 바뀌면 그 시간이 고스란히 날아간다. AI를 파이프라인에 끼우면 아이디어 검증 → 시각화 → 피드백 반영 루프의 반복 주기를 크게 단축할 수 있다. 도구가 완벽해서가 아니라, 버리고 다시 시작하는 비용이 낮아지기 때문이다.
1단계 — 텍스트로 구조 먼저 잡기 (Claude / ChatGPT)
Figma를 열기 전에 LLM에게 정보 구조(IA)를 뽑아 달라고 한다. 프롬프트 예시:
- “SaaS 대시보드 메인 화면. 주요 사용자 액션 3가지, 핵심 지표 카드 레이아웃, 사이드바 메뉴 항목을 텍스트로 나열해줘.”
- 결과를 그대로 다음 단계 프롬프트의 입력값으로 붙여 쓴다.
이 단계에서 레이아웃 로직을 언어로 확정해 두면, 이후 이미지 생성 시 방향이 흔들리지 않는다.
2단계 — 이미지 시안 생성 (Midjourney / Adobe Firefly)
1단계 산출물을 기반으로 이미지 생성 프롬프트를 만든다. 핵심 공식은 [스타일] + [화면 유형] + [주요 컴포넌트] + [색상·분위기]다.
- 예: clean SaaS dashboard UI, sidebar navigation, KPI cards, dark navy and white, minimal flat design, Figma-style mockup –ar 16:9
- Midjourney:
--stylize값을 낮게(50~200) 잡으면 과도한 장식을 줄이고 UI에 가까운 결과물을 얻기 유리하다. (기본값 100 기준, 범위 0~1000) - Adobe Firefly: Adobe 라이선스 데이터로 학습되어 상업적 저작권 리스크 측면에서 상대적으로 투명한 편이다. Structure Reference 기능으로 기존 레이아웃 뼈대를 유지하면서 스타일만 바꿀 수 있다.
한 번에 여러 장을 뽑고, 방향성이 다른 2~3장을 추려 다음 단계로 넘긴다.
3단계 — Figma로 정제 (+ Anima / Locofy)
AI 이미지는 참고용이다. 바로 개발에 넘기면 안 된다. Figma에서 다음 순서로 다듬는다:
- 그리드 맞추기: 8pt 그리드 기준으로 컴포넌트 위치를 재정렬.
- 컴포넌트화: 반복 요소(버튼, 카드, 인풋)는 즉시 컴포넌트로 분리.
- Locofy 플러그인: Figma 레이어를 React / Next.js 등의 코드로 변환. 퍼블리싱 전 빠른 프로토타입 확인에 활용할 수 있다.
- Anima: 인터랙션 프로토타이핑을 지원하며, 팀 공유 링크로 리뷰 요청이 가능하다.
4단계 — 반복 피드백 루프
시안을 공유한 뒤 피드백이 오면, 수정 범위에 따라 도구를 다르게 쓴다:
- 방향 자체가 바뀔 때: 2단계로 돌아가 프롬프트를 수정해 새 이미지를 뽑는다.
- 디테일 조정일 때: Figma 안에서 직접 수정. AI를 다시 돌리는 것보다 빠른 경우가 많다.
- 카피·레이블 수정: LLM에 UX 라이팅을 요청하면 버튼 문구, 에러 메시지, 툴팁 텍스트를 일관된 톤으로 정리하는 데 도움이 된다.
실전에서 자주 막히는 포인트
- AI 이미지의 텍스트는 깨지거나 뭉개지는 경우가 많다. 레이블은 반드시 Figma에서 직접 입력할 것.
- Midjourney 결과물은 픽셀 해상도가 고정되어 있다. 확대가 필요하면 Magnific AI 등 업스케일 도구를 거친 뒤 트레이싱하는 방식을 참고할 수 있다.
- 색상 일관성은 AI가 보장하지 않는다. Figma 초기에 Color Style을 먼저 정의하고 시작하라.
정리
AI 시안 워크플로의 핵심은 AI가 선택지를 만들고, 디자이너가 판단한다는 역할 분리다. 도구는 LLM(구조) → 이미지 생성(시각화) → Figma(정제) → 플러그인(코드 연결) 순으로 이어진다. 이 흐름에 익숙해지면 초기 시안 단계의 반복 비용을 줄이고, 남은 에너지를 사용자 경험의 본질적인 문제에 집중할 수 있다.