나를 소개하는 웹페이지,
직접 만들고 인터넷에 올리기

Git CLI 설치부터 Vercel 배포까지 — 50분 완성 실습

📅 2026.06.09 (화) 20:00 💻 Zoom 온라인 👤 초보자 대상 📚 강사: 김춘식

오늘 뭘 만드나요?

오늘 50분 동안 나만의 자기소개 웹페이지를 만들어서, 누구나 접속할 수 있는 인터넷 주소(URL)로 공유합니다!

순서	할 일	시간
1	GitHub 가입	5분
2	Git 설치 & 초기 설정	8분
3	저장소 만들기	8분
4	자기소개 페이지 만들기	12분
5	인터넷에 배포하기 (Vercel)	8분

📝

준비물: PC, 인터넷, 이메일 주소, ChatGPT 또는 Claude

📋 Git 명령어 한눈에 보기

💡

지금 외울 필요 없어요! 실습할 때 하나씩 복사-붙여넣기로 진행합니다.

기본 명령어 (오늘 사용하는 것)

명령어	뜻	비유
`git clone [주소]`	GitHub 저장소를 내 PC로 복사	인터넷 서랍장 → 내 책상에 복사
`git add .`	변경된 파일을 포장 준비	택배 상자에 물건 넣기
`git commit -m "메시지"`	포장 완료 + 메모	상자 밀봉 + 송장 붙이기
`git push`	GitHub에 보내기	택배 발송!

설정 명령어 (처음 한 번만)

명령어	뜻
`git config --global user.name "이름"`	Git에 내 이름 등록
`git config --global user.email "이메일"`	Git에 내 이메일 등록

확인 & 문제 해결

명령어	뜻	언제?
`git status`	파일 상태 확인	"뭐가 바뀌었지?"
`git log`	커밋 기록 보기	"내가 뭘 올렸지?"
`git pull`	최신 내용 가져오기	push가 거부될 때

🎯

핵심 흐름: 파일 수정 → git add . → git commit -m "메시지" → git push

1 GitHub 가입

📖 GitHub이 뭔가요?

GitHub = 내 코드(파일)를 인터넷에 저장하는 곳

서비스	하는 일
Google Drive	문서를 인터넷에 저장
GitHub	코드를 인터넷에 저장

💡

전 세계 개발자들이 가장 많이 쓰는 코드 저장소입니다. 무료로 사용할 수 있어요!

🔧 실습: GitHub 가입하기

Step 1

브라우저에서 아래 주소로 접속하세요

https://github.com

Step 2

회원가입

오른쪽 위 "Sign up" 클릭 (가급적 구글 아이디로 가입)
이메일 주소 입력
비밀번호 설정
사용자명(Username) 입력 — 영어로. 이게 여러분의 GitHub 주소가 됩니다!
예: hong-gildong, kim-minjun
이메일 인증 완료

✅ 체크포인트

완료 → 채팅에 1번 아직 → 2번

2 Git CLI 설치 & 초기 설정

📖 Git vs GitHub 차이

	Git	GitHub
뭔가요?	내 컴퓨터에 설치하는 도구	인터넷에 있는 저장소
비유	택배를 포장하는 도구	택배를 보관하는 물류센터
역할	파일 변경을 기록하고 포장	포장된 파일을 인터넷에 저장

💡

Git(도구)으로 파일을 정리해서 GitHub(저장소)에 올린다고 이해하시면 됩니다!

CLI = 명령어를 직접 타이핑해서 실행하는 방식. 오늘 쓸 명령어는 3~4개뿐이에요. 전부 복사-붙여넣기로 진행합니다!

🔧 실습: Git 설치하기

▶ Windows 사용자

Step 1

아래 주소로 접속하세요 (자동 다운로드 시작)

https://git-scm.com/download/win

Step 2

설치 — 전부 "Next" 클릭 → "Install" → "Finish"

Step 3

설치 확인 — Windows 키 → cmd 입력 → 명령 프롬프트 실행 후:

git --version

→ git version 2.xx.x 이런 숫자가 나오면 성공!

▶ Mac 사용자

Command + Space → "터미널" 입력 → 실행 후:

git --version

→ 버전 숫자가 나오면 이미 설치된 것! (Mac은 기본 내장인 경우 많음)

⚠️

안 나오면 설치 안내가 뜹니다. "설치" 클릭 후 기다려주세요 (5~10분)

