UI mockups & wireframes는 인터페이스의 그림을 빌드합니다. 앱이나 사이트에 들어갈 화면들을, 브리프가 요구하는 피델리티로요. 진짜로 만들기 전에 "이게 어떻게 생길까?"에 답하기 위한 템플릿입니다.
하이파이 목업 또는 로파이 와이어프레임
피델리티는 브리프가 정합니다.
- 목업 — "사진 앱의 설정 화면, 다크 테마" — 실제 타이포, 색, 컨트롤이 있는 하이파이 화면이 나옵니다. 출시에 가까운 수준입니다
- 와이어프레임 — "온보딩 플로를 와이어프레임으로, 네 화면" — 로파이 구조가 나옵니다. 블록, 계층, 라벨. 아직 스타일을 놓고 다툴 것이 없습니다
둘 다 정적 이미지가 아니라 스티어링 가능한 실제 파일입니다. 컨트롤에 핀을 꽂고, 레이아웃에 댓글 달고, 밀도를 조정하는 것은 어떤 결과든 마찬가지입니다.
UI mockup · Devin · swe-2-high · 24 min
Mission Control — A launch dashboard at 10 Hz — countdown, telemetry, go/no-go poll, hold state. Dense and aligned.
▸ the prompt that made it▾ the prompt that made it
“Design a rocket launch mission control dashboard (1920×1080). Panels: master countdown (T-minus), vehicle status diagram (stages, tanks with fill levels), streaming telemetry charts (altitude, velocity, acceleration, tank pressure) with simulated data, weather constraints with pass/fail, a go/no-go poll of 8 stations that turn green one by one, event log, and a trajectory plot. Include a 'hold' state that can be triggered, turning affected panels amber with a reason. Data updates live at 10 Hz without layout shift. Night-console direction, dense but perfectly aligned, tabular numerals everywhere.”
화면 하나 또는 세트
화면 하나를 요청하면 하나가 나오고, 플로를 요청하면 에이전트가 세트 — 온보딩, 대시보드, 설정 — 를 아트보드 한 줄로 빌드합니다. 하나씩 넘겨보거나 그리드로 볼 수 있습니다. 미리보기는 계속 살아 있습니다. 클릭해 보고, 호버하고, 에이전트가 심어둔 상태를 시험하세요.
Wireframe · Devin · e2e · gate PASS
Checkout Flow — Cart to confirmation in four lo-fi frames — annotations, order summary, and every state in between.
▸ the prompt that made it▾ the prompt that made it
“Wireframe: a checkout flow: cart, shipping, payment, confirmation.”
강점
- 방향 탐색 — 같은 화면의 세 가지 시도, 저렴하게
- 초기 제품 작업 — 스펙이 정해지기 전 기능의 화면 세트
- 승인용 와이어프레임 — 스타일 논쟁 없이 구조만
- 경쟁 분석 — 만들지 않고 "이 플로는 어떻게 생길까?"
목업 스티어링
스티어링의 모든 것이 적용됩니다. 같은 엔진이니까요.
- 잘못된 부분을 ⌥-click해 정확한 노드에 댓글
- 디자인이 노출하는 파라미터에는 Tweaks
- 빠진 화면이나 잘못된 방향에는 후속 지시
- "같은 플로의 두 가지 시도"에는 배리언트
게이트도 그대로 돌아갑니다. 목업도 다른 결과처럼 검사받습니다. 실현 가능성에 대해 거짓말을 하는 그림은 쓸모 없는 그림이니까요.
목업 vs 웹사이트 vs 모바일 앱
- UI 목업 — 인터페이스의 그림, 데스크톱이나 웹 모양
- 모바일 앱 — 폰 크기 화면, 터치 타겟, 모바일 nav
- 인터랙티브 웹사이트 — 실제로 동작하는 사이트, 멀티 페이지
결과물이 보는 것이 아니라 클릭해 다닐 것이라면 목업이 아닙니다. 웹사이트(또는 폰 모양이면 모바일 앱)입니다.
Tip: 브리프에 피델리티를 명시하세요. "hi-fi mockup"과 "lo-fi wireframe"은 다른 결과를 내며, 하이파이를 원했는데 와이어프레임이 나오면 실행이 낭비됩니다. 단어가 에이전트가 시작하기 전에 기대치를 잡아줍니다.
내보내기
목업은 공유용으로 PNG 또는 PDF로 내보냅니다. 발표할 크기로 렌더링된 화면들입니다. 소스 파일은 다음 스티어링이나 다음 버전을 위해 프로젝트 폴더에 남습니다.