웹 개발을 시작하면서 여러 도구들을 접하게 되는데, 각각이 어떤 역할을 하는지, 왜 필요한지 정리해보고자 한다.
1. Cursor - 코드 작성과 학습의 시작점
Cursor는 AI가 내장된 코드 에디터이다. Visual Studio Code와 비슷한 인터페이스를 가지고 있지만, AI 도우미가 함께한다는 점이 특별하다.
주요 기능:
- 코드를 작성할 수 있는 편집 환경 제공
- "이 기능을 만들어줘"라고 요청하면 AI가 코드를 생성해줌
- 복잡한 설정 없이 바로 개발 시작 가능
개발 초보자에게 Cursor가 매력적인 이유는 진입 장벽이 낮다는 점이다. 기존에는 개발 환경을 구축하는 것부터 어려웠지만, Cursor는 설치하자마자 AI의 도움을 받아 코드를 작성하고 결과를 확인할 수 있다.
2. GitHub - 코드의 안전한 보관소
GitHub는 코드를 저장하고 관리하는 온라인 플랫폼이다. 단순한 저장소를 넘어서 버전 관리와 협업의 중심 역할을 한다.
핵심 기능:
- 코드의 버전을 관리하여 이전 상태로 되돌리기 가능
- 클라우드 기반으로 어디서나 코드에 접근 가능
- 여러 개발자가 함께 작업할 수 있는 협업 환경 제공
Cursor에서 작성한 코드를 GitHub에 올려두면 두 가지 이점이 있다. 첫째는 백업의 안전성이고, 둘째는 나중에 Vercel과 연동하여 배포할 때 필요한 연결고리 역할을 한다는 것이다.
3. Vercel - 웹사이트를 세상에 공개하는 플랫폼
Vercel은 웹 애플리케이션을 배포하는 서비스이다. 로컬 환경에서만 돌아가던 프로젝트를 누구나 접근할 수 있는 웹사이트로 만들어준다.
예를 들어 http://localhost:3000에서만 보이던 프로젝트가 https://my-app.vercel.app이라는 공개 주소를 갖게 되는 것이다.
배포의 의미:
- 포트폴리오나 데모를 외부에 공유 가능
- GitHub와 연결하면 코드 변경 시 자동 배포
- Next.js, React 등 정적 웹사이트에 최적화
개발자에게 배포는 단순히 기술적인 과정이 아니라, 자신의 작업물을 세상에 보여주는 중요한 단계이다.
4. Vercel CLI - 배포 과정의 자동화
Vercel CLI는 터미널에서 명령어로 Vercel 서비스를 사용할 수 있게 해주는 도구이다.
vercel # 프로젝트를 Vercel에 배포
vercel --prod # 정식 주소로 배포
vercel login # 계정 로그인웹 브라우저에서 Vercel 사이트에 들어가 복잡한 설정을 거치는 대신, 명령어 한 줄로 배포가 완료된다. 반복적인 배포 작업이 많아질수록 CLI의 효율성은 더욱 빛을 발한다.
도구들 간의 연결 관계
이 네 가지 도구는 독립적이면서도 서로 연결되어 하나의 개발 워크플로우를 만든다.
기본 흐름:
Cursor (코드 작성)
↓
GitHub (코드 백업 및 버전 관리)
↓
Vercel (GitHub에서 코드를 가져와 웹사이트로 배포)직접 배포 흐름:
Cursor (코드 작성) → Vercel CLI → Vercel (바로 배포)GitHub를 거치지 않고도 배포가 가능하지만, 코드 관리와 자동 배포의 편의성을 고려하면 GitHub를 포함한 전체 흐름을 사용하는 것이 더 효율적이다.
학습자를 위한 권장 순서
개발을 시작하는 단계에서는 다음 순서로 접근하는 것이 이상적이다:
- Cursor 설치 및 기본 프로젝트 생성 - AI의 도움을 받아 간단한 웹 애플리케이션 만들어보기
- GitHub 계정 생성 및 저장소 연결 - 작성한 코드를 안전하게 백업하기
- Vercel CLI 설치 및 배포 실습 - 로컬에서 만든 프로젝트를 실제 웹사이트로 공개하기
각 도구의 개별적인 기능을 이해하는 것도 중요하지만, 전체적인 개발 흐름 속에서 어떻게 연결되는지 파악하는 것이 더욱 중요하다. 이 네 가지 도구를 모두 활용할 수 있게 되면, 아이디어부터 배포까지의 전 과정을 혼자서도 완주할 수 있는 개발자가 될 수 있다.
Vercel CLI 설치 시 주의사항 (macOS)
최신 macOS에서는 권한 문제로 인해 Vercel CLI 설치가 실패하는 경우가 있다. 이는 시스템 보안 강화로 인한 것으로, 관리자 권한 없이도 안전하게 설치할 수 있는 방법이 있다.
안전한 설치 방법
1단계: 사용자 전용 npm 디렉토리 생성
mkdir ~/.npm-global2단계: npm 전역 설치 위치 변경
npm config set prefix ~/.npm-global3단계: PATH에 새로운 경로 추가
echo 'export PATH=$PATH:$HOME/.npm-global/bin' >> ~/.zshrc
source ~/.zshrc4단계: Vercel CLI 설치
npm install -g vercel5단계: 설치 확인
vercel --version설치 후 파일 구조 이해
이 방법으로 설치하면 다음과 같은 구조로 파일들이 배치된다:
- ~/.npm-global/bin/vercel: 실행 가능한 Vercel CLI 명령어 파일
- ~/.npm-global/lib/node_modules/vercel: 설치된 Vercel CLI 소스 파일들
- .zshrc: 실행 경로를 시스템이 인식하도록 등록한 환경 설정 파일
이제 vercel 명령어를 어느 프로젝트 폴더에서든 사용할 수 있다.
Vercel 계정 연동
설치가 완료되면 GitHub 계정과 연동하여 로그인한다:
vercel login로그인 방법 선택 화면에서 "Continue with GitHub"를 선택하면 된다. 이미 GitHub 계정이 있다면 간단하게 연동이 완료된다.
Vercel: Build and deploy the best web experiences with the AI Cloud – Vercel
Vercel gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized web.
vercel.com
*Git과 GitHub - 헷갈리기 쉬운 두 개념 이해하기
개발 입문자들이 가장 혼란스러워하는 부분 중 하나가 바로 "Git과 GitHub의 차이"이다. 한 문장으로 요약하면 Git은 도구이고, GitHub는 그 도구를 위한 온라인 서비스이다.
Git이란? (버전 관리 도구)
Git은 코드를 버전별로 관리해주는 도구이다. 마치 워드 문서에서 "되돌리기" 하는 것처럼, 과거 코드로 되돌아가거나 누가 언제 무엇을 수정했는지를 추적할 수 있다.
Git의 특징:
- 내 컴퓨터에 설치되는 로컬 도구
- 코드를 백업하고 이전 버전으로 복원 가능
- 여러 사람이 동시에 작업해도 충돌 없이 병합 가능
- git init, git add, git commit, git push 등의 명령어로 조작
Git이 필요한 이유는 명확하다. 실수했을 때 이전 코드로 쉽게 복구할 수 있고, 코드를 실시간으로 기록하고 정리하는 습관을 갖게 된다. 또한 협업을 할 때 "누가 무엇을 바꿨는가"를 추적할 수 있다.
GitHub란? (온라인 코드 저장소)
GitHub는 Git으로 버전 관리된 코드를 온라인에 저장하고 공유할 수 있게 해주는 클라우드 서비스이다. 즉, Git은 내 컴퓨터의 로컬 저장소이고, GitHub는 인터넷상의 원격 저장소라고 보면 된다.
GitHub의 특징:
- 웹 브라우저에서 접근 가능
- Git을 기반으로 동작 (Git이 있어야 제대로 사용 가능)
- 오픈소스 코드 공유, 협업, 포트폴리오 관리에 유리
Git과 GitHub의 관계 정리
구분GitGitHub
| 위치 | 내 컴퓨터 (로컬) | 인터넷 (클라우드) |
| 역할 | 버전 관리 도구 | 버전 관리된 코드를 저장하고 공유 |
| 독립성 | 단독 사용 가능 | Git이 있어야 제대로 사용 가능 |
| 사용 예시 | git commit, git status | git push origin main, Pull Request |
실제 사용 흐름
Git만 사용하는 경우:
[내 컴퓨터 폴더] → git으로 수정 내역 기록 → 혼자 작업, 외부 공유 불가Git + GitHub를 함께 사용하는 경우:
[내 컴퓨터 폴더] → git으로 작업 후 → GitHub에 push해서 백업
↓
[GitHub 저장소] → 친구나 클라이언트와 코드 공유 → Vercel과 연결하여 자동 배포개발자가 GitHub 계정을 꼭 만들어야 하는 이유
GitHub는 단순한 저장소가 아니라 개발자의 필수 도구이다. 코드 백업을 자동으로 할 수 있고, 팀 작업 시 협업의 중심 역할을 한다. 또한 Vercel과 같은 배포 도구와 쉽게 연결되며, 나중에 포트폴리오로 공개할 수도 있다.
Cursor에서 작성한 코드를 GitHub에 올려두면 두 가지 이점이 있다. 첫째는 백업의 안전성이고, 둘째는 나중에 Vercel과 연동하여 배포할 때 필요한 연결고리 역할을 한다는 것이다.