🔧 실습: Git 초기 설정 (중요!)

⚡

이 설정을 안 하면 나중에 커밋할 때 에러가 납니다! Git 설치 후 반드시 한 번 해주세요.

Git은 파일을 저장할 때 "누가 저장했는지"를 함께 기록합니다. 그래서 내 이름과 이메일을 먼저 알려줘야 합니다.

1. 이름 등록

내 이름을 입력하세요 (따옴표 안에)

git config --global user.name "내이름"

2. 이메일 등록

GitHub 가입할 때 쓴 이메일을 입력하세요

git config --global user.email "GitHub가입이메일@example.com"

💡

이메일은 GitHub에 가입할 때 사용한 이메일과 같은 걸 넣어주세요! 그래야 GitHub에서 내 기여로 인식됩니다.

설정 확인 (잘 됐는지 보기):

git config --global user.name
git config --global user.email

→ 방금 입력한 이름과 이메일이 나오면 성공!

⚠️ 잘 안 될 때

증상	해결 방법
"git을 찾을 수 없습니다"	명령 프롬프트를 닫았다가 다시 열고 시도
설치 파일이 안 열림	파일 우클릭 → "관리자 권한으로 실행"
Mac에서 Xcode 설치하라고 뜸	"설치" 클릭 후 기다리기 (5~10분)
Author identity unknown 에러	위의 git config 초기 설정을 안 한 것

✅ 체크포인트

git --version + config 완료 → 1번 안 되시는 분 → 2번

3 내 첫 저장소 만들기

📖 저장소(Repository)란?

저장소 = 프로젝트 파일들을 담는 폴더. GitHub에 저장소를 만들면 → 인터넷에 내 프로젝트 폴더가 생기는 것!

용어	뜻	비유
Repository (저장소)	프로젝트 폴더	서류 보관함
Clone (클론)	저장소를 내 PC로 복사	보관함 → 내 책상에 복사

🔧 실습: 저장소 만들고 내 PC에 가져오기

Step 1

GitHub에서 저장소 만들기

github.com 로그인
오른쪽 위 "+" 버튼 → "New repository" 클릭
아래와 같이 설정:

항목	입력값
Repository name	`my-profile`
공개 설정	Public 선택
README 파일	"Add a README file" 체크

"Create repository" 클릭!

Step 2

내 PC에 가져오기 (Clone)

저장소 페이지에서 초록색 "Code" 버튼 클릭
HTTPS 주소를 복사
명령 프롬프트(Windows) 또는 터미널(Mac)을 열고:

먼저 C 드라이브로 이동합니다.

Windows

cd C:\

복사한 주소를 붙여넣기:

예시 (내 사용자명으로 바꾸세요)

git clone https://github.com/내사용자명/my-profile.git

Step 3

C:\ 에 my-profile 폴더가 보이는지 확인!

⚠️ 잘 안 될 때

