지금까지 우리는 커서 AI에게 자연어로 원하는 바를 설명하여 코드를 생성하고 수정해왔습니다. 이것만으로도 충분히 강력하지만, 때로는 AI에게 좀 더 명확한 정보, 즉 '컨텍스트(Context)'를 제공해야 할 때가 있습니다. 예를 들어, 여러 파일 중에서 특정 파일 하나만 수정하고 싶거나, 프로젝트 전체 구조에 대해 질문하고 싶을 때가 그렇죠. 이럴 때 사용하는 것이 바로 커서 AI의 @ 컨텍스트 지정 기능입니다. 이 기능을 잘 활용하면 AI와의 소통 오류를 줄이고 훨씬 더 정확하고 효율적으로 협업할 수 있습니다.
"@" 명령어로 컨텍스트 지정하기
커서 AI에게 특정 컨텍스트를 알려주는 방법은 아주 간단합니다. 채팅창([Ctrl+L])이나 코드 수정 프롬프트 바([Ctrl+K])에서 @ 기호를 입력하기만 하면 됩니다.
@ 메뉴 확인하기
- 커서 편집기에서 채팅창 [Ctrl+L]을 엽니다.
- 키보드에서 @ 키를 입력해보세요.
- 마치 마법처럼 다양한 컨텍스트 옵션을 선택할 수 있는 메뉴가 나타나는 것을 확인할 수 있습니다.
메뉴가 나타났나요? 정말 다양한 옵션들이 보이죠? 이 옵션들을 사용하면 AI에게 '이것을 참고해서 작업해줘!'라고 명확하게 알려줄 수 있습니다. 몇 가지 유용한 옵션들을 살펴볼까요?
Files & Folders
현재 열려있는 프로젝트 내의 특정 파일이나 폴더를 선택하여 AI의 작업 범위를 제한하거나 해당 내용을 참조하도록 지시할 수 있습니다. 예를 들어, " @chat-interface.tsx 파일의 내용을 보고 설명해줘" 와 같이 사용할 수 있죠. 앞으로 가장 자주 사용하게 될 기능입니다!
Codebase
커서가 현재 프로젝트의 전체 코드를 파악하도록 요청합니다. 프로젝트 전반에 대한 질문, 예를 들어 "프로젝트에서 supabase-client는 어디서 사용되고 있어?" 와 같은 질문에 답을 얻는 데 유용합니다. (참고: 이 기능을 제대로 사용하려면 다음 이미지처럼 커서가 프로젝트 코드를 미리 분석(indexing)하는 과정이 필요할 수 있습니다.)
Docs
여러분이 커서에 직접 추가한 문서 파일(예: 프로젝트 설계 문서, API 명세서 등)을 AI가 참고하도록 할 수 있습니다.
Git
현재 프로젝트의 Git 저장소 정보를 활용합니다. 예를 들어, 최근 변경 사항(@Git Diff)을 바탕으로 커밋 메시지를 작성해달라고 하거나, 특정 커밋(@Git Commit) 내용을 분석해달라고 요청할 수 있습니다.
Web
AI가 웹 검색을 통해 얻은 최신 정보나 특정 웹사이트 내용을 바탕으로 답변하도록 지시할 수 있습니다. 예를 들어, "@Web Next.js 공식 문서 보고 API Route 만드는 최신 방법 알려줘" 와 같이 사용할 수 있습니다.
기타
이 외에도 Lint Errors(코드 오류 수정 요청 시), Past Chats(이전 대화 참조) 등 다양한 컨텍스트를 활용할 수 있습니다.
핵심은 @ 명령어를 통해 AI에게 필요한 '배경지식'이나 '작업 대상'을 명확히 알려주어, AI가 엉뚱한 파일이나 정보를 참조하지 않고 우리가 원하는 작업을 더 정확하게 수행하도록 돕는 것입니다.
실전 활용 예시
말로만 들어서는 감이 잘 안 오실 수 있으니, 챗봇 프로젝트에서 @ 컨텍스트를 활용할 수 있는 몇 가지 구체적인 예시를 살펴보겠습니다.
예시 1: 특정 파일 수정 요청하기
(상황) chat-interface.tsx 파일에 있는 전송 버튼의 디자인을 변경하고 싶을 때
(활용) 커서 채팅창에 @ 입력 → Files & Folders 선택 → chat-interface.tsx 검색 및 선택 → 이어서 프롬프트 입력: "이 파일 안에 있는 [Button] 컴포넌트를 찾아서 배경색을 파란색으로 바꿔줘."
(효과) AI는 다른 파일이 아닌 chat-interface.tsx 파일 내의 버튼 코드만 찾아서 수정하려고 시도합니다.
예시 2: 프로젝트 전체 구조에 대해 질문하기
(상황) Supabase 클라이언트 설정 코드가 어느 파일에 있는지 기억나지 않을 때
(활용) 커서 채팅창에 @ 입력 → Codebase 선택 → 이어서 프롬프트 입력: "프로젝트 전체에서 supabase-client.ts 파일을 어디서 import 해서 사용하고 있는지 알려줘."
(효과) AI가 프로젝트 전체 코드를 분석하여 관련 파일과 코드 라인을 찾아줍니다.
예시 3: 웹 검색 결과 활용하기
(상황) Vercel AI SDK의 useChat 훅에 새로운 옵션이 추가되었는지 궁금할 때
(활용) 커서 채팅창에 @ 입력 → Web 선택 → 이어서 프롬프트 입력: "Vercel AI SDK useChat 훅의 최신 옵션에는 어떤 것들이 있어?"
(효과) AI가 웹 검색을 통해 얻은 최신 정보를 바탕으로 답변해줍니다.
이제 커서 AI에게 단순히 말로 설명하는 것을 넘어, 필요한 정보를 @ 명령어로 콕 집어 알려주면서 더 정확하고 효율적으로 협업하는 방법을 배우셨습니다! 앞으로 이어질 장의 프롬프트를 작성하실 때 이 @ 기능을 꼭 활용해보세요. AI와의 소통 수준이 달라지는 것을 느끼실 수 있을 겁니다.
'Cook Cursor' 카테고리의 다른 글
| Cursor AI, 왜 같은 질문에도 다른 코드를 줄까요? (2) | 2025.05.17 |
|---|---|
| VS Code에서 Cursor로 갈아타야 하는 7가지 이유 (0) | 2025.05.13 |
| Cursor Max Mode로 대형 코드베이스 다루기 (0) | 2025.05.12 |
| Cursor AI Editor의 Tab 기능, 개발자 생산성을 한 단계 끌어올리는 비결 (2) | 2025.05.11 |
| Cursor, AI 코딩 경험의 새로운 도약: 가격 정책 개편 및 기능 대거 업데이트(0.50)! (2) | 2025.05.11 |