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

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

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

[https://pomodoro-timer-demo-five.vercel.app/](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
    
    ```plaintext
    npm install -g @anthropic-ai/claude-code
    ```
    
2. 로그인을 진행합니다 (터미널에 뜨는 링크 클릭):
    
    Bash
    
    ```plaintext
    claude login
    ```
    
3. *결과:* 이제 명령만 내리면 코드를 작성해 줄 AI 개발자가 대기 중입니다.
    

### 3단계: 제작 (The Build)

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

1. 에이전트에게 명령합니다:
    
    Bash
    
    ```plaintext
    claude "사이버펑크 스타일의 포모도로 타이머를 만들어줘. index.html 파일 하나에 CSS와 JS를 모두 포함시키고, 매트릭스 영화 같은 느낌을 줘."
    ```
    
2. *결과:* Claude가 파일을 생성하고 로직을 순식간에 작성합니다.
    

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

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

1. 간단한 Python 서버를 실행합니다 (Codespaces에 기본 내장):
    
    Bash
    
    ```plaintext
    python3 -m http.server 8080
    ```
    
2. 우측 하단에 뜨는 **"Open in Browser"** 알림을 클릭합니다.
    
3. *결과:* 개발 중인 앱이 브라우저 새 탭에서 실행됩니다.
    

### 5단계: 영구 배포 (Vercel)

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

1. Claude에게 작업 저장을 지시합니다:
    
    Bash
    
    ```plaintext
    claude "Git add, commit 하고 main 브랜치로 push 해줘"
    ```
    
2. [**Vercel.com**](http://Vercel.com) 접속 -> **Add New Project** -> 방금 만든 Repo 선택 -> **Deploy**.
    
3. *결과:* 전 세계 어디서든 접속 가능한 URL이 생성됩니다. 이후 Claude에게 수정을 지시하고 Push만 하면 사이트가 자동으로 업데이트됩니다.