Cursor 완전 가이드 2025: AI 코딩 워크플로우, rules·context 설정법

Cursor & Coding with AI — 실전 크래시 코스 (2025) (Cursor, Claude, GPT, Gemini)

Cursor의 작동 방식, 가격, 설정, rules, context 운용법부터 실제 워크플로우까지 한 번에. 기존 React 프로젝트에서의 미세 개선, HTML/CSS/JS로 SaaS 랜딩페이지 vibe‑coding, 그리고 Next.js + TypeScript + Tailwind v4로 Markdown résumé editor(PDF export 포함)까지 전 과정을 사람 중심 관점으로 정리.

 

---

 

한 줄 요약: AI를 자판기처럼 대하지 말고—명확한 context, 깔끔한 rules, 짧은 피드백 루프로 성장하는 “주니어 dev”처럼 다뤄라.

솔직히 말해, 대부분의 Cursor 소개는 chat 박스에 한 번 글 던지고 “짜잔, 앱 생성 완료!”로 끝납니다. 보기엔 상큼하지만 실전에서는 잘 부서지죠. 이 글은 다릅니다. 클릭 순서만이 아니라 생각하는 법을 다룹니다. tab completion과 inline edit 같은 작은 도움부터, chat을 활용한 vibe‑coding, 그리고 agent가 파일을 만들고 diff를 제안하는 흐름까지. 중간중간 agents, rules, context, models처럼 핵심 개념을 생활 습관 레벨로 녹여 보죠.

 

이번 글에서 보게 될 것들:

• tab completion / inline edit로 작은 개선을 안전하게 쌓는 법
• rules(global vs project)로 Tailwind v3나 TS 오류 억제 같은 “과잉 친절”을 예방하는 법
• context 범위 좁히기로 agent가 추측 대신 정확히 움직이게 만드는 요령
• SaaS landing page vibe‑coding: hero, features, testimonials, pricing slider(monthly/yearly & savings 표시)
• Next.js + TypeScript + Tailwind v4로 Markdown résumé editor 만들기: live preview, localStorage 저장, PDF export

 

배포/DevOps가 예전엔 지옥이었죠. 요즘은 Git 연동과 클릭 몇 번에 DB까지 붙습니다. 남는 에너지를 설계와 구조, 그리고 AI와의 협업 품질에 쓰면 됩니다.

 

---

 

Cursor

 

Cursor가 정확히 뭐냐면

간단히 말해 VS Code에 AI를 깊게 이식한 에디터입니다. 플러그인 하나 덧댄 수준이 아니라, 에디터 경험 자체가 AI 중심으로 정리돼 있어요.

• 에디터 옆에 붙은 chat 인터페이스: vibe‑coding, 질문, agent diff 적용까지 한자리에서.
• inline edit 및 tab completion: 필요한 부분만 쏙쏙 수용(부분 수락도 가능).
• 코드베이스 인덱싱 + 수동 context 지정: 전역 인식은 기본, 필요 시 한 파일/함수에 초점.
• 여러 models(GPT‑series, Claude, Gemini 등)과 Auto 선택.

 

핵심은 흐름의 끊김이 없다는 점. 브라우저/에디터를 왔다 갔다 할 필요 없이 “코드가 있는 그 자리”에서 대화와 수정을 끝냅니다.

 

 

Cursor 가격—헷갈리지 않게 정리

가격 체계가 수시로 업데이트되며 혼란스러웠죠. 현재 이해하기 쉽게 정리하면:

• Free/Hobby: agent 요청(대화/편집)과 tab completion에 제한. 상위 플랜 체험 짧게.
• $20/mo: agent 한도 넉넉, tab completion 무제한, background agents, PR bug 체크, max context 접근.
  • 단, 특정 premium model(예: Claude 4 Sonnet)만 고집하면 월 ~$20 크레딧 한도 내에서 사용. 초과 시:
    1. Auto로 전환(추가 비용 X), 또는
    2. 해당 model 비용 추가 과금, 또는
    3. 상위 플랜으로 업그레이드.
• $200/mo: $20 플랜과 동일한 기능에 premium model 사용량 ~20배.

 

요약: 비용 예측을 원하면 Auto. 특정 model만 계속 쓰고 싶다면 초과 비용 또는 상위 플랜을 고려.

 

 

필수 Settings만 골라서

Cursor Settings → Cursor에서 핵심만 세팅해도 체감이 큽니다.