증상	해결 방법
"git clone" 에러	HTTPS 주소 확인 (끝이 `.git`으로 끝나야 함)
폴더가 안 보임	`dir C:\` 입력 후 my-profile 폴더 확인
로그인 창이 뜸	브라우저 로그인 창이 뜨면 GitHub 계정으로 로그인 — 계정 비밀번호가 아닌 브라우저 인증 방식입니다

🔑

인증이 안 될 때 — 순서대로 시도하세요
① 브라우저 창이 뜨면 → GitHub 계정으로 로그인 (가장 흔한 경우)
② 토큰 입력을 요구하면 → Personal Access Token(PAT) 사용
   GitHub → 프로필 아이콘 → Settings → Developer settings
   → Personal access tokens → Tokens (classic) → Generate new token
   → 이름 아무거나, repo 체크 → 생성된 토큰을 비밀번호 자리에 입력

✅ 체크포인트

my-profile 폴더 보임 → 1번 안 보임 → 2번

4 자기소개 페이지 만들기

📖 HTML & CSS란?

역할	담당
HTML	내용 (글자, 구조)
CSS	디자인 (색상, 크기, 배치)

💡

오늘은 HTML/CSS를 직접 작성하지 않아요! 이미 만들어진 코드를 복사하고, AI로 내 정보에 맞게 수정합니다.

🔧 실습: 자기소개 페이지 만들기

Step 1

아래 코드 전체를 복사하세요 — 복사 버튼을 클릭하면 됩니다.

자기소개 페이지 — 기본 코드 (복사 버튼 클릭!)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자기소개 - 홍길동</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Segoe UI', '맑은 고딕', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh; display: flex;
            justify-content: center; align-items: center; padding: 20px;
        }
        .card {
            background: white; border-radius: 20px;
            padding: 50px 40px; max-width: 500px; width: 100%;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3); text-align: center;
        }
        .avatar {
            width: 100px; height: 100px; border-radius: 50%;
            background: linear-gradient(135deg, #667eea, #764ba2);
            margin: 0 auto 24px; display: flex;
            align-items: center; justify-content: center;
            font-size: 40px; color: white; font-weight: bold;
        }
        .name { font-size: 28px; font-weight: 700; color: #2d3748; margin-bottom: 8px; }
        .title { font-size: 16px; color: #667eea; font-weight: 600; margin-bottom: 24px; }
        .divider {
            width: 60px; height: 3px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            margin: 0 auto 24px; border-radius: 2px;
        }
        .bio { font-size: 16px; line-height: 1.8; color: #4a5568; margin-bottom: 32px; }
        .contact { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
        .contact a {
            display: inline-block; padding: 10px 20px; background: #f7fafc;
            color: #4a5568; text-decoration: none; border-radius: 10px;
            font-size: 14px; transition: all 0.3s; border: 1px solid #e2e8f0;
        }
        .contact a:hover { background: #667eea; color: white; border-color: #667eea; }
        .footer { margin-top: 32px; font-size: 13px; color: #a0aec0; }
    </style>
</head>
<body>
    <div class="card">
        <div class="avatar">길</div>
        <h1 class="name">홍길동</h1>
        <p class="title">여행을 좋아하는 직장인</p>
        <div class="divider"></div>
        <p class="bio">
            안녕하세요! 저는 홍길동입니다.<br>
            여행과 맛집 탐방을 좋아하고,<br>
            새로운 것을 배우는 걸 즐깁니다.<br><br>
            만나서 반갑습니다!
        </p>
        <div class="contact">
            <a href="mailto:gildong@email.com">이메일</a>
            <a href="https://github.com/hong-gildong">GitHub</a>
        </div>
        <p class="footer">GPTers 4주차 실습으로 만든 페이지입니다</p>
    </div>
</body>
</html>

Step 2

AI로 내 정보에 맞게 수정하기

ChatGPT 또는 Claude에 접속해서, 아래 프롬프트를 복사-붙여넣기 하세요:

AI 수정 프롬프트 (이대로 복사하세요)

아래 HTML 코드에서 내용을 내 정보로 바꿔줘.
이미지는 넣지 말고, CSS 디자인은 그대로 유지해줘.
avatar 안의 글자는 내 성(姓) 한 글자로 바꿔줘.

[내 정보]
- 이름: (여기에 내 이름)
- 직업 또는 하는 일: (여기에 내 직업)
- 간단한 소개: (여기에 1~2줄 소개)
- 이메일: (여기에 이메일, 없으면 삭제)

[HTML 코드]
(여기에 Step 1에서 복사한 코드를 붙여넣기)

✅

AI가 수정해준 코드를 전체 복사해두세요. 다음 단계에서 바로 씁니다.

Step 3

index.txt 파일 만들고 수정된 코드 붙여넣기

C:\my-profile 폴더 열기
폴더 빈 곳에서 우클릭 → 새로 만들기 → 텍스트 문서
파일 이름을 index.txt 로 저장 (지금은 .txt 그대로 둡니다)
index.txt 우클릭 → 연결 프로그램 → 메모장
메모장에서 전체 선택(Ctrl+A) → AI가 수정해준 코드 붙여넣기(Ctrl+V)
저장 (Ctrl+S)

Step 4

index.txt → index.html 로 이름 변경

내용 저장이 끝났으면 이제 확장자를 바꿉니다.

⚡

이름 바꾸기 전에 먼저 확인하세요!
Windows는 기본적으로 파일 확장자(.txt, .html)를 숨겨서 보여줍니다.
확장자가 숨겨진 상태에서 이름을 index.html로 바꾸면
실제로는 index.html.txt로 저장되어 브라우저에서 열리지 않습니다.

📄 파일 확장자 보이게 설정하기 (한 번만)

Windows 버전	방법
Windows 11	파일 탐색기 상단 → "보기" → "표시" → "파일 확장명" 체크
Windows 10	파일 탐색기 상단 "보기" 탭 클릭 → "파일 확장명" 체크박스 체크

✅

설정 후 파일 이름이 "index.txt"처럼 보이면 성공!
이 상태에서 파일 이름 전체를 index.html로 바꾸면 됩니다.
확장자 포함해서 통째로 바꾸는 거예요 — .txt가 .html로 바뀌는 것입니다.

⚠️

이름을 바꾼 후 파일 아이콘이 브라우저 모양으로 바뀌면 성공!
아이콘이 그대로 텍스트 문서 모양이라면 확장자가 바뀌지 않은 것입니다.
→ 위 표를 참고해서 확장자 표시를 먼저 켜고 다시 시도해주세요.

Step 5

index.html 파일을 더블클릭하면 브라우저에서 열립니다.

→ 보라색 배경에 하얀 카드 형태의 내 정보가 보이면 성공!

Step 6

GitHub에 올리기

먼저 폴더로 이동:

cd my-profile

💡

C 드라이브에서 clone 했으므로 cd C:\my-profile 도 동일하게 작동합니다.

명령어 3줄을 하나씩 실행:

1. 파일 포장 준비

git add .

2. 포장 완료 + 메모

git commit -m "index.html"

3. GitHub에 보내기

git push

Step 7

github.com → 내 my-profile 저장소 → index.html 파일이 보이면 성공!

⚠️ 잘 안 될 때

증상	해결 방법
`git add .` 에러	my-profile 폴더 안에 있는지 확인
Author identity unknown	2번 모듈의 Git 초기 설정을 안 한 것
nothing to commit	이미 커밋 완료된 상태! `git push`로 넘어가세요
`git push` 거부됨	GitHub에 먼저 올라간 파일이 있는 것 (README 등). `git pull`로 가져온 뒤 다시 `git push`
비밀번호 에러	GitHub 토큰 사용 (3번 모듈 참고)

✅ 체크포인트

GitHub에 index.html 보임 → 1번 안 보임 → 2번

5 Vercel 배포

📖 Vercel이 뭔가요?

Vercel = 웹사이트를 인터넷에 올려주는 서비스 (무료!)

역할	설명
GitHub	코드를 보관하는 곳
Vercel	코드를 가져다가 진짜 웹사이트로 보여주는 곳

항목	내용
비용	무료 (개인 사용)
장점	GitHub에 코드 올리면 자동으로 배포
결과	`https://내프로젝트.vercel.app` URL 생성

