관리자 인증 확인 중...
B 또는 Space 로 복귀
‹
›
LUNA CODE LAB · CLASS II Week 1 — 자기 홈페이지 기획 고1 · 성인 / 120분
1 / 9 📄 워크시트 ←
WEEK 01 · 2026 · CLASS II

코딩보다
기획이 먼저

Claude Code 켜기 전에 — 종이와 펜으로 자기 홈페이지를 먼저 설계합니다. 오늘 끝나면 다음 주 빌드에 쓸 와이어프레임·페르소나·콘텐츠 인벤토리가 손에 남습니다.

Duration120 minutes
Tool📄 A4 워크시트 + 펜
Output홈페이지 기획서 1장
Phase자기 사이트 출시 (1/3)
02 / Learning Goals⏱ 5분

오늘의 학습 목표

1
페르소나 정의
누가 내 사이트에 올까? 나이·관심사·왜 오는지를 1명 정해 카드로 정리.
2
와이어프레임 손그림
코딩 전에 종이에 화면 구조 먼저. 어떤 박스가 어디에 들어갈지 손으로 그린다.
3
콘텐츠 인벤토리
사이트에 들어갈 글·사진·영상 5가지를 미리 모은다. "찍을 사진은 무엇?" "쓸 글은?"
4
핵심 메시지 한 줄
방문자가 사이트에 들어오자마자 보일 한 줄. 내 사이트의 정체성.
03 / Concept⏱ 15분

코딩은 30%, 기획이 70%

진짜 좋은 사이트는 코드 실력이 아니라 "무엇을 누구에게 어떻게 보여줄지"가 결정합니다. 오늘은 코딩 하나도 안 하고 — 펜과 종이로 사이트 뼈대만 만듭니다.

📋
기획 (70%)
페르소나
와이어프레임
콘텐츠
→
🤖
Claude 빌드 (30%)
코드 작성
다음 주 W2-W3
=
🌐
진짜 내 사이트
3주 안에
도메인까지
기획 없이 코딩 시작하면 — 매번 갈팡질팡, 결과물도 흔한 템플릿. 오늘의 종이 한 장이 12주 코스 전체를 가른다.
04 / Framework⏱ 15분

기획의 5요소

❌ 흔한 실수
"멋있는 사이트
그냥 만들어볼래"
왜 안 되나? 누구를 위한 사이트인지, 무엇을 담을지, 왜 만드는지 모름. 결과: 흔한 템플릿 + 채울 콘텐츠 없음 + 중간에 포기.
✓ 좋은 기획 5요소
1. 페르소나 — 누가 볼까?
2. 와이어프레임 — 어떻게 생겼나?
3. 콘텐츠 — 무엇을 담나?
4. 무드보드 — 어떤 느낌?
5. 메시지 — 한 줄 정체성
왜 좋나? 코딩 시작 전 5가지가 명확하면 Claude에게 정확히 시킬 수 있음. 결과: 3주 안에 진짜 자기 사이트 완성.
💡 오늘의 비법: "페르소나 · 와이어프레임 · 콘텐츠 · 무드보드 · 메시지" 다섯 개. 오늘 5요소 다 종이에 채우고 갑니다.
05 / Live Build · Step 1⏱ 8분

Step 1 — 페르소나 정의

"누가 내 사이트에 올까?" 한 명을 머릿속에 그린다. 이름·나이·관심사·왜 오는지. 모두를 위한 사이트는 누구도 만족시키지 못한다.

1
📄 A4 워크시트 — 페르소나 카드
// 워크시트의 페르소나 카드 채우기 이름: ______________ (실제 친구·가족 떠올려도 OK) 나이/직업: ______________ 관심사 3개: ______________ 온라인에서 자주 가는 곳: ______________ ❓ 이 사람이 내 사이트에 오는 이유는? ______________________ ❓ 내 사이트에서 가장 보고 싶어할 것은? ______________________
🎙
멘토 멘트 "가상의 인물 만들지 말고 진짜 아는 사람으로 시작하세요. 형·누나·친구·동아리 후배. 그 사람이 내 사이트 들어왔을 때 뭘 보고 싶을지 생각하면 콘텐츠가 명확해져요."
✋
학생 액션 (5분) A4 워크시트의 페르소나 카드 빈칸 채우기. 끝나면 짝과 카드 교환 → 1분씩 "이 사람이 어떤 사이트 좋아할 것 같은지" 추측해서 적어주기.
05 / Live Build · Step 2⏱ 10분

Step 2 — 무드보드 · 좋은 사이트 3개

맨땅에서 디자인 떠올리면 어려움. 좋아하는 사이트 3개를 찾아 "왜 좋은지" 분석. 이게 내 사이트의 톤이 된다.

