top of page
검색

v0.dev에서 Vercel까지: GitHub Actions로 처음 웹 앱 배포하기

  • Matt
  • 7월 21일
  • 2분 분량

이 글은 프로토타입부터 프로덕션까지, 풀스택 웹 애플리케이션을 구축하고 배포하는 시리즈의 첫 번째 게시물입니다.


이 글에서는 v0.dev를 사용해 웹 앱의 기초를 만든 다음, GitHub에 푸시하고, GitHub Actions를 활용한 CI/CD 파이프라인을 통해 Vercel에 배포하는 과정을 설명합니다.


제가 만들고 있는 앱은 언어 학습 도구입니다. 이름은 “Teach Yourself Japanese”이며, 플래시카드, 주제, 예문 등을 포함하고 있습니다. 확인해보고 싶다면 여기에서 보실 수 있어요: https://www.japanauts.com

이번 첫 번째 게시물의 목표는 MVP(최소 기능 제품)를 작동시키는 것입니다. 이후 글에서는 다음과 같은 기능 향상을 다룰 예정입니다:


  • Clerk를 통한 회원가입/로그인 기능 추가

  • Playwright를 사용한 자동화 테스트 실행

  • 다크/라이트 모드 테마 구현

  • CI/CD 워크플로우 강화


v0.dev를 이용한 빠른 프로토타이핑


v0.dev는 AI 기반의 UI 프로토타이핑 도구로, 텍스트 프롬프트를 React 및 Tailwind CSS를 활용한 실제 프론트엔드 코드로 변환해줍니다. 아이디어를 빠르게 작동 가능한 프로토타입으로 전환하는 데 매우 유용합니다.



먼저 다음과 같은 간단한 프롬프트를 입력했습니다:


“일본어를 배우는 데 도움이 되는 웹 앱을 만들어줘. 연습할 수 있는 플래시카드를 사용할 수 있으면 좋겠어.”

v0.dev prompt in action - build a simple web app to help teach Japanese
v0.dev prompt in action - build a simple web app to help teach Japanese

v0.dev는 주제와 플래시카드가 포함된 레이아웃을 생성해줬습니다. 꽤 괜찮았어요! 다음과 같은 추가 프롬프트로 레이아웃을 다듬었습니다:


“주제 옵션을 왼쪽에, 큰 카드 영역을 오른쪽에 배치하고, 단어가 사용된 예문도 제공해줄 수 있어?”

First Attempt
First Attempt

몇 번 반복한 후, 만족스러운 프로토타입을 만들 수 있었습니다.

ree


GitHub로 내보내기


v0.dev를 GitHub에 직접 연결할 수 있지만, 이 글에서는 수동으로 코드를 다운로드했습니다. 에디터 오른쪽 상단에서 .zip으로 내보내기 옵션을 찾을 수 있어요.


Download v0.dev project to ZIP
Download v0.dev project to ZIP

  1. v0.dev에서 ZIP 파일 다운로드

  2. 파일 압축 해제

  3. 터미널에서 npm install 또는 pnpm install 실행

pnpm install

4. 개발 서버 시작:

npm run dev

  1. 새 GitHub 저장소에 푸시



Vercel을 이용한 배포


Vercel은 프론트엔드 앱 배포에 매우 적합하며, 무료 요금제가 넉넉하게 제공됩니다. 새 프로젝트를 배포하는 방법은 다음과 같습니다:


  1. Vercel에 가입 (Hobby 요금제로 충분함)

  2. “Add New” → “Project” 클릭 후 GitHub 계정 연결

  3. 저장소 선택 → 설정 확인 후 Deploy 클릭


🎉 이제 웹사이트가 실제로 배포되어 실행 중일 거예요!


선택 사항:

Vercel의 자동 배포 대신 GitHub Actions를 활용하고 싶다면, Vercel의 Git 설정 탭에서 GitHub 연결을 해제하세요.




GitHub Actions로 CI/CD 설정하기


다음 내용을 .github/workflows/deploy.yml 파일에 추가하세요:


name: Deploy

env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

on:
  workflow_dispatch:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - uses: oven-sh/setup-bun@v2

      - name: Setup pnpm
        run: npm install -g pnpm@latest

      - name: Install Vercel CLI
        run: npm install --global vercel@latest

      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}

      - name: Build Project Artifacts
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}

      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

GitHub 저장소의 Settings → Secrets → Actions에서 아래 항목들을 추가하세요:


  • VERCEL_TOKEN: Vercel에서 생성한 API 토큰

  • VERCEL_ORG_ID: Vercel 팀 ID (예: team_***)

  • VERCEL_PROJECT_ID: Vercel 프로젝트 ID (예: prj_***)


✅ 이제 main 브랜치에 푸시할 때마다 자동으로 배포됩니다!


다음 단계는?


작동하는 웹 앱과 CI/CD 파이프라인이 준비되었으니, 다음 단계는 다음과 같습니다:


  • Clerk.com을 이용한 사용자 인증 추가

  • Playwright 테스트 작성 (UI 및 리그레션 확인)

  • 다크/라이트 모드 전환 기능으로 UX 개선

  • 환경별 빌드 및 미리보기 배포 도입



 
 
 
bottom of page