💡

나중에 코드를 수정하고 git push만 하면 Vercel이 자동으로 업데이트합니다!

🔧 실습: Vercel로 배포하기

Step 1

Vercel 가입

https://vercel.com

"Sign Up" 클릭
"Continue with GitHub" 선택 (GitHub 계정으로 바로 가입!)
GitHub 연결 허용

Step 2

GitHub App 설치 (처음만)

"Add New..." → "Project" 클릭
저장소가 안 보이면 → "Adjust GitHub App Permissions" 클릭
"All repositories" 또는 my-profile 선택 → "Install"
다시 Vercel로 돌아오면 my-profile이 목록에 보입니다!

Step 3

배포하기

my-profile 옆의 "Import" 클릭
설정 화면 → 아무것도 건드리지 말고 바로 "Deploy" 클릭!
1~2분 기다리면... 배포 완료!

Step 4

내 URL 확인

https://my-profile-xxxxx.vercel.app

이 주소를 브라우저에 입력하면 → 내 자기소개 페이지가 인터넷에서 보입니다!

⚠️ 잘 안 될 때

증상	해결 방법
my-profile이 목록에 안 보임	Step 2의 GitHub App 설치를 안 한 것
"Install" 버튼을 못 찾겠음	하단의 "Adjust GitHub App Permissions" 클릭
배포 에러	index.html 파일명이 정확한지 확인
페이지가 비어 있음	index.html 안에 코드가 제대로 들어있는지 확인

✅ 체크포인트

내 URL로 페이지 뜸 → 1번! 안 뜸 → 2번

🎉 축하합니다!

오늘 50분 동안 해낸 것:

순서	완료	한 일
1	✔	GitHub 가입 — 코드 저장소가 생겼습니다
2	✔	Git 설치 & 초기 설정 — 도구 준비 완료
3	✔	저장소 생성 & Clone — 인터넷과 내 PC 연결
4	✔	자기소개 페이지 제작 — HTML + CSS + AI 활용
5	✔	Vercel 배포 — 내 웹사이트가 인터넷에!

