테마
개발 환경 세팅
학습 목표
- Cursor, Github, Node.js, Cloudflare 4가지 도구의 역할을 설명할 수 있다.
- 각 도구를 설치하고 초기 설정을 완료할 수 있다.
- 로컬 개발부터 배포까지의 전체 워크플로우를 이해할 수 있다.
- Github와 Cloudflare를 연결하여 자동 배포 파이프라인을 구축할 수 있다.
전체 도구 구성
우리가 사이트를 만들고 세상에 공개하기까지 4가지 도구가 필요하다. 각 도구는 서로 다른 역할을 담당하며, 아래 순서대로 설치하면 된다.
| 도구 | 비유 | 핵심 역할 |
|---|---|---|
| Cursor | 코드 편집기 + 인공지능 팀원 | AI가 코드를 대신 짜주는 편집기 |
| Github | 코드를 위한 구글 드라이브 | 코드 저장 및 버전 관리 |
| Node.js | 사이트 재료를 가져오는 프로그램 | 패키지 설치, 빌드, 미리보기 |
| Cloudflare | 사이트를 세상에 공개하는 관문 | 전 세계 배포 및 도메인 관리 |
1. Cursor 세팅
Cursor란?
Cursor = 코드 편집기 + 인공지능 팀원
일반적인 코드 편집기(VS Code 등)에 AI 기능이 통합된 도구이다. 채팅창에 한국어로 "이런 기능 만들어줘"라고 요청하면, AI가 코드를 직접 작성해준다. 코딩을 모르는 사람도 대화만으로 웹사이트를 만들 수 있는 핵심 도구이다.
설치 과정
- cursor.com 접속
- Download 클릭하여 설치 파일 다운로드
- 설치 후 실행
- 회원가입 (구글 계정 연동 추천)
- 설정에서 Chat Language를 Korean으로 변경
- IDE Layout 선택 (기본값 사용해도 무방)
요금제
| 플랜 | 가격 | 특징 |
|---|---|---|
| Free Trial | 무료 (1주일) | 모든 기능 체험 가능 |
| Pro | 월 $20 | AI 요청 무제한, 추천 플랜 |
| Business | 월 $40 | 팀 기능 포함 |
팁: 무료 체험 기간 1주일 동안 충분히 사용해보고, 마음에 들면 Pro 플랜을 구독하는 것을 추천한다.
2. Github 세팅
Github이란?
Github = 코드를 위한 구글 드라이브
구글 드라이브에 문서를 저장하듯이, Github에는 코드를 저장한다. 단순히 저장만 하는 것이 아니라 **변경 이력(버전)**도 관리해준다. 언제 어떤 코드를 수정했는지 전부 기록되기 때문에, 실수로 코드를 망가뜨려도 이전 버전으로 되돌릴 수 있다.
설정 과정
- github.com 접속 후 회원가입
- Github Desktop 설치 (github.com/desktop)
- Github Desktop에서 로그인
- New Repository 생성
- Repository name: 프로젝트 이름 입력
- "Keep this code private" 옵션 체크 (코드 비공개)
- Publish repository 클릭
주요 용어
| 용어 | 비유 | 의미 |
|---|---|---|
| Repository | 프로젝트 폴더 | 코드가 저장되는 공간 |
| Commit | 저장 버튼 | 변경사항을 기록하는 행위 |
| Push | 업로드 | 로컬 변경사항을 Github에 올리기 |
| Pull | 다운로드 | Github의 최신 코드를 받아오기 |
중요: Repository를 생성할 때 반드시 Private(비공개)으로 설정한다. Public으로 만들면 코드가 전 세계에 공개되고, 나중에 API KEY 같은 민감 정보가 노출될 위험이 있다.
3. Node.js 설치
Node.js와 npm이란?
npm = Node Package Manager = 사이트 만들 때 필요한 재료를 가져오는 프로그램
웹사이트를 만들 때는 다양한 **라이브러리(미리 만들어진 코드 조각)**가 필요하다. npm은 이런 라이브러리를 인터넷에서 자동으로 다운로드해주는 프로그램이다. Node.js를 설치하면 npm이 함께 설치된다.
설치 과정
- nodejs.org 접속
- LTS 버전 다운로드 (안정 버전 추천)
- 설치 파일 실행 후 기본 옵션으로 설치
- 터미널(또는 명령 프롬프트)에서
node -v입력하여 설치 확인
핵심 명령어 3가지
프로젝트를 진행하면서 계속 사용하게 될 명령어는 딱 3가지이다.
| 명령어 | 역할 | 비유 |
|---|---|---|
npm install | 필요한 재료(라이브러리) 설치 | 요리 재료 구매 |
npm run dev | 로컬에서 미리보기 | 시식 테스트 |
npm run build | 배포용으로 최종 포장 | 완성된 요리 포장 |
팁:
npm run dev를 실행하면 보통http://localhost:3000주소로 브라우저에서 사이트를 미리 확인할 수 있다. 코드를 수정하면 실시간으로 반영되기 때문에, 수정하고 바로 확인하는 반복이 매우 편리하다.
4. Cloudflare 세팅
Cloudflare란?
Cloudflare = 내가 만든 사이트를 세상에 공개하는 관문
코드를 아무리 잘 짜도 내 컴퓨터 안에만 있으면 아무도 볼 수 없다. Cloudflare는 우리가 만든 사이트를 전 세계 어디서나 접속 가능하도록 만들어주는 서비스이다.
핵심 기능: 자동 배포
Cloudflare의 가장 강력한 기능은 자동 배포이다. Github에 코드를 올리기만 하면, Cloudflare가 알아서 최신 버전을 감지하고 배포한다.
설정 과정
- dash.cloudflare.com 접속 후 회원가입
- 좌측 메뉴에서 Workers 및 Pages 클릭
- 응용 프로그램 만들기 클릭
- Pages 탭 선택
- Github 연결 클릭 → Github 계정 연동
- 배포할 Repository 선택
- 빌드 설정 입력:
- 빌드 명령어:
npm run build - 출력 디렉터리:
.next(또는 프로젝트에 맞게)
- 빌드 명령어:
- 저장 및 배포 클릭
Cloudflare 배포 결과
배포가 완료되면 프로젝트이름.pages.dev 형태의 무료 도메인이 자동으로 부여된다. 이 주소로 누구나 사이트에 접속할 수 있다.
전체 워크플로우 정리
4가지 도구를 모두 설치하고 나면, 다음과 같은 개발 → 배포 흐름이 완성된다.
핵심 정리
| 순서 | 도구 | 할 일 | 완료 기준 |
|---|---|---|---|
| 1 | Cursor | 설치 + Chat Language Korean 설정 | AI 채팅 가능 |
| 2 | Github | 회원가입 + Github Desktop 설치 + Private Repo 생성 | Repository 생성 완료 |
| 3 | Node.js | LTS 버전 설치 | node -v 명령어 정상 출력 |
| 4 | Cloudflare | 회원가입 + Github 연결 + 프로젝트 생성 | 프로젝트.pages.dev 접속 가능 |
다음 단계: 개발 환경 세팅이 완료되었다면, 이제 v0 AI 빌더를 사용하여 초기 화면을 설계하는 단계로 넘어간다.