WEEK 02 · 2026 · CLASS II

종이 한 장을
진짜 사이트로

지난 주 워크시트 가져오셨죠? — 오늘은 Claude Code에게 사진을 보여주고 빌드 요청. 2시간 안에 로컬에서 작동하는 내 랜딩 페이지 1.0이 손에 들어옵니다.

Duration120 minutes

ToolClaude Code (Vision)

Output로컬 작동 랜딩 페이지 1.0

Phase자기 사이트 출시 (2/3)

02 / Learning Goals⏱ 5분

오늘의 학습 목표

1

개발 환경 셋업

Cursor 또는 VS Code + Claude · 첫 폴더 만들고 작업 공간 정리.

2

와이어프레임 → 코드

종이 사진을 Claude에게 보여주고 "이대로 만들어줘" 요청. AI Vision 활용.

3

콘텐츠 채우기

자기소개·작품·메뉴·푸터 — 진짜 내 콘텐츠로 빈 박스 채우기.

4

스타일링 + 미리보기

색·폰트·여백 다듬기. 로컬 브라우저에서 작동 확인. 1.0 버전 완성.

03 / Concept⏱ 10분

와이어프레임 사진을 코드로

Claude는 눈이 있다 (Vision) — 종이에 그린 와이어프레임을 사진 찍어 보여주면 그대로 HTML로 만들어준다. 12개월 전엔 불가능했던 이 마법이 — 오늘 우리 작업의 시작.

📄

너의 입력

와이어프레임 사진
+ 콘텐츠 인벤토리

→

👁

Claude Vision

사진 분석
HTML·CSS 생성

=

🌐

랜딩 1.0

로컬 브라우저
작동 사이트

중요한 건 "한 번에 완성"이 아니라 "한 번에 하나씩 다듬기". Claude에게 100가지를 한꺼번에 시키면 망가짐. 한 번에 한 영역씩 — 오늘의 핵심.

04 / Prompt Pattern⏱ 15분

빌드 프롬프트 — 잘 vs 못

❌ 한 번에 다 시키기

"내 와이어프레임 보고
풀스택 사이트 만들어줘.
Firebase랑 도메인까지."

왜 안 되나? Claude가 100가지를 한꺼번에 만들면 다 어설픔. 디테일 놓침. 디버깅 불가. 결과: 어디부터 고칠지 모르는 거대한 코드 덩어리.

✓ 한 영역씩 단계별

1단계: "와이어프레임 사진 보고
HTML 골격만 만들어줘"
2단계: "헤더만 디자인 다듬어"
3단계: "히어로 영역 채워"
4단계: "갤러리 영역 만들어"
5단계: "푸터 + 모바일 대응"

왜 좋나? 각 단계 검증 가능. 망가지면 그 단계만 다시. AI도 집중력 유지. 결과: 깔끔한 코드 + 학생도 어디가 어떤 코드인지 이해.

💡 오늘의 비법: "한 번에 한 영역씩" — 헤더 → 히어로 → 메인 → 갤러리 → 푸터 순서로. 각 단계 끝마다 미리보기 확인.

05 / Live Build · Step 1⏱ 10분

Step 1 — 개발 환경 셋업

코딩하기 전에 도구 준비. Cursor (또는 VS Code)를 깔고 Claude를 연결합니다. 작업 폴더 1개 만들면 끝.

1

설치 3단계

// 둘 중 하나 선택 (멘토 추천: Cursor) ✓ Cursor — cursor.com 다운로드, AI 코드 에디터 (Claude 내장) ✓ VS Code — code.visualstudio.com + Claude 확장 ✓ Claude.ai — claude.ai 가입 (Pro 추천, $20/월) // 작업 폴더 만들기 바탕화면 → "내사이트" 폴더 생성 → Cursor에서 폴더 열기 (File → Open Folder)

🎙

멘토 멘트 "Cursor가 처음엔 어려워 보여요. 근데 메모장 켜는 거랑 똑같다고 생각하세요. 글 쓰는 곳에 코드 쓸 뿐. Claude한테 시키면 다 해줘요."

💻

학생 액션 (8분) Cursor 설치 → 첫 실행 → "내사이트" 폴더 열기 → Claude 채팅 패널 띄우기. 멘토가 학생별로 돌아가며 확인.

05 / Live Build · Step 2⏱ 15분

Step 2 — 와이어프레임 사진 → HTML 골격

지난주 워크시트 사진을 Claude에게 드래그&드롭. "이 그림대로 만들어줘" — Vision이 사진을 보고 진짜 HTML로 만들어준다.

2

Claude에게 보낼 첫 빌드 요청