2
📄 A4 워크시트 — 무드보드 3장
// 워크시트의 레퍼런스 박스 3개 채우기 🔗 사이트 URL: https://_____________ 좋은 점 3가지: _____, _____, _____ 메인 색깔: ________ 분위기 한 단어: ________ (예: 미니멀·럭셔리·친근·테크) 🔗 사이트 URL: https://_____________ 🔗 사이트 URL: https://_____________
💡
레퍼런스 찾기 팁
// 어디서 찾나? ✓ awwwards.com — 세계 베스트 사이트 모음 ✓ dribbble.com — 디자이너들의 작품 ✓ linear.app — 미니멀 SaaS 톤 ✓ stripe.com — 깔끔한 그라디언트 ✓ notion.so — 친근 일러스트 ✓ 평소 자주 가는 브랜드 사이트도 OK
🎙
멘토 멘트 "디자인 못한다고 걱정 마세요. 좋은 사이트 3개만 알면 우리도 따라할 수 있어요. AI한테 'linear.app 톤으로 만들어줘'라고만 해도 비슷하게 만들어줍니다."
✋
학생 액션 (7분) 노트북 켜고 좋아하는 사이트 3개 찾기 → URL·좋은 점·메인 색·분위기 워크시트에 적기. 한 명만 발표 1분.
05 / Live Build · Step 3⏱ 12분

Step 3 — 와이어프레임 손그림

컴퓨터로 그리지 마! 종이 위에 박스 4-6개로 화면 뼈대를 그린다. 디자인 없는 회색 박스가 오히려 구조를 명확하게 한다.

3
📄 A4 워크시트 — 와이어프레임 영역
// 종이에 박스로 그릴 5가지 영역 ┌─────────────────────────┐ │ 1. 헤더 (로고 + 메뉴) │ ← 어떤 메뉴? About / Works / Contact? ├─────────────────────────┤ │ 2. 히어로 (큰 글자 + CTA)│ ← 한 줄 메시지 + 버튼 ├─────────────────────────┤ │ 3. 메인 콘텐츠 │ ← 작품 / 소개 / 갤러리? │ (3개 카드 그리드?) │ ├─────────────────────────┤ │ 4. 보조 영역 (블로그·후기)│ ← 선택 ├─────────────────────────┤ │ 5. 푸터 (연락처·SNS) │ └─────────────────────────┘
💡
와이어프레임 규칙 4가지
1. 박스만 그린다 (디자인 X, 색 X) 2. 한 페이지에 한 화면씩 — 메인 페이지만 그려도 OK 3. 텍스트 자리는 "제목" "본문 텍스트" 표기 4. 이미지 자리는 X자 또는 ▣ 박스로
🎙
멘토 멘트 "디자이너들이 진짜로 이렇게 일해요. Figma 켜기 전에 종이부터. 회색 박스가 못생겨 보여도 — 구조가 명확해지면 다음 주 Claude한테 정확히 요청할 수 있어요."
✏️
학생 액션 (10분) A4 워크시트 와이어프레임 영역에 자기 사이트 뼈대 그리기. 박스 4-6개. 끝나면 짝과 교환하고 "여기는 뭐가 들어가?" 1분 질문.
05 / Live Build · Step 4⏱ 10분

Step 4 — 콘텐츠 인벤토리

와이어프레임의 빈 박스에 실제로 들어갈 콘텐츠 5개를 미리 적는다. "찍을 사진은 무엇? 쓸 글은? 영상은?"

4
📄 A4 워크시트 — 콘텐츠 인벤토리 표
// 5개 콘텐츠 미리 정하기 ┌────────┬──────────┬──────────────┬─────────┐ │ 종류 │ 제목 │ 어떻게 만들지 │ 언제 OK │ ├────────┼──────────┼──────────────┼─────────┤ │ 📝 글 │ 자기소개 │ 직접 작성 │ W2 전 │ │ 🖼 사진│ 프로필 │ 셀카 / AI생성 │ W2 전 │ │ 🎨 작품│ 그림 3개 │ 평소 작품 │ W4-5 │ │ 🎵 음악│ Suno BGM│ Suno (W8) │ W8 │ │ 🎬 영상│ 자기소개 │ Runway (W10) │ W10 │ └────────┴──────────┴──────────────┴─────────┘
💡
콘텐츠 분류 5가지 (모두 채울 필요 X)
1. 📝 텍스트 — 자기소개·이력·블로그 글 2. 🖼 이미지 — 프로필·작품·여행 사진 3. 🎨 작품 — 그림·디자인·코드·요리 4. 🎵 사운드 — 음악·팟캐스트·플레이리스트 5. 🎬 영상 — 자기소개·뮤비·일상 영상
🎙
멘토 멘트 "콘텐츠 없는 사이트는 빈 박스만 있는 거예요. 다음 주 빌드 전에 '무엇을 보여줄지' 모르면 페이지가 비어요. 평소 작품·사진을 미리 모아두세요."
📋
학생 액션 (8분) A4 워크시트 콘텐츠 인벤토리 표 채우기. 5개 다 채우려 하지 말고, 진짜 보여주고 싶은 것 3개만이라도 OK.
05 / Live Build · Step 5⏱ 8분

