제1강: Cursor 소개와 설치

AI 코딩의 새로운 시대를 여는 첫 걸음

난이도: 초급 예상 시간: 30분 카테고리: 기초

학습 목표

  • Cursor AI의 핵심 개념과 특징 이해하기
  • Cursor와 기존 코드 에디터의 차이점 파악하기
  • 운영체제별 Cursor 설치 및 초기 설정하기
  • 첫 번째 AI 지원 코드 작성 경험하기

Cursor AI란 무엇인가?

Cursor는 AI를 코드 에디터에 깊게 통합한 차세대 개발 환경입니다. VS Code를 기반으로 하지만, AI가 단순한 보조 도구가 아닌 핵심 기능으로 작동합니다.

Cursor의 탄생 배경

2022년, OpenAI 출신 엔지니어들이 "AI와 함께 코딩하는 것이 기본이 되는 미래"를 상상하며 Cursor를 만들었습니다. 기존의 AI 코딩 도구들이 플러그인 형태로 제공되는 것과 달리, Cursor는 처음부터 AI를 위해 설계되었습니다.

기존 에디터 vs Cursor

기존 코드 에디터

  • 수동 코드 작성 중심
  • AI는 선택적 플러그인
  • 파일 단위 컨텍스트
  • 제한적인 자동완성

Cursor AI

  • AI 협업 코딩
  • AI가 핵심 기능
  • 프로젝트 전체 이해
  • 예측적 코드 생성

Cursor의 핵심 기능

Tab 자동완성

다음에 작성할 코드를 AI가 예측하여 Tab 키만으로 전체 함수나 로직을 완성할 수 있습니다.

// 타이핑: function calculate
// Tab 누르면:
function calculateTotal(items) {
    return items.reduce((sum, item) => {
        return sum + (item.price * item.quantity);
    }, 0);
}

AI Chat

코드에 대해 질문하고, 설명을 듣고, 수정사항을 즉시 적용할 수 있는 대화형 AI입니다.

이 함수를 TypeScript로 변환하고 에러 처리를 추가해줘

네, TypeScript로 변환하고 에러 처리를 추가하겠습니다:

interface Item {
    price: number;
    quantity: number;
}

function calculateTotal(items: Item[]): number {
    try {
        if (!Array.isArray(items)) {
            throw new Error('Items must be an array');
        }
        
        return items.reduce((sum, item) => {
            if (typeof item.price !== 'number' || typeof item.quantity !== 'number') {
                throw new Error('Invalid item data');
            }
            return sum + (item.price * item.quantity);
        }, 0);
    } catch (error) {
        console.error('Error calculating total:', error);
        return 0;
    }
}

Cmd+K (편집 명령)

선택한 코드에 대해 AI 명령을 내려 즉시 편집할 수 있습니다.

Cmd+K: "이 함수를 async/await로 변경"

→ Promise 기반 코드가 async/await로 자동 변환됩니다

Composer

여러 파일을 동시에 편집하여 대규모 리팩토링이나 기능 구현을 쉽게 할 수 있습니다.

Cursor 설치하기

Step 1: 다운로드

공식 웹사이트 cursor.sh에서 운영체제에 맞는 버전을 다운로드합니다.

Windows 설치

  1. Cursor-Setup-x.x.x.exe 파일 다운로드
  2. 다운로드된 파일 실행
  3. 설치 마법사 따라 진행
  4. 바탕화면에 Cursor 아이콘 생성 확인
PowerShell 
# 설치 확인
cursor --version

macOS 설치

  1. Cursor.dmg 파일 다운로드
  2. DMG 파일 열기
  3. Cursor를 Applications 폴더로 드래그
  4. 처음 실행 시 보안 경고 승인
Terminal 
# Homebrew로 설치 (선택사항)
brew install --cask cursor

# 설치 확인
cursor --version

Linux 설치

  1. AppImage 또는 .deb/.rpm 파일 다운로드
  2. 파일에 실행 권한 부여
  3. 패키지 매니저로 설치
Terminal 
# AppImage 실행
chmod +x Cursor-x.x.x.AppImage
./Cursor-x.x.x.AppImage

# Debian/Ubuntu
sudo dpkg -i cursor_x.x.x_amd64.deb

# 설치 확인
cursor --version

초기 설정

1. 첫 실행과 계정 생성

Cursor 환영 화면
  1. Cursor를 처음 실행하면 환영 화면이 나타납니다
  2. "Sign up" 버튼을 클릭하여 계정을 생성합니다
  3. 이메일 인증을 완료합니다
  4. 무료 플랜으로 시작할 수 있습니다

