PERIOD 02 · 60분 VIBE CODING · BUILD

01 / 12

🔥 35분 본격 실습

내 랜딩페이지 본격 제작

고른 도구로 30분 안에 — 진짜 내 사이트 완성

1교시에 만져본 도구 중 하나 골라요. 콘텐츠 정리 → 본격 작성 → 디자인 다듬기. 이번 교시 끝나면 본인 페이지가 손에 들려있어요.

P2 · 결정 · 5분 내 도구 확정

02 / 12

잠깐 — 본인이 쓸 도구 1개 확정하고 가요

1교시에 4개 다 만져봤어요. 지금부터 35분 동안은 1개 선택해서 깊이 들어가요. 어차피 끝나고 다른 도구 또 시도할 수 있어요.

🌐

v0 추천

• 디자인 빠르게 보고 싶다
• 코드 직접 안 만져도 OK
• Vercel로 바로 배포할 거다

⌨️

Claude Code 추천

• 진짜 코드 파일 갖고 싶다
• 깃에 올리고 관리할 거다
• 나중에 기능 더 붙일 거다

🤖🛸

Codex/Antigravity 추천

• 여러 작업 동시 시킬 거다
• 이미 해당 도구 익숙하다
• 신상 도구 더 탐험하고 싶다

📓 워크북 p.7 — "내가 고른 도구는 ___. 그 이유는 ___" 한 줄 적어두세요. 끝나고 회고할 때 참고됩니다.

P2 · 준비 · 5분 콘텐츠 청사진

03 / 12

랜딩페이지에 뭐가 들어가야 하나 — 5분 안에 정리

AI는 콘텐츠를 만들어주지 않아요. 본인 이야기는 본인이 정리해야 해요. 5분 동안 워크북 p.8 빈칸 채우면 그게 곧 프롬프트 재료가 돼요.

① 이름 본명 또는 활동명 (한 줄) 필수

② 한 줄 소개 "나는 ___하는 사람이에요" (역할 + 관심사 + 톤) 필수

③ 프로필 사진 URL / 이모지 / 이니셜 (큰 원으로) 필수

④ 프로젝트 3개 자랑할 만한 것 (제목 + 한 줄 설명 + 링크) 권장

⑤ SNS 링크 최대 4개 — 인스타·트위터·이메일·블로그 등 필수

⑥ 디자인 톤 따뜻 / 미니멀 / 발랄 / 모노톤 / 컬러풀 권장

💡 완벽주의 금지 — 빈칸은 "[추후]"로 두고 일단 진행하세요. 페이지 만든 다음 콘텐츠 채우는 게 훨씬 쉬워요.

P2 · 본격 실습 · 35분 🔥 BUILD MY PAGE

04 / 12

✍️ 35분 실습

지금부터 35분, 내 페이지를 완성해요

다음 슬라이드의 5단계 흐름을 따라가세요. 어떤 도구를 고르셨든 프롬프트 → 결과 → 수정 패턴은 동일해요.

도구 열어두기 + 워크북 p.8 콘텐츠 준비됨

막히면 옆 사람 (그 다음 강사)

완벽 아닌 80%면 OK

P2 · 본격 실습 · 흐름 5단계 패턴

05 / 12

어떤 도구든 — 이 5단계는 똑같아요

📝

① 큰 그림 요청

"~한 페이지 만들어줘"

→

👀

② 보고 평가

마음에 드는 부분 / 아쉬운 부분

→

🔧

③ 부분 수정

"~를 ~하게 바꿔줘"

➕

④ 내용 추가

"~ 섹션 추가해줘"

→

✨

⑤ 마무리 다듬기

"폰트 살짝 키워" "여백 늘려"

↻

🔁

반복

만족할 때까지 ②~⑤

💡 핵심: 한 번에 완벽 만들려고 하지 마세요. 큰 그림 → 부분 수정 → 추가 → 다듬기 반복이 정답.

P2 · STEP ① 큰 그림 요청

06 / 12

첫 프롬프트 — 너무 세세하게 말하지 마세요

📝 첫 큰 그림 프롬프트 (워크북 p.8 콘텐츠 사용)개인 랜딩페이지를 만들어줘. 내 정보: - 이름: [본인 이름] - 한 줄 소개: "[준비한 한 줄]" - 프로필: [이모지 또는 이미지 URL] - 프로젝트 3개: [제목·설명·링크] - SNS: [인스타·트위터·이메일] 디자인 톤: [따뜻/미니멀/발랄/모노톤 중 하나] 구성: 한 페이지로, 위에서 아래로 자연스럽게 스크롤. 모바일에서도 잘 보이게.

⏱ 첫 결과까지 — 도구에 따라 30초~3분 정도. 그동안 워크북 정리 마저 하거나 옆 사람 결과 구경하세요.

P2 · STEP ②③ 평가 · 부분 수정

07 / 12

결과 보고 — 한 번에 1-2가지씩만 수정

👀 평가할 때 자문하기

한눈에 누구의 사이트인지 보이나?
핵심 정보가 위쪽에 있나?
이상한 색깔·폰트는 없나?
모바일에서도 OK한가? (브라우저 좁혀서 확인)
"이거 가족·친구한테 보여줄 수 있나?"

