배포
코드를 노트북에서 인터넷으로
⏱ 예상 ~6분
01 · 읽기
앱을 다 만들었고, 노트북에서 잘 돌아가요. 하지만 아직 아무도 못 써요 — 그냥 여러분 기기 위의 파일일 뿐이에요. 배포 는 그 코드를 노트북에서 서버로 옮겨, 전 세계가 접근할 수 있게 만드는 과정이에요.
책 쓰는 일에 비유해 보세요. 원고 (코드) 를 다 썼고, 이제 출판사 (호스팅 서비스) 에 보내요. 출판사가 인쇄해서 서점 (인터넷) 에 놓아요. 배포하기 전까지 앱은 여러분만 읽을 수 있는 개인 원고일 뿐이에요.
핵심 정리
- Deployment = 앱을 인터넷의 진짜 사용자가 쓸 수 있게 만드는 것
- 코드가 노트북에서, 늘 돌고 있는 서버로 옮겨가요
- 인기 있는 호스팅 서비스: Vercel, Netlify, AWS, Heroku, GitHub Pages
- 요즘은 보통 배포가 자동화돼 있어요 — 코드를 push 하면 그대로 떠요
02 · 단계별 설명
아래는 현대적인 웹 앱을 배포하는 전형적인 단계예요.
1. 1. 코드가 노트북에 있어요
로컬에서 앱을 작성하고 테스트해요. 여러분 기기에서 돌지만, 컴퓨터가 켜져 있을 때만 돌고, 여러분만 쓸 수 있어요.
2. 2. GitHub에 Push
코드를 GitHub repository 에 push 해요. 이렇게 하면 호스팅 서비스가 접근할 수 있는 중앙 위치에 코드가 놓여요. GitHub는 노트북과 server 사이의 중개자예요.
3. 3. 호스팅 서비스가 코드를 가져가요
호스팅 서비스 (Vercel, Netlify 같은) 가 여러분의 GitHub repo 에 연결돼 있어요. 새 코드가 push 된 걸 감지하면, 자동으로 최신 버전을 가져와요.
4. 4. Build 와 Run
호스팅 서비스가 의존성을 설치하고, 앱을 build 하고 (TypeScript 컴파일, 파일 번들링, 이미지 최적화), 자기들 서버에서 실행해요.
5. 5. 공개 URL 로 출시
앱이 myapp.vercel.app 이나 yourname.github.io 같은 공개 URL 을 받아요. 세상 누구나 그 URL 에 들어와 앱을 쓸 수 있어요. 24 / 7 온라인이에요.
03 · 퀴즈
Deployment 가 무엇인가요?
- 노트북에서 코드를 작성하는 것
- 코드를 서버로 옮겨, 세상이 접근할 수 있게 하는 것
- 로컬에서 앱을 테스트하는 것
- 도메인을 사는 것
04 · 읽기
현대의 배포는 예전과 비교하면 거의 마법 같아요. 옛날 개발자들은 손으로 FTP 를 써서 파일을 서버에 복사했어요. 오늘날 대부분의 팀은 auto-deployment (자동 배포, continuous deployment 또는 CD 라고도 해요) 를 써요.
동작 방식은 이래요: GitHub repo 를 Vercel 이나 Netlify 같은 호스팅 서비스에 연결해요. 그 다음부터는 GitHub에 코드를 push 할 때마다, 호스팅 서비스가 자동으로 변경을 감지하고, 앱을 build 하고, 새 버전을 배포해요. GitHub에 push 만 하면, 몇 초 안에 사이트가 업데이트돼요.
05 · 퀴즈
앱이 localhost:3000 에서 완벽하게 도는데, 다른 사람은 아무도 쓸 수 없어요. 무엇이 빠졌을까요?
- 테스트를 더 작성해야 해요
- 먼저 도메인을 사야 해요
- 호스팅 서비스에 배포해야 해요
- 다른 언어로 다시 써야 해요
06 · 빈칸 채우기
자동 배포라면, GitHub에 코드를 push 할 때마다 호스팅 서비스가 자동으로 앱을 _____ 해요.
⚠ 전체 인터랙티브 경험에는 JavaScript가 필요해요. JavaScript를 켜고 새로 고침해 주세요.
※ 이 사이트는 독립 운영되는 교육 프로젝트로, Anthropic의 공식 제품이 아니에요. Claude™ 는 Anthropic, PBC 의 상표예요.