Cursor AI 초보자 완벽 가이드

https://youtu.be/2aldTxnbNt0?si=SokrUc6YPdgyuJfW

Cursor AI Tutorial for Beginners (Full Course)

## Cursor AI 초보자 완벽 가이드 (Full Course) 요약 정리

이 비디오는 Riley Brown이 만난 최고의 개발자이자 Cursor 출시 이후 매일 사용해 온 Kihan Zang과 함께하는 Cursor에 대한 완벽한 가이드입니다 [1]. 이 강좌를 통해 시청자는 코딩 경험이 없더라도 Cursor를 사용하여 랜딩 페이지, 데스크톱 앱 등 상상할 수 있는 모든 것을 자신 있게 "바이브 코딩(vibe code)" 할 수 있게 됩니다 [1, 2]. 숙련된 개발자는 타임스탬프를 따라 Cursor 2.0과 같은 고급 기능으로 건너뛸 수 있습니다 [1, 2].

오늘 다룰 내용은 Cursor가 무엇인지, Cursor가 할 수 있는 모든 것을 상세히 다루고, MVP(최소 기능 제품)를 구축하여 풀 스택(full stack), 확장 가능하고 배포 가능한 앱으로 업그레이드할 것이며, 다른 바이브 코딩 도구들과 비교할 것입니다 [3]. 특히, 새로 출시된 **Cursor 2.0**의 기능들과 새로운 모델인 **Composer**를 포함하여 모든 기능을 다룰 예정입니다 [3].

### 1. Cursor란 무엇인가?

Cursor는 **IDE** (통합 개발 환경, Integrated Development Environment)이며, 기본적으로 VS Code의 사촌과 같습니다 [4]. Cursor는 대부분의 바이브 코딩 도구 중에서 아마도 **유일하게 진정한 IDE**입니다 [4].

**Cursor를 사용해야 하는 이유:**

1.  **견고한 기반 구축:** IDE로서 Cursor는 바이브 코딩 여정을 시작하는 데 매우 견고한 기반을 제공합니다 [4]. 실제 프로그래머들도 사용하기 때문에 기술적인 부분에 깊이 파고들 수 있으며, 성장의 상한선이 매우 높습니다 [5]. 많은 사람들이 Replet이나 V0ero 같은 다른 도구에서 시작했다가 확장할 때 Cursor로 이동하지만, 처음부터 Cursor를 배우면 플랫폼을 전환하는 번거로움 없이 필요한 모든 것을 갖출 수 있습니다 [5]. Cursor를 아는 것은 다른 도구를 쉽게 배울 수 있는 "매우 이전 가능한 기술"입니다 (Riley는 이를 Photoshop을 알면 Canva를 아는 것에 비유했습니다) [5, 6].
2.  **웹 기반이 아님 (Non-Web Based):** 경쟁사 대부분이 웹 기반이고 웹사이트 구축에 최적화되어 있지만, Cursor는 노트북에 설치되는 애플리케이션입니다 [6]. 이는 Cursor를 사용하여 **모바일 앱, 인디 게임, 랜딩 페이지, 임베디드 시스템** (예: 키보드 프로그래밍) 등 코드로 존재하는 모든 것을 구축할 수 있는 통제권을 제공합니다 [6, 7]. Replet과 같은 도구는 코드가 서버에 저장되지만, Cursor는 코드가 사용자 컴퓨터에 저장됩니다 [7].
3.  **로컬 (Local):** 모든 파일이 로컬 컴퓨터에 존재하므로, 파일을 드래그 앤 드롭하거나 데스크톱 뷰와 상호작용하는 등 개발 과정이 유연하고 사용자 통제 하에 있습니다 [8, 9]. (Riley는 이를 "코드 작성의 포토샵"이라고 표현했습니다) [9].
4.  **가장 확립된 플레이어:** Cursor는 바이브 코딩 분야에서 가장 확고한 위치를 차지하고 있으며, 전문 엔지니어들도 사용합니다 [9, 10]. 이는 **VS Code의 모든 확장 기능** (extensions)을 사용할 수 있고, Claude Code, Codeex, Gemini CLI와 같은 최고의 코딩 모델을 연결할 수 있는 거대한 커뮤니티와 이점을 제공합니다 [10, 11].
5.  **Agent 2.0 출시:** 최근 출시된 Agent 2.0은 특히 초보자에게 큰 변화를 가져왔습니다 [11]. 이는 ChatGPT의 채팅 기반 인터페이스에서 영감을 받았으며, 사용자가 쉽게 시작할 수 있도록 돕습니다 [11]. Cursor 2.0은 여러 에이전트를 동시에 실행할 수 있는 가장 "무거운 인공지능 코딩 플랫폼"입니다 [11].

