지능형 코딩 도우미 Cursor AI가 더 똑똑하게 일 잘하게 만드는 습관

Cursor는 AI 기반 코드 에디터로, VS Code를 기반으로 하여 강력한 AI 기능을 통합한 개발 도구입니다.

AI 모델 통합: Claude, GPT-4, Gemini 등 다양한 모델 지원
컨텍스트 인식: 전체 코드베이스를 이해하고 관련 코드 참조
자동 완성 및 수정: 코드 작성과 버그 수정 자동화
다중 작업 모드: Ask, Agent, Chat 등 용도별 모드 제공

300x250

프로젝트 구조 최적화

권장 디렉토리 구조

project-root/
├── src/
│   ├── components/       # UI 컴포넌트
│   │   ├── common/      # 공통 컴포넌트
│   │   └── features/    # 기능별 컴포넌트
│   ├── services/        # 비즈니스 로직
│   │   ├── api/        # API 통신
│   │   └── utils/      # 유틸리티 함수
│   ├── hooks/          # 커스텀 훅
│   ├── types/          # TypeScript 타입 정의
│   └── styles/         # 스타일 파일
├── tests/              # 테스트 파일
├── docs/               # 문서
└── .cursorignore       # Cursor 제외 파일

Mermaid 다이어그램 생성 요청 예시

"프로젝트 구조를 Mermaid 다이어그램으로 시각화하고, 
각 폴더의 역할과 의존성을 보여줘"

파일 크기 관리

❌ 나쁜 예: 1000줄이 넘는 단일 파일
components/Dashboard.tsx (1500 lines)

✅ 좋은 예: 모듈화된 구조
components/Dashboard/
  ├── index.tsx (50 lines)
  ├── DashboardHeader.tsx (200 lines)
  ├── DashboardContent.tsx (300 lines)
  └── DashboardFooter.tsx (150 lines)

.cursorignore 설정