🎉 여러분의 URL을 Zoom 채팅에 공유해보세요!

내 URL 공유하기!

💡 앞으로 해볼 것

페이지 수정하고 싶을 때 — index.html 수정 후 아래 3줄만 실행!

수정 후 업로드 (이 3줄만 기억하세요!)

git add .
git commit -m "페이지 수정"
git push

→ Vercel이 자동으로 업데이트합니다!

AI한테 디자인 바꿔달라고 할 수도 있어요:

"배경색을 파란색으로 바꿔줘"
"폰트를 더 크게 해줘"
"연락처 섹션에 인스타그램 추가해줘"

▲ 50분 실습 여기까지 완료

🚀 바이브코딩이란? 📎 참고

바이브코딩(Vibe Coding) = AI에게 말로 설명하면, AI가 코드를 직접 작성해주는 개발 방식

	오늘 실습	바이브코딩
코드 작성	AI에게 요청 → 복사-붙여넣기	AI가 툴 안에서 파일 직접 생성·수정
GitHub 업로드	직접 git add/commit/push	툴에서 버튼 한 번 (자동화 가능)
결과	자기소개 페이지 완성!	아이디어 → 실제 앱 URL까지

💡

핵심: 오늘 세팅한 GitHub + Vercel 연동이 바이브코딩의 핵심 인프라입니다.
AI 툴이 코드를 만들어줘도, GitHub에 push하면 Vercel이 자동 배포 — 이 흐름은 동일합니다.

🔧 어떤 툴을 쓸까? 📎 참고

바이브코딩 환경을 세팅하는 방법은 크게 두 가지입니다. 본인 상황에 맞는 걸 선택하세요.

★ 초보자 추천

⚡ Google Antigravity

Google이 만든 바이브코딩 전용 앱. 자연어로 설명하면 전체 앱을 생성해줍니다. Gemini AI 탑재.

AI 모델	Gemini (Google)
설치	데스크톱 앱 다운로드
비용	무료 플랜 있음
적합	처음 바이브코딩 도전

💻 코딩 경험자

💻 VSCode + AI 확장

기존 코드 에디터에 AI 기능 추가. 코드를 직접 보면서 AI의 도움을 받는 방식.

AI 확장	GitHub Copilot, Codeium 등
설치	에디터 + 확장 설치
비용	Codeium 완전 무료
적합	코드를 직접 보고 싶은 분

🆕 Vercel은 다시 세팅 안 해도 됩니다

Antigravity든 VSCode든 툴을 바꿔도 Vercel 설정은 그대로입니다. 이유는 간단합니다.

💡

Vercel은 "툴"이 아니라 "GitHub 저장소"를 감시합니다.
어떤 툴로 push했는지는 Vercel이 모르고, 알 필요도 없어요.
GitHub 저장소에 변경이 올라왔다 — 이것만 보고 자동 배포합니다.

push 방법이 달라도 결과는 동일

Antigravity  ──┐
VSCode        ──┼──▶  GitHub 저장소 (my-profile)  ──▶  Vercel 자동 배포
터미널 git    ──┘
                         ↑
              Vercel이 감시하는 건 여기 하나

그래서 각 툴에서 필요한 것은 GitHub 계정 연결 딱 한 번뿐입니다.

항목	Antigravity	VSCode
GitHub 계정 연결	앱에서 1회 연결	소스 제어 탭 1회 로그인
git 이름·이메일 설정	✅ 불필요 (앱이 처리)	✅ 이미 완료 (오늘 실습)
Vercel 재설정	✅ 불필요	✅ 불필요

⚠️

Vercel 재설정이 필요한 경우는 딱 한 가지:
오늘 만든 my-profile이 아닌 완전히 새로운 저장소(프로젝트)를 만들 때만
Vercel에서 해당 저장소를 새로 Import하면 됩니다.
(5번 Vercel 배포 실습과 동일한 과정, 5분이면 완료!)

⚡ Google Antigravity 세팅하기 📎 참고

📌

Google AI Studio 기반의 바이브코딩 전용 앱입니다. Google 계정만 있으면 무료로 시작할 수 있어요.

🔧 설치 & 초기 세팅

Step 1

Antigravity 접속 & 앱 다운로드

https://antigravity.google/