### 2. Cursor 다운로드 및 기본 개념

*   **다운로드:** cursor.com에서 Mac OS 또는 Windows용으로 다운로드할 수 있습니다 [12, 13].
*   **프로젝트 생성:** 다른 바이브 코딩 도구와 달리 Cursor는 "무엇을 만들고 싶습니까?"라는 입력 필드가 없습니다 [13]. 프로젝트는 코드가 사는 곳이며, 이는 컴퓨터의 **폴더** (디렉토리)를 여는 것과 같습니다 [14, 15].
*   **파일 생성:** 파일은 확장자(`.py`, `.txt`, `.md` 등)를 통해 유형이 구분됩니다 [16].
*   **AI 에이전트:** Cursor의 에이전트는 일반 AI와 달리 파일을 **생성**하고 **편집**하며 코드를 작성하는 도구를 갖추고 있습니다 [17]. (데모로 간단한 Python 숫자 맞추기 게임을 작성했습니다) [18].
*   **터미널을 이용한 코드 실행:** Cursor에는 코드를 실행하는 "재생 버튼"이 없기 때문에, 에이전트는 사용자가 컴퓨터와 상호작용하여 코드를 실행할 수 있는 **터미널** 사용법을 알려줍니다 [19]. Cursor 내 터미널은 시스템 터미널과 동일합니다 [19, 20].

**대규모 프로젝트 구조:**
Kihan은 대규모 프로젝트의 예시로 `glass AI chat` 리포지토리를 보여줍니다 [21].
*   **프론트엔드 (Front end):** 사용자가 보고 상호작용하는 부분 (예: `source` 폴더와 구성 요소) [22].
*   **백엔드 (Back end):** 사용자가 직접 보지 못하는 기능 (예: 데이터 처리, AI 사용) [22].

**랜딩 페이지 구축 데모:**
*   Kihan은 에이전트 (Sonnet 4.5 모델 사용)에게 Vibe Code를 조사하고 랜딩 페이지를 만들어 **로컬에서 실행**하도록 요청했습니다 [23].
*   로컬 실행은 사용자의 컴퓨터가 서버 역할을 하여 파일을 실행하는 것을 의미하며 개발 속도를 높입니다 [24, 25]. 웹 브라우저에 `localhost` 주소를 붙여넣어 앱에 접근합니다 [25].
*   로컬 환경이므로 오류 발생 시 (예: 웹페이지가 표시되지 않을 때) 에이전트에게 **직접 이유를 물어보고** 수정할 수 있습니다 [26, 27].

### 3. MVP(밈 생성기) 구축 및 Cursor 2.0 기능

본격적으로 **밈 생성기** MVP를 구축하며 Cursor의 고급 기능을 탐색합니다 [28].

**Cursor 2.0의 세 가지 모드 (Shift + Tab으로 전환 가능):**

1.  **Ask (질문):** 코드를 실행하거나 파일을 편집하지 않고 순수하게 질문에만 답변합니다 (학습에 유용) [29].
2.  **Agent (에이전트):** 모든 도구를 완전히 제어하며, 코드 작성 및 서버 실행을 합니다 [29].
3.  **Plan (계획):** 코드를 작성하지 않고, 질문을 던지며 개발 계획을 수립합니다 [29, 30].

*   **Composer 1.0 (커서 자체 모델):** 계획 모드에서 사용되었습니다. Composer 1은 Sonnet 4.5나 GPT 모델보다 **훨씬 빠릅니다** [31].
*   **계획 수정:** 에이전트가 생성한 계획 (임시 Markdown 파일)은 **직접 편집 가능**하며, 편집된 내용은 'Build'를 클릭할 때 에이전트에 반영됩니다 [32, 33].
*   **Cursor 규칙 (Rules):**
    *   **생성:** `Ctrl + Shift + P`를 눌러 새 규칙을 만들 수 있습니다 [34]. (예: "기본 색상으로 보라색/파란색 그라데이션을 사용하지 마십시오") [35].
    *   **유형:** **사용자 규칙** (모든 프로젝트에 적용)과 **프로젝트 규칙** (현재 폴더에만 적용)이 있습니다 [35].
    *   **하위 디렉토리 규칙:** 특정 폴더(예: 백엔드 폴더) 내에만 적용되는 규칙을 중첩하여 설정할 수 있습니다 [36, 37].