// 와이어프레임 사진 드래그 + 다음 메시지 "첨부한 와이어프레임 사진을 보고 index.html 한 파일로 만들어줘. - 색상: [내 무드보드 메인 색] 톤 - 폰트: Pretendard 또는 깔끔한 산세리프 - 반응형 (모바일·데스크탑 둘 다) - 콘텐츠는 일단 Lorem Ipsum 채워두고 다음에 진짜로 바꿀게 - HTML/CSS 인라인으로, 한 파일에 다 넣어줘 먼저 골격만. 디테일은 나중에."

💡

받은 코드 → 브라우저에서 보기

// Claude가 만든 index.html을 저장 후 1. Cursor에서 index.html 파일 생성 → Claude 코드 붙여넣기 2. 파일 저장 (Cmd/Ctrl + S) 3. 파일 아이콘 우클릭 → "Reveal in Finder" 4. 더블클릭 → Chrome에서 열림 → 내 첫 사이트 미리보기 ✨

🎙

멘토 멘트 "이 순간이 인생 첫 사이트 보는 순간이에요. 디자인이 어설퍼도 괜찮아요. 다음 5분 안에 다듬을 거예요. 일단 '내가 그린 게 진짜 화면에 나왔다'는 사실에 집중하세요."

📸

학생 액션 (12분) 폰으로 W1 워크시트 사진 찍기 → Claude에 드래그 + 위 프롬프트 → 받은 코드 저장 → 브라우저 열기. 첫 사이트 떴으면 짝과 하이파이브.

05 / Live Build · Step 3⏱ 15분

Step 3 — 영역별 다듬기

골격이 생겼으니 — 헤더 → 히어로 → 갤러리 → 푸터 순서로 한 영역씩 정성스레. AI에게 한 번에 하나씩만.

3

영역별 단계 프롬프트 — 학생이 따라치는 4번

// ① 헤더 — 로고 + 네비 "헤더 영역을 다듬어줘. 왼쪽에 로고 자리 (텍스트로 '내 이름'), 오른쪽에 메뉴 3개 (About, Works, Contact). 스크롤 시 살짝 투명해지는 sticky 헤더로." // ② 히어로 — 메시지 + CTA "히어로 영역에 큰 한 줄 메시지를 넣어줘: '[내 핵심 메시지 한 줄]'. 그 아래 CTA 버튼 'Works 보기'." // ③ 갤러리 — 작품 3-6개 "메인 영역에 작품 갤러리. 3열 그리드, 정사각형 카드, 호버하면 살짝 올라가는 효과." // ④ 푸터 — 연락처 "푸터에 이메일, 인스타, 카톡 ID 3개. 가운데 정렬, 간결하게."

🎙

멘토 강조 "한 번에 하나씩! 헤더 끝내고 브라우저 확인. OK면 히어로. 또 확인. 이렇게 4단계. 한꺼번에 다 시키면 코드 망가져서 어디 고칠지 모르게 돼요."

🎨

학생 액션 (12분) 위 4단계 프롬프트를 본인 콘텐츠로 채워서 차례대로 요청. 각 단계 후 브라우저 새로고침으로 확인. 막히면 멘토에게 손 들기.

05 / Live Build · Step 4⏱ 12분

Step 4 — 진짜 콘텐츠 채우기

Lorem Ipsum 자리에 지난주 워크시트의 진짜 내 콘텐츠로 교체. 자기소개·작품 제목·이력. AI가 자동으로 배치.

4

콘텐츠 교체 프롬프트 (워크시트 인벤토리 참고)

// 한 번에 콘텐츠 다 알려주기 OK "이제 진짜 콘텐츠로 바꿔줘. 히어로 메시지: '[내 핵심 한 줄]' 자기소개: - 이름: [본명 또는 닉네임] - 나이/학년/직업: [...] - 한 줄 소개: [...] - 좋아하는 것 3가지: [...] 작품 3개 (이미지는 일단 placeholder): 1. 제목·짧은 설명 2. 제목·짧은 설명 3. 제목·짧은 설명 연락처: - 이메일: [...] - 인스타: [...] - 카톡 ID: [...]"

💡

사진 없을 때 — Placeholder 활용

// 실제 작품 사진 W4까지 못 모았을 때 "작품 이미지는 일단 picsum.photos 또는 unsplash.com 랜덤 이미지로 채워줘. 나중에 진짜 작품으로 바꿀게." // 또는 AI 생성 이미지 "각 작품에 어울리는 Unsplash 키워드 추천해줘. 나중에 거기서 다운받아 바꿀게."

🎙

멘토 멘트 "콘텐츠는 평생 다듬는 거예요. 오늘은 일단 '내 글·내 작품'을 박는 것까지. 완벽한 글 쓰려고 멈추지 마세요. 일단 박고 나중에 다듬어요."

📝

