WEEK 12 · 2026 · CLASS II · FINAL
🎓 12주 코스 졸업
내 디지털 포트폴리오
12주 전 — 빈 종이 한 장. 오늘 — 인터넷에 띄워진 내 사이트 + 내 뮤직비디오 + 친구한테 자랑할 URL. 마지막 다듬기 → 베타 테스트 → 발표 → 졸업. 오늘 우리 모두 메이커입니다.
Duration120 minutes
Mode통합 + 발표
Output사이트 1.0 정식판
Phase졸업 (12/12) 🎉
02 / Learning Goals⏱ 5분
오늘의 학습 목표
1
사이트 1.0 정식판
디자인 마무리 + 모바일·태블릿·데스크탑 모든 화면 점검. 진짜 정식 버전.
2
뮤직비디오 임베드
W10에서 만든 뮤비를 사이트 한 섹션에 임베드. 작품과 일대기가 한 페이지에.
3
SNS·이력서에 박기
인스타·노션·이력서·메일 서명에 내 URL. 평생 쓰는 디지털 명함.
4
2분 발표 + 졸업
각자 2분씩 사이트·뮤비 시연. 함께 박수치고 졸업 사진 찍기.
03 / Concept⏱ 10분
12주 전 → 오늘
Before & After를 마주할 시간입니다. 12주 전 빈 종이로 시작해서 — 오늘 진짜 라이브 사이트까지. 변화가 얼마나 큰지 한 번 들여다봐요.
📄
12주 전
빈 종이 + 막연한 꿈
"홈페이지 만들고 싶다"
"홈페이지 만들고 싶다"
→
🛠
12주의 여정
기획→빌드→배포→디자인
→콘텐츠→뮤비→SEO
→콘텐츠→뮤비→SEO
=
🌐
오늘
라이브 사이트
+ 뮤비 + 검색 등록
+ 뮤비 + 검색 등록
오늘은 새로 배우는 게 아니라 — "내가 만든 것들을 하나로 묶는 날"입니다. 12주 동안 쌓은 모든 조각이 오늘 하나의 작품이 됩니다. 그리고 — 여기가 끝이 아니라 진짜 시작이에요.
04 / Prompt Pattern⏱ 15분
마지막 다듬기 — 한 번에 하나
❌ 마지막에 욕심 부리기
"내 사이트
다 뒤집어서
완전 새 디자인 해줘.
오늘 다 끝낼게."
다 뒤집어서
완전 새 디자인 해줘.
오늘 다 끝낼게."
왜 안 되나? 마지막 날 큰 변경 = 망가지면 복구 불가. 12주 작업 날아감.
결과: 발표 못 함 + 좌절.
✓ 친구 피드백 한 줄만
① 친구 한 명에게:
"내 사이트 5분 봐줘.
어색한 거 딱 1개만 알려줘"
② Claude에 그것만:
"친구가 [이 부분]이 [어떻게]
보인대. 거기만 고쳐줘"
③ 다시 친구에게:
"바꿨어. 이제 어때?"
④ OK면 다음 친구
"내 사이트 5분 봐줘.
어색한 거 딱 1개만 알려줘"
② Claude에 그것만:
"친구가 [이 부분]이 [어떻게]
보인대. 거기만 고쳐줘"
③ 다시 친구에게:
"바꿨어. 이제 어때?"
④ OK면 다음 친구
왜 좋나? 작은 변경 → 검증 → 반복. 망가져도 복구 쉬움. 진짜 사용자 의견 반영.
결과: 발표 때 자신 있게 보여줄 수 있는 완성도.
💡 오늘의 비법: 마지막 날은 "새로 만들기 X · 다듬기 O". 친구 피드백 하나씩 처리 → 발표 직전까지 단단해짐.
05 / Live Build · Step 1⏱ 15분
Step 1 — 최종 디자인 점검
데스크탑 + 태블릿 + 모바일 — 3가지 화면 크기에서 깨지지 않는지 마지막 한 번. Chrome DevTools로 1분이면 확인 완료.
1
3가지 화면 크기 점검 — Chrome DevTools
// 사이트 열린 상태에서 F12 → 좌상단 📱 아이콘
✓ 데스크탑 1920 × 1080 (Responsive 모드 기본)
✓ 태블릿 iPad Pro / iPad Air
✓ 모바일 iPhone 14 / Galaxy S22
// 각 화면에서 확인할 것
□ 헤더 메뉴 안 깨짐 (모바일은 햄버거 메뉴인지)
□ 히어로 텍스트 화면 밖으로 안 튀어나옴
□ 갤러리 그리드 칼럼 수 자동 조정 (3→2→1)
□ 푸터 연락처 한 줄에 다 들어감
□ 이미지 잘리지 않고 적절한 비율
□ 폰트 크기 모바일에서 너무 작지 않음 (최소 14px)
💡
문제 발견 시 — Claude에 정확히
// 안 좋은 예: "모바일 이상해"
// 좋은 예 ↓
"모바일(375px 너비)에서 갤러리 카드가 한 줄에 3개라
글자가 너무 작아짐. 모바일에서만 1열로 바꿔줘.
태블릿(768px 이상)은 2열, 데스크탑(1024px 이상)은 3열."
// CSS 미디어 쿼리로 깔끔하게
@media (max-width: 767px) { /* 모바일 */ }
@media (min-width: 768px) and (max-width: 1023px) { /* 태블릿 */ }
@media (min-width: 1024px) { /* 데스크탑 */ }
🎙
멘토 멘트
"오늘 친구·가족이 방문할 때 90%가 모바일로 봐요. 카톡 링크 누르면 폰에서 열리니까요. 데스크탑에서만 예쁘면 안 돼요. 모바일에서 한 번만 더 보세요. 그게 진짜 사람들이 보는 화면이에요."
📱
학생 액션 (12분)
DevTools에서 3가지 화면 점검 → 발견한 문제 메모 → Claude에 정확히 요청 → 수정 → 다시 3가지 화면 확인. 본인 폰으로도 사이트 직접 열어보기.
05 / Live Build · Step 2⏱ 15분
Step 2 — 콘텐츠 풀 채우기
12주 동안 만든 모든 것 한 곳에: 작품 + 블로그 글 + 뮤비. 빈 자리 다 채우고 — 진짜 살아있는 포트폴리오로.
2
작품 + 블로그 + 뮤비 통합 — 3섹션 채우기
// ① 작품 갤러리 — 최소 6개 채우기
- 사진/그림/디자인 등 본인 작품 6장
- 각 작품: 제목·짧은 설명·연도
- 클릭하면 큰 이미지 라이트박스로
// ② 블로그 글 — 최소 3편
- W7에서 만든 블로그 시스템 활용
- 글감 추천: "12주 코스 후기" / "내 작업 과정" / "왜 이걸 만들었나"
- 각 글 700-1000자 정도
// ③ 뮤비 임베드 — W10 결과물
"히어로 아래에 영상 섹션 추가:
- 제목: '내 뮤비'
- W10에서 만든 영상 임베드
(YouTube 업로드 했으면 iframe / Firebase Storage라면 video 태그)
- 영상 위에 한 줄 설명"
💡
YouTube 영상 임베드 — 표준 패턴
// YouTube 영상 우클릭 → 소스 코드 복사
<iframe
width="100%"
height="480"
src="https://www.youtube.com/embed/VIDEO_ID"
title="내 뮤직비디오"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media"
allowfullscreen>
</iframe>
// 또는 Claude에 한 줄
"히어로 아래에 YouTube 영상 [URL] 임베드. 16:9 반응형."
🎙
멘토 멘트
"오늘 사이트에 뮤비까지 들어가면 — 보는 사람이 5분 머물러요. 평균 30초인데 5분이면 10배. 그만큼 작품 보고 글 읽고 인스타 따라옴. 12주 결과물을 한 화면에 다 보여주는 게 오늘의 무기예요."
🎬
학생 액션 (13분)
작품 6개 + 블로그 3편 + 뮤비 1편 확인 → 빈 자리 채우기 → 뮤비 임베드 코드 추가 → 새로고침으로 영상 재생되는지 확인.
05 / Live Build · Step 3⏱ 15분
Step 3 — 친구 베타 테스트
완성된 사이트를 친구·가족 3명에게 카톡으로 보내고 피드백 받기. 진짜 사용자가 본 그 순간이 가장 정확한 거울.
3
베타 테스트 — 3분 미션 카드
// 카톡 메시지 템플릿
"내가 12주 동안 만든 사이트야!
3분만 봐주고 딱 3가지 답해줘 🙏
1️⃣ 첫 화면에서 '이 사람 뭐 하는 사람'인지 알겠어?
2️⃣ 작품 중에 제일 인상 깊은 거 1개?
3️⃣ 어색하거나 깨지는 부분 있어?
URL: https://내도메인.com"
// 받은 피드백 정리
- 친구 A: "첫 화면 글씨가 너무 작아"
- 친구 B: "작품 #3이 제일 좋더라"
- 가족 C: "모바일에서 메뉴가 안 열려"
// → Claude에 한 번에 하나씩만 수정 요청
"모바일에서 햄버거 메뉴 클릭해도 안 열려. 수정해줘."
💡
피드백 처리 우선순위
🔴 치명적: 작동 안 됨 (메뉴 안 열림, 영상 안 보임)
→ 발표 전 반드시 수정
🟡 아쉬움: 글씨 작음, 색 어색
→ 시간 남으면 수정
🟢 취향: "나라면 다른 색", "이 작품 빼지"
→ 본인 판단, 무시해도 OK
// 핵심: 모든 피드백 다 반영할 필요 없음
// 본인이 동의하는 것만
🎙
멘토 멘트
"친구 피드백 들으면 가슴이 두근거려요. 칭찬에는 기뻐하고 비판에는 슬퍼하지 마세요. 둘 다 데이터예요. '아 이렇게 보일 수 있구나'를 알게 된 것 — 그게 메이커가 되는 길이에요."
💬
학생 액션 (13분)
섭외한 3명에게 카톡 메시지 발송 → 5-10분 대기 → 답장 모아서 우선순위 분류 → 치명적 1-2개만 수정 → 다시 친구에게 "고쳤어, 다시 봐줄래?"
05 / Live Build · Step 4⏱ 10분
Step 4 — SNS·이력서에 박기
사이트 만들고 혼자만 알면 의미 없음. 오늘 안에 — 최소 5곳에 내 URL을 박아 평생 디지털 명함으로.
4
URL 박는 곳 — 우선순위 7
① 인스타 프로필 → 바이오 링크 칸에 https://내도메인.com
② 노션 개인 페이지 → 상단에 큰 글씨 + 푸터에도
③ 카톡 프로필 메시지 → "📍 내 작업: 내도메인.com"
④ 이력서 → 첫 줄 이름 옆 / 또는 자기소개 끝
⑤ 메일 서명 → Gmail 설정 → 일반 → 서명
⑥ 링크드인 → 프로필 편집 → 웹사이트 추가
⑦ 유튜브 채널 → 채널 소개 + 영상 설명 마지막
// 보너스: QR 코드 생성
qr-code-generator.com → URL 입력 → 다운로드
→ 명함·전단·작품 사진에 박기
💡
메일 서명 — 영업의 시작
// Gmail 서명 예시 (회신마다 자동 첨부)
─────────────────
홍길동 · 일러스트레이터
📧 hong@example.com
🌐 hong-illustration.com ← 클릭 한 번에 사이트
📷 @hong.illust ← 인스타
─────────────────
// 이메일 한 통 보낼 때마다 = 명함 한 장 전달
// 일주일에 50통 = 일년에 2,600번 노출
🎙
멘토 멘트
"오늘 안에 7곳 다 채우세요. 1주일 뒤가 아니라 오늘. 이거 안 하면 사이트 만든 의미 절반 날아가요. 5분 작업 + 평생 효과. 가장 ROI 높은 5분이에요."
🔗
학생 액션 (8분)
7곳 중 최소 5곳에 URL 박기 → 멘토에게 인스타·노션 스크린샷 보여주기. 메일 서명도 그 자리에서 바로 설정.
05 / Live Build · Step 5⏱ 10분
Step 5 — 🎉 발표 — 각자 2분
12주의 끝, 가장 짜릿한 순간. 2분씩 본인 사이트·뮤비 시연. 부끄러워 말고 자랑스럽게. 모두가 박수칠 거예요.
5a
2분 발표 — 표준 스크립트
// 30초 — 인사 + 콘셉트
"안녕하세요, [이름]입니다. 제 사이트 콘셉트는
[한 줄 요약]이에요. 12주 전엔 [상태]였는데
오늘은 [결과]까지 왔어요."
// 60초 — 사이트 시연
화면 공유 / 큰 모니터에 사이트 띄움
→ 히어로 → 작품 1-2개 → 블로그 1편 → 뮤비 재생
"가장 자신 있는 부분은 [어느 영역]이에요"
// 30초 — 다음 단계 + 인사
"다음 학기엔 [무엇] 추가하고 싶어요.
사이트는 [URL]이고, 의뢰·피드백 환영입니다.
12주 함께 해주셔서 감사합니다 🙏"
🎬 발표 순서: 자원자 → 시계 방향 / 1명당 정확히 2분
✓
발표 끝 체크리스트 — 졸업 인증
□ 라이브 URL 공개 (https://내도메인.com)
□ 화면 공유로 모든 영역 클릭해서 보여줌
□ 뮤비 최소 15초 재생
□ 사이트 백업 (Google Drive에 폴더 통째)
□ GA4·Search Console 접속 정보 메모장에 저장
□ 단톡방에 본인 URL + 발표 사진 업로드
□ 멘토와 졸업 인증샷 (사이트 띄운 화면 + 본인)
🎙
마지막 멘토 멘트
"12주 전에 빈 종이 들고 오셨는데, 오늘은 라이브 사이트로 발표하고 계세요. 이게 메이커예요. 오늘 만든 게 끝이 아니라 — 평생 다듬는 거예요. 사이트는 계속 자라요. 글 한 편 추가, 작품 하나 추가. 그게 다 적립돼요. 졸업 축하해요. 그리고 — 진짜 시작을 환영해요."
🎓
학생 액션 (10분 / 발표 분량)
본인 차례 = 2분 발표 + 박수받기. 다른 사람 차례 = 진심으로 응원하기. 모두 졸업입니다. 함께 사진 찍고 단톡방에 업로드.
10 / Checkpoint⏱ 5분
졸업 점검 5가지
🎓오늘 졸업했다면
- 사이트 1.0 정식판 라이브 (3가지 화면 모두 OK)
- 뮤비 임베드 완료 (사이트에서 재생됨)
- SNS·이력서 5곳 이상 URL 박힘
- 2분 발표 완료 + 단톡방 자랑샷
- 백업 Google Drive에 폴더 통째
💡지금 안 됐다면 OK
- 발표 너무 떨림 → 멘토와 1대1 시연으로 대체 가능
- 모바일 깨짐 잔여 → 졸업 후에도 Claude에 요청 가능
- 뮤비 미완성 → 일단 placeholder 영상 → 추후 교체
- 친구 피드백 못 받음 → 단톡방 동기들이 베타 테스터
- "아직 완벽 X" → 완벽한 사이트는 평생 없음. 라이브가 정답
11 / Challenge⏱ 10분
졸업 후 평생 미션
📝
다음 학기 새 콘텐츠 — 월 1편 블로그 + 작품 1개 추가. 정체된 사이트는 죽은 사이트. 살아 움직이는 게 진짜 포트폴리오.
필수 ★
📊
분석 데이터 매월 점검 — GA4·Search Console 매월 1일에 들어가 보기. 어떤 글이 인기? 어디서 들어옴? 데이터가 다음 방향.
필수 ★★
💌
친구 의뢰 받아주기 — "나도 사이트 만들고 싶어"라는 친구 도와주기. 가르치는 게 가장 빨리 배우는 길. 다음 학기 제자가 본인 학생이 될 수도.
선택 ★★★
12 / Student Gallery⏱ 7분
졸업 앨범
🎓
기수 단체 사진
🌐
사이트 1.0 모음
🎬
뮤비 썸네일 모음
🙋
발표 모습
📷
인증샷
💌
졸업 메시지
📌 졸업 직후 단톡방에서 사진 모아 여기에 채울 예정입니다. 기수 별로 영원히 남는 앨범.
13 / Graduation⏱ 5분
🎓 졸업 축하합니다
CLASS II · 2026 · GRADUATED
12주 끝.
평생 메이커의 시작.
오늘부터 여러분은 — "내 사이트가 있는 사람"입니다. 그건 큰 차이예요. 12주 동안 빈 종이에서 라이브 사이트까지 — 이 길을 다시 걸을 일은 없어요. 하지만 다음 사이트는 훨씬 빨라요. 오늘 배운 도구·태도·문법 — 평생 자산입니다.
🌐
Your Site
평생 자라는
디지털 포트폴리오
디지털 포트폴리오
🛠
Your Tools
Claude · Firebase ·
GA · DevTools
GA · DevTools
🚀
Your Future
새 콘텐츠 · 새 의뢰 ·
다음 학기 환영
다음 학기 환영