▪ 만들 것
4차시 와이어프레임·스토리보드에 톤&매너를 입혀 마감한 디자인과, 그것을 옮긴, 웹표준을 지킨 반응형 바닐라 홈 화면(index.html·style.css·script.js 세 파일).
▪ 왜 하는가
설계까지 끝냈다면, 마지막은 화면을 실제로 보이게 만들고 코드로 옮기는 일이다. 와이어프레임은 골조였고, 여기에 2차시 톤&매너(색·글꼴)를 입히면 디자인이 된다. 그 디자인을 생성형 AI 도구로 코드로 옮기면, 브라우저에서 도는 웹이 된다. 기획부터 구현까지 한 줄로 이어지는 마지막 단계다.
▪ 예제 파일
- 4차시 와이어프레임·스토리보드(Figma)
- 2차시 톤&매너(주조·보조·강조색, 글꼴)
- 도구: Figma, Google Stitch, Gemini
▪ 미리 알아두기
- 디자인 마감: 와이어프레임에 색·글꼴·이미지를 입혀 실제 보일 모습으로 완성하는 일이다.
- Google Stitch 코드: 화면을 코드로 내보낸다. 화면을 고르고 코드 아이콘(< >)을 누른다. 이 코드는 Tailwind를 쓰므로, 4단계에서 순수 CSS로 다시 만들어 쓴다.
- Gemini Canvas: 프롬프트로 코드를 만들고 바로 미리보는 기능이다. 입력창 아래에서 [Canvas]를 고른다.
- 반응형 웹: 화면 크기에 맞춰 배치가 달라지는 웹이다. 모바일에서는 메뉴와 카드가 세로로 배치된다.
- Stitch와 Gemini의 역할: Stitch는 화면을 빠르게 코드로 뽑는 출발점이고, Gemini는 그 코드에 톤&매너와 차별화를 입혀 완성하는 도구다. Stitch 코드 없이 Gemini만으로도 만들 수 있다.
- 바닐라(웹표준) 코드: 프레임워크 없이 순수 HTML·CSS·JS로 만든 코드다. 웹표준은 역할을 나눈다 — 구조는 HTML, 표현은 CSS, 동작은 JS가 맡는다. 그래서 CSS는 style.css, JS는 script.js 외부 파일로 분리하고, index.html에서 와 로 연결한다. 미디어 쿼리(@media)로 화면 크기에 맞춰 배치를 조정한다.
1. 작업 준비
- 크롬(Chrome) 브라우저를 연다.
- 4차시 Figma 파일(와이어프레임·스토리보드)을 연다.
- 2차시 톤&매너(색·글꼴)를 옆 화면에 켜 둔다.
- Gemini(https://gemini.google.com)에 구글 계정으로 로그인한다.
2. Figma에서 디자인 마감하기
- 와이어프레임의 회색 박스에 2차시 주조색·보조색을 채운다.
- 글자에 2차시에서 정한 글꼴을 적용한다.
- “보험 추천받기” 버튼에 강조색(노랑)을 넣어 제일 눈에 띄게 한다.
- 인기 보험 카드에 들어갈 이미지 자리와 제목·설명을 채운다.
3. Stitch에서 코드 받기
- Google Stitch에서 만든 홈 화면을 연다.
- 화면을 고르고 코드 아이콘()을 누른다.
- HTML·Tailwind CSS 코드가 보이면 전체를 복사한다(Ctrl + A → Ctrl + C).
4. Gemini Canvas로 코드 다듬기
- Gemini 입력창 아래에서 [Canvas]를 고른다.
- 아래 도움 프롬프트를 적고, 3단계에서 복사한 코드를 함께 붙여넣는다.
- 보내면 Canvas에 코드와 미리보기가 나온다.
- 미리보기가 톤&매너·차별화와 맞는지 본다.
5. 코드 저장하고 확인하기
- 바탕화면에 새 폴더를 만든다(예: “my_site”).
- Canvas에서 index.html 코드를 복사한다.
- 메모장에 붙여넣고 [파일] → [다른 이름으로 저장]을 누른다. 파일 형식을 “모든 파일”, 인코딩을 “UTF-8″로 고른 뒤 “index.html”로 폴더 안에 저장한다.
- 같은 방법으로 style.css와 script.js도 각각 메모장에 붙여넣어 같은 폴더에 저장한다.
- 파일 이름이 “index.html.txt”처럼 되지 않았는지 확인한다. 그러면 파일 형식을 “모든 파일”로 다시 고르고 저장한다.
- “index.html”을 더블클릭해 브라우저로 연다.
- 디자인이 안 보이면 세 파일이 같은 폴더에 있는지, index.html의 와 연결이 맞는지 확인한다. 그래도 안 되면 F5로 새로고침한다.
6. 수정 요청하기
- 안 맞는 부분을 Gemini에 한 줄로 말한다(예: 강조색을 더 진하게, 카드 간격을 넓게).
- 미리보기가 새로 나오면 다시 확인한다.
- 원하는 모양이 될 때까지 반복한다.
7. 차별화 점검
- 2차시 차별화 방향을 다시 본다.
- 화면 첫 자리에 “보험 추천받기”가 가장 크게 있는지, 상품 비교가 간단한지 확인한다.
- 안 드러나면 Gemini에 더 크게·위로 올려 달라고 요청한다.
▪ 도움 프롬프트
아래 글을 Gemini 입력창에 [Canvas] 상태로 넣는다. 괄호를 내 정보로 채우고, Stitch 코드가 있으면 맨 아래에 붙여넣는다.
너는 30년 경력의 웹 개발자다. 아래 명세대로 완성도 높은 반응형 웹 홈 화면을, 웹표준을 지킨 바닐라 HTML·CSS·JS로 만들어줘.
[웹표준 - 파일 분리]
- 구조는 HTML, 표현은 CSS, 동작은 JS로 역할을 나눠줘.
- 결과를 index.html, style.css, script.js 세 파일로 나눠서 각각 코드 블록으로 보여줘. 파일 이름을 명확히 적어줘.
- index.html의 <head>에 <link rel="stylesheet" href="style.css">를, </body> 앞에 <script src="script.js"></script>를 넣어 연결해줘.
- 프레임워크나 CDN(Tailwind, Bootstrap 등)은 쓰지 마.
- 먼저 세 파일을 합친 형태로 Canvas 미리보기를 보여주고, 그 아래에 index.html·style.css·script.js를 따로 적어줘.
[사이트]
- 주제: (내 사이트 주제)
- 콘셉트: (2차시에서 정한 콘셉트 한 문장)
- 차별화: 처음 방문자도 쉽게 비교. '보험 추천받기'를 화면에서 가장 크게, 상품 비교를 눈에 띄게
[톤 앤 매너]
- 주조색: 화이트 #FFFFFF, 라이트그레이 #F5F5F5
- 보조색: 다크그레이 #333333(본문 글자), 연파랑 #DDE8FD·연초록 #E6F5E0(카드 배경 포인트)
- 강조색: 노랑 #FCD716 (CTA 버튼·중요 표시에만 좁게)
- 글꼴: 'Noto Sans KR'를 웹폰트로 불러오기, 제목은 굵게, 본문은 보통
- 모서리 둥글게(border-radius), 카드·버튼에 약한 그림자(box-shadow), 섹션 사이 여백 충분히
[화면 구성 - 스토리보드 HOME-01]
1) 헤더(상단 고정 sticky): 좌측 로고, 우측 메뉴 5개(보험 추천, 보험 상품, 가입·비교, 보상 청구, 고객지원). 메뉴 hover 시 밑줄.
2) 히어로(가운데 정렬): 큰 제목(콘셉트 문장), 한 줄 설명, 그 아래 '보험 추천받기' 버튼을 노랑 배경·큰 글자·넓은 안쪽 여백으로 가장 크게. 버튼 hover 시 조금 진하게.
3) 인기 보험: 섹션 제목 '인기 보험'. 카드 3개를 CSS Grid 3열로. 각 카드에 이미지 자리(회색 박스), 보험 이름(굵게), 한 줄 설명, '자세히' 링크. hover 시 그림자 커짐.
4) 상품 비교: 섹션 제목 '한눈에 비교'. 보험 2개를 나란히(2열) 표로 놓고, 보장·보험료 행을 비교. 위에 '비교할 보험 고르기' 안내.
5) 푸터: 다크그레이 배경, 회사 소개·약관·연락처 링크와 저작권 한 줄.
[반응형 - @media]
- 768px 이상: 메뉴 가로, 카드 3열(Grid), 비교 2열
- 768px 미만: 헤더 메뉴는 햄버거 버튼(JS로 열기), 카드·비교는 세로 1열로
[품질]
- 시맨틱 태그(header, nav, main, section, footer) 사용
- 글자와 배경 대비 충분히, 이미지에 alt
- 실제 보험 사이트처럼 자연스러운 예시 문구로 채운다
- 외부 라이브러리 없이 순수 HTML·CSS·JS만 사용
(Stitch에서 받은 코드가 있으면 아래에 붙여넣고, Tailwind를 걷어내 순수 CSS로 바꾸고 위처럼 세 파일로 나눠 정리해줘)
8. 저장
- index.html·style.css·script.js를 각각 저장한다(Ctrl + S).
- 사용한 프롬프트와 수정 내용을 “구현_메모.txt”에 정리해 저장한다.