*   **인앱 브라우저:** Cursor 2.0의 새로운 기능으로, Cursor 내부에 브라우저 탭을 열어 로컬 앱을 보며 개발할 수 있습니다. 이는 다른 바이브 코딩 도구처럼 모든 것을 자체 포함하도록 만듭니다 [38].
*   **@Browser 기능:** 에이전트에게 현재 브라우저의 화면(스크린샷)을 보고 텍스트 넘침과 같은 문제를 수정하도록 요청할 수 있습니다 [39, 40]. 단, 이 기능은 많은 컨텍스트(context)를 소비합니다 [40].
*   **Git 설정:** 코드를 체크포인트(버전)로 저장하기 위해 Git 저장소(repository)를 초기화했습니다 [41, 42].
*   **다중 동시 에이전트 (Concurrent Agents):** 텍스트 오버라이트 버그를 해결하기 위해 Kihan은 Max 플랜으로 업그레이드 후, GPT, Sonnet, Composer 세 가지 에이전트를 동시에 실행했습니다 [42, 43]. 가장 적은 코드 변경으로 문제를 해결한 버전을 선택하는 것이 코드 비대화(code bloat)를 막는 좋은 팁입니다 [44].
*   **음성 입력 (Voice Feature):** 에이전트에게 길고 상세한 프롬프트를 말로 전달할 수 있습니다 [45, 46].
*   **UI/UX 리팩토링:** 밈 선택기를 왼쪽 수직 사이드바로, 캔버스를 주 화면으로, 유틸리티 컨트롤을 하단의 떠다니는 메뉴바로 재배치하도록 요청했습니다 (Canva/FigJam 방식) [47, 48].

### 4. 풀 스택 앱: 데이터베이스 및 Next.js 리팩토링

**데이터베이스 및 인증 추가:**

*   **명령어 (Commands) 생성:** 자주 사용하는 명령어 (예: Git 변경 사항을 체크포인트로 만드는 `/commit`)를 만들었습니다 [49, 50].
*   **문서 및 인덱싱 (Indexing and Docs):** Instant DB (Firebase/Superbase와 유사한 데이터베이스)를 사용하기 위해, Kihan은 Instant DB의 **문서 링크**를 Cursor에 인덱싱했습니다. 이는 AI가 해당 데이터베이스의 특정 언어와 코드를 이해하도록 학습시키는 과정입니다 [51-53].
*   **Next.js 리팩토링:** 앱을 쉽게 배포하기 위해 바닐라 JS 코드를 **Next.js** 프레임워크로 리팩토링하도록 요청했습니다 [54, 55]. (첫 번째 Composer 시도는 Next 14 버전을 사용하려다 실패했고, Kihan은 Next 16으로 수정하여 Sonnet 4.5에게 다시 요청했습니다) [56, 57].
*   **Git으로 복구:** 실패한 Next.js 코드를 제거하기 위해 "Discard All" 기능을 사용하여 이전 체크포인트로 돌아갔습니다 [58, 59].
*   **데이터베이스 스키마 푸시:** Kihan은 Instant DB CLI 명령을 사용하여 데이터베이스의 테이블 정의 및 **권한(permissions) 규칙**을 설정했습니다 [60, 61]. 규칙은 누가 무엇을 볼 수 있는지, 누가 편집할 수 있는지 정의합니다 (예: 모든 사람이 밈을 볼 수 있지만, 작성자만 수정/삭제할 수 있음; 인증된 사용자만 투표 가능) [62, 63].
*   **인증 테스트:** Instant DB의 기본 인증 방식인 **매직 링크** (이메일로 6자리 코드 전송)를 통해 로그인하고 밈을 성공적으로 게시했습니다 [63-65].
*   **데이터 확인:** Instant DB 대시보드의 Explorer에서 사용자와 게시된 밈이 실시간으로 등록되는 것을 확인했습니다 [66].
*   **에디터에서 컨텍스트 추가:** 에이전트에게 특정 파일(`app/feed/page.tsx`)을 참조하도록 `@` 명령어를 사용하여 요청함으로써, 밈을 탭하면 전체 화면으로 볼 수 있는 기능을 추가했습니다 [67, 68].

### 5. Vercel을 통한 배포 (Deployment)