• Privacy Mode: 켜두면 사용 데이터가 제품 개선에 쓰이지 않습니다. 민감하면 ON.
• Default Chat Mode:
  • Agent(실무 기본): 파일 생성/편집, 터미널/테스트 실행 등 “행동”.
  • Ask: 설명/질문 전용. 코드 안 건드리고 학습/검증용으로 좋습니다.
• Web Search Tools: 문서 검색 필요할 때 유용. 기본 ON 추천.
• Auto‑Run(YOLO): 처음엔 **“Ask every time”**로 두세요. rules가 자리 잡으면 자동 실행도 고려.
• Tab Completion: partial accept(Cmd/Ctrl + →) 꼭 습관화.
• Models/Max Mode: 평소엔 일반 모드. Max Mode는 context가 정말 클 때만—느리고 토큰도 큼.
• MCP Tools: Firebase/Neon/Kubernetes 같은 외부 서비스 연결. 강력하지만 권한과 의도를 명확히.
• Indexing: 100% 인덱싱이면 좋지만, 실제론 열어둔 탭이 자동 context라 필요한 곳만 좁혀 쓰는 게 핵심.

 

 

Rules & Memories: 프로젝트의 가드레일

rules 없이는 agent가 “선의의 오버액션”을 합니다. 이를 막는 안전장치가 바로 rules.

• User rules(global): 철학/스타일/원칙 같은 전역 선호.
• Project rules: 프레임워크/라이브러리별 구체 패턴.

 

실전에서 유용한 rules 예시

• “React/Next.js는 TypeScript만 사용.”
• “Tailwind v4만. v3 금지. v4 docs 기준.”
• “TS 오류 억제 금지. clean build 유지.”
• “any는 최후의 수단.”
• “DRY/KISS 철저 적용.”

 

