🐈‍⬛ 뽀짝이의 설치 세션

내 컴퓨터에 "배포 도구" 심기

만든 웹앱을 링크 하나로 세상에 공개하는 실습이에요.
준비물은 AI한테 "깔아줘" 한마디면 대부분 끝나요.

뽀야·뽀짝이·뽀둥이·뽀식이 네 마리가 배포 실습을 시작하며 파이팅하는 모습

안녕하세요, 뽀짝이입니다 🐈‍⬛

오늘은 만든 웹앱을 세상에 공개하는 실습을 하려고 해요. 내 컴퓨터에서만 보이던 걸, 링크 하나로 누구나 열 수 있게 인터넷에 올리는 거예요. 그걸 하려면 준비물 두 개가 필요한데 — 걱정 마세요. 대부분은 여러분이 쓰는 AI(클로드 코드·코덱스)한테 "깔아줘" 한마디면 알아서 깔아줘요.

🤔 그런데, 이게 다 왜 필요해요? 펼치기접기

웹앱을 배포한다는 건 결국 두 단계예요:

  1. 내 코드를 코드 저장소(GitHub)에 올리기
  2. 저장소의 코드를 실제 웹사이트로 띄우기(Vercel)

이 두 가지를 AI한테 시켜서 자동으로 하려면, AI가 부릴 수 있는 "도구" 두 개가 컴퓨터에 있어야 해요. 그게 오늘 깔 gh랑 Vercel이에요.

📦 gh
GitHub(코드 저장소)에 내 코드를 올려주는 도구예요. 저장소 자체가 아니라, 거기에 올리는 명령을 대신 해주는 거예요.
🌐 Vercel
저장소에 올라간 코드를 진짜 웹사이트로 띄워주는 서비스예요. 링크가 생겨서 누구나 볼 수 있게 돼요.

🐾 이걸 깔면 뭐가 좋냐면요

"이 웹앱 인터넷에 올려줘" 한마디면, AI가 코드를 GitHub에 올리고 → Vercel로 배포하고 → 링크까지 뽑아줘요. 한번 깔아두면, 그다음부터 배포는 진짜 말 한마디예요.

🎒 준비물 — 시작 전에 이것만

딱 하나만 ✓

1. 유료 구독 (둘 중 하나)

이 실습은 내 컴퓨터를 직접 조작하는 AI가 필요해요. 그래서 아래 둘 중 하나의 구독만 있으면 돼요. (둘 다 필요한 게 아니에요!)

🟠 클로드(Claude) 구독→ 클로드 코드를 써요
🟢 ChatGPT 구독→ 코덱스(Codex)를 써요
4개 중 딱 하나만 ✓

2. AI 켜기 (넷 중 하나)

앞으로 나오는 💬 말풍선은 전부 이 AI에게 주는 말이에요. 넷 다 깔 필요 없어요 — 하나만 켜면 돼요. CLI를 이미 쓰면 CLI, 없으면 앱으로.

CLI가 있다면1. 클로드 코드 CLI터미널에 claude 엔터
CLI가 있다면2. 코덱스 CLI터미널에 codex 엔터
앱을 쓴다면3. 클로드 데스크톱 앱Code 탭 (내 폴더 연결)
앱을 쓴다면4. 코덱스 앱내 컴퓨터 폴더에 연결

🐾 켰으면, 여기 뜬 AI 창에 아래 말풍선들을 하나씩 붙여넣으면 돼요. (ChatGPT 웹사이트·클로드 채팅 앱은 안 돼요 — 내 컴퓨터를 못 만져요.)

🐈‍⬛ 시작 전에, 딱 이것만 기억해요 펼치기접기

AI는 여러분 대신 컴퓨터에 명령을 내려서 도구를 깔아줘요. 그래서 대부분은 그냥 "깔아줘" 하면 돼요. 근데 AI가 절대 대신 못 하는 3가지가 있어요. 이것만 여러분이 직접 하면 돼요:

🔑
비밀번호 입력
여러분 컴퓨터 비번은 여러분만 알잖아요
🖱️
설치 창 "예" 클릭
화면에 뜨는 팝업은 AI가 마우스로 못 눌러요
🌐
로그인 (GitHub·Vercel)
브라우저 로그인은 여러분 계정이니 여러분이

이 3개 빼면 전부 AI한테 맡기세요. 정말이에요. 🐾

📦 오늘의 목표 펼치기접기

다 끝나면 이 상태가 돼요. 위에서 아래로 도미노예요 — 위엣 게 있어야 아랫 걸 깔 수 있어요.

