▪ 만들 것
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에서 와