5. 와이어프레임·스토리보드 만들기

▪ 만들 것

Google Stitch로 만든 홈 화면을 Figma로 가져와, 영역(헤더·메뉴·본문·푸터)을 정리한 와이어프레임과, 각 영역의 기능·동작을 설명한 스토리보드 1건.

▪ 왜 하는가

정보구조로 골대를 세웠다면, 다음은 각 화면이 어떻게 생겼는지 그리는 일이다. 와이어프레임은 색이나 이미지를 빼고 화면의 배치만 빠르게 잡는 밑그림이다. 스토리보드는 그 화면에 설명을 달아 디자이너·개발자가 보고 만들 수 있게 한다. 먼저 화면의 골조와 동작을 정해 두면, 다음 단계의 디자인·구현이 흔들리지 않는다.

▪ 예제 파일

• 2차시 디자인 방향성 시트(콘셉트·톤&매너)
• 3차시 정보구조도(대메뉴·하위 메뉴)
• 도구: Google Stitch https://stitch.withgoogle.com , Figma https://www.figma.com

▪ 미리 알아두기

• 와이어프레임: 화면 배치를 선으로 단순화한 스케치다. 색·이미지보다 어디에 무엇을 놓을지에 집중한다.
• 화면 영역: 헤더(상단 첫인상)·GNB(주메뉴)·콘텐츠(본문)·푸터(하단 정보)로 이루어진다.
• 스토리보드: 화면 설계서다. 한 장은 세 영역으로 이루어진다. 페이지 정보 영역(화면 ID·화면 이름·화면 경로), 상세 화면 설계 영역(화면 목업에 UI 요소마다 번호를 단 것), 부가 설명 영역(번호마다 기능·동작·이동 화면을 적은 것)이다. 현업에서는 SB라 부른다.
• 화면 경로: 메인에서 이 화면까지 어떻게 오는지를 메뉴 순서로 적은 것이다(예: 메인 > 로그인 > ID 찾기).
• Google Stitch: 자연어로 화면을 만들어 주는 AI 도구다. 구글 계정으로 쓰며, 만든 화면을 Figma로 내보낼 수 있다.
• Figma: 화면을 그리고 다듬는 협업 디자인 도구다. 무료로 가입해 쓴다.

1. 작업 준비

1. 크롬(Chrome) 브라우저를 연다.
2. Google Stitch(https://stitch.withgoogle.com)에 접속해 구글 계정으로 로그인한다.
3. 새 탭에서 Figma(https://www.figma.com)에 로그인한다. 계정이 없으면 Sign up으로 만든다.
4. 2차시 디자인 방향성 시트와 3차시 정보구조도를 연다. 프롬프트에 넣을 재료다.

2. Stitch에 화면 요청하기

1. Stitch 입력창에 만들 화면을 설명하는 프롬프트를 적는다. 아래 도움 프롬프트를 복사해 내 정보로 채운다.
2. Generate 버튼을 누른다.
3. 잠시 기다리면 화면 시안이 만들어진다.

3. 생성된 화면 점검·수정하기

1. 정보구조도의 대메뉴가 상단에 다 들어갔는지 확인한다.
2. 처음 방문자를 안내하는 큰 버튼(보험 추천받기)과 상품 비교 영역이 보이는지 확인한다.
3. 빠진 요소가 있으면 입력창에 고칠 내용을 한 줄 더 적고 다시 생성한다. 원하는 모양이 될 때까지 반복한다.

4. Figma로 가져오기

1. 만족스러운 화면에서 내보내기 메뉴를 찾아 Figma로 보내는 항목(예: Copy to Figma, Export)을 누른다.
2. Figma로 돌아와 새 파일을 열고 붙여넣기(Ctrl+V)한다.
3. 화면 시안이 레이어 그대로 들어왔는지 확인한다.

내보내기 버튼 이름과 위치는 Stitch 화면이 갱신되면 바뀔 수 있다. 화면에서 "Figma" 또는 "Export"라는 말을 찾는다. 공식 안내는 https://developers.googleblog.com/stitch-a-new-way-to-design-uis/에서 확인한다.

5. 와이어프레임으로 영역 정리하기

1. Figma 화면에서 사각형 도구(R 키)로 헤더·GNB·콘텐츠·푸터 영역을 큰 칸으로 구분한다.
2. 각 칸에 텍스트 도구(T 키)로 영역 이름을 적는다(헤더, GNB, 콘텐츠, 푸터).
3. 본문 영역 안에 들어갈 요소(보험 추천 버튼, 인기 보험 카드, 상품 비교)를 빈 사각형으로 표시한다.

6. 스토리보드 작성하기

1. 화면 위에 페이지 정보를 적는다. 화면 ID(예: HOME-01), 화면 이름(홈), 화면 경로(예: 메인 > 홈).
2. 화면 목업에서 사용자가 누르는 요소(로고·메뉴·버튼·카드)마다 번호 마커를 단다(1, 2, 3 순서로). 빠지는 요소가 없게 한다.
3. 화면 아래에 부가 설명(Description) 영역을 만들고 번호마다 한 줄씩 적는다.
4. 번호 설명에는 세 가지를 담는다. 그 요소가 무슨 기능인지, 누르면 어떻게 동작하는지, 어느 화면으로 이동하는지(이동 화면 ID)를 적는다.
5. 화면에 안 보이는 동작(팝업·경고 메시지)도 번호를 달아 빠지지 않게 적는다.

7. 차별화 점검

1. 2차시 차별화 방향과 3차시 정보구조도를 다시 본다.
2. 화면의 제일 큰 자리에 차별화 요소(처음 방문자 안내, 간단한 비교)가 놓였는지 확인한다.
3. 안 드러나면 해당 요소를 더 크게 하거나 위로 옮겨 고친다.

▪ 도움 프롬프트

아래 글을 Google Stitch 입력창에 넣어 홈 화면을 생성한다. 괄호 부분을 내 정보로 바꿔 채운다.

보험 사이트의 홈 화면을 반응형 웹으로 디자인해줘.
주제: (내 사이트 주제)
콘셉트: (2차시에서 정한 콘셉트 한 문장)
색: 주조색 화이트·라이트그레이, 강조색 노랑(#FCD716), 본문 다크그레이
상단 헤더: 로고와 메뉴(보험 추천, 보험 상품, 가입·비교, 보상 청구, 고객지원)
첫 화면: "보험 추천받기" 큰 버튼을 가운데 크게 놓아 처음 방문자를 안내해줘
그 아래: 인기 보험 카드 3개, 상품 비교 영역
하단 푸터: 회사 소개, 약관, 연락처
깨끗하고 신뢰감 있는 느낌으로 만들어줘.

8. 저장

1. Figma는 자동 저장된다. 파일 이름을 "와이어프레임_홈"으로 정한다.
2. 스토리보드 설명을 메모장에도 정리해 "스토리보드_메모.txt"로 저장한다(Ctrl+S).