🔑GitHub 계정 · Vercel 계정 — 가입만 먼저!
✅준비 도구 맥 Homebrew / 윈도우 winget
✅Node.js Vercel이 돌아가는 엔진
✅git 맥=자동 / 윈도우=따로
✅gh GitHub에 올리는 도구
✅Vercel 웹사이트로 켜는 도구
✅gh · Vercel 로그인 완료
STEP 0 · 계정 먼저🔑 계정부터 만들기 펼치기접기

도구를 깔기 전에, 가입 두 개만 먼저 해둬요. 그냥 회원가입이라 어렵지 않은데, 가입하는 "방법"이 중요해서 콕 짚어드릴게요.

뽀둥이가 GitHub·Vercel 열쇠 두 개를 들고 '먼저 계정부터!' 하고 안내하는 모습
뽀둥이: "먼저 계정부터!"

① GitHub 가입 — 🔵 구글 계정으로

GitHub은 "📦 코드 창고"예요. github.com에서 "Continue with Google"(구글로 계속하기) 버튼을 누르세요. 구글 계정으로 클릭 몇 번이면 가입 끝이에요. 비밀번호 따로 안 만들어도 돼요! (2025년부터 지원돼요)

GitHub 가입 화면 — 맨 위 'Continue with Google' 버튼에 표시
주황 박스로 표시한 Continue with Google 버튼을 누르면 돼요

🚨 딱 하나만 놓치지 마세요

가입하면 인증 메일이 와요. 그거 꼭 클릭하세요! 안 하면 나중에 코드 창고를 못 만들어요.

② Vercel 가입 — 🔵 반드시 "GitHub으로"

Vercel은 "🌐 웹사이트로 켜는 스위치"예요. vercel.com/signup에서 반드시 "Continue with GitHub"을 누르세요. 방금 만든 GitHub 계정으로 연결돼요.

Vercel 가입 화면 — 'Continue with GitHub' 버튼에 표시
주황 박스로 표시한 Continue with GitHub 을 골라야 자동배포가 붙어요 (Google 아니고!)

왜 꼭 GitHub으로 가입하냐면요 — 이렇게 연결해두면 나중에 코드를 GitHub에 올릴 때마다 Vercel이 알아서 자동으로 웹사이트를 새로 배포해줘요. 이메일로 따로 가입하면 이 연결이 안 붙어서, 나중에 또 GitHub을 연결하는 번거로운 단계를 거쳐야 해요.

💰 요금은 무료(Hobby 플랜)면 실습에 충분해요. 결제 안 해도 돼요.

🐾 가입할 때 Vercel이 "GitHub 저장소에 접근해도 돼요?" 하고 물어봐요 → 승인하면 돼요. (당황 금지! 이게 자동배포가 붙는 연결이에요.)

💡 GitHub·Vercel 둘 다 같은 이메일(구글) 로 맞춰두면 헷갈리지 않고 깔끔해요.

STEP 1 · 도구 설치🛠️ 도구 깔기 펼치기접기

이제 계정이 준비됐으니 도구를 깔러 가요. 내 컴퓨터에 맞는 탭을 고르세요.

뽀야가 노트북 앞에서 설치 도구를 세팅하며 '맥은 이렇게!' 하는 모습
뽀야: "맥은 이렇게!"

⓪ 먼저 확인부터

AI한테 이렇게 말해보세요:

💬 AI에게 복사해서 붙여넣기
"내 맥에 배포에 필요한 도구들(brew, node, git, gh, vercel) 깔려 있는지 확인해줘"

이미 다 있다고 하면 → 바로 로그인으로 가세요. 없는 것만 아래대로 깔면 돼요.

① Homebrew 깔기 — ★ 여기만 직접

Homebrew는 맥에 프로그램을 깔아주는 "설치 도우미"예요. 이건 컴퓨터 비밀번호를 물어봐서 AI가 끝까지 못 깔아요. 이 단계만 직접 하고 시작하는 게 편해요.

💬 AI에게 복사해서 붙여넣기
"Homebrew 설치하는 방법 알려줘. 나 맥이야"

AI가 방법을 알려주면, 여러분이 할 것은 딱 이것뿐이에요:

  1. "Press RETURN…" 나오면 → Enter 한 번
  2. 비밀번호 물어보면 → 맥 로그인 비번 입력 (화면에 안 보이는 게 정상! 그냥 치고 엔터) — 안 물어보면 그냥 넘어가요
  3. 설치 팝업이 뜨면 → "설치" 클릭 (안 뜰 수도 있어요)