사이트에서 "Download" 클릭
Windows 또는 Mac 버전 선택 후 다운로드
설치 파일 실행 → Next → Install → Finish

Step 2

Google 계정으로 로그인

앱 실행 후 "Sign in with Google" 클릭
평소에 쓰는 Google 계정으로 로그인

Step 3

GitHub 계정 연동

앱 설정(톱니바퀴 아이콘)에서 "Connect GitHub" 클릭
브라우저에서 GitHub 로그인 → "Authorize" 클릭
앱으로 돌아오면 내 저장소(my-profile 등)가 목록에 보임

🔧 바이브코딩 시작하기

Step 4

프로젝트 선택 또는 새로 만들기

"Open Project" → 오늘 만든 my-profile 선택 (기존 작업 이어서)
또는 "New Project" → 완전히 새로운 앱 시작

Step 5

AI에게 원하는 것 설명하기

채팅창에 만들고 싶은 것을 자연어로 적으면 AI가 코드를 작성합니다.

예시 프롬프트

방문자가 이름을 입력하면 "안녕하세요, OO님!" 이라고
인사해주는 기능을 추가해줘.
버튼은 파란색으로, 지금 디자인 스타일에 맞춰줘.

→ AI가 index.html을 직접 수정하고, 미리보기 화면에서 결과를 바로 확인할 수 있습니다!

Step 6

GitHub에 Push → Vercel 자동 배포

화면에서 변경된 파일 목록 확인
"Commit & Push" 버튼 클릭
커밋 메시지 입력 (예: 인사 기능 추가) → 확인
GitHub에 올라가면 Vercel이 자동 배포 시작 (1~2분)
내 Vercel URL에서 변경사항 확인!

⚠️

초보자 주의: AI가 코드를 많이 생성해줘도, 미리보기에서 결과를 먼저 확인하세요. 무조건 Accept보다 "어떻게 바뀌었는지" 보는 습관이 중요합니다.

⚠️ 잘 안 될 때

증상	해결 방법
저장소가 목록에 안 보임	Step 3 GitHub 연동을 안 한 것 — 다시 연결 시도
Push가 안 됨	GitHub 계정 연동 재확인 / 인터넷 연결 확인
Vercel 배포 후 변경이 안 보임	브라우저 새로고침 (Ctrl+Shift+R) 또는 1~2분 더 대기
AI가 이상하게 만듦	"이 부분이 이상해, 원래대로 되돌려줘" 라고 채팅에 입력

💻 VSCode 세팅하기 📎 참고

📌

코드를 직접 보면서 AI의 도움을 받고 싶다면 VSCode가 적합합니다. 전 세계 개발자들이 가장 많이 쓰는 에디터예요.

🔧 설치

Step 1

VSCode 다운로드 & 설치

https://code.visualstudio.com/

"Download for Windows" (또는 Mac) 클릭
설치 파일 실행 → Next → Install → Finish

Step 2

my-profile 폴더 열기

VSCode 실행
메뉴 File → Open Folder
C:\my-profile 폴더 선택 → 열기
왼쪽 탐색기에 index.html이 보이면 성공!

🔧 AI 확장 설치

Step 3

왼쪽 아이콘에서 퍼즐 모양(Extensions) 클릭 → 아래 중 하나를 검색해서 Install

확장	비용	특징
Codeium	🟢 완전 무료	코드 자동완성 + 채팅 기능. Google 계정으로 바로 가입
GitHub Copilot	🟡 무료 플랜 있음	월 2,000회 무료. 가장 유명한 AI 코딩 도우미

💡

처음이라면 Codeium 추천 — 완전 무료이고, Google/GitHub 계정으로 바로 사용 가능합니다.

🔧 AI와 함께 코딩하기

Step 4

AI 채팅으로 수정 요청

index.html 파일 클릭해서 열기
수정하고 싶은 부분을 마우스로 선택
Ctrl + I (AI Chat 열기)
"배경색을 하늘색으로 바꿔줘" 입력 → Enter
AI가 수정 제안 → Accept 클릭

Step 5

저장 & GitHub에 Push

파일 저장: Ctrl + S
왼쪽 소스 제어(Y 모양) 탭 클릭
변경된 파일 옆 + 아이콘 클릭 (stage)
상단 입력란에 커밋 메시지 입력 (예: 디자인 수정)
✓ Commit → Sync Changes 클릭
Vercel이 자동으로 배포 시작!

