AI로 UI 목업 만드는 방법.
AI 에이전트는 문장 하나를 몇 분 만에 클릭 가능한 UI 목업으로 바꿀 수 있습니다. 요령은 지금 답하려는 질문에 맞는 완성도를 고르는 것입니다. 레이아웃을 정할 때는 와이어프레임, 실제 룩을 판단할 때는 하이파이 HTML 목업, 분위기를 탐색할 때는 목업 이미지입니다.
2026년 11월 6일 업데이트 · 7분 분량
AI 목업의 세 가지 종류
| 종류 | 만드는 방식 | 추천 용도 | 한계 |
|---|---|---|---|
| 와이어프레임 | 회색조 HTML | 레이아웃과 콘텐츠 합의 | 비주얼 스타일은 알 수 없음 |
| 하이파이 목업 | 스타일을 입힌 HTML과 CSS | 실제 룩 판단, 실제 크기로 테스트 | 와이어프레임보다 수정이 오래 걸림 |
| 목업 이미지 | 생성 이미지 | 레이아웃이 없는 단계에서 분위기 탐색 | 클릭, 크기 조절, 수정 불가 |
코딩 에이전트와 작업할 때는 보통 HTML 목업이 더 나은 기본 선택입니다. 어느 브라우저에서나 열리고, 실제 화면 크기에 반응하고, 이미 프로덕션 코드의 절반쯤 와 있습니다. 이미지는 제품이 어떤 느낌이어야 할지 아직 정하는 더 이른 단계에서 유용합니다.
1단계: 화면 설명하기
화면의 목적, 사용자, 반드시 들어가야 할 내용부터 시작하세요. 콘텐츠가 구체적이면 레이아웃도 구체적으로 나옵니다.
[구독 상품을 파는 커피 로스터리]의 메인 대시보드가 필요해. 사용자는 [매일 아침 확인하는 헤드 로스터]야. 반드시 보여야 할 것: [활성 구독 수, 이번 주 출고된 원두 봉 수, 이탈률, 목표 대비 매출, 8주간 주별 출고량, 이번 주 예정된 로스팅과 각 상태]. 데스크톱, 1440×900.
2단계: 와이어프레임으로 레이아웃 정하기
와이어프레임은 한 가지 질문에 답합니다. 레이아웃이 콘텐츠를 올바른 순서로 담고 있는가? 아직 색상 논쟁이 생기지 않도록 회색으로 유지하세요.
이 대시보드의 로우파이 와이어프레임을 1440×900 크기의 단일 HTML 파일로 만들어 줘: 점선 테두리의 회색 박스, 박스마다 무엇이 들어갈지 적은 라벨, 색상 없음, 실제 스타일링 없음. 가장 중요한 정보를 먼저 배치해 줘.
위계가 맞을 때까지 박스를 옮겨 보세요. 이 단계에서는 바꾸는 비용이 거의 들지 않습니다.
3단계: 하이파이 목업으로 바꾸기
레이아웃이 확정되면 그대로 두고 비주얼 디자인을 더하세요. 에이전트에게 방향, 실제 숫자, 그리고 있다면 브랜드 규칙을 알려 주세요.
승인된 와이어프레임을 새 HTML 파일의 하이파이 목업으로 바꿔 줘. 레이아웃은 정확히 유지해 줘. 스타일: [따뜻하고 차분하게, 크림색 배경, 짙은 갈색 사이드바, 주요 액션과 이번 주에만 쓰는 녹슨 주황색 포인트 하나]. 이름, 숫자, 날짜, 상태는 실제 같은 데이터로 채워 줘. 차트는 HTML과 CSS로 그려 줘.
디자인 시스템이 있다면 DESIGN.md 파일로 프롬프트마다 규칙을 반복하지 않고도 모든 목업을 브랜드에 맞출 수 있습니다.
4단계: 이미지로 분위기 탐색하기(선택)
스타일을 정하기 전에 목업 이미지로 여러 가지를 빠르게 시험해 볼 수 있습니다. Codex에서는 $imagegen을 넣어 이미지 생성 스킬을 호출하세요.
$imagegen 이 대시보드를 서로 다른 스타일의 목업 이미지 3장으로 만들어 줘: 따뜻한 에디토리얼, 어둡고 테크니컬한 스타일, 밝고 친근한 스타일. 데스크톱 화면, 실제 같은 UI 텍스트와 숫자, 기기 프레임 없이.
방향을 고른 다음, 마음에 드는 이미지를 3단계의 하이파이 프롬프트에 첨부하세요. 이미지는 레퍼런스로 보세요. 작은 텍스트와 정확한 간격은 여전히 확인이 필요합니다.
5단계: 변형을 만들어 비교하기
같은 화면을 일부러 다르게 만든 두세 가지 버전을 요청한 뒤 나란히 놓고 보세요. Codex Design 캔버스에서는 각 버전이 라이브 HTML로 다른 버전, 그리고 와이어프레임 옆에 표시되어 무엇이 바뀌었는지 한눈에 볼 수 있습니다.
같은 콘텐츠로 목업을 두 가지 더 만들어 줘. 하나는 파워 유저를 위해 더 촘촘하게, 하나는 아침에 빠르게 훑어볼 수 있도록 숫자는 더 크게, 디테일은 더 적게. 각각 별도 파일로 만들어 줘.
6단계: 핸드오프하기
- 이해관계자에게: HTML 파일이나 스크린샷을 공유하세요. HTML 파일은 어느 브라우저에서나 열리고 실제 크기의 실제 레이아웃을 보여 줍니다.
- 개발팀에게: 승인된 목업을 사용 중인 프레임워크와 컴포넌트로 앱에 다시 구현해 달라고 에이전트에 요청하세요. Codex로 UI 디자인하는 방법에서처럼 목업이 명세가 됩니다.
팁
- 화면 하나에 파일 하나. 작은 파일은 수정이 빠르고 비교하기 쉽습니다.
- 스타일보다 레이아웃을 먼저 확정하세요. 와이어프레임 수정은 몇 초면 되지만, 목업 세 개의 스타일을 다시 입히려면 더 오래 걸립니다.
- 실제 크기와 실제 데이터를 쓰세요. 데스크톱은 1440×900, 휴대폰은 390×844, 그리고 그럴듯한 숫자.
- 뻔한 패턴을 경계하세요. 피해야 할 것은 AI 티 나는 UI 디자인을 참고하세요.
자주 묻는 질문
AI가 텍스트 설명으로 와이어프레임을 만들 수 있나요?
네. 2단계처럼 화면과 콘텐츠를 설명하고 로우파이 HTML 와이어프레임을 요청하세요. Codex가 열어 보고, 수정하고, 하이파이 목업으로 발전시킬 수 있는 파일을 만들어 줍니다.
목업은 이미지와 HTML 중 무엇으로 만들어야 하나요?
분위기를 빠르게 탐색할 때는 이미지를, 실제 크기로 평가하거나 구현할 것은 HTML을 쓰세요. HTML 목업은 클릭하고, 크기를 바꾸고, 수정할 수 있으며 그대로 코드로 이어집니다.
그래도 Figma가 필요한가요?
방향을 탐색하고 시험하는 단계에서는 필요 없습니다. 디자인 시스템을 Figma에서 관리하는 팀은 공유 라이브러리와 핸드오프에 여전히 Figma를 쓰는 경우가 많습니다.