🐾 좋은 소식: git은 이 단계에서 같이 깔려요! Homebrew가 알아서 딸려 깔거든요. 그래서 맥은 git 따로 신경 안 써도 돼요.

설치가 끝나면 AI가 "이 두 줄을 실행하세요" 하고 마무리 명령을 줘요. 그대로 따라 하면 돼요.

AI가 "다 됐어요" 하는데 brew가 안 먹힐 때펼치기접기

가끔 설치는 됐는데 brew 명령이 "command not found"로 안 먹힐 때가 있어요. 그럼 AI한테 이렇게 말하세요:

💬 AI에게 복사해서 붙여넣기
"brew가 command not found로 안 돼. PATH 등록(.zprofile) 마무리해주고, 안 되면 터미널 새로 여는 법 알려줘"

🐾 이 설정 파일 수정도 AI가 알아서 해줘요 — 여러분이 직접 칠 필요 없어요. (혹시 손으로 직접 따라 치게 되면, 꺾쇠만 꼭 >>(두 개)인지 봐주세요. > 한 개면 기존 설정이 지워지거든요. 그래도 AI한테 맡기는 게 안전해요.)

② 나머지 도구 깔기 — 🤖 AI한테 시키기

Homebrew만 깔았으면, 여기서부터는 전부 AI한테 맡기세요.

💬 AI에게 복사해서 붙여넣기
"node랑 gh, vercel 다 설치하고, 잘 깔렸는지 버전 확인까지 해줘"

AI가 알아서 쭉 깔아요. 비밀번호도 안 물어보고, 몇십 초면 끝나요. ✅

🔎 잘 됐는지 보는 법: 각 도구 뒤에 v20.11.0처럼 숫자(버전)가 뜨면 성공이에요. command not found나 빨간 글씨가 뜨면 아직 안 된 거예요 → 아래 🔧 토글을 펼쳐보세요.

AI가 설치를 머뭇거리거나 중간에 멈출 때펼치기접기

코덱스를 쓰면 안전장치 때문에 설치를 막거나 "이거 실행할까요?" 하고 자꾸 물을 수 있어요. 그럼 이렇게 더 명확히 말하세요:

💬 AI에게 복사해서 붙여넣기
"Homebrew로 node와 gh를 설치하고, npm으로 vercel을 전역(-g) 설치해줘. 설치 중 승인 요청이 뜨면 전역 설치와 네트워크 접근을 허용할게. 각 단계 끝나면 버전으로 확인해줘"

클로드 코드는 "실행할까요?" 물으면 허용 눌러주면 쭉 진행돼요. 코덱스는 뜨는 승인을 눌러주거나 "전역 설치 허용"이라고 말해주면 통과돼요.

🍎 맥 로그인 — ★ 브라우저

마지막으로 GitHub·Vercel에 로그인만 하면 돼요. 브라우저가 열려서 여러분이 직접 로그인해야 해요 (여러분 계정이니까요).

💬 AI에게 복사해서 붙여넣기
"gh랑 vercel 로그인 시작해줘. 브라우저 뜨면 내가 로그인할게"
GitHub 로그인 화면 — 가입할 때 쓴 방식으로 로그인
브라우저가 열리면 — 가입할 때 눌렀던 것(구글)으로 로그인해요
Vercel 로그인 화면 — Continue with GitHub 버튼
Vercel은 Continue with GitHub 을 누르면 돼요

끝! 이제 배포 준비 완료예요. 🎉

💬 클로드 코드 vs 코덱스 — 뭐가 달라요? 펼치기접기

둘 다 결과는 똑같아요. AI한테 허락받는 방식만 살짝 달라요.

🟠 클로드 코드
뭘 할 때마다 "이거 해도 돼요?" 하고 물어봐요. "허용" 눌러주면 쭉 진행돼요. 편해요.
🟢 코덱스
안전을 위해 처음엔 좀 조심스럽게 가둬둬요. 설치처럼 컴퓨터를 바꾸는 일은 "허락해주세요" 하고 먼저 물어봐요. 허락해주면 돼요.

🐈‍⬛ 쉽게 말하면 — 클로드 코드는 "물어보면 예스", 코덱스는 "가둔 문을 열어주면" 진행돼요. 어느 쪽이든 위 3가지(비번·팝업·로그인)는 여러분 몫인 건 똑같아요.