*   **배포 학습:** Kihan은 Ask 모드를 사용하여 Next.js에 가장 적합한 **Vercel CLI**를 통한 배포 방법을 배웠습니다 [69, 70].
*   **GitHub 연결:** 로컬 Git 저장소를 GitHub에 푸시하여 클라우드 버전을 설정했습니다 [70, 71].
*   **CLI 로그인:** 에이전트에게 Vercel CLI를 통해 코드를 커밋하고 배포하도록 요청했습니다 [72]. AI는 "Enter"를 누르거나 웹에서 로그인하는 등의 인간 상호작용을 수행할 수 없으므로, Kihan은 터미널에서 Vercel 로그인 명령어를 수동으로 실행했습니다 [71, 73].
*   **환경 변수 처리:** 배포 중 Vercel이 Instant DB의 비밀 키(environment variable)를 요구하자, Kihan은 에이전트에게 키를 제공했고, 에이전트가 이를 Vercel에 추가하여 배포를 완료했습니다 [74, 75]. (환경 변수는 외부에 공유되거나 GitHub에 푸시되어서는 안 됩니다) [74].
*   **배포 성공:** 앱이 Vercel을 통해 인터넷에 공개되었으며 (호스팅), Riley도 로그인하여 밈을 게시하고 투표할 수 있음을 확인했습니다 [76, 77].

### 6. 경쟁사 비교 (Cursor vs. Replet, Vzero, Lovable)

Cursor와 다른 바이브 코딩 도구들의 주요 특징은 다음과 같습니다 [78]:

| 범주 | Cursor | Lovable | Vzero | Replet |
| :--- | :--- | :--- | :--- | :--- |
| **백엔드 지원** | **보통** (자유롭게 선택 가능: Instant DB, Superbase, Firebase 등) [79] | **쉬움** (Lovable Cloud 사용, Superbase 래퍼로 고정됨) [80] | **중간** (Superbase 제휴, 수동 연결 필요) [81] | **우수** (내부 솔루션 제공 및 외부 DB 연결 용이) [82, 83] |
| **속도** | **최고** (Composer 1.0이 매우 빠름) [84] | 빠름 [84] | 빠름 [85] | **느림** (더 강력하나 느림, 계획 모드처럼 질문 많이 함) [85, 86] |
| **모델 선택** | **유연함** (Composer, Sonnet, GPT 등 프론티어 모델 모두 선택 가능, 로컬 모델 사용 가능) [87, 88] | Anthropic 및 GPT5 (선택 가능) [88, 89] | Vzero 자체 모델 (Next.js에 특화됨) [88, 89] | Anthropic 및 GPT5 (선택 가능) [88, 89] |
| **공유 난이도** | **높음** (Vercel, GitHub 수동 설정 필요. 4위) [87, 90] | 자동 호스팅 링크 제공 [91]. (3위) [92] | **쉬움** (Vercel에서 자동 배포 및 맞춤 도메인 제공. 1위) [90, 91] | 자동 호스팅 링크 제공 [91]. (2위) [92] |
| **사용 경험** | **프로슈머 지향** (기술적 배경 요구, 최고 수준의 유연성/스킬 천장 없음) [87, 93] | **가장 쉬움** (어린 사용자 대상, 낮은 진입 장벽) [94] | 단계별 상호작용 [95] | 프롬프트 전송 후 확인 방식 [95] |
| **가격** | **유연함** (모델 비용 통제 가능, 최고 플랜 $200/월 + 토큰 비용) [96-98] | Vzero와 비슷 (호스팅 외 프리미엄 부과) [99] | Lovable과 비슷 (호스팅 외 프리미엄 부과) [98] | 에이전트 런타임에 따른 비용 증가 위험이 가장 높음 [98] |

Cursor는 유연성이 뛰어나고 다른 플랫폼에서는 불가능했을 복잡한 작업(예: 기존 데이터베이스에 연결된 대기자 명단 웹사이트 구축)을 수행할 수 있는 "안전한 장소"입니다 [100, 101].

**결론 및 권장 사항:**
바이브 코딩을 배우는 가장 좋은 방법은 **프로젝트를 선택하고 직접 실행하는 것**입니다 [102, 103]. (Kihan은 이 영상을 끝까지 시청했다면, 이제 Cursor의 Ask 모드를 사용하여 모르는 것을 배우면서 코딩을 시작할 준비가 되었다고 강조했습니다) [103].