💬
10:30 - 11:00 (30분)
Cursor의 세 가지 모드 이해하기
Chat, Agent, Plan 모드의 원리와 활용법
💡 "세부 지시 대신, 목표를 말하세요"
🎯 학습 목표
- ✓Chat, Agent, Plan 세 가지 모드의 차이점 이해하기
- ✓각 모드의 적절한 사용 시점 파악하기
- ✓Plan 모드의 강력한 자동화 기능 이해하기
- ✓효과적인 AI 대화법 익히기
📚 세 가지 모드 상세 비교
Chat궁금한 것을 물어보는 대화형 도우미
🔍 언제 사용하나요?
- • 코드의 특정 부분이 무엇을 하는지 궁금할 때
- • 에러 메시지의 의미를 알고 싶을 때
- • 어떤 기능을 어떻게 구현할지 아이디어가 필요할 때
- • 개념이나 문법에 대해 설명이 필요할 때
💬 예시 대화
"이 코드에서 forEach가 무슨 역할을 하는지 설명해줘"
"JavaScript에서 배열을 정렬하려면 어떻게 해?"
"JavaScript에서 배열을 정렬하려면 어떻게 해?"
⚠️ 주의: Chat 모드는 코드를 직접 수정하지 않습니다. 설명과 제안만 제공합니다.
AgentAI가 직접 코드를 수정하고 파일을 생성
🔧 언제 사용하나요?
- • 특정 기능을 추가하거나 수정할 때
- • 버그를 수정해달라고 요청할 때
- • 디자인이나 스타일을 변경할 때
- • 새로운 파일을 생성해야 할 때
💬 예시 대화
"버튼 색상을 파란색으로 바꿔줘"
"로그인 기능을 추가해줘"
"이 에러를 수정해줘: [에러 메시지]"
"로그인 기능을 추가해줘"
"이 에러를 수정해줘: [에러 메시지]"
✅ 장점: 변경사항을 미리 보여주고, 승인 후 적용됩니다. 안전하게 검토 가능!
Plan전체 프로젝트를 기획하고 실행하는 자율 에이전트
🚀 언제 사용하나요?
- • 새로운 프로젝트를 처음부터 만들 때
- • 여러 파일에 걸친 큰 변경이 필요할 때
- • 복잡한 기능을 한 번에 구현할 때
- • "무엇을 만들지"만 알고, "어떻게"는 AI에게 맡길 때
💬 예시 대화
"설문조사 앱을 만들어줘. 질문을 추가하고, 응답을 수집하고, 결과를 차트로 보여주는 기능이 필요해"
🔮 Plan 모드의 마법
- 1. 계획 수립: AI가 필요한 파일과 구조를 계획
- 2. 검토 요청: 계획을 보여주고 승인을 요청
- 3. 자동 실행: 승인하면 하나씩 파일을 생성
- 4. 완성: 동작하는 앱이 완성!
🧭 모드 선택 가이드
❓
궁금할 때
→ Chat 모드
🔧
수정할 때
→ Agent 모드
🏗️
만들 때
→ Plan 모드
💡 효과적인 AI 대화법
❌ 비효과적인 대화
- "버튼 만들어줘"
- "예쁘게 해줘"
- "작동하게 해줘"
- "에러 고쳐줘"
✓ 효과적인 대화
- "제출 버튼을 파란색 배경에 흰색 글씨로 만들어줘"
- "버튼에 마우스를 올리면 살짝 커지는 효과 추가해줘"
- "버튼 클릭하면 폼 데이터를 콘솔에 출력해줘"
- "TypeError: Cannot read property 'map' 에러가 나는데 수정해줘"
⏭️ 다음 세션 예고
🌐 서버 없이 브라우저에서 동작하는 앱 만들기
배운 모드들을 활용해서 실제로 동작하는 앱을 만들어봅니다!
- ✓ 계산기 앱 만들기
- ✓ 타자 연습기 만들기
- ✓ 부서 연락처 검색기 만들기
👨🏫 강사 노트
⏰ 시간 배분: 각 모드 설명 7분씩 (21분), 대화법 5분, Q&A 4분
🎯 핵심 메시지: "Plan 모드가 오늘의 핵심입니다. 목표만 말하면 AI가 계획을 세웁니다."
💬 데모: 간단한 예시로 세 모드 차이를 실시간 시연
🔄 주의: Plan 모드 사용 시 계획을 꼭 검토하도록 강조