# .cursorignore 파일 예시
node_modules/
dist/
build/
*.log
.env
coverage/
# 테스트 중인 파일 보호
tests/experimental/*
# 민감한 설정 파일
config/secrets/*

Ask 모드 (읽기 전용)

코드를 수정하지 않고 분석과 계획만 수립할 때 사용합니다.

사용 예시

Ask 모드에서:
"현재 인증 시스템의 구조를 분석하고, 
OAuth2.0으로 마이그레이션하는 계획을 세워줘. 
코드는 수정하지 말고 단계별 전략만 설명해줘."

Agent 모드 (자동 수정)

실제 코드 수정과 파일 생성을 자동으로 수행합니다.

사용 예시

Agent 모드에서:
"Ask 모드에서 세운 OAuth2.0 마이그레이션 계획을 
실제로 구현해줘. 다음 순서로 진행해:
1. 기존 auth 모듈 백업
2. OAuth2.0 provider 설정 파일 생성
3. 인증 플로우 구현
4. 테스트 코드 작성"

작업모드 전환 전략

1단계 (Ask): "이 버그의 원인이 뭘까? 가능한 시나리오를 분석해줘"
2단계 (Agent): "분석 결과 중 2번 시나리오가 맞는 것 같아. 이제 수정해줘"

테스트 기반 개발 (TDD) 접근법

단계별 진행

Step 1: "사용자 로그인 기능에 대한 실패하는 테스트 코드를 작성해줘"

// 생성된 테스트 코드
describe('User Authentication', () => {
  it('should login with valid credentials', async () => {
    const result = await login('user@test.com', 'password123');
    expect(result.success).toBe(true);
    expect(result.token).toBeDefined();
  });
});

Step 2: "이 테스트가 통과하도록 최소한의 구현을 만들어줘"

AI 모델 선택 가이드

작업별 추천 모델

복잡한 아키텍처 설계:
  - Claude Opus
  - Gemini 2.0 Flash Thinking

빠른 코드 수정:
  - GPT-4o
  - Claude Sonnet

디버깅 및 분석:
  - o1-preview
  - Claude Opus

간단한 자동완성:
  - Cursor-small
  - GPT-4o-mini

모델 전환 예시

"이번 작업은 복잡한 상태 관리 리팩토링이니까 
Claude Opus로 전환해서 진행할게. 
@Claude-Opus 전체 Redux 구조를 Zustand로 마이그레이션하는 
최적의 전략을 제시해줘"

Git 워크플로우 통합

커밋 전략

# 작업 전
git checkout -b feature/oauth-integration

# AI 작업 요청
"OAuth 통합 작업을 시작할게. 각 단계마다 의미있는 커밋을 만들어줘"

# AI가 제안하는 커밋 구조
git add src/auth/oauth.ts
git commit -m "feat: OAuth2.0 provider 설정 추가"

git add src/auth/callbacks.ts
git commit -m "feat: OAuth 콜백 핸들러 구현"

git add tests/auth/oauth.test.ts
git commit -m "test: OAuth 통합 테스트 추가"

컨텍스트 심볼(@) 활용법

모든 @ 심볼과 사용 예시

@Code - 특정 함수나 변수 참조
예: "@Code getUserById 함수를 TypeScript로 리팩토링해줘"

@Docs - 공식 문서 참조
예: "@Docs https://nextjs.org/docs/app 참고해서 app router로 마이그레이션해줘"

@Files - 여러 파일 동시 참조
예: "@Files src/api/* 모든 API 엔드포인트에 에러 핸들링 추가해줘"

@Folders - 폴더 전체 참조
예: "@Folders src/components 컴포넌트 폴더 구조를 atomic design으로 재구성해줘"

@Git - Git 정보 참조
예: "@Git 최근 3개 커밋에서 변경된 파일들의 테스트 커버리지 확인해줘"

@Recent - 최근 변경사항
예: "@Recent 방금 수정한 내용과 충돌하는 부분이 있는지 확인해줘"

@Codebase - 전체 코드베이스
예: "@Codebase 프로젝트 전체에서 deprecated API 사용 부분 찾아줘"

@Web - 웹 콘텐츠 참조
예: "@Web https://github.com/user/repo README 참고해서 설치 가이드 작성해줘"

@Past Chats - 이전 대화 참조
예: "@Past Chats 어제 논의한 데이터베이스 스키마 기반으로 마이그레이션 작성해줘"

다중 탭 병렬 작업

효율적인 탭 구성

Tab 1 (Ask): 아키텍처 분석 및 계획
Tab 2 (Agent): 실제 코드 구현
Tab 3 (Agent): 테스트 코드 작성
Tab 4 (Ask): 문서화 및 주석 작성

Auto 옵션 활용

설정 예시

{
  "cursor.chat.autoApplyEdits": true,
  "cursor.chat.autoRunCommands": true,
  "cursor.chat.autoFixLints": true,
  "cursor.chat.showSuggestions": true
}

Rule 생성 및 관리

Rule 생성 요청

"이번 프로젝트의 코딩 컨벤션을 Rule로 만들어줘:
- TypeScript strict mode 사용
- 함수는 모두 JSDoc 주석 포함
- 컴포넌트는 함수형으로만 작성
- 모든 상태는 Zustand로 관리
- 테스트는 파일명.test.ts 형식"

생성된 Rule 예시

Project Rules:
  Language: TypeScript

  Code Style:
    - Use functional components only
    - Include JSDoc for all exported functions
    - Use Zustand for state management
    - Follow ESLint airbnb configuration

  File Structure:
    - Component files: PascalCase.tsx
    - Utility files: camelCase.ts
    - Test files: [filename].test.ts

  Testing:
    - Write tests for all new features
    - Maintain 80% code coverage
    - Use React Testing Library

자동 문서화

API 문서 생성

"@Files src/api/* 모든 API 엔드포인트의 
Swagger/OpenAPI 문서를 자동으로 생성해줘"

README 업데이트

"@Codebase 전체 프로젝트 구조를 분석해서 
README.md를 다음 섹션으로 업데이트해줘:
- 프로젝트 소개
- 기술 스택
- 설치 방법
- 실행 방법
- API 문서
- 기여 가이드"

MCP (Model Context Protocol) 활용

주요 MCP 도구

개발 도구:
  - filesystem: 파일 시스템 접근
  - playwright: E2E 테스트 자동화
  - puppeteer: 브라우저 자동화

데이터베이스:
  - supabase: Supabase 통합
  - postgres: PostgreSQL 직접 연결

작업 관리:
  - github: GitHub 이슈/PR 관리
  - linear: Linear 티켓 연동

모니터링:
  - sentry: 에러 추적
  - datadog: 성능 모니터링

MCP 설정 예시

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["@modelcontextprotocol/server-filesystem"],
      "env": {
        "WORKSPACE_DIR": "/Users/username/projects"
      }
    },
    "supabase": {
      "command": "npx",
      "args": ["@modelcontextprotocol/server-supabase"],
      "env": {
        "SUPABASE_URL": "https://your-project.supabase.co",
        "SUPABASE_SERVICE_ROLE_KEY": "your-key"
      }
    }
  }
}

커스텀 MCP 생성

사내 문서 연동 예시

// custom-mcp-server.js
import { Server } from '@modelcontextprotocol/sdk';

const server = new Server({
  name: 'company-docs',
  version: '1.0.0',
});

server.setRequestHandler('tools/list', async () => ({
  tools: [{
    name: 'search_docs',
    description: '사내 문서 검색',
    inputSchema: {
      type: 'object',
      properties: {
        query: { type: 'string' }
      }
    }
  }]
}));

// 문서 검색 구현
server.setRequestHandler('tools/call', async (request) => {
  if (request.params.name === 'search_docs') {
    const results = await searchInternalDocs(request.params.arguments.query);
    return { content: results };
  }
});

새 프로젝트 시작

전체 설정 프로세스

Step 1: "Next.js 14 + TypeScript + Tailwind CSS 프로젝트를 생성하고 
        최적의 폴더 구조로 초기 설정해줘"

Step 2: "ESLint, Prettier, Husky 설정을 추가하고 
        pre-commit hook으로 코드 품질을 자동 검사하도록 설정해줘"

Step 3: "GitHub Actions로 CI/CD 파이프라인을 구성해줘:
        - 테스트 실행
        - 빌드 확인
        - Vercel 자동 배포"

레거시 코드 리팩토링

단계별 접근

분석 단계 (Ask 모드):
"@Codebase 전체 코드베이스에서 다음을 분석해줘:
- 중복 코드 패턴
- 사용하지 않는 의존성
- 복잡도가 높은 함수 (순환 복잡도 10 이상)
- 테스트 커버리지가 낮은 모듈"

계획 단계:
"분석 결과를 바탕으로 3주 스프린트로 
리팩토링 로드맵을 만들어줘"

실행 단계 (Agent 모드):
"1주차 계획인 '중복 코드 제거'부터 시작해줘. 
각 단계마다 테스트를 먼저 작성하고 진행해"

버그 수정 워크플로우

체계적인 디버깅

1. 재현 테스트 작성:
"@Recent 보고된 버그를 재현하는 테스트 케이스를 작성해줘"

2. 원인 분석:
"테스트 실패 지점에서 스택 트레이스를 분석하고 
가능한 원인 3가지를 제시해줘"

3. 수정 및 검증:
"2번 원인이 맞는 것 같아. 해당 부분을 수정하고 
모든 관련 테스트가 통과하는지 확인해줘"

4. 회귀 방지:
"이런 버그가 다시 발생하지 않도록 
추가 테스트 케이스와 타입 가드를 만들어줘"

성능 최적화

최적화 프로세스

측정:
"@Web https://pagespeed.web.dev 결과를 분석하고 
주요 성능 병목 지점을 찾아줘"

분석:
"React DevTools Profiler 데이터를 보고 
리렌더링이 많이 발생하는 컴포넌트를 찾아줘"

최적화:
"다음 최적화 기법들을 적용해줘:
- React.memo로 불필요한 리렌더링 방지
- useMemo/useCallback으로 연산 최적화
- 이미지 lazy loading 구현
- 번들 사이즈 최적화"

핵심 팁

✅ Do's

작은 단위로 작업 분할: 한 번에 하나의 기능만 요청
명확한 컨텍스트 제공: @ 심볼로 정확한 파일/폴더 지정
테스트 우선 접근: 구현 전 테스트 작성 요청
버전 관리 철저: 모든 변경사항 커밋
모드 적절히 활용: 분석은 Ask, 구현은 Agent

❌ Don'ts

너무 긴 대화 지속: 한 세션에 너무 많은 작업 포함
컨텍스트 없이 요청: 막연한 "코드 개선해줘" 같은 요청
Privacy Mode 미사용: 민감한 코드 작업 시 보안 설정 무시
백업 없이 대규모 변경: Git 커밋 없이 큰 리팩토링
단일 모델만 고집: 작업에 맞는 AI 모델 선택 무시

Cursor는 단순한 코드 자동완성 도구가 아닌, AI와 협업하는 새로운 개발 패러다임입니다. 체계적으로 활용하면, 개발 생산성을 획기적으로 향상시킬 수 있습니다. 핵심은 AI를 도구로 활용하되, 개발자의 판단과 검증을 거치는 것입니다. AI가 제안한 코드를 무비판적으로 수용하지 말고, 항상 코드 리뷰하듯 검토하고 개선하는 자세가 필요합니다.

728x90

그리드형(광고전용)

저작자표시 비영리 동일조건 (새창열림)

지능형 코딩 도우미 Cursor AI가 더 똑똑하게 일 잘하게 만드는 습관

지능형 코딩 도우미 Cursor AI가 더 똑똑하게 일 잘하게 만드는 습관

프로젝트 구조 최적화

권장 디렉토리 구조

Mermaid 다이어그램 생성 요청 예시

파일 크기 관리

.cursorignore 설정

Ask 모드 (읽기 전용)

사용 예시

Agent 모드 (자동 수정)

사용 예시

작업모드 전환 전략

테스트 기반 개발 (TDD) 접근법

단계별 진행

AI 모델 선택 가이드

작업별 추천 모델

모델 전환 예시

Git 워크플로우 통합

커밋 전략

컨텍스트 심볼(@) 활용법

모든 @ 심볼과 사용 예시

다중 탭 병렬 작업

효율적인 탭 구성

Auto 옵션 활용

설정 예시

Rule 생성 및 관리

Rule 생성 요청

생성된 Rule 예시

자동 문서화

API 문서 생성

README 업데이트

MCP (Model Context Protocol) 활용

주요 MCP 도구

MCP 설정 예시

커스텀 MCP 생성

사내 문서 연동 예시

새 프로젝트 시작

전체 설정 프로세스

레거시 코드 리팩토링

단계별 접근

버그 수정 워크플로우

체계적인 디버깅

성능 최적화

최적화 프로세스

핵심 팁

✅ Do's

❌ Don'ts

관련글

댓글

티스토리툴바