본문으로 건너뛰기

8강: 첫 프로젝트

v1
작성 2026-04-13읽는 시간 8분

오늘 안에 내 URL을 갖게 됩니다

드디어 만들 시간이에요​

7강에서 프롬프트의 3요소(역할, 맥락, 제약 조건)를 배웠어요. "맛있는 거 주세요"와 "매운 건 빼고, 된장찌개에 밥 따로"의 차이를 느끼셨죠? 7강 마지막에 이렇게 말씀드렸어요. "다음 강에서는 오늘 배운 프롬프트 기술을 총동원해서, 진짜 내 URL을 가진 웹페이지를 만들어볼 거예요."

바로 오늘이에요.

집을 짓는 것에 비유하면, 6강에서 설계도(PRD)를 그렸고, 7강에서 벽돌공에게 말하는 법(프롬프트)을 배웠어요. 이제 진짜로 벽돌을 쌓을 차례예요. 그런데 걱정 마세요. 오늘 지을 건 초고층 빌딩이 아니라, 예쁜 명함 카드 한 장이에요. 파일 2개면 끝나요.

오늘이 끝나면 여러분은 인터넷 주소창에 내 이름이 적힌 URL을 입력하고, 전 세계 누구에게나 "이거 내 페이지야!" 하고 보여줄 수 있어요.

기술 선택, 어렵게 생각하지 마세요​

뭔가를 만들기 전에 "어떤 도구로 만들지?" 를 정해야 해요. 레고로 만들지, 찰흙으로 만들지 고르는 거예요. 바이브 코더가 기술을 고를 때는 딱 3가지만 따지면 돼요.

질문 1: 배포가 쉬워?​

만든 걸 인터넷에 올리는 걸 배포(Deploy) 라고 해요. 식당으로 치면 "가게 문을 여는 것"이에요. 아무리 맛있는 음식을 만들어도 가게 문을 못 열면 아무도 못 먹잖아요. 배포가 쉬운 도구를 골라야 해요.

질문 2: AI가 에러 고치기 쉬워?​

모든 코드에는 에러가 생겨요. 중요한 건 에러 자체가 아니라, AI가 에러를 빨리 고칠 수 있는 환경인지예요. 많은 사람이 쓰는 기술일수록 AI가 잘 알아요. 희귀한 기술을 쓰면 AI도 헤매요.

질문 3: 나중에 키울 수 있어?​

처음엔 작게 시작하지만, 나중에 기능을 추가할 수 있어야 해요. "이 도구로는 여기까지밖에 못 해요"라는 한계가 빨리 오면 처음부터 다시 만들어야 해요.

그래서 첫 프로젝트 정답은?​

HTML(웹페이지의 뼈대를 잡는 언어) + CSS(웹페이지를 꾸미는 디자인 언어) 예요.

기준HTML + CSS
배포GitHub Pages에 파일만 올리면 끝
에러 해결AI가 가장 잘 아는 기술 1위
확장성JavaScript(웹페이지에 동작을 넣는 언어)를 더하면 기능 추가 가능
파일 수1~2개면 충분

참고로, 지금 여러분이 읽고 있는 이 AI//STUDY 사이트는 Docusaurus(문서 사이트 생성 프레임워크)로 만들어져 있어요. 프레임워크(React, Next.js 같은 도구 묶음)는 11강에서 다뤄요. 지금은 가장 간단한 방법으로 첫 성공을 맛보는 게 중요해요.

실습: 나를 소개하는 웹페이지 만들기​

여기서부터가 오늘의 본 게임이에요. 5단계로 나눠서 하나씩 따라가 볼게요.

1단계: 프로젝트 폴더 만들기​

먼저 작업할 폴더를 만들어야 해요. 5강에서 터미널 명령어를 배웠죠? 잊어도 괜찮아요. 일반 터미널(Windows는 명령 프롬프트, Mac은 터미널 앱)을 열고 그대로 따라하세요.

# 홈 폴더로 이동
cd ~

# 프로젝트 폴더 만들기
mkdir my-page

# 폴더 안으로 이동
cd my-page

그 다음, 이 폴더에서 Claude Code를 시작하세요.

# Claude Code 시작
claude

2단계: 뼈대 만들기 — "구조부터 잡아줘"​

7강에서 배운 프롬프트 기술을 써볼 시간이에요. Claude Code 대화창에 아래 프롬프트를 그대로 복사해서 붙여넣으세요.