💡

터미널에서 git add . / commit / push 하는 방식과 소스 제어 탭 — 둘 다 결과는 동일합니다. 편한 방법을 쓰세요!

⚠️ 잘 안 될 때

증상	해결 방법
Sync Changes 버튼이 없음	GitHub 로그인 안 된 것 — 왼쪽 하단 사람 아이콘 → GitHub로 로그인
AI 제안이 안 뜸	확장 설치 확인 / VSCode 재시작
Push가 거부됨	터미널에서 `git pull` 먼저 실행 후 다시 Push

🔄 전체 바이브코딩 흐름 한눈에 📎 참고

오늘 배운 GitHub + Vercel 연동을 기반으로, 바이브코딩 전체 흐름이 이렇게 이어집니다:

단계	하는 일	사용 툴
1. 아이디어	"이런 기능이 있는 페이지 만들고 싶다"	머릿속 🧠
2. 코드 생성	AI에게 자연어로 설명 → 코드 자동 작성	Antigravity / VSCode+AI
3. 확인	미리보기로 결과 확인. 이상하면 "이 부분 고쳐줘"	브라우저 미리보기
4. Push	git push (또는 버튼 한 번)	터미널 / 소스 제어 탭
5. 자동 배포	Vercel이 알아서 배포 (1~2분)	Vercel (자동)
6. 공유	내 URL 복사해서 공유!	브라우저

🎯

핵심 한 줄: 아이디어 → AI 설명 → Push → 자동 배포
3~6단계는 오늘 이미 해봤습니다! 여기에 AI 툴만 추가하면 바이브코딩 환경 완성입니다.

💪

초보자 팁 3가지:

한 번에 많이 바꾸지 말고, 작은 단위로 자주 Push하세요 (문제 생기면 찾기 쉬워요)
AI가 이상하게 만들면 "이 부분이 왜 이렇게 됐어?"라고 다시 물어보세요
처음엔 느려도 괜찮아요. 익숙해지면 자연스럽게 속도가 붙습니다!

🏗️ 더 나아가기 — 나만의 AI 워크스페이스 📎 참고

바이브코딩이 손에 익으면 그 다음 단계가 있습니다. 나만의 AI 워크스페이스를 만들어두는 것입니다.

💡

AI 워크스페이스란?
AI에게 "나는 이런 사람이고, 이런 방식으로 일한다"는 규칙과 환경을 미리 세팅해둔 공간입니다.
한 번 만들어두면 새 대화를 시작해도 AI가 내 스타일을 기억하고 바로 시작합니다.

❌ 워크스페이스 없을 때

새 대화마다 "나는 쇼핑몰 운영자고, 제품 설명은 감성적으로 써줘, 가격은 원화로..."
매번 처음부터 설명 반복

✅ 워크스페이스 있을 때

그냥 "린넨 원피스 신상품 설명 써줘"
AI가 내 스타일과 규칙을 이미 알고 바로 시작

초보 → 중급 → 고급, 단계적으로 쌓아가면 됩니다.

🌿

초보형 — 나만의 규칙 만들기

파일 하나로 시작 | 난이도 ★☆☆

핵심: AI에게 내 기본 정보와 규칙을 딱 한 번 알려두면, 그 이후로는 매번 설명 안 해도 됩니다.

📋 예시 — 여성 의류 쇼핑몰 운영자의 규칙

"나는 20~30대 여성을 타겟으로 한 의류 쇼핑몰을 운영한다"
"제품 설명은 항상 감성적이고 따뜻한 톤으로 써줘"
"가격은 원화로, 사이즈는 S/M/L/XL 기준으로"
"답변은 300자 이내로 간결하게"

❌ 없을 때

새 대화마다 가게 소개·톤 안내 반복 — 5분 낭비

✅ 있을 때

"린넨 원피스 설명 써줘"만 입력하면
내 스타일로 바로 완성

💡

Claude Code의 CLAUDE.md 파일에 규칙을 작성해두면 됩니다. 메모장으로 작성하는 텍스트 파일 하나입니다.

⚡

중급형 — 자주 쓰는 작업 자동화

커맨드(명령어)로 반복 작업 30초 완료 | 난이도 ★★☆

핵심: 매번 긴 설명 없이, 명령어 하나로 원하는 결과물을 바로 받습니다.

⚡ 예시 — 쇼핑몰 전용 커맨드 모음

