클로드 코드를 이용해서 웹앱을 처음부터 개발하도록 해봤다.
- 빈 디렉토리 생성 (~/hello-world)
- claude code 실행한 후 프롬프트 입력
- 2분만에 github 연동 및 vercel에 배포
AI 코딩을 어떻게 시작해야할 지 모르겠다면 이렇게 시작해도 좋을 듯 싶다. 내 개발 환경은 github와 vercel에 접근하는 툴들이 설치되어있어서 막힘 없이 끝까지 다 실행이 되었다. 처음 작업하는 사람들에게는 관련 패키지들 설치가 필요할건데 (gh, vercel cli 등), claude code가 어떻게 하라고 다 알려줄 듯…
- github repo: https://github.com/Secrice/hello-world-pwa
- 배포된 URL: https://hello-world-mox5t8zy4-secrice-6022s-projects.vercel.app/ (URL은 vercel에서 변경 가능)
cky@iMac hello-world % claude
❯ 헬로월드 표시하는 pwa 웹앱을 만들거야. 여기에 코드를 작성하고 github에 repo 생성하여 올려. 그리고 vercel에 자동으로 배포되도록
연동해주고.
⏺ PWA 앱 파일들을 생성하고 GitHub 연동, Vercel 배포까지 순서대로 진행할게요.
⏺ Bash(ls /Users/cky/hello-world && pwd)
⎿ /Users/cky/hello-world
⏺ Write(index.html)
⎿ Wrote 75 lines to index.html
1 <!DOCTYPE html>
2 <html lang="ko">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <meta name="theme-color" content="#000000" />
7 <meta name="description" content="Hello World PWA" />
8 <link rel="manifest" href="/manifest.json" />
9 <link rel="apple-touch-icon" href="/icons/icon-192.png" />
10 <title>Hello World PWA</title>
… +65 lines (ctrl+o to expand)
⏺ Write(manifest.json)
⎿ Wrote 24 lines to manifest.json
1 {
2 "name": "Hello World PWA",
3 "short_name": "HelloWorld",
4 "description": "A simple Hello World Progressive Web App",
5 "start_url": "/",
6 "display": "standalone",
7 "background_color": "#0a0a0a",
8 "theme_color": "#000000",
9 "orientation": "any",
10 "icons": [
… +14 lines (ctrl+o to expand)
⏺ Write(sw.js)
⎿ Wrote 24 lines to sw.js
1 const CACHE_NAME = 'hello-world-v1';
2 const ASSETS = ['/', '/index.html', '/manifest.json'];
3
4 self.addEventListener('install', (event) => {
5 event.waitUntil(
6 caches.open(CACHE_NAME).then((cache) => cache.addAll(ASSETS))
7 );
8 self.skipWaiting();
9 });
… +14 lines (ctrl+o to expand)
⏺ 이제 아이콘 파일을 SVG로 생성하고 PNG로 변환할게요.
⏺ Bash(mkdir -p /Users/cky/hello-world/icons)
⎿ Done
⏺ Bash(command -v convert && echo "imagemagick available" || echo "not available")
⎿ /opt/homebrew/bin/convert
imagemagick available
⏺ Bash(command -v node && node --version)
⎿ /opt/homebrew/bin/node
v24.3.0
⏺ Write(icons/icon.svg)
⎿ Wrote 4 lines to icons/icon.svg
1 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
2 <rect width="512" height="512" rx="80" fill="#0a0a0a"/>
3 <text x="256" y="340" font-family="Arial, sans-serif" font-size="280" font-weight="800" fill="white" text-anchor="middle">H
</text>
4 </svg>
⏺ Bash(convert -background none /Users/cky/hello-world/icons/icon.svg -resize 192x192 /Users/cky/hello-world/icons/icon-192.png && convert
-background none /Users/cky/…)
⎿ WARNING: The convert command is deprecated in IMv7, use "magick" instead of "convert" or "magick convert"
WARNING: The convert command is deprecated in IMv7, use "magick" instead of "convert" or "magick convert"
… +2 lines (ctrl+o to expand)
⏺ 이제 git 초기화 후 GitHub repo 생성하고 push할게요.
⏺ Bash(git init && git add . && git commit -m "$(cat <<'EOF'
Initial PWA hello world app…)
⎿ hint: Using 'master' as the name for the initial branch. This default branch name
hint: is subject to change. To configure the initial branch name to use in all
hint: of your new repositories, which will suppress this warning, call:
… +16 lines (ctrl+o to expand)
⏺ Bash(git branch -m master main)
⎿ (No output)
⏺ Bash(gh auth status 2>&1)
⎿ github.com
✓ Logged in to github.com account Secrice (keyring)
- Active account: true
… +3 lines (ctrl+o to expand)
⏺ Bash(gh repo create hello-world-pwa --public --description "Hello World Progressive Web App" --source=. --remote=origin --push 2>&1)
⎿ https://github.com/Secrice/hello-world-pwa
To https://github.com/Secrice/hello-world-pwa.git
* [new branch] HEAD -> main
branch 'main' set up to track 'origin/main'.
⏺ GitHub repo 생성 완료. 이제 Vercel 연동할게요.
⏺ Skill(vercel:deploy)
⎿ Successfully loaded skill
⏺ Preflight 체크 실행
⏺ Bash(which vercel && vercel --version 2>&1)
⎿ /opt/homebrew/bin/vercel
Vercel CLI 51.4.0
51.4.0
Read 1 file (ctrl+o to expand)
⏺ Bash(git -C /Users/cky/hello-world status --porcelain)
⎿ (No output)
⏺ Preflight 결과:
- ✅ Vercel CLI 51.4.0 설치됨
- ⚠️ 프로젝트 미연동 → vercel link 필요
- ✅ 커밋되지 않은 변경사항 없음
프로젝트를 Vercel에 연동할게요. (GitHub 자동배포 연동을 위해 프로젝트를 생성합니다)
⏺ Bash(vercel auth ls 2>&1 || vercel whoami 2>&1)
⎿
> NOTE: The Vercel CLI now collects telemetry regarding usage of the CLI.
> This information is used to shape the CLI roadmap and prioritize features.
… +34 lines (ctrl+o to expand)
⏺ Vercel 로그인 완료. 이제 프로젝트를 배포하고 GitHub 자동 배포를 설정할게요.
⏺ Bash(vercel --yes 2>&1)
⎿
Loading scopes…
Searching for existing projects…
… +33 lines (ctrl+o to expand)
⎿ (timeout 2m)
⏺ 배포 성공! GitHub도 자동으로 연결됐어요. 배포 상태 확인할게요.
⏺ Bash(vercel inspect hello-world-tawny-kappa.vercel.app 2>&1 | head -40 && git rev-parse --short HEAD)
⎿
Fetching deployment "hello-world-tawny-kappa.vercel.app" in secrice-6022s-projects
> Fetched deployment "hello-world-mox5t8zy4-secrice-6022s-projects.vercel.app" in secrice-6022s-projects [411ms]
… +23 lines (ctrl+o to expand)
⏺ 모든 설정이 완료됐습니다.
---
Deploy Result
- URL: https://hello-world-tawny-kappa.vercel.app
- GitHub Repo: https://github.com/Secrice/hello-world-pwa
- Target: production
- Status: READY
- Commit: 74345f0
- Framework: Static (HTML/CSS/JS + PWA)
자동 배포 흐름
GitHub main 브랜치에 push하면 Vercel이 자동으로 재배포합니다. 별도 설정 없이 이미 연동 완료된 상태입니다.
git push origin main → Vercel 자동 빌드 & 배포
생성된 것들:
- PWA 앱 (Hello World, 오프라인 지원, 홈 화면 추가 가능)
- GitHub repo: Secrice/hello-world-pwa
- Vercel 프로덕션 배포 + GitHub 자동 배포 연동
✻ Cooked for 2m 5s
※ recap: PWA 헬로월드 앱을 만들어 GitHub에 올리고 Vercel에 배포했습니다. https://hello-world-tawny-kappa.vercel.app 에서 확인 가능하며 main
브랜치 push 시 자동 배포됩니다. (disable recaps in /config)