학생 액션 (10분) 워크시트 콘텐츠 인벤토리 보고 Claude에 진짜 콘텐츠 입력 → 새로고침으로 확인. 내 이름·내 작품·내 연락처가 화면에 나오면 성공.

05 / Live Build · Step 5⏱ 10분

Step 5 — 스타일링 + 모바일 확인

색·폰트·여백 마무리 + 모바일 화면 대응. "이거 내 사이트다" 싶을 정도로 다듬고 → 다음 주 배포 준비.

5a

디자인 마무리 프롬프트

// 한 번에 다 — 마지막 디자인 다듬기 "전체 디자인 마무리: - 메인 컬러를 [내 무드보드 색] 톤으로 통일 - 폰트 굵기 줄여서 더 세련되게 - 섹션 간 여백 충분히 (80px 이상) - 호버 효과 살짝 추가 (카드·버튼) - 다크 모드 toggle 버튼 추가 (선택)"

5b

모바일 확인 — Chrome DevTools

// 사이트 열린 상태에서 1. F12 또는 우클릭 → "검사" 2. 좌상단 📱 아이콘 클릭 (Device Toolbar) 3. iPhone·Galaxy 등 선택 → 모바일 화면 미리보기 4. 깨진 영역 있으면 → Claude에 "모바일에서 ___ 영역 ___처럼 보임. 고쳐줘"

✓

최종 점검 5가지

□ 내 이름·핵심 메시지가 첫 화면에 큼지막하게 □ 작품 3개 보임 (이미지 placeholder도 OK) □ 연락처(이메일·SNS) 푸터에 표시 □ 데스크탑 + 모바일 둘 다 깨지지 않음 □ 친구한테 보여줄 수 있는 수준

🎙

오늘의 마무리 "오늘 만든 건 1.0 베타예요. 완벽 X. 다음 주 W3에서 Firebase 호스팅 + 도메인 연결해서 진짜 인터넷에 띄울 거예요. 오늘 파일 잘 저장해두세요. 클라우드(Google Drive·Dropbox)에도 백업."

💾

학생 액션 (8분) 디자인 마무리 → 모바일 확인 → 파일 저장 + 클라우드 백업 → 스크린샷 찍어 단톡방에 자랑하기.

10 / Checkpoint⏱ 5분

빌드 점검 5가지

✅오늘 잘 됐다면

Cursor 설치 + 작업 폴더 열림
와이어프레임 사진 → HTML 변환됨
헤더·히어로·갤러리·푸터 4영역 다듬음
내 진짜 콘텐츠 (이름·작품·연락처) 박힘
브라우저에서 모바일 + 데스크탑 둘 다 깨지지 않음

⚠️자주 막히는 부분

Claude가 코드 안 줌 → 파일 이름·형식 명시 ("index.html 한 파일로")
저장했는데 화면 안 바뀜 → Cmd/Ctrl + R 새로고침
한꺼번에 다 망가짐 → 이전 코드 Cmd+Z 또는 Claude에 "이전 버전으로"
한글 깨짐 → meta charset utf-8 확인
모바일에서 글자 너무 큼 → "모바일 폰트 16px로" 요청

11 / Challenge⏱ 10분

빌드 깊이 도전

🌗

다크 모드 토글 추가 — 우상단 버튼 클릭하면 흑백 반전. localStorage로 선택 기억.

난이도 ★

✨

스크롤 애니메이션 — 갤러리 카드가 스크롤 시 아래에서 위로 fade-in. Intersection Observer 사용.

난이도 ★★

🎨

호버 시 자기 작품 영상 재생 — 갤러리 카드 호버 → 짧은 GIF/영상 재생. 실제 작품 다이내믹하게.

난이도 ★★★

12 / Student Gallery⏱ 7분

작년 친구들 작품

🎨

결과물 1

🌈

결과물 2

✨

결과물 3

🎮

결과물 4

🚀

결과물 5

🎯

결과물 6

📌 첫 학기 종료 후 학생 결과물 사진을 여기에 채울 예정입니다.

13 / Next Week⏱ 5분

다음 시간 예고

WEEK 03 · COMING UP

Firebase 배포 +
도메인 연결

로컬에서만 보던 사이트를 — 진짜 인터넷에 띄우는 주. Firebase Hosting 무료로 배포 + 원하면 자기 도메인 연결까지. 카톡으로 친구에게 URL 보내기!

PREPARE · 다음 주 준비물

오늘 만든 index.html 파일 (클라우드 백업 필수)
Google 계정 (Firebase 가입용)
도메인 구입 의향 있는 분 — 카드 준비 ($10-15/년, 선택)
"내 사이트 주소로 쓰고 싶은 이름" 3-5개 후보
다음 주 끝나면 친구에게 URL 자랑하기 가능!

종이 한 장을진짜 사이트로