🔧 자주 쓰는 수정 요청

수정 패턴 — 한 번에 1-2개씩"제목 폰트 더 크게" "색상을 더 따뜻한 톤으로" "프로필 사진 둥글게" "SNS 아이콘을 라인 스타일로" "섹션 사이 여백 늘려줘" "다크모드 토글 추가" "호버 효과 부드럽게"

❌ 안 좋은 수정 요청 — "이거 별로야, 다시 만들어줘" (방향 없음), "전체적으로 다 바꿔" (너무 막연), "이거랑 저거랑 또 저거까지 한꺼번에" (한 번에 많이).

P2 · STEP ④ 내용 추가

08 / 12

기본 페이지가 되면 — 살짝 욕심내볼 영역들

🖼

프로젝트 갤러리

내가 한 일들을 카드 그리드로
썸네일 + 제목 + 한 줄 설명

"프로젝트 카드 3개 섹션 추가"

📝

한 줄 메시지

블로그·트위터 핵심 메시지
이 사람의 관심사를 압축

"인용구 스타일 메시지 영역"

💌

연락 폼·CTA

"함께 일해요" 버튼
이메일·캘린더 링크

"맨 아래에 CTA 버튼 큰 거 하나"

🌓

다크 모드

토글 버튼 하나로
밤에 보면 눈이 편함

"다크모드 토글 추가"

✨

인터랙션

스크롤 시 부드러운 등장
호버 효과

"섹션에 fade-in 효과"

🌐

다국어 지원

한국어/영어 토글
국제적 인상

"언어 토글 (한/영)"

💡 추가는 1-2개만 — 모든 걸 다 넣지 마세요. 핵심 정보가 가려져요.

P2 · STEP ⑤ 마무리 다듬기

09 / 12

잘 안 보이는 거 미세조정 — "마지막 10%"가 인상을 만든다

🎨 시각적 다듬기

여백(padding/margin) 살짝씩 조정
폰트 굵기·크기 미세 조정
색상 1-2개 통일감 점검
이모지·아이콘 일관성
모바일 화면 한 번 더 점검

✍️ 콘텐츠 다듬기

오타·맞춤법 검사
한 줄 소개가 진짜 나를 표현하나?
SNS 링크 작동 확인
외부 링크 새 탭으로 열리나?
필요 없는 placeholder 텍스트 제거

🎯 3교시 들어가기 전 체크포인트 — 페이지 한 번 새로고침해서 "이 정도면 인터넷에 띄울 수 있다"는 느낌이면 OK. 80%면 충분.

P2 · 트러블슈팅 자주 막히는 6가지

10 / 12

실습 중 자주 만나는 벽들

❌ AI가 자꾸 같은 결과만

→ "다른 방향으로", "스타일을 완전히 바꿔"로 재시작. 또는 "참고 사이트: [URL]" 식으로 reference 추가.

❌ 코드가 망가져서 안 보임

→ 한 번에 너무 많이 바꿈. "직전 버전으로 되돌려"라고 하거나, 새 채팅에서 마지막 잘 됐던 코드 복붙으로 시작.

❌ 모바일이 망가짐

→ "모바일 반응형으로 만들어줘. 화면 폭 600px 이하에서 깨지지 않게." 명시.

❌ 이미지가 안 뜸

→ 이미지 URL을 직접 지정 (Unsplash 등). 또는 이모지로 대체. AI가 자체 생성한 이미지 URL은 종종 깨짐.

❌ 폰트가 이상함

→ "Pretendard 또는 Inter 폰트 사용" 명시. 한글 폰트는 "Noto Sans KR" 지정.

❌ 너무 길게 만들어줘서 부담

→ "한 화면 안에 들어가게 짧게". 정보를 3-4개 섹션으로 압축 요청.

P2 · 공유 · 15분 👥 짝꿍과 보여주기

11 / 12

옆 사람과 — 1분 보여주고, 1분 피드백

🎤 보여주는 사람 (1분)

전체 페이지 한 번 스크롤
가장 마음에 드는 부분 1개 짚기
아쉬운 부분 1개 솔직히 말하기
모바일 화면도 한 번 보여주기

👂 피드백 주는 사람 (1분)

좋은 점 먼저 — "이거 진짜 좋다"
모르는 사람 입장에서 한 가지 질문
개선 아이디어 1개 (강요 아님)

서로 보여주기 — 사진: Mimi Thian / Unsplash

💡 짝꿍이 안 정해졌으면 — 옆자리·앞자리·맞은편 누구든 OK. 처음 보는 사람이면 "안녕하세요, 한 번 봐주실래요?" 한 마디면 충분.

PERIOD 02 → 03 잠깐 휴식 후 마지막 교시

12 / 12

NEXT · 3교시

세상에 진짜로 내보내기

Vercel·Netlify로 1클릭 배포 + 도메인 + 자랑까지

지금까지 만든 페이지는 본인 컴퓨터 안에만 있어요.
3교시 끝나면 — 친구한테 URL 보낼 수 있어요. "내 사이트야!"