본문 바로가기
프로그램 (PHP,Python)

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

by 날으는물고기 2025. 7. 10.

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

728x90

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

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

❌ Don'ts

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

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

728x90
그리드형(광고전용)

댓글