/신상품등록 → 제품명·가격 입력 → 상세 설명 + 상품 페이지 HTML 자동 생성
/이벤트배너 → 할인율·기간 입력 → 배너 문구 + 디자인 설명 자동 작성
/CS답변 → 고객 불만 붙여넣기 → 정중한 답변 자동 생성
/인스타그램 → 제품 사진 설명 → 캡션 3가지 자동 작성

❌ 없을 때

CS 답변 하나 만드는 데 매번 10~15분, 매번 같은 설명 반복

✅ 있을 때

/CS답변 → 내용 붙여넣기
→ 30초 만에 완료

💡

커맨드는 .claude/commands/ 폴더에 파일로 만들어두면 됩니다. 한 번 만들면 계속 재사용합니다.

🚀

고급형 — AI 팀 구성하기

여러 AI가 역할 분담 | 혼자인데 팀처럼 | 난이도 ★★★

핵심: 서로 역할이 다른 AI들이 협업해서 복잡한 작업을 알아서 처리합니다.

🚀 예시 — 1인 개발팀 워크스페이스

PM 에이전트 — "리뷰 기능 추가해줘" 한 마디 → 요구사항 분석 + 기획서 작성
개발 에이전트 — 기획서를 받아 실제 코드 작성
코드리뷰 에이전트 — 완성된 코드의 오류·보안 문제 자동 검토
QA 에이전트 — "모바일에서 작동하는지", "빈 칸 제출하면 어떻게 되는지" 테스트

❌ 없을 때

기능 하나 추가하는 데 기획·개발·테스트 직접 다 챙겨야 해서 며칠 소요

✅ 있을 때

"리뷰 기능 추가해줘" 한 마디
→ AI 팀이 알아서 완성 → 몇 시간 내 배포

⚠️

고급형은 경험이 쌓인 뒤 도전하세요. 초보형부터 차근차근 시작하는 게 훨씬 빠릅니다!

📚

어디서 배우나요?
AI 워크스페이스 구축법은 GPTers 커뮤니티에서 계속 다루는 주제입니다.
오늘 실습으로 기초(GitHub + Vercel + 바이브코딩)를 갖췄으니,
다음 단계로 자연스럽게 이어집니다. 🚀

나를 소개하는 웹페이지,직접 만들고 인터넷에 올리기

오늘 뭘 만드나요?

📋 Git 명령어 한눈에 보기

기본 명령어 (오늘 사용하는 것)

설정 명령어 (처음 한 번만)

확인 & 문제 해결

1 GitHub 가입

📖 GitHub이 뭔가요?

🔧 실습: GitHub 가입하기

2 Git CLI 설치 & 초기 설정

📖 Git vs GitHub 차이

🔧 실습: Git 설치하기

▶ Windows 사용자

▶ Mac 사용자

🔧 실습: Git 초기 설정 (중요!)

⚠️ 잘 안 될 때

3 내 첫 저장소 만들기

📖 저장소(Repository)란?

🔧 실습: 저장소 만들고 내 PC에 가져오기

⚠️ 잘 안 될 때

4 자기소개 페이지 만들기

📖 HTML & CSS란?

🔧 실습: 자기소개 페이지 만들기

📄 파일 확장자 보이게 설정하기 (한 번만)

⚠️ 잘 안 될 때

5 Vercel 배포

📖 Vercel이 뭔가요?

🔧 실습: Vercel로 배포하기

⚠️ 잘 안 될 때

🎉 축하합니다!

💡 앞으로 해볼 것

바이브코딩 환경 직접 세팅하기

🚀 바이브코딩이란? 📎 참고

🔧 어떤 툴을 쓸까? 📎 참고

⚡ Google Antigravity

💻 VSCode + AI 확장

🆕 Vercel은 다시 세팅 안 해도 됩니다

⚡ Google Antigravity 세팅하기 📎 참고

🔧 설치 & 초기 세팅

🔧 바이브코딩 시작하기

⚠️ 잘 안 될 때

💻 VSCode 세팅하기 📎 참고

🔧 설치

🔧 AI 확장 설치

🔧 AI와 함께 코딩하기

⚠️ 잘 안 될 때

🔄 전체 바이브코딩 흐름 한눈에 📎 참고

🏗️ 더 나아가기 — 나만의 AI 워크스페이스 📎 참고

나를 소개하는 웹페이지,
직접 만들고 인터넷에 올리기