Step 5 — 핵심 메시지 + 사이트맵

방문자가 사이트 들어와서 2초 안에 읽을 한 줄 + 어떤 페이지들이 있을지 정리. 이게 W2 빌드의 청사진.

5a
📄 A4 워크시트 — 핵심 메시지 한 줄
// "나는 ___하는 ___ 입니다" 공식 예 1: "공간을 그림으로 기록하는 건축학과 3학년입니다." 예 2: "AI로 음악 만드는 고2 메이커입니다." 예 3: "동네 카페 리뷰 쓰는 호치민 거주 작가입니다." 내 한 줄: "______________________________"
5b
📄 A4 워크시트 — 사이트맵 (페이지 목록)
// W2-3에 만들 페이지 3-5개 ✓ / 홈 — 핵심 메시지 + 작품 미리보기 ✓ /about 소개 — 자기소개·이력·연락처 ✓ /works 작품 — 갤러리·블로그 □ /blog 블로그 (선택) □ /contact 문의 폼 (W3에 Firebase)
🎙
오늘의 마무리 "오늘 만든 A4 한 장이 12주 수업의 청사진이에요. 다음 주 Claude한테 와이어프레임 사진 보여주고 '이대로 만들어줘' 하면 — 한 시간 만에 진짜 사이트가 나옵니다. 워크시트 잘 챙겨오세요."
📸
학생 액션 (5분) 핵심 메시지 한 줄 + 사이트맵 채우기 → 완성된 A4 워크시트 사진 찍어서 본인 폰에 저장 (다음 주 가져오기).
10 / Checkpoint⏱ 5분

기획 점검 5가지

✅오늘 잘 됐다면
  • 페르소나 카드 1명 구체적으로 채움
  • 레퍼런스 사이트 3개 + 좋은 점 적음
  • 와이어프레임 박스 4-6개 손그림
  • 콘텐츠 인벤토리 최소 3개 채움
  • 핵심 메시지 한 줄 + 사이트맵 페이지 3-5개
⚠️자주 막히는 부분
  • "모두를 위한 사이트" → 페르소나 1명만 구체적으로
  • 와이어프레임에 디자인 신경 → 회색 박스만 OK
  • 콘텐츠 5개 다 채우려 함 → 3개라도 진짜로
  • 메시지 너무 김 → "나는 ___하는 ___" 한 문장
  • 레퍼런스 베끼기 → 톤만 참고, 콘텐츠는 내 것
11 / Challenge⏱ 10분

기획 깊이 도전

👥
페르소나 2명으로 확장 — Primary(주요)와 Secondary(보조). 두 사람 모두 만족시키는 콘텐츠 구조 짜기.
난이도 ★
📱
모바일 와이어프레임도 그리기 — 데스크탑은 가로 3컬럼이 모바일에선 세로 1컬럼. 메뉴는 햄버거로.
난이도 ★★
📅
3개월 콘텐츠 캘린더 — 매주 무엇을 추가할지 계획. 사이트 만들고 나서 빈 채로 두면 죽은 사이트.
난이도 ★★★
12 / Student Gallery⏱ 7분

작년 친구들 작품

🎨
결과물 1
🌈
결과물 2
✨
결과물 3
🎮
결과물 4
🚀
결과물 5
🎯
결과물 6
📌 첫 학기 종료 후 학생 결과물 사진을 여기에 채울 예정입니다.
13 / Next Week⏱ 5분

다음 시간 예고

WEEK 02 · COMING UP

Claude Code로
랜딩 페이지 빌드

오늘 만든 A4 워크시트를 가지고 — Claude Code에게 사진 보여주고 빌드 시작합니다. 기획 1주 + 빌드 2주 = 3주 안에 자기 도메인 라이브 사이트.

PREPARE · 다음 주 준비물
  • 오늘 채운 A4 워크시트 (사진 또는 원본)
  • Claude.ai 계정 (못 만든 분은 미리 가입)
  • Cursor 또는 VS Code 설치 (멘토가 안내)
  • 노트북 · 와이파이 · 보조 모니터(선택)
  • 레퍼런스 사이트 3개 미리 북마크해 두기