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

▪ 만들 것

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

▪ 왜 하는가

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

▪ 예제 파일

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

▪ 미리 알아두기

• 디자인 마감: 와이어프레임에 색·글꼴·이미지를 입혀 실제 보일 모습으로 완성하는 일이다.
• Google Stitch 코드: 화면을 HTML과 Tailwind CSS 코드로 내보낸다. 화면을 고르고 코드 아이콘(< >)을 누른다.
• Gemini Canvas: 프롬프트로 코드를 만들고 바로 미리보는 기능이다. 입력창 아래에서 [Canvas]를 고른다.
• 반응형 웹: 화면 크기에 맞춰 배치가 달라지는 웹이다. 모바일에서는 메뉴와 카드가 세로로 배치된다.
• Stitch와 Gemini의 역할: Stitch는 화면을 빠르게 코드로 뽑는 출발점이고, Gemini는 그 코드에 톤&매너와 차별화를 입혀 완성하는 도구다. Stitch 코드 없이 Gemini만으로도 만들 수 있다.
• Tailwind CSS: 미리 만들어진 디자인 클래스 모음이다. 코드 맨 위(head)에 불러오는 한 줄()이 있어야 색·여백이 화면에 적용된다. 이 줄이 빠지면 글자만 나오고 디자인이 안 보인다. 인터넷이 연결돼 있어야 한다.

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. 메모장을 열고 붙여넣는다(Ctrl+V).
3. [파일] → [다른 이름으로 저장]을 누른다. 파일 형식을 "모든 파일"로 바꾸고, 인코딩을 "UTF-8"로 고른 뒤, 이름을 "home.html"로 적어 바탕화면에 저장한다.
4. 저장한 파일 이름이 "home.html"이 맞는지 확인한다. "home.html.txt"로 되어 있으면 파일 형식을 "모든 파일"로 다시 고르고 저장한다.
5. "home.html"을 더블클릭해 브라우저로 연다.
6. 디자인 없이 글자만 나오면 코드 맨 위에 Tailwind 불러오는 줄()이 있는지, 인터넷이 연결됐는지 확인한다. 그래도 안 되면 F5로 새로고침한다.

6. 수정 요청하기

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

7. 차별화 점검

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

▪ 도움 프롬프트

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

너는 30년 경력의 웹 디자이너다. 아래 명세대로 완성도 높은 반응형 웹 홈 화면 한 페이지를 HTML 한 파일과 Tailwind CSS(CDN)로 만들어줘. Canvas 미리보기로 보여줘.

[사이트]
- 주제: (내 사이트 주제)
- 콘셉트: (2차시에서 정한 콘셉트 한 문장)
- 차별화: 처음 방문자도 쉽게 비교. '보험 추천받기'를 화면에서 가장 크게, 상품 비교를 눈에 띄게

[톤 앤 매너]
- 주조색: 화이트 #FFFFFF, 라이트그레이 #F5F5F5
- 보조색: 다크그레이 #333333(본문 글자), 연파랑 #DDE8FD·연초록 #E6F5E0(카드 배경 포인트)
- 강조색: 노랑 #FCD716 (CTA 버튼·중요 표시에만 좁게)
- 글꼴: 'Noto Sans KR', 제목은 굵게(bold), 본문은 보통
- 모서리는 둥글게(rounded-xl), 카드와 버튼에 약한 그림자(shadow-sm)
- 여백: 섹션 사이 넓게(py-16), 가운데 정렬 컨테이너(max-w-6xl mx-auto px-4)

[화면 구성 - 스토리보드 HOME-01]
1) 헤더(상단 고정 sticky): 좌측 로고, 우측 메뉴 5개(보험 추천, 보험 상품, 가입·비교, 보상 청구, 고객지원). 메뉴 hover 시 밑줄.
2) 히어로(가운데 정렬): 큰 제목(콘셉트 문장), 한 줄 설명, 그 아래 '보험 추천받기' 버튼을 노랑 배경·큰 크기(text-xl, px-8 py-4)로 가장 크게. 버튼 hover 시 조금 진하게.
3) 인기 보험: 섹션 제목 '인기 보험'. 카드 3개를 그리드(데스크탑 grid-cols-3). 각 카드에 이미지 자리(회색 박스), 보험 이름(굵게), 한 줄 설명, '자세히' 링크. hover 시 그림자 커짐.
4) 상품 비교: 섹션 제목 '한눈에 비교'. 보험 2개를 나란히(2열) 표로 놓고, 보장·보험료 행을 비교. 위에 '비교할 보험 고르기' 안내.
5) 푸터: 다크그레이 배경, 회사 소개·약관·연락처 링크와 저작권 한 줄.

[반응형]
- 데스크탑(768px 이상): 메뉴 가로, 카드 3열, 비교 2열
- 모바일(768px 미만): 헤더 메뉴는 햄버거 버튼으로, 카드와 비교는 세로 1열로

[품질]
- 시맨틱 태그(header, nav, main, section, footer) 사용
- 글자와 배경 대비 충분히, 이미지에 alt
- 실제 보험 사이트처럼 자연스러운 예시 문구로 채운다
- 전체를 HTML 한 파일로, <script src="https://cdn.tailwindcss.com"></script> 포함

(Stitch에서 받은 코드가 있으면 아래에 붙여넣고, 위 명세에 맞춰 다듬어줘)

8. 저장

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