6. 디자인 마감하고 웹으로 구현하기

▪ 만들 것

4차시 와이어프레임·스토리보드에 톤&매너를 입혀 마감한 디자인과, 그것을 옮긴 반응형 웹 홈 화면 1개(HTML 파일).

▪ 왜 하는가

설계까지 끝냈다면, 마지막은 화면을 실제로 보이게 만들고 코드로 옮기는 일이다. 와이어프레임은 골조였고, 여기에 2차시 톤&매너(색·글꼴)를 입히면 디자인이 된다. 그 디자인을 생성형 AI 도구로 코드로 옮기면, 브라우저에서 도는 웹이 된다. 기획부터 구현까지 한 줄로 이어지는 마지막 단계다.

▪ 예제 파일

• 4차시 와이어프레임·스토리보드(Figma)
• 2차시 톤&매너(주조·보조·강조색, 글꼴)
• 도구: Figma, Google Stitch, Gemini

▪ 미리 알아두기

• 디자인 마감: 와이어프레임에 색·글꼴·이미지를 입혀 실제 보일 모습으로 완성하는 일이다.
• Google Stitch 코드: 화면을 HTML과 Tailwind CSS 코드로 내보낸다. 화면을 고르고 코드 아이콘(< >)을 누른다.
• Gemini Canvas: 프롬프트로 코드를 만들고 바로 미리보는 기능이다. 입력창 아래에서 [Canvas]를 고른다.
• 반응형 웹: 화면 크기에 맞춰 배치가 달라지는 웹이다. 모바일에서는 메뉴와 카드가 세로로 배치된다.

1. 작업 준비

1. 크롬(Chrome) 브라우저를 연다.
2. 4차시 Figma 파일(와이어프레임·스토리보드)을 연다.
3. 2차시 톤&매너(색·글꼴)를 옆 화면에 켜 둔다.
4. Gemini(https://gemini.google.com)에 구글 계정으로 로그인한다.

2. Figma에서 디자인 마감하기

1. 와이어프레임의 회색 박스에 2차시 주조색·보조색을 채운다.
2. 글자에 2차시에서 정한 글꼴을 적용한다.
3. "보험 추천받기" 버튼에 강조색(노랑)을 넣어 제일 눈에 띄게 한다.
4. 인기 보험 카드에 들어갈 이미지 자리와 제목·설명을 채운다.

3. Stitch에서 코드 받기

1. Google Stitch에서 만든 홈 화면을 연다.
2. 화면을 고르고 코드 아이콘(< >)을 누른다.
3. HTML·Tailwind CSS 코드가 보이면 전체를 복사한다(Ctrl+A → Ctrl+C).

4. Gemini Canvas로 코드 다듬기

1. Gemini 입력창 아래에서 [Canvas]를 고른다.
2. 아래 도움 프롬프트를 적고, 3단계에서 복사한 코드를 함께 붙여넣는다.
3. 보내면 Canvas에 코드와 미리보기가 나온다.
4. 미리보기가 톤&매너·차별화와 맞는지 본다.

5. 코드 저장하고 확인하기

1. Canvas 코드에서 복사 버튼을 눌러 코드를 복사한다.
2. 메모장을 열고 붙여넣어 "home.html"로 저장한다. 저장할 때 파일 형식을 모든 파일로 둔다.
3. "home.html"을 더블클릭해 브라우저로 연다.
4. 화면이 안 보이거나 깨지면 F5로 새로고침한다.

6. 수정 요청하기

1. 안 맞는 부분을 Gemini에 한 줄로 말한다(예: 강조색을 더 진하게, 카드 간격을 넓게).
2. 미리보기가 새로 나오면 다시 확인한다.
3. 원하는 모양이 될 때까지 반복한다.

7. 차별화 점검

1. 2차시 차별화 방향을 다시 본다.
2. 화면 첫 자리에 "보험 추천받기"가 가장 크게 있는지, 상품 비교가 간단한지 확인한다.
3. 안 드러나면 Gemini에 더 크게·위로 올려 달라고 요청한다.

▪ 도움 프롬프트

아래 글을 Gemini 입력창에 [Canvas] 상태로 넣는다. 괄호를 내 정보로 채우고, Stitch 코드가 있으면 맨 아래에 붙여넣는다.

아래 내용으로 반응형 웹 홈 화면을 HTML과 Tailwind CSS로 만들어줘. Canvas 미리보기로 보여줘.
주제: (내 사이트 주제)
콘셉트: (2차시에서 정한 콘셉트)
색: 주조색 흰색·연회색, 강조색 노랑(#FCD716), 본문 진회색
화면 구성(스토리보드 HOME-01):
- 헤더: 로고 + 메뉴(보험 추천, 보험 상품, 가입·비교, 보상 청구, 고객지원)
- 히어로: "보험 추천받기" 큰 노랑 버튼을 가운데 크게 두어 처음 방문자를 안내
- 인기 보험 카드 3개
- 상품 비교 영역(보험 2개를 나란히)
- 푸터: 회사 소개·약관·연락처
모바일에서는 메뉴와 카드가 세로로 배치되게 반응형으로 만들어줘.
(아래에 Stitch 코드 붙여넣기)

8. 저장

1. "home.html"을 저장한다(Ctrl+S).
2. 사용한 프롬프트와 수정 내용을 "구현_메모.txt"에 정리해 저장한다.