📱 앱(클로드 데스크톱 · 코덱스)으로 켰다면 — 딱 하나만 확인!

  • 꼭 로컬(Local) 모드여야 해요. 클라우드 모드는 인터넷 서버에서 도는 거라 내 컴퓨터에 설치를 못 해요. (클로드 앱은 Code 탭에서 내 폴더 열기 = 로컬. 헷갈리면 AI한테 "너 지금 로컬 모드야?" 물어봐도 돼요.)
  • 로컬로 켰으면 그다음은 내 컴퓨터 OS 그대로 — 맥이면 🍎 맥 탭, 윈도우면 🪟 윈도우 탭을 똑같이 따라오면 돼요.
✅ 다 됐는지 확인 펼치기접기

마지막으로 AI한테 한마디면 전부 점검해줘요:

💬 AI에게 복사해서 붙여넣기
"방금 깐 도구들 다 잘 설치됐고 로그인도 됐는지 한 번에 확인해줘"

전부 ✅로 나오면 — 준비 끝! 이제 진짜로 하나 만들어서 올려볼게요.

STEP 2 · 만들고 올리기🚀 웹앱 만들어서 배포하기 펼치기접기

도구는 다 깔렸으니, 이제 올릴 "웹앱"이 있어야겠죠? 근데 이것도 AI한테 시키면 돼요 — 거창할 필요 없어요. 간단한 페이지 하나면 충분해요.

① 먼저, 뭐라도 하나 만들기

AI한테 만들고 싶은 걸 말하세요. 예를 들면:

💬 AI에게 복사해서 붙여넣기
"내 소개 페이지 하나 만들어줘. 이름이랑 좋아하는 것 몇 개 넣고 예쁘게"

💡 뭐든 좋아요 — 오늘 할 일 목록, 좋아하는 카페 지도, 고양이 사진 갤러리… AI가 코드를 만들어줄 거예요. "브라우저로 열어서 보여줘" 하면 미리 확인도 돼요.

② 그걸 그대로 배포하기

마음에 들면, 이제 세상에 올릴 차례예요. 이 한마디면 AI가 GitHub에 올리고 Vercel로 배포해요:

💬 AI에게 복사해서 붙여넣기
"방금 만든 거 GitHub에 올리고 Vercel로 배포해줘. 끝나면 링크 알려줘"

AI가 알아서 코드 창고(GitHub)에 올리고 → 웹사이트로 켜고(Vercel) → 진짜 링크를 뽑아줘요. 그 링크를 친구한테 보내면, 친구도 열어볼 수 있어요! 🎉

🙋 배포 중에 터미널이 영어로 몇 개 물어봐요 — 이건 AI가 못 눌러주는 여러분 몫이에요 (로그인 팝업이랑 똑같이). 당황 말고 이렇게만 하면 돼요:

  • Set up and deploy? / Which scope? 같은 질문 → 대부분 그냥 엔터(기본값)
  • Link to existing project? → No(N), 새로 만들면 돼요
  • What's your project's name? → 그냥 엔터(자동 이름)하거나 원하는 이름 입력
  • GitHub에 올릴 때 public / private 물으면 → 연습용이니 아무거나 OK (공개가 신경 쓰이면 private)

뭐라고 답할지 모르겠으면, 그 질문을 그대로 AI한테 "이거 뭐라고 답해?" 하고 물어봐도 돼요. 🐾

✅ 다 됐는지 확인: AI가 준 링크를 클릭해서 브라우저로 열어보세요. 방금 만든 페이지가 진짜로 뜨면 — 배포 성공이에요! 🎉

🐾 이게 오늘의 목표였어요 — 내 컴퓨터에만 있던 걸, 링크 하나로 누구나 볼 수 있게 만드는 거요. 한번 해보면, 그다음부터는 "이거 올려줘" 한마디예요.

뽀짝이가 배포 완료된 웹사이트 링크 카드를 들고 신나서 방방 뛰는 모습
뽀짝이: "배포 완료!"
📌 여러분이 직접 할 것 — 한눈에 펼치기접기
관문🍎 맥🪟 윈도우
비밀번호Homebrew 깔 때 (물어보면)설치 팝업 "예"
팝업 클릭설치 창 (뜨면)"허용?" 창
로그인GitHub·VercelGitHub·Vercel
새 창 열기보통 자동설치 후 창 새로

이 몇 가지 빼면, 나머지는 전부 AI한테 "해줘" 하면 돼요. 그게 오늘의 핵심이에요 🐾

🐈‍⬛ 도구를 한번 깔아두면, 배포는 그다음부터 말 한마디예요.

어렵게 느껴지면 언제든 AI한테 "이거 어떻게 해?" 하고 물어보세요 — 그게 원래 이 도구들을 쓰는 방법이에요.