<aside> 📎

참고 출처

1. v0 by Vercel — 자연어 프롬프트로 화면을 생성하는 AI 도구로, 이 실습에서 와이어프레임 생성 단계에 활용할 수 있는 대표 도구입니다.
2. Auto Layout — Figma Learn — 생성된 와이어프레임을 Figma에서 정렬·간격 조정할 때 사용하는 오토레이아웃 공식 가이드입니다. </aside>

앞의 두 이론 레슨에서 와이어프레임의 개념과 AI 활용 워크플로우를 배웠습니다. 이번 실습에서는 그 3단계 워크플로우(생성 → Import → 수정)를 직접 손으로 따라 해 봅니다. 본인 창업 아이템 적용은 스프린트 미션에서 진행하고, 이 실습에서는 정해진 가상 사례로 워크플로우 자체를 연습합니다.

실습: AI로 와이어프레임 생성하고 Figma에서 다듬기

실습 목표와 산출물

• 실습 목표
  • AI 도구로 와이어프레임 초안을 생성하고, Figma로 가져와 레이아웃·정렬·간격을 다듬는 전체 워크플로우를 경험합니다.
  • 프롬프트의 구체성이 결과물 품질을 어떻게 바꾸는지 직접 확인합니다.
• 최종 산출물
  • AI로 생성한 와이어프레임 화면 2개 (메인 화면 + 상세 또는 입력 화면)
  • Figma에서 레이아웃·간격을 정리한 보완본 1세트
  • 사용한 프롬프트와 수정 과정을 정리한 간단한 기록

가상 사례: '핏메이트' 운동 루틴 앱

• 여러분은 예비 창업팀 **'핏메이트'**의 디자이너입니다. 팀은 다음과 같은 서비스를 기획했습니다.
  • 서비스: 바쁜 직장인을 위한 홈트레이닝 루틴 추천·기록 앱
  • 타깃: 헬스장 갈 시간이 부족한 20~30대 직장인
  • 핵심 화면: ① 오늘의 추천 루틴을 보여주는 메인 화면, ② 운동 하나를 기록하는 입력 화면

단계별 진행 안내

• Step 1. 프롬프트 작성
  • 메인 화면부터 시작합니다. 이전 레슨의 구성 요소(맥락, 화면 목적, 필수 요소, 레이아웃 스타일)를 담아 프롬프트를 작성합니다.
  • 점검 질문: 어떤 서비스인지, 이 화면에서 사용자가 무엇을 하는지, 반드시 들어가야 할 요소는 무엇인지가 프롬프트에 담겼는가?
• Step 2. AI 생성
  • 작성한 프롬프트를 AI 도구(v0, Figma Make, Google Stitch 등)에 입력하고 결과를 확인합니다.
  • 결과가 만족스럽지 않으면 부족한 부분을 구체적으로 보완해 1~2회 재생성합니다. (예: '하단에 탭바 추가', '카드를 리스트 형태로')
• Step 3. Figma로 가져오기
  • 생성 결과를 Figma로 가져오거나, 참고하여 직접 와이어프레임으로 다시 그립니다.
  • 가져온 직후 레이어와 그룹 구조를 확인하고, 헤더·본문·푸터 영역을 명확히 분리합니다.
• Step 4. Figma에서 다듬기
  • 정렬 기능으로 요소를 정확히 맞추고, 8pt 그리드를 기준으로 간격을 균등하게 조정합니다.
  • 반복되는 요소(카드, 리스트, 버튼)에 오토레이아웃을 적용해 간격과 정렬을 규칙으로 유지합니다.
• Step 5. 두 번째 화면 생성
  • 입력 화면에 대해 처음부터 좋은 프롬프트를 작성해 생성하고, 같은 방식으로 Figma에서 다듬습니다.

산출물 작성 틀

• 아래 항목을 기록으로 남기면 다음 단계(UI 컴포넌트·디자인 시스템) 작업의 재료가 됩니다.
  • 화면별 최종 프롬프트 (메인 / 입력)
  • 재생성 과정에서 바꾼 점과 그 이유
  • Figma에서 수정한 항목
  • 작성 예시: "메인 화면 1차 생성 결과는 카드 간격이 불규칙했음 → 프롬프트에 '카드 간 16px 간격, 8pt 그리드' 추가 → 재생성 후 Figma에서 오토레이아웃으로 간격 통일"