project rules는 ./.cursor/rules/*.mdc로 저장됩니다(예전 단일 cursor.rules는 deprecate지만 동작은 함). 전역은 철학/원칙, 프로젝트는 기술 특화 내용을 넣으세요.

 

Level 1: 기존 React 프로젝트에 얹는 방법

목표: tab completion과 inline edit로 작은 개선을 안전하게 누적.

데모 프로젝트: 간단한 shopping cart UI. 제품 추가만 되던 흐름에 quantity selector와 접근성/스타일 개선을 더합니다.

 

이렇게 진행

1. 실행: 한 터미널에 json-server, 다른 탭에 npm run dev.
2. quantity selector(tab completion):
   • ProductCard에서 caret 위치만 잡아도 useState + quantity state 제안 → 순차 수락.
   • decrement/increment 버튼과 숫자 표시 span 제안 → 단계적으로 수락(“tab to next move”).
   • Context Provider의 addToCart로 점프해 quantity 인자 받도록 시그니처 수정.
3. inline edit(스타일):
   • 버튼 래퍼 div 선택 → Quick Edit → “이 구역 스타일 정리해줘.”
   • diff(빨강 삭제/초록 추가) 확인 → Keep → 브라우저에서 즉시 테스트.
4. 접근성(ARIA) 전체 파일 패스: “필요한 곳에 ARIA 속성 추가.” 요약도 꼭 읽어보기.
5. 마이크로 피처: isAdded flag로 “Added to cart” 토스트/텍스트 표시.
6. chat로 폴리시: “카드 hover 효과 살짝만.” → 과하지 않게 조정.
7. 학습 모드(Ask): Provider 블록 잡고 “이 함수가 하는 일을 풀어 설명” 요청—코드는 건드리지 않고 이해만.

 

핵심 포인트: 변화를 눈으로 확인하고, 요약을 읽고 이해하면서 진행. 검은 상자 대신 투명한 작은 단계로.

 

 

Level 2: SaaS Landing Page를 vibe‑coding

목표: 기능 있는 마케팅 페이지를 한 방에 잡고—필요한 포인트만 뾰족하게 보강.

프롬프트(담백 버전):

SaaS product용 landing page를 만들어줘. hero, features, testimonials 포함. pricing slider로 users/자원 수에 따라 요금 실시간 업데이트. HTML + plain CSS + vanilla JS만 사용. JS는 단순/가독성 중시—over‑engineering 금지. responsive + 간단한 hamburger menu, 적당한 CSS animations.

 

결과물(초안)

• Hero/Features/Testimonials가 적당한 animations와 함께.
• Interactive pricing calculator(users, storage, bandwidth).
• 모바일에서 hamburger menu로 자연스러운 전환.

 

이렇게 보강

• Billing toggle: “monthly ↔ yearly 전환 + yearly 20% 할인 적용”.
• Effective monthly 표시: “yearly 결제 시 월 환산 금액도 함께 보여줘”.
• Changelog: changes.md 만들어서 새 기능/UI 수정/기술 개선을 꾸준히 적재.
• Lighthouse: Performance/Accessibility/Best Practices/SEO가 90점대라면 충분. 필요시 점수별로 타겟팅 개선.

 

현실 체크: generator가 animations를 과하게 넣는 경우가 왕왕 있습니다. “이벤트 로직 단순화”나 “불필요한 효과 제거”를 분명히 지시하세요.

 

Level 3: Next.js Markdown Résumé Editor(+ PDF)

이번엔 살짝 더 깊게—하지만 여전히 실무적으로.

 

0) 먼저 context & rules

repo 루트에 project-context.md:

• Goal: split‑screen résumé editor + live Markdown preview.
• Tech: Next.js + TypeScript + Tailwind v4, react-markdown.
• Data: name, email, phone, summary, experience[], skills[].
• Layout: 좌측 form / 우측 preview 50:50.
• Rules: TS interfaces, form은 client component, display는 server component, DRY/KISS, 각 기능 뒤 수동 테스트.

 

그리고 ./.cursor/rules/next-ts.mdc에 App Router 패턴, React 19 최적화(불필요한 useCallback/useMemo 지양), Tailwind v4 사용 원칙 등 추가.

 

 

1) 스캐폴딩은 공식 CLI로 정확히

npx create-next-app@latest .
# TypeScript, ESLint, Tailwind, src/app router, Turbopack 선택

서버 띄운 뒤 Cursor에: “project-context.md 참고해서 계획 확인해줘.”

 

2) 코어 빌드

• react-markdown 설치.
• types(Résumé/Experience)와 ResumeForm client component 생성.
• localStorage에서 초기 로드, 변경 시 저장.
• 우측 live preview는 react-markdown으로.
• UI는 담백하게, 각 단계마다 빌드/테스트.

팁: agent가 다파일 생성 중엔 dev가 Internal Server Error를 뱉을 수 있습니다. 대부분 “반쯤 작성된 파일” 탓이니, 작업이 끝난 뒤 dev 재시작하세요.

 

3) UX 소소한 손보기

초안에서 input 텍스트가 너무 연한 경우가 흔합니다. “form input 텍스트 컬러 진하게” 같은 작은 요청으로 즉시 개선.

 

4) PDF Export

html2canvas + jspdf 조합으로 preview를 PDF로 저장. 첫 PDF는 가장 자주 삐뚤고 답답합니다. margin/width/tile을 조절해가며 깔끔하게 다듬으세요.

 

5) 다음 단계 아이디어

다중 résumé 지원, 템플릿 갤러리, GitHub/Google auth, 공유 링크, 유료 테마로 “Pro export” 등.

 

 

Agent vs Ask—언제 바꾸나

• Agent: 파일 만들고 고치고 행동이 필요할 때.
• Ask: 개념 설명, 비교, 설계 검토 등 답변만 필요할 때.

agent가 과감히 손댈까 걱정되면, 먼저 Ask로 물어보고, 수정할 때만 Agent로 전환하세요.

 

 

Context를 프로답게 쓰는 법

Cursor는 코드베이스 전체를 볼 수 있지만, 집중력이 성능입니다.

• 버그/리팩터링 논의 시 특정 파일/라인을 context에 명시.
• 열린 탭은 자동으로 context—작은 변경 루프에 아주 편리.
• 필요 시 외부 docs(예: Font Awesome, README 등)도 추가.
• full‑folder context는 비용↑ 속도↓—정말 필요한 순간만.

 

 

Background Agents & MCP Tools 맛보기

• Background agents: 테스트/빌드/감사처럼 오래 걸리는 일을 뒤에서 처리. 다만 rules가 탄탄한 뒤에.
• MCP Tools: Firebase/Neon/Kubernetes 같은 서비스를 agent가 직접 다룹니다. SDK 다루듯 권한 최소화, 의도 명확화.

 

 

치트시트: Prompts/Flow/Micro‑Habits

먹히는 prompts

• “이 파일에 ARIA 개선을 적용해줘. diff summary에 각 속성 이유를 적어줘.”
• “이 reducer를 작고 순수하게 리팩터. 동작은 동일. tests도 추가.”
• “Tailwind v4 토큰만 사용. v3 패턴 제거.”
• “monthly/yearly toggle 구현: yearly 20% 할인 + yearly 선택 시 effective monthly 함께 표시.”
• “changes.md 생성해서 지금까지 추가한 기능/수정 내역을 기록. 앞으로도 계속 append.”

 

작업 흐름(짧고 단단하게)

1. 관련 파일 열고 context에 추가 → 2) 결과를 1~2문장으로 명확히 → 3) agent diff 제안 검토 후 Keep/Undo → 4) 빌드/테스트 → 5) 작은 단위로 commit.

 

Micro‑Habits

• 초반엔 YOLO 금지.
• 한 번에 하나의 변화—부엌싱크 금지.
• drift 보이면 rules 재강조(“Tailwind v4 only” 등).
• diff summary는 학습 자료—꼭 읽기.

 

Troubleshooting & 자주 겪는 함정

• 또 Tailwind v3가 섞였다 → rules 강화 + 프롬프트에 v4만 사용 고지.
• TS 오류를 숨겼다 → “TS 오류 억제 금지, clean build 유지”를 명문화.
• 토큰 사용량 급증 → context 좁히기, full‑folder 지양, Max Mode 절약.
• 빌드 중 dev가 터진다 → 편집 중인 파일이 반쯤 작성됐을 확률 큼. 완료 후 dev 재시작.
• UI가 과도하게 번쩍 → animations/IntersectionObserver 줄이기.
• $20 플랜에서 model 한도 도달 → Auto로 전환하거나 상위로.

 

 

복붙용 Prompts & Rules

Project rules(예시)

# Philosophy
- 코드의 단순함/효율/유지보수성 우선.
- DRY/KISS 엄격 적용.

# Language & Framework
- React/Next.js는 TypeScript 사용.
- Tailwind CSS v4만 사용. v3 금지. v4 docs 기준.

# Quality
- TS 오류 억제 금지, 항상 깨끗한 build.
- `any`는 최후의 수단.
- 함수는 작고 순수하게. reducers/utils엔 unit tests.

# UX
- 접근성 라벨 충실(ARIA 우선순위).
- JS는 단순/가독성—over‑engineering 금지.

 

Focused edit prompts

• “선택 영역만 편집: quantity selector를 더 명확하게(터치 타깃 확대, focus state 분명히).”
• “이 Provider 함수 동작을 라인 단위로 설명해줘. 수정은 하지 마.”
• “product card hover는 scale/shadow만—prefers-reduced-motion 배려.”
• “pdf-export.ts를 html2canvas + jspdf로 만들고, preview pane에서 export 버튼 추가.”

 

 

FAQ (2025)

1) Cursor vs 일반 AI extension—차이점?
에디터에 Deep‑integrated. chat, inline diff, context, file ops가 자연스럽게 이어집니다.

2) Auto‑Run(YOLO)은 항상 켜둘까?
초반엔 NO. rules가 탄탄해진 뒤에 단계적으로.

3) $20 플랜으로 실무 가능?
Auto 모델 선택이면 충분. premium model 고정 사용은 초과 과금/상위 플랜 고려.

4) Tailwind v3/TS 오류 억제 방지는?
rules에 명시하고, drift 보이면 prompt에서 재확인.

5) repo 전체를 context에 넣을 필요 있나?
아닙니다. 열린 탭 자동 context + 필요한 파일/라인만 지정하세요.

6) 편집 중 dev가 가끔 죽는 이유?
파일이 반쯤 작성된 상태일 수 있음. 완료 후 재시작하면 정상.

7) 배우면서 쓰고 싶은데?
Ask로 설명을 듣고, diff summary로 패턴을 학습하세요.

8) background agents는 안전한가?
rules가 선명하면 유용합니다. 빌드/테스트/감사에 좋고, allow‑list로 제어하세요.

9) JS를 단순하게 유지하려면?
프롬프트에서 분명히: “simple/clean/readable, over‑engineering 금지.” 그리고 쓸데없는 abstraction은 거절.

10) PDF export 깔끔 팁?
margin/width 조절, 복잡 CSS 지양, print stylesheet 고려, 2x 렌더로 선명도 개선.

11) 변경 추적은 어떻게?
Git은 기본. 여기에 사람이 한눈에 보는 changes.md까지 병행.

12) 외부 docs를 context에 넣어도 되나?
가능. 관련 API docs, framework 페이지, README를 지정하면 grounding이 좋아집니다.

 

 

---

 

마지막 한마디

AI는 당신의 감각/판단/책임을 대체하지 않습니다. 대신, rules와 context를 곧게 세우고 짧은 루프로 반복하면—지루한 부분은 압축되고, 당신의 의도가 증폭됩니다. 그게 진짜 초능력입니다.

이제, 솔직한 걸 만드세요—그리고 diff는 작게.