너는 10년차 프론트엔드(사용자가 보는 화면을 만드는) 개발자야.
나는 코딩을 1줄도 모르는 바이브 코더야.

나를 소개하는 웹페이지를 만들어줘.
HTML 파일 1개, CSS 파일 1개, 총 2개 파일로 만들어.

구조 (위에서 아래 순서):
1. 히어로 섹션(페이지 맨 위 대문 영역) — 내 이름 "홍길동", 한 줄 소개 "AI와 함께 만드는 사람"
2. 자기소개 섹션 — "안녕하세요! 바이브 코딩으로 새로운 가능성을 탐험하고 있습니다." 2~3문장
3. 관심 분야 섹션 — 카드 3개 (바이브 코딩 / AI 활용 / 웹 제작)
4. 연락처 섹션 — 이메일, GitHub 링크

안 할 것:
- JavaScript 사용하지 마
- 외부 라이브러리 사용하지 마
- 이미지 파일 사용하지 마
- 복잡한 애니메이션 넣지 마

디자인:
- 다크 배경(#0a0a0a), 밝은 글씨(#e0e0e0), 시안 포인트(#00e5ff)
- 모바일에서도 깨지지 않게 반응형(화면 크기에 맞춰 자동 조절)으로
- 깔끔하고 미니멀한 느낌

파일명: index.html, style.css
코드에 한글 주석으로 각 부분이 뭘 하는지 설명 달아줘.

역할(10년차 개발자), 맥락(코딩 모르는 바이브 코더), 제약 조건(안 할 것 4가지)이 다 들어있죠? 7강에서 배운 대로예요.

Claude가 index.html과 style.css 파일을 만들어줄 거예요.

3단계: 브라우저에서 확인하기​

Claude가 파일을 만들었으면, 바로 눈으로 확인해 볼게요.

클로드 코드 대화창에서 ! 를 맨 앞에 붙이면 터미널 명령어를 바로 실행할 수 있어요.

# 만들어진 파일 목록 확인
! ls

# 브라우저에서 열기 (Windows)
! start index.html

# 브라우저에서 열기 (Mac)
! open index.html

브라우저에 내 이름과 소개가 보이나요? 축하해요. 방금 여러분이 첫 웹페이지를 만든 거예요.

4단계: 내용 바꾸기 — "이름이랑 소개를 수정해줘"​

"홍길동"은 예시 이름이에요. 내 정보로 바꿔야겠죠? Claude Code 대화창에 이렇게 말하세요.

방금 만든 웹페이지에서 내용을 수정해줘.

1. 이름: "홍길동" → "내 실제 이름"으로 변경
2. 한 줄 소개: "AI와 함께 만드는 사람" → 내가 원하는 문구로 변경
3. 자기소개 문장: 내 상황에 맞게 수정
4. 관심 분야 카드 3개: 내 관심사로 변경
5. 연락처: 내 이메일과 GitHub 주소로 변경

index.html 파일만 수정해. style.css는 건드리지 마.

여기서 중요한 포인트 2가지가 있어요.

  • "내 실제 이름" 부분에 진짜 여러분의 이름을 넣으세요
  • "style.css는 건드리지 마" — 7강에서 배운 수정 범위 제한이에요

수정 후 브라우저를 새로고침(F5)하면 바뀐 내용이 보여요.

5단계: 스타일 다듬기 — "디자인을 조금 바꿔줘"​

내용이 들어갔으면, 이제 디자인을 미세 조정할 차례예요. 7강에서 배운 레퍼런스 기법을 써볼게요.

style.css만 수정해줘. index.html은 건드리지 마.

수정할 것:
- 히어로 섹션 이름 글씨를 더 크게 (48px)
- 카드에 마우스를 올리면 시안색 테두리가 나타나게
- 섹션과 섹션 사이 간격을 넉넉하게 (80px)
- 전체적으로 Apple 사이트처럼 넓은 여백 느낌으로

"Apple 사이트처럼"이 바로 레퍼런스예요. "여백 넓게"보다 훨씬 정확한 지시가 돼요.

완성된 페이지가 마음에 들 때까지 Claude에게 디자인 수정을 요청하세요. 색상, 글씨 크기, 간격 등 뭐든 말로 시키면 돼요. 이게 바이브 코딩이에요.

GitHub Pages로 배포하기 — 내 URL 완성​

지금까지 만든 페이지는 내 컴퓨터에서만 보여요. 이걸 인터넷에 올려서 누구나 볼 수 있게 만들어 볼게요. 이 과정이 배포(Deploy) 예요.

GitHub Pages는 GitHub(5강에서 가입한 코드 저장소 서비스)가 제공하는 무료 웹사이트 호스팅 서비스예요. 호스팅(Hosting)이란 "내 파일을 인터넷에 올려두는 것"이에요. 식당으로 치면, 가게 자리를 무료로 빌려주는 거예요.

1단계: GitHub 저장소 만들기​

5강에서 GitHub에 가입했죠? 이제 내 웹페이지를 올릴 저장소(코드를 보관하는 창고)를 만들 거예요.

Claude Code 대화창에서 이렇게 하세요.

# 현재 폴더를 Git 저장소로 만들기
! git init

# 모든 파일을 세이브 목록에 담기
! git add .

# 첫 번째 세이브 (커밋)
! git commit -m "첫 번째 커밋: 내 소개 페이지"

5강에서 배운 add → commit → push의 처음 두 단계예요.

2단계: GitHub에 저장소 만들고 연결하기​

이제 GitHub 웹사이트에서 저장소를 만들어야 해요. 여기만 웹 브라우저에서 직접 해주세요.

  1. github.com 에 로그인
  2. 오른쪽 위 + 버튼 → New repository 클릭
  3. Repository name에 내깃허브아이디.github.io 입력 (예: honggildong.github.io)
  4. Public(공개)으로 선택
  5. 나머지는 건드리지 말고 Create repository 클릭

저장소 이름이 내깃허브아이디.github.io 형식이어야 해요. 이 이름 규칙이 GitHub Pages의 핵심이에요. 이 이름으로 만들면 GitHub가 자동으로 웹사이트로 인식해요.

3단계: 코드 올리기 (push)​

저장소가 만들어졌으면, Claude Code 대화창에서 코드를 올려주세요.

# GitHub 저장소와 내 폴더를 연결
! git remote add origin https://github.com/내깃허브아이디/내깃허브아이디.github.io.git

# 코드를 GitHub에 올리기
! git push -u origin main

내깃허브아이디 부분에 여러분의 실제 GitHub 아이디를 넣으세요. 예를 들어 GitHub 아이디가 honggildong이면 https://github.com/honggildong/honggildong.github.io.git 이 돼요.

4단계: 내 URL 확인하기​

push가 완료되면, 1~2분 기다린 후 브라우저 주소창에 이렇게 입력하세요.

https://내깃허브아이디.github.io

내 웹페이지가 보이나요? 이 URL을 카카오톡으로 친구에게 보내보세요. 친구 휴대폰에서도 내 페이지가 보일 거예요.

축하합니다. 여러분은 방금 인터넷에 내 웹사이트를 배포한 거예요. 코드 한 줄 직접 치지 않고, AI에게 말로 시켜서요. 이게 바이브 코딩이에요.

페이지 수정 후 업데이트하기​

배포한 뒤에 "아, 이 부분 고치고 싶다" 하면 어떻게 할까요? 간단해요.

  1. Claude Code에서 수정을 요청해요 ("히어로 섹션 배경색을 남색으로 바꿔줘")
  2. 브라우저에서 로컬 파일로 확인해요 (! start index.html)
  3. 마음에 들면 다시 올려요
# 수정한 파일을 세이브 목록에 담기
! git add .

# 수정 내용 세이브
! git commit -m "디자인 수정: 히어로 배경색 변경"

# GitHub에 올리기
! git push

push 하고 1~2분 기다리면 수정한 내용이 자동으로 반영돼요. 다시 배포 버튼을 누르거나 할 필요가 없어요. 이게 GitHub Pages의 장점이에요.

클로드 코드 터미널에서는 이렇게​

지금까지의 전체 과정을 한눈에 정리해 드릴게요. Claude Code 대화창을 열고, 아래 순서대로 진행하세요.

# ── 1. 프로젝트 폴더 만들기 ──
cd ~
mkdir my-page
cd my-page
claude

Claude Code가 열리면, 대화창에 아래 프롬프트를 입력하세요.

너는 10년차 프론트엔드 개발자야.
나는 코딩을 1줄도 모르는 바이브 코더야.

나를 소개하는 웹페이지를 HTML 파일 1개, CSS 파일 1개로 만들어줘.
구조: 히어로(이름+소개) → 자기소개 → 관심 분야 카드 3개 → 연락처
디자인: 다크 배경(#0a0a0a), 시안 포인트(#00e5ff), 모바일 반응형
안 할 것: JavaScript, 외부 라이브러리, 이미지, 복잡한 애니메이션
파일명: index.html, style.css
코드에 한글 주석 달아줘.

파일이 만들어지면 아래 명령어로 확인하고 배포하세요.

# ── 2. 브라우저에서 확인 ──
! start index.html

# ── 3. Git 세이브 ──
! git init
! git add .
! git commit -m "첫 번째 커밋: 내 소개 페이지"

# ── 4. GitHub에 올리기 (저장소를 먼저 만든 후) ──
! git remote add origin https://github.com/내아이디/내아이디.github.io.git
! git push -u origin main

1~2분 후 https://내아이디.github.io 에 접속하면 내 페이지가 보여요.

잘 안 될 때 — 자주 묻는 질문​

"push 했는데 페이지가 안 보여요"​

GitHub Pages가 빌드(파일을 웹사이트로 변환하는 작업)하는 데 1~5분 정도 걸려요. 조금만 기다려 보세요. 5분 뒤에도 안 되면, GitHub 저장소 페이지 → Settings → Pages 탭에서 Branch가 main으로 설정되어 있는지 확인하세요.

"git push가 안 돼요"​

GitHub에 로그인 인증이 필요할 수 있어요. Claude Code 대화창에서 이렇게 물어보세요.

git push를 하려는데 인증 에러가 나. 어떻게 해결해?

Claude가 상황에 맞는 해결 방법을 알려줄 거예요.

"디자인이 마음에 안 들어요"​

Claude에게 계속 수정을 요청하면 돼요. 바이브 코딩의 장점이 바로 이거예요. "카드 모서리를 더 둥글게 해줘", "글씨 크기를 좀 더 키워줘" 처럼 말로 시키세요. 한 번에 완벽할 필요 없어요. 고치고, 확인하고, 또 고치고. 이 과정 자체가 개발이에요.

이번 강에서 기억할 것​

핵심만 정리해 볼게요.

  1. 기술 선택은 3가지만 따지세요. 배포가 쉬운가, AI가 잘 아는가, 나중에 키울 수 있는가. 첫 프로젝트는 HTML + CSS가 정답이에요.

  2. Claude에게 단계별로 시키세요. 구조 먼저 → 내용 채우기 → 스타일 입히기. 한 번에 "완벽하게 만들어줘"가 아니라 하나씩, 하나씩요.

  3. 프롬프트에 "안 할 것"을 꼭 넣으세요. "JavaScript 쓰지 마", "다른 파일 건드리지 마" 한 줄이 결과물의 품질을 크게 바꿔요.

  4. GitHub Pages 배포는 3단계예요. git add → git commit → git push. 이것만 기억하면 돼요. push 하면 자동으로 배포돼요.

  5. 한 번에 완벽하지 않아도 괜찮아요. 만들고, 보고, 고치고, 다시 올리고. 이 반복이 바이브 코딩의 핵심이에요.

오늘 프로젝트를 만들면서 느끼셨을 거예요. Claude에게 매번 "한국어로 해", "JavaScript 쓰지 마" 같은 규칙을 반복해서 말하는 게 꽤 번거롭다는 걸요. 다음 강에서는 이 문제를 해결하는 CLAUDE.md를 다뤄요. 규칙을 한 번만 적어두면 AI가 매번 알아서 따라요. 프로젝트마다 AI에게 주는 설명서를 만드는 거예요.

이런 분께 추천해요​

첫 프로젝트는 "내가 진짜 뭔가를 만들 수 있구나!" 하는 자신감을 주는 경험이에요.

  • 바이브 코딩을 배우고 있는데 아직 아무것도 만들어본 적 없는 분 — 오늘이 첫 번째예요. HTML 2개 파일로 시작하니까 부담 없어요.
  • 개인 웹사이트가 갖고 싶었지만 "개발자만 가능한 거 아냐?" 하고 포기한 분 — GitHub Pages 무료 배포로 오늘 안에 내 URL을 가질 수 있어요.
  • 6~7강에서 PRD와 프롬프트를 배웠는데, 실전에 써보고 싶은 분 — 오늘 배운 프롬프트 기술을 총동원하는 첫 실전이에요. 배운 건 써먹어야 내 것이 돼요.

참고 링크​

▸개정 이력1건
  • v12026-04-13초판

이 글이 도움이 되었나요?