2. AI 모델 선택

Cursor는 다양한 AI 모델을 지원합니다:

GPT-4

가장 강력한 모델

추천

Claude 3.5

코딩에 최적화

GPT-3.5

빠른 응답 속도

3. 테마와 단축키 설정

// settings.json
{
    "cursor.aiModel": "gpt-4",
    "cursor.tabAutocompleteEnabled": true,
    "cursor.chatEnabled": true,
    "editor.theme": "Cursor Dark",
    "editor.fontSize": 14,
    "editor.fontFamily": "Cascadia Code"
}

첫 번째 AI 코딩 체험

Hello AI World!

Cursor의 AI 기능을 처음 경험해보겠습니다.

Step 1: 새 파일 생성

Cmd/Ctrl + N으로 새 파일을 만들고 hello-ai.js로 저장합니다.

Step 2: AI 자동완성 체험

다음과 같이 입력하고 Tab을 눌러보세요:

// Create a function that generates personalized greetings

↓ Tab 키를 누르면...

function generateGreeting(name, timeOfDay, language = 'en') {
    const greetings = {
        en: {
            morning: `Good morning, ${name}!`,
            afternoon: `Good afternoon, ${name}!`,
            evening: `Good evening, ${name}!`,
            night: `Good night, ${name}!`
        },
        ko: {
            morning: `좋은 아침이에요, ${name}님!`,
            afternoon: `좋은 오후예요, ${name}님!`,
            evening: `좋은 저녁이에요, ${name}님!`,
            night: `편안한 밤 되세요, ${name}님!`
        }
    };
    
    return greetings[language]?.[timeOfDay] || `Hello, ${name}!`;
}

Step 3: Chat으로 개선하기

Cmd/Ctrl + L로 Chat을 열고 다음과 같이 질문해보세요:

"이 함수에 현재 시간을 자동으로 감지하는 기능을 추가해줘"

AI가 코드를 개선하여 제안합니다!

Step 4: Cmd+K로 즉시 수정

함수를 선택하고 Cmd/Ctrl + K를 누른 후:

"Add error handling and JSDoc comments"

실습: 첫 프로젝트 설정

간단한 Todo 앱 시작하기

Cursor AI의 도움을 받아 Todo 앱의 기초를 만들어봅시다.

1. 프로젝트 폴더 생성

mkdir cursor-todo-app
cd cursor-todo-app
cursor .

2. HTML 파일 생성

index.html 파일을 만들고 다음을 입력:

// Create a modern todo app HTML structure with Tailwind CSS

Tab을 눌러 AI가 생성하는 것을 확인하세요!

3. JavaScript 로직 추가

app.js 파일을 만들고 AI Chat에 요청:

"Create a complete todo app with add, delete, and toggle functionality using vanilla JavaScript"

자주 묻는 질문

Q: Cursor는 유료인가요?

A: 무료 플랜으로 시작할 수 있습니다. 무료 플랜은 GPT-3.5 사용과 제한된 GPT-4 요청을 제공합니다. Pro 플랜($20/월)은 무제한 GPT-4와 더 빠른 응답을 제공합니다.

Q: VS Code 확장 프로그램을 사용할 수 있나요?

A: 네! Cursor는 VS Code 기반이므로 대부분의 VS Code 확장 프로그램과 호환됩니다. 마켓플레이스에서 직접 설치할 수 있습니다.

Q: 인터넷 연결이 필요한가요?

A: AI 기능을 사용하려면 인터넷 연결이 필요합니다. 하지만 일반적인 코드 편집은 오프라인에서도 가능합니다.

Q: 내 코드가 AI 학습에 사용되나요?

A: 아니요. Cursor는 사용자의 코드를 AI 모델 학습에 사용하지 않습니다. 개인정보 보호를 중요하게 생각합니다.

핵심 정리

Cursor는 AI 네이티브 에디터

처음부터 AI와 함께 코딩하도록 설계된 차세대 개발 환경입니다.

4가지 핵심 기능

Tab 자동완성, AI Chat, Cmd+K 편집, Composer 멀티파일 편집

쉬운 시작

무료로 시작할 수 있고, VS Code와 유사한 인터페이스로 빠르게 적응할 수 있습니다.

다음 강의 예고

다음 강의에서는 Tab 자동완성 기능을 마스터하고, AI와 함께 더 빠르게 코딩하는 방법을 배웁니다.

다음 강의로 이동
1/30 완료