🚀 튜토리얼: 5분 만에 빈 화면에서 앱 배포까지 (ai 에이전트 스택)

GitHub Codespaces 를 사용하면 로컬 머신에서 아무런 설치를 하지 않고도 개발을 할 수 있다는 것을 최근에 알게 되었습니다. 또, claude code 를 쓰면 코딩 에이전트가 프롬프트에 맞추어서 파일을 직접 생성/수정하고 코딩을 해 준다는 것을 알게 되었습니다. 만약 이 두가지를 결합하면 어떨까 하는 생각이 들어서 이 스택이 작동할지 테스트를 해 보았습니다. 개발자 경험이 너무 훌륭하기 때문에, 해당 과정을 아래와 같이 정리했습니다. 아래의 내용은 Gemini 3.0 으로 작성했습니다.

아래의 링크는 이 방법으로 5분 정도 걸려서 작성/배포된 싸이트입니다. (대부분은 환경설정 등에 쓰였습니다.)

https://pomodoro-timer-demo-five.vercel.app/

---

이 가이드는 GitHub Codespaces와 Claude Code를 활용한 최신 "클라우드 네이티브" 워크플로우를 소개합니다. 로컬 개발 환경 설정의 고통 없이, 빈 저장소(Repo)에서 시작해 내 핸드폰에 앱을 설치하기까지 단 몇 분이면 충분합니다.

핵심 스택 (The Stack)

• 개발 환경: GitHub Codespaces (클라우드 Linux VM)

• 개발자: Claude Code (터미널에서 직접 코딩하는 AI 에이전트)

• 배포: Vercel (자동 배포 시스템)

---

1단계: "즉석" 컴퓨터 준비 (GitHub Codespaces)

지저분한 로컬 컴퓨터 설정 대신, 깨끗한 클라우드 환경을 사용합니다.

1. GitHub에서 빈 **새 저장소(Repository)**를 만듭니다 (예: ai-speed-run).

2. 초록색 Code 버튼 클릭 -> Codespaces 탭 -> Create codespace on main 클릭.

3. 결과: 약 30초 후, 브라우저 안에서 완벽한 VS Code 에디터가 실행됩니다.

2단계: AI 개발자 채용 (Claude Code)

터미널에 AI를 초대하여 코딩을 맡깁니다.

1. Codespaces 하단 터미널에 다음 명령어를 입력해 에이전트를 설치합니다:

   Bash

    npm install -g @anthropic-ai/claude-code
   

2. 로그인을 진행합니다 (터미널에 뜨는 링크 클릭):

   Bash

    claude login
   

3. 결과: 이제 명령만 내리면 코드를 작성해 줄 AI 개발자가 대기 중입니다.

3단계: 제작 (The Build)

코드를 직접 짜지 말고, 결과를 묘사하세요.

1. 에이전트에게 명령합니다:

   Bash

    claude "사이버펑크 스타일의 포모도로 타이머를 만들어줘. index.html 파일 하나에 CSS와 JS를 모두 포함시키고, 매트릭스 영화 같은 느낌을 줘."
   

2. 결과: Claude가 파일을 생성하고 로직을 순식간에 작성합니다.

4단계: 미리보기 (The Preview)

클라우드 상에서 앱이 잘 돌아가는지 확인합니다.

1. 간단한 Python 서버를 실행합니다 (Codespaces에 기본 내장):

   Bash

    python3 -m http.server 8080
   

2. 우측 하단에 뜨는 "Open in Browser" 알림을 클릭합니다.

3. 결과: 개발 중인 앱이 브라우저 새 탭에서 실행됩니다.

5단계: 영구 배포 (Vercel)

이제 전 세계에 공유합니다.

1. Claude에게 작업 저장을 지시합니다:

   Bash

    claude "Git add, commit 하고 main 브랜치로 push 해줘"
   

2. Vercel.com 접속 -> Add New Project -> 방금 만든 Repo 선택 -> Deploy.

3. 결과: 전 세계 어디서든 접속 가능한 URL이 생성됩니다. 이후 Claude에게 수정을 지시하고 Push만 하면 사이트가 자동으로 업데이트됩니다.