AGENT × CLI
에이전트에게 맡기는
서비스 개발과 배포
GitHub · Vercel · Supabase
CLI 설치부터 로그인까지
영산중학교, 교사 이성원
01 · 전체 흐름
오늘 직접 할 일은 세 가지
설치 → 로그인 → 프롬프트 전달
- 설치: 에이전트가 사용할 도구를 내 컴퓨터에 준비합니다.
- 로그인: 각 도구가 내 서비스 계정에 접근할 수 있게 연결합니다.
- 요청: 만들 서비스와 원하는 결과를 에이전트에게 설명합니다.
Windows는 PowerShell, Mac은 터미널에서 따라 합니다. 개발 도구는 Claude Code와 Codex 중 하나만 선택해도 됩니다.
02 · 도구의 역할
누가 무엇을 담당하나요?
에이전트가 CLI를 통해 각 서비스에 일을 요청합니다.
- Claude Code / Codex → 요구를 읽고 코드를 만들며 터미널 명령을 실행하는 작업자
- GitHub → 코드와 변경 내용을 보관하는 저장소
- Vercel → 만든 웹사이트를 인터넷 주소로 공개하는 서비스
- Supabase → 서비스의 데이터와 사용자 계정을 관리하는 서비스
Node.js·npm은 여러 CLI를 실행하고 설치하는 바탕입니다. Git은 코드 변경을 기록하는 도구입니다.
02 · GitHub의 역할
GitHub: 코드가 보관되는 곳
내 컴퓨터의 프로젝트를 온라인 저장소에 연결합니다.
- Git: 컴퓨터에서 파일의 변경 내용을 기록합니다.
- GitHub: 그 기록과 코드를 온라인에 보관합니다.
- GitHub CLI: gh라는 명령으로 GitHub를 조작합니다.
- 로그인 후 “이 프로젝트를 GitHub에 저장해 줘”라고 에이전트에게 요청하면 됩니다.
명령 이름 확인
gh --version02 · Vercel의 역할
Vercel: 서비스의 인터넷 주소
내 컴퓨터에서 만든 웹서비스를 다른 사람도 사용할 수 있게 공개합니다.
- 배포란 만든 서비스를 인터넷에서 실행할 수 있도록 올리는 일입니다.
- Vercel CLI의 명령 이름은 vercel입니다.
- 로그인한 계정에 프로젝트를 만들고 배포할 수 있습니다.
- 설정과 배포 명령은 에이전트에게 맡기고, 전달받은 주소를 열어 확인합니다.
명령 이름 확인
vercel --version02 · Supabase의 역할
Supabase: 데이터를 기억하는 곳
사용자가 입력한 내용이 남아야 하는 서비스에 사용합니다.
- 예: 할 일을 추가하고 브라우저를 닫았다 다시 열어도 목록이 남습니다.
- 데이터베이스, 사용자 로그인, 파일 보관 같은 기능을 제공합니다.
- Supabase CLI로 에이전트가 프로젝트와 데이터 구조를 설정할 수 있습니다.
- 우리는 도구 설치와 계정 로그인까지 준비하고 연결 작업은 요청합니다.
이번 강의에서 사용하는 실행 방식
npx supabase --version03 · 계정 준비
설치 전에 계정을 준비하세요
브라우저에서 사용할 계정으로 먼저 로그인합니다.
- GitHub: github.com에서 계정을 만듭니다.
- Vercel: vercel.com에서 가입합니다. GitHub 계정으로 연결하면 편리합니다.
- Supabase: supabase.com에서 가입하고 대시보드를 열어 둡니다.
- 에이전트: Claude Code 이용 가능한 Claude 계정 또는 Codex 이용 가능한 ChatGPT 계정을 준비합니다.
CLI 설치 자체와 서비스 이용 요금은 별개입니다. 에이전트 계정의 이용 가능 플랜과 각 서비스의 사용 한도를 확인합니다.
04 · 터미널
터미널 열고 한 줄씩 입력하기
명령을 붙여 넣은 뒤 Enter를 누릅니다.
- Windows: 시작 메뉴에서 PowerShell을 검색하여 실행합니다.
- Mac: Spotlight(⌘+Space)에서 터미널을 검색하여 실행합니다.
- 여러 줄이 있으면 위에서부터 한 줄씩 실행하고 완료를 기다립니다.
- PS C:\…> 또는 $처럼 이미 표시된 앞부분은 입력하지 않습니다.
프로젝트 폴더 이동 예시 · 실제 내 폴더 경로로 바꾸기
cd "프로젝트 폴더의 전체 경로"프로젝트 폴더는 탐색기나 Finder에서 만들면 됩니다. cd는 터미널의 작업 폴더를 바꾸는 명령입니다.
05 · Node.js
Node.js를 먼저 설치하는 이유
npm과 npx가 함께 준비됩니다.
- Node.js: JavaScript 프로그램을 실행하는 바탕입니다.
- npm: Vercel CLI와 Codex CLI 같은 도구를 설치합니다.
- npx: Supabase CLI 같은 도구를 내려받아 실행합니다.
- 이미 설치했다면 아래 세 명령에서 버전 번호가 나오는지 먼저 확인합니다.
Windows · Mac 공통
node --version
npm --version
npx --version이 강의는 Node.js 24 LTS 기준입니다. Supabase CLI의 npm/npx 실행에는 Node.js 20 이상이 필요합니다.
05 · Windows 설치
Windows: Node.js 설치 파일 받기
다운로드 페이지에서 Windows Installer (.msi)를 선택합니다.
- ① 공식 다운로드 페이지를 열고 LTS를 확인한 뒤, 아래쪽 “Or get a prebuilt Node.js” 영역으로 내려갑니다.
- ② 운영체제 Windows, 일반적인 Intel/AMD PC는 x64를 선택합니다. ARM PC는 ARM64를 선택합니다.
- ③ 아래쪽의 Windows Installer (.msi)를 누릅니다. ZIP 파일이 아닙니다.
- ④ 받은 파일 실행 → Next → 약관 동의 → 기본 설정 → Install → Finish. 관리자 확인창이 나오면 설치를 허용합니다.
페이지 위쪽의 명령어 예시는 실행하지 않습니다. 설치 파일로 설치한 뒤 터미널을 새로 열어 node --version과 npm --version을 확인합니다.
① 공식 다운로드 페이지 · 아래쪽으로 이동
② 아래쪽에서 OS·CPU를 선택하고 .msi 버튼 클릭
05 · Mac 설치
Mac: Node.js 설치 파일 받기
다운로드 페이지에서 macOS Installer (.pkg)를 선택합니다.
- ① 공식 다운로드 페이지를 열고 LTS를 확인한 뒤, 아래쪽 “Or get a prebuilt Node.js” 영역으로 내려갑니다.
- ② Apple 메뉴 → 이 Mac에 관하여: Apple M 시리즈는 ARM64, Intel은 x64입니다.
- ③ macOS Installer (.pkg)를 눌러 파일을 받습니다.
- ④ 실행 → 계속 → 약관 동의 → 설치 → Mac 암호 입력 → 닫기. 터미널을 새로 열어 버전을 확인합니다.
페이지 위쪽의 명령어 예시는 실행하지 않습니다. 설치 파일로 설치한 뒤 터미널을 새로 열어 node --version과 npm --version을 확인합니다.
① 공식 다운로드 페이지 · 아래쪽으로 이동
② 아래쪽에서 OS·CPU를 선택하고 .pkg 버튼 클릭
06 · Windows 기본 도구
Windows: Git과 GitHub CLI 설치
PowerShell에서 아래 명령을 한 줄씩 실행합니다.
- Git은 코드 기록 도구, gh는 GitHub 연결 도구입니다. 둘 다 설치합니다.
- winget은 Windows의 앱 설치 도구입니다. 약관 확인이 나오면 내용을 확인하고 동의합니다.
- 설치가 끝나면 PowerShell을 닫았다 새로 엽니다.
- git --version과 gh --version에서 버전이 나오면 설치 완료입니다.
설치
winget install --id Git.Git -e --source winget
winget install --id GitHub.cli -e --source winget새 PowerShell에서 확인
git --version
gh --versionwinget을 찾지 못하면 Microsoft Store의 “앱 설치 관리자(App Installer)”를 설치·업데이트한 후 다시 실행합니다.
06 · Mac 기본 도구
Mac: Homebrew 준비하기
Homebrew는 Mac에서 명령으로 앱을 설치하는 도구입니다.
- ① brew --version을 입력합니다. 버전이 나오면 다음 장으로 이동합니다.
- ② 없으면 brew.sh를 열고 공식 Install Homebrew 명령을 실행합니다.
- ③ Press RETURN… 안내에서는 Enter를 누릅니다. Mac 암호는 입력해도 화면에 표시되지 않습니다.
- ④ 완료 화면의 Next steps에 나온 PATH 설정 명령을 그대로 실행합니다. Mac마다 경로가 다를 수 있습니다.
먼저 확인
brew --version없을 때 설치
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"설치 도중 Command Line Tools 설치창이 나오면 설치를 진행합니다. 끝난 뒤 새 터미널에서 brew --version으로 확인합니다.
06 · Mac 기본 도구
Mac: Git과 GitHub CLI 설치
Homebrew가 준비되면 두 도구를 한 번에 설치합니다.
- ① 터미널에서 brew install git gh를 실행합니다.
- ② 다운로드와 설치가 끝나 새 입력 줄이 돌아올 때까지 기다립니다.
- ③ 두 버전 명령을 실행합니다. 번호가 나오면 성공입니다.
- 이후 GitHub 로그인 과정은 Windows와 같습니다.
설치
brew install git gh확인
git --version
gh --version07 · GitHub 로그인
GitHub 로그인 ① 터미널에서 선택
설치한 gh를 내 GitHub 계정과 연결합니다.
- ① gh auth login을 실행합니다.
- ② 계정 위치는 GitHub.com을 선택합니다.
- ③ Git 통신 방식은 HTTPS를 선택합니다. Git 인증 연결 질문에는 Yes를 선택합니다.
- ④ Login with a web browser를 선택합니다. 방향키로 이동하고 Enter로 결정합니다.
로그인 시작
gh auth login화면의 질문 문구나 순서는 CLI 버전에 따라 조금 달라질 수 있습니다.
07 · GitHub 로그인
GitHub 로그인 ② 브라우저에서 승인
터미널에 나온 일회용 코드를 브라우저에 입력합니다.
- ① 터미널에 표시된 일회용 코드를 확인합니다.
- ② 안내에 따라 Enter를 눌러 브라우저를 엽니다. 열리지 않으면 터미널에 나온 주소를 엽니다.
- ③ 사용할 GitHub 계정인지 확인하고 코드를 입력합니다. Authorize GitHub CLI를 승인합니다.
- ④ 터미널로 돌아와 로그인 성공 메시지를 확인합니다. 아래 명령에 내 계정이 보이면 완료입니다.
로그인 상태 확인
gh auth status브라우저에서 로그인한 것만으로 CLI 로그인이 끝나지는 않습니다. 반드시 터미널에서 상태를 확인합니다.
08 · Vercel 설치
Vercel CLI 설치: Windows·Mac 공통
Node.js와 npm을 설치했다면 같은 명령을 사용합니다.
- ① npm install --global vercel을 실행합니다.
- ② --global은 이 컴퓨터의 여러 폴더에서 vercel을 사용할 수 있게 설치한다는 뜻입니다.
- ③ 설치가 끝나면 vercel --version을 실행합니다.
- ④ 버전 번호가 나오면 다음 장에서 로그인합니다.
설치
npm install --global vercel확인
vercel --version설치 실패 시 에러 메시지를 복사해 에이전트에게 “내 OS에서 Vercel CLI 설치 오류를 해결해 줘”라고 요청할 수 있습니다.
08 · Vercel 로그인
Vercel: 배포할 계정으로 로그인
vercel login으로 계정 연결을 시작합니다.
- ① 터미널에서 vercel login을 실행합니다.
- ② 브라우저 열기나 인증 주소 안내를 따라 Vercel 계정으로 로그인합니다.
- ③ 브라우저에서 CLI 연결을 승인하고 터미널로 돌아옵니다.
- ④ vercel whoami에 내 사용자 이름이 표시되면 성공입니다.
로그인
vercel login계정 확인
vercel whoami회사·학교 팀이 여러 개라면 이후 배포 요청에 사용할 팀 이름도 알려주면 됩니다.
09 · Supabase 설치
Supabase CLI: npx로 내려받아 실행
Windows와 Mac 모두 같은 방식으로 시작합니다.
- ① 아래 버전 명령을 실행합니다. npx가 필요한 CLI를 내려받아 실행합니다.
- ② Need to install… / Ok to proceed?가 나오면 패키지 이름 supabase를 확인하고 y, Enter를 누릅니다.
- ③ 버전 번호가 출력되면 실행 준비가 끝났습니다. 첫 실행은 다운로드 시간이 걸립니다.
- ④ 이번 강의에서는 Supabase 명령 앞에 항상 npx를 붙입니다.
다운로드 및 실행 확인
npx supabase --versionnpm install --global supabase 방식은 지원하지 않습니다. 프로젝트 내부 설치가 필요하면 나중에 에이전트에게 맡깁니다.
09 · Supabase 로그인
Supabase: 데이터 서비스 계정 연결
로그인 뒤 내 프로젝트 목록을 볼 수 있는지 확인합니다.
- ① npx supabase login을 실행합니다.
- ② 안내에 따라 브라우저를 열고 사용할 Supabase 계정으로 로그인합니다.
- ③ 화면에 인증 코드가 나오면 터미널의 인증 코드 입력란에 붙여 넣습니다.
- ④ npx supabase projects list가 인증 오류 없이 실행되면 연결 완료입니다. 아직 프로젝트가 없으면 빈 목록이 정상입니다.
로그인
npx supabase login연결 확인
npx supabase projects list이 단계에서는 데이터베이스나 테이블을 만들지 않아도 됩니다. 에이전트에게 서비스 요구와 함께 생성을 요청합니다.
10 · 에이전트 선택
Claude Code 또는 Codex, 하나를 선택
두 도구 모두 파일을 만들고 CLI 명령을 실행하는 에이전트입니다.
- Claude Code: Claude 계정으로 로그인하여 사용합니다.
- Codex: ChatGPT 계정으로 로그인하여 사용합니다.
- 선택한 도구 한 가지만 설치·로그인하면 실습할 수 있습니다.
- 앞에서 연결한 GitHub·Vercel·Supabase CLI는 같은 컴퓨터의 에이전트가 사용할 수 있습니다.
브라우저 채팅 대신, 프로젝트 폴더에서 실행한 터미널 에이전트에게 요청합니다.
10 · Claude Code 설치
Claude Code: OS에 맞는 명령 선택
Windows는 PowerShell, Mac은 터미널에서 실행합니다.
- ① 내 OS에 해당하는 설치 명령 한 개만 실행합니다.
- ② 설치가 끝날 때까지 기다립니다. 중간에 한동안 출력이 없을 수 있습니다.
- ③ 터미널을 닫고 새로 연 뒤 claude --version을 실행합니다.
- ④ 버전 번호가 나오면 설치 완료입니다. Git은 앞에서 설치해 두었습니다.
Windows · PowerShell
irm https://claude.ai/install.ps1 | iexMac · 터미널
curl -fsSL https://claude.ai/install.sh | bash설치 확인
claude --version10 · Claude Code 로그인
Claude Code: 처음 실행하고 로그인
claude를 실행하면 초기 설정과 계정 연결이 시작됩니다.
- ① 터미널에서 claude를 입력합니다. 처음에는 화면 테마 등을 선택할 수 있습니다.
- ② 로그인 선택에서 사용할 Claude 계정의 구독 방식으로 진행합니다.
- ③ 열린 브라우저에서 로그인하고 연결을 승인합니다. 코드 입력 안내가 있으면 화면대로 진행합니다.
- ④ 터미널의 대화 입력 화면으로 돌아오면 시작할 준비가 끝났습니다.
시작
claude계정을 다시 연결할 때 · Claude 대화창 안에서
/loginClaude 계정이 있어도 Code 이용 권한이 필요합니다. Console/API 과금 방식 대신 수업에서 준비한 계정 방식을 선택합니다.
10 · Codex 설치
Codex: Windows·Mac 공통 설치
Node.js가 준비되어 있으면 npm으로 설치합니다.
- ① npm install --global @openai/codex를 실행합니다.
- ② 설치가 끝나면 codex --version으로 버전을 확인합니다.
- ③ Windows에서는 PowerShell, Mac에서는 터미널을 사용합니다.
- ④ 선택한 에이전트가 Codex라면 다음 장에서 ChatGPT 계정을 연결합니다.
설치
npm install --global @openai/codex확인
codex --version10 · Codex 로그인
Codex: ChatGPT 계정 연결
브라우저 인증을 마친 뒤 터미널에서 상태를 확인합니다.
- ① codex login을 실행합니다.
- ② 열린 브라우저에서 사용할 ChatGPT 계정으로 로그인합니다.
- ③ 계정 연결을 완료하고 터미널로 돌아옵니다.
- ④ codex login status에 로그인 상태가 표시되면 성공입니다.
로그인
codex login상태 확인
codex login status이 강의는 ChatGPT 계정 로그인 방식입니다. API 키를 직접 입력할 필요가 없습니다.
11 · 시작 준비
프로젝트 폴더로 이동해 시작하기
탐색기나 Finder에서 my-service 폴더를 만든 뒤 그 위치로 이동합니다.
- ① 프로젝트 폴더의 전체 경로를 복사합니다.
- ② cd 뒤에 경로를 큰따옴표로 감싸 넣고 Enter를 누릅니다.
- ③ 아래에서 선택한 에이전트 명령 한 가지만 실행합니다.
- ④ 폴더 접근 확인이 나오면 방금 만든 프로젝트 폴더인지 확인합니다.
폴더 이동 · 내 실제 경로 사용
cd "프로젝트 폴더의 전체 경로"Claude Code를 선택했다면
claudeCodex를 선택했다면
codex에이전트는 시작한 폴더를 기준으로 파일을 읽고 만듭니다. 복잡한 폴더 구조를 미리 만들 필요는 없습니다.
11 · 준비 확인
설치·로그인 완료 체크
에이전트에게 상태 확인을 맡겨도 됩니다.
- GitHub: gh auth status에서 내 계정이 보입니다.
- Vercel: vercel whoami에서 내 사용자 이름이 보입니다.
- Supabase: npx supabase projects list가 인증 오류 없이 실행됩니다.
- Claude Code 또는 Codex: 대화 입력 화면이 열립니다.
에이전트에게 보낼 확인 요청
이 컴퓨터의 Node.js, Git, GitHub CLI, Vercel CLI,
Supabase CLI 설치 및 로그인 상태를 확인해 줘.
누락된 것이 있으면 항목별로 알려주고,
내가 해야 하는 브라우저 로그인만 안내해 줘.일반 터미널에는 명령어를, 에이전트 대화창에는 자연어 요청을 입력합니다.
12 · 개발 요청
이제 원하는 서비스를 말합니다
기능·사용자·화면을 구체적으로 적어 에이전트에게 전달합니다.
- 예시는 “나만의 할 일 관리 서비스”입니다. 원하는 아이디어로 바꿔도 됩니다.
- 에이전트가 필요한 프로젝트 초기화, 라이브러리 설치, 데이터 연결과 개발을 진행합니다.
- 결과 화면을 열어 보고 수정할 점을 이어서 요청합니다.
에이전트 대화창에 붙여 넣기
이 폴더에 나만의 할 일 관리 웹서비스를 만들어 줘.
할 일 추가, 완료 표시, 삭제 기능이 필요해.
휴대폰에서도 보기 편한 한국어 화면으로 만들어 줘.
Supabase에 저장해서 다시 접속해도 내용이 남게 해 줘.
필요한 프로젝트 설정과 데이터 연결은 직접 진행하고,
로컬에서 확인할 주소와 사용 방법을 알려줘.“버튼을 더 크게”, “마감일을 추가해 줘”처럼 결과를 보면서 수정 요청을 이어 갑니다.
12 · 배포 요청
저장과 배포도 프롬프트로 요청합니다
실행 결과는 배포 주소를 열어 확인합니다.
- GitHub 저장, Supabase 설정, Vercel 배포를 에이전트가 진행하도록 요청합니다.
- 사람이 처리해야 하는 브라우저 승인 등이 나오면 안내에 따라 진행합니다.
- 전달받은 주소에서 할 일 추가 → 새로고침 → 데이터 유지 여부를 확인합니다.
에이전트 대화창에 이어서 붙여 넣기
완성한 서비스를 내 GitHub 계정에 저장하고
내 Vercel 계정으로 배포해 줘.
필요한 Supabase 설정과 배포 환경 설정도 진행해 줘.
빌드나 배포 오류가 있으면 수정하고 다시 확인해 줘.
완료하면 GitHub 저장소 주소와 실제 접속 가능한
배포 주소를 알려줘. 유료 작업이 필요하면 먼저 알려줘.다음 수정도 “이 기능을 고치고 배포에 반영해 줘”라고 같은 에이전트에게 요청하면 됩니다.