Cursor AI 소개
목차
프론트엔드 개발자로 성장해가며 요즘 가장 많이 듣는 단어 중 하나는 단연 AI 다. 특히 Cursor AI 처럼 코딩 생산성을 높여주는 AI 기반 코드 에디터는 현대 개발자에게 거의 필수적인 도구가 되고 있다고 생각한다.
개발을 공부하면서 “어떻게 하면 AI를 활용해 더 빠르게 성장할 수 있을까?” 라는 고민을 많이 해왔고 이번 기회에 Cursor AI 공식 문서를 살펴보며 주요 기능을 정리해봤다.
Cursor AI란?
쉽게 말해 Cursor는 AI 기능이 내장된 코드 에디터다.
VS Code와 거의 동일한 UI 를 가지고 있어서 바로 익숙해질 수 있고 GitHub Copilot 을 사용해본 경험이 있는 사람은 Cursor 가 자연스럽게 느껴질 것이다.
Cursor AI의 주요 기능
Cursor의 핵심 기능은 다음과 같다:
Tab: AI 기반 코드 자동 완성 및 수정CMD + K(Inline Edit): 선택한 코드 블록을 AI가 수정하거나 리팩토링해주는 인라인 편집CMD + I(Chat): 코드와 연동된 채팅창으로, Agent, Ask, Manual 모드를 활용해 다양한 방식의 질문/답변 가능
Tab 기능
코드를 작성하다 보면 Tab 키만 눌러도 AI 가 이어서 작성할 내용을 미리 예측해준다. Github Copilot 도 이 기능이 탑재되어 있어서 Cursor 라고 많이 다를까? 생각했었는데, 그 차이는 꽤 컸다.
사용해보며 느낀 Github Copilot 에는 없는 Cursor 의 기능들은:
- Auto-import : Typescript 로 자주 개발을 하는데 필요한 모듈을 자동으로 알아채서 import 를 제안
- Partial Accept (CMD+→) : 제안된 코드를 다 적용시키고 싶지 않을 때 필요한 부분만 사용 가능
- Completion Scope : Copilot 은 현재 커서가 위치한 곳에서 코드를 완성하는 제안만 가능하다면 Cursor 는 커서 위치 외에도 여러 글자를 수정할 수 있고 편하게 pseudocode 처럼 작성해도 코드로 변환시켜준다
Chat 기능
❗ 얼마 전까지만 해도 Cursor Composer 기능이 Chat 기능의 핵심이었는데 최신 업데이트로 Agent 모드가 출시되면서 Manual 모드로 변경되었다고 한다
Cursor Chat은 아래 사진과 같이 다양한 모드들을 제공한다:
- Agent: Cursor가 코드베이스를 학습하고 전체 코드베이스에 걸친 변경을 자동으로 수행
- 워크플로우 : 요청 이해 → 코드베이스 학습 → 수정 계획 → 수정 → 오류 확인
- Auto-fix Error: 수정된 코드에 오류가 나는지 확인하고 재수정 하는 기능이 인상적이었다.
- 터미널 커맨드 사용
- Ask: 코드베이스에 대한 설명이나 질문에 답변 제공, 코드 수정 없이 제안만 함
- 코드베이스를 이해하고 싶을 때 사용
- Manual: 유저가 제공한 컨텍스트만을 사용하여 집중적인 편집 수행
- 터미널 커맨드나 코드베이스 서치 기능 ❌
“In @src/utils/helpers.ts and @src/components/UserProfile.tsx,rename the function
getUserDatatofetchUserProfileand update all call sites within these files.” - 위와 같이 코드 리팩토링 할 때 유용하다.
@로 파일 경로를 명시해서 컨텍스트에 추가할 수 있다.
- 터미널 커맨드나 코드베이스 서치 기능 ❌
Inline Edit 기능
Cmd+K는 AI 프롬프트 바를 호출하는 단축키다. 여기에 “이 함수 좀 더 간단하게 바꿔줘”처럼 자연어로 입력하면, Cursor가 그 자리에서 코드를 수정해준다.
- 코드를 선택하지 않고
Cmd+K를 누르면 → 새 코드를 생성해줌 - 코드를 선택한 상태로 누르면 → 해당 블록을 수정하거나 리팩토링
개인적으로 이 기능을 사용할때 Option + Enter 를 자주 사용했다. 선택한 코드에 대한 질문을 바로 던질 수 있어서 “이게 왜 이렇게 구현된 거지?” 같은 궁금증이 생겼을 때 바로바로 확인 가능하다.
이 외에도 전체 파일 단위 작업과 수정이 복잡해질 때 Chat 의 Agent 모드로 빠르게 전환 할 수 있는 편한 기능들이 있다.
Cursor 의 Context 에 대해
Cursor 를 사용하면 AI 가 내 코드베이스를 정말 잘 파악하고 있다고 느끼는데 Cursor 가 어떤 방식으로 컨텍스트를 넓히는지 알아보자.
Codebase Indexing
Cursor는 프로젝트를 열면 자동으로 코드베이스를 인덱싱하여 각 파일의 임베딩을 생성한다. 이를 통해 AI는 코드의 구조와 관계를 더 잘 파악할 수 있고, 내 코드를 전체적으로 잘 이해하지 못하고 있다는 느낌이 들면 수동으로 Resync Index 를 돌릴 수 있다.
- 대규모의 레포를 다룰 때는
.cursorignore파일을 활용하여 불필요한 파일/폴더를 제외함으로써 인덱싱 효율을 높일 수 있다!
Rules
Cursor의 Rules 기능을 통해 프로젝트나 사용자 수준에서 AI의 행동을 세밀하게 조정할 수 있다.
- User Rules:
Cursor Settings > Rules에 저장되어 모든 프로젝트에 적용된다
- Project Rules:
.cursor/rules디렉토리에 저장되며 프로젝트 관련 정보, 프로젝트 템플릿, AI 워크플로 지정 등 다양한 유즈 케이스에 사용될 수 있다.
각 Rule은 .mdc 형식으로 작성되며 다음과 같은 유형이 있다:
- Always: 항상 적용
- Auto Attached: 특정 패턴의 파일이 참조될 때 자동 적용
- Agent Requested: AI가 필요에 따라 적용 여부를 결정
- Manual: 명시적으로 호출할 때만 적용
아래는 위의 Cursor Rule 이 모인 레포에서 이번 Next.js 프로젝트에 사용하면 유용할 룰의 예시이다.
pattern: "**/*.{ts,tsx}"
당신은 명확하고 읽기 쉬운 Next.JS + Tailwind + Typescript 코드를 작성하는 데 집중하는 전문가 프로그래밍 어시스턴트입니다.
항상 최신 버전의 Next.JS를 사용하며, Next.JS, TypeScript, Tailwind의 최신 기능과 모범 사례에 익숙합니다.
스타일링에는 Tailwind CSS를 사용합니다. 라이트 모드와 다크 모드에 적절하고 널리 사용되는 색상을 사용합니다.
정확하고 사실 기반이며 사려 깊은 답변을 신중하게 제공하며, 논리적 사고에 뛰어납니다.
- 사용자의 요구사항을 정확히 따릅니다.
- 먼저 단계별로 생각하고, 무엇을 만들지에 대해 매우 상세한 의사코드로 계획을 설명합니다.
- 확인 후 코드를 작성합니다!
- 항상 정확하고 최신이며, 버그가 없고, 완전하게 작동하며, 보안성 있고, 효율적인 코드를 작성합니다.
- 성능보다는 가독성을 우선합니다.
- 요청된 모든 기능을 완전하게 구현합니다.
- TODO, 임시 코드, 누락된 부분 없이 작성합니다.
- 작성한 파일명을 반드시 명시합니다.
- 간결하게 작성합니다. 불필요한 설명은 최소화합니다.
- 정답이 없다고 판단되면 그렇게 말합니다. 모를 경우 추측하지 않습니다.@ 를 활용한 컨텍스트 지정
Cursor에서는 @ 기호를 사용하여 특정 파일, 폴더, 코드, 문서 등을 명시적으로 컨텍스트에 포함시킬 수 있다.
@Files: 특정 파일 참조@Folders: 특정 폴더 참조