본문으로 건너뛰기

Copilot 모드 활용하기

Copilot 모드란?​

GitHub Copilot은 VS Code에서 네 가지 서로 다른 모드를 제공합니다. 각 모드는 개발 워크플로우의 다양한 요구사항에 맞춰 설계되었으며, 상황에 따라 적절한 모드를 선택하는 것이 중요합니다.

VS Code에서 Copilot Chat 하단의 작은 드롭다운 메뉴를 통해 모드를 전환할 수 있습니다.

네 가지 모드 개요​

모드주요 용도코드 변경제어 수준
Ask빠른 질문/답변❌ 변경 없음완전한 제어
Edit검토 가능한 코드 수정✅ Diff로 표시높은 제어
Agent자율적 멀티스텝 작업✅ 자동 적용낮은 제어
Plan작업 계획 수립❌ 계획만 제공완전한 제어

1. Ask 모드: 빠른 확인과 질문​

개요​

Ask 모드는 가장 단순하고 직접적인 방식입니다. 코드를 변경하지 않고 프로그래밍 관련 질문에 답변을 받을 수 있습니다.

작동 방식​

  • 코드를 하이라이트하고 질문 입력
  • Copilot이 답변 생성
  • 코드 설명, 테스트 제안, 코드 스니펫 제공 등
  • 코드는 절대 자동으로 변경되지 않음

언제 사용하나요?​

✅ 이럴 때 사용하세요:

  • 코드가 어떻게 작동하는지 이해하고 싶을 때
  • 특정 라이브러리 사용법을 알고 싶을 때
  • 엣지 케이스 처리 방법을 확인하고 싶을 때
  • SQL 쿼리 구조를 물어볼 때
  • 알고리즘 효율성 비교가 필요할 때

사용 예시:

Q: "Tailwind CSS로 반응형 네비게이션 바를 어떻게 만들죠?"
Q: "JavaScript에서 클로저가 뭐죠?"
Q: "React에서 input debounce는 어떻게 구현하나요?"
Q: "이 코드의 시간 복잡도는 얼마나 되나요?"

장점​

  • ⚡ 빠른 답변
  • 🔒 코드를 건드리지 않음
  • 📚 학습과 이해에 최적
  • 🎯 현재 에디터 컨텍스트 활용

실습 예제​

# 이 코드를 선택하고 Ask 모드에서 질문해보세요
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# Ask 모드 질문 예시:
# "이 코드의 성능을 개선할 수 있는 방법은?"
# "이 함수의 시간 복잡도는?"
# "메모이제이션을 적용하면 어떻게 되나요?"

2. Edit 모드: 검토 가능한 코드 편집​

개요​

Edit 모드는 여러 파일에 걸쳐 즉시 코드 변경을 적용하지만, 반드시 먼저 diff를 보여주고 사용자의 승인을 기다립니다.

작동 방식​

  1. 수정하려는 파일(들) 선택
  2. 자연어로 변경 사항 설명
  3. Copilot이 인라인 코드 편집 생성
  4. Diff 검토 후 승인 또는 거부
  5. 저장은 사용자가 직접 수행

언제 사용하나요?​

✅ 이럴 때 사용하세요:

  • 정확히 무엇을 바꿀지 알고 있을 때
  • 에러 핸들링 추가
  • 함수를 async/await로 리팩토링
  • 여러 파일의 일관된 변경
  • 레거시 코드의 점진적 개선

사용 예시:

"이 함수에 에러 핸들링을 추가해주세요"
"모든 var를 const/let으로 변경해주세요"
"이 클래스에 타입 힌트를 추가해주세요"
"이 API 호출을 async/await 패턴으로 리팩토링해주세요"

커스텀 인스트럭션과 함께 사용​

Edit 모드의 진가는 커스텀 인스트럭션과 결합할 때 나타납니다.

.github/copilot-instructions.md
## 코드 스타일
- 4 스페이스 들여쓰기 사용
- 함수명은 camelCase, 클래스명은 PascalCase
- 모든 함수에 JSDoc 주석 추가
- 에러 처리는 항상 명시적으로

## 선호하는 패턴
- async/await 선호 (콜백이나 .then() 대신)
- 함수형 프로그래밍 스타일 (map, filter, reduce)
- 불변성 유지

장점​

  • ✅ 변경 전 항상 diff 확인
  • 🎯 외과적 정밀도
  • 👥 팀 규칙 자동 적용 (커스텀 인스트럭션)
  • 🔄 여러 파일 동시 수정 가능

실습 예제​

// Edit 모드에서 다음을 시도해보세요:
// "이 함수에 에러 핸들링과 입력 검증을 추가해주세요"

function calculateDiscount(price, discountPercent) {
    return price * (1 - discountPercent / 100);
}

// Copilot이 다음과 같이 변경할 것입니다:
function calculateDiscount(price, discountPercent) {
    if (typeof price !== 'number' || price < 0) {
        throw new Error('Price must be a positive number');
    }
    if (typeof discountPercent !== 'number' || discountPercent < 0 || discountPercent > 100) {
        throw new Error('Discount percent must be between 0 and 100');
    }
    return price * (1 - discountPercent / 100);
}

3. Agent 모드: 자율적인 멀티스텝 실행​

개요​

Agent 모드는 가장 강력한 모드로, 상위 수준의 프롬프트를 받아 자율적으로 계획을 세우고, 파일을 선택하고, 터미널 명령을 실행하며, 작업이 완료될 때까지 반복적으로 코드를 편집합니다.

작동 방식​

  1. 고수준의 목표 제시
  2. Copilot이 자동으로:
    • 단계별 계획 수립
    • 관련 파일 선택
    • 필요한 도구/명령 실행
    • 코드 편집 자동 적용
    • 일관성 유지를 위한 추가 변경
  3. 위험한 명령은 실행 전 확인 요청

언제 사용하나요?​

✅ 이럴 때 사용하세요:

  • 새 프로젝트 시작 (스캐폴딩)
  • 기능 전체 구현
  • 여러 파일에 걸친 리팩토링
  • 라우팅 로직 정리
  • 프로토타입 빠르게 만들기

❌ 이럴 때는 피하세요:

  • 민감한 프로덕션 코드
  • 정밀한 제어가 필요한 작업
  • 명확한 경계가 없는 레거시 시스템

사용 예시:

"사용자 인증 시스템을 구현해주세요. JWT 토큰 사용, 로그인/회원가입 엔드포인트, 미들웨어 포함"
"이 React 앱에 다크 모드 기능을 추가해주세요"
"REST API를 GraphQL로 마이그레이션해주세요"
"테스트 커버리지를 80% 이상으로 만들어주세요"

Agent 모드의 핵심: 커스텀 인스트럭션​

Agent 모드를 효과적으로 사용하려면 커스텀 인스트럭션이 필수입니다.

.github/copilot-instructions.md
# Next.js 여행 애플리케이션

이것은 TypeScript를 사용하는 Next.js 기반 여행 앱입니다.

## 커밋 전 필수 사항
- `npm run lint` 실행
- Next.js App Router 패턴 준수
- 브라우저 API나 React 훅 사용 시 'use client' 표시
- 새 기능 추가 시 README 업데이트
- `npm run test`로 모든 테스트 통과 확인

## TypeScript와 React 패턴
- 모든 props와 데이터 구조에 TypeScript interface/type 사용
- React 모범 사례 준수 (hooks, 함수형 컴포넌트)
- 컴포넌트는 모듈화하고 단일 책임 원칙 준수

## 스타일링
- Tailwind CSS 클래스 최우선 사용
- 필요시 커스텀 Tailwind 클래스/스타일 정의
- 커스텀 CSS는 최후의 수단

## 리포지토리 구조
- `app/`: Next.js App Router 페이지 및 레이아웃
- `components/`: 재사용 가능한 React 컴포넌트
- `lib/`: 핵심 로직 및 서비스
- `public/`: 정적 자산

장점과 주의사항​

장점:

  • 🚀 빠른 프로토타이핑
  • 🎯 멀티스텝 작업 자동화
  • 🧠 프로젝트 전체 컨텍스트 이해
  • ⚡ 반복 작업 대폭 감소

주의사항:

  • ⚠️ 자동으로 변경 적용 (승인 없이)
  • 📝 명확한 프롬프트 필요
  • 👀 항상 변경 사항 리뷰 필요
  • 🎲 때때로 예상치 못한 파일 수정 가능

실습 예제​

Agent 모드에서 다음을 시도해보세요:

프롬프트: "블로그 시스템을 만들어주세요. 
- Markdown 파일에서 포스트 읽기
- 포스트 목록 페이지
- 개별 포스트 상세 페이지
- 태그 기반 필터링
- 반응형 디자인 (Tailwind 사용)"

Agent가 자동으로:
1. 필요한 파일 구조 생성
2. 컴포넌트 작성
3. 라우팅 설정
4. 스타일링 적용
5. 타입 정의 추가

4. Plan 모드: 실행 전 계획 수립​

개요​

Plan 모드는 코드를 변경하지 않고 작업을 수행하기 위한 상세한 계획을 생성합니다. 실행 전에 전략을 검토하고 싶을 때 유용합니다.

작동 방식​

  1. 목표나 요구사항 설명
  2. Copilot이 단계별 실행 계획 생성
  3. 필요한 파일, 변경 사항, 고려 사항 포함
  4. 코드는 변경하지 않음
  5. 계획에 동의하면 다른 모드로 전환하여 실행

언제 사용하나요?​

✅ 이럴 때 사용하세요:

  • 복잡한 작업 시작 전
  • 아키텍처 결정이 필요할 때
  • 팀과 접근 방법 논의 전
  • 마이그레이션 계획 수립
  • 리스크 평가가 필요한 변경

사용 예시:

"모놀리식 앱을 마이크로서비스로 분리하는 계획을 세워주세요"
"PostgreSQL에서 MongoDB로 마이그레이션하는 단계를 알려주세요"
"이 레거시 코드베이스에 CI/CD를 도입하는 로드맵을 만들어주세요"
"성능 최적화를 위한 접근 방법을 제안해주세요"

장점​

  • 📋 실행 전 전략 검토
  • 🤔 잠재적 문제 사전 파악
  • 👥 팀 논의 자료로 활용
  • 🎯 명확한 실행 단계 확보

실습 예제​

Plan 모드에서 다음을 요청해보세요:

"이 Express.js 앱을 Next.js로 마이그레이션하는 계획을 세워주세요"

Copilot이 제공할 계획:
1. 현재 아키텍처 분석
2. Next.js 프로젝트 초기화
3. API 라우트 마이그레이션 전략
4. 클라이언트 컴포넌트 전환
5. 상태 관리 마이그레이션
6. 테스트 전략
7. 점진적 배포 방안
8. 롤백 계획

모드 선택 가이드​

시나리오별 최적 모드​

시나리오추천 모드이유
코드 이해하기Ask코드 변경 없이 설명만 필요
특정 함수 수정EditDiff 리뷰 후 정확한 수정
새 기능 구현Agent여러 파일 자동 생성/수정
리팩토링 계획Plan실행 전 전략 검토
버그 수정Edit정밀한 제어 필요
프로토타입 제작Agent빠른 스캐폴딩
마이그레이션Plan → Agent계획 수립 후 실행
학습/탐색Ask질문과 답변만

워크플로우 예시​

복잡한 기능 구현 시:

  1. Plan: "사용자 인증 시스템 구현 계획을 세워주세요"
  2. 검토: 계획 확인 및 수정
  3. Agent: "계획대로 구현해주세요"
  4. Edit: 특정 부분 미세 조정
  5. Ask: "이 보안 설정이 충분한가요?"

시니어 개발자를 위한 조언​

Agent 모드는 시니어에게 더 유용합니다​

많은 사람들이 Agent 모드를 초보자용으로 생각하지만, 실제로는 경험 많은 개발자가 더 효과적으로 활용할 수 있습니다.

이유:

  • 명확하고 강력한 인스트럭션을 작성할 수 있음
  • 시스템 구조와 취약점을 이해
  • 언제 변경을 리뷰하고 언제 신뢰할지 판단 가능
  • 커스텀 인스트럭션을 효과적으로 작성

커스텀 인스트럭션의 힘​

시니어 개발자가 작성한 커스텀 인스트럭션은 팀 전체에게 혜택을 줍니다:

## 우리 팀의 원칙
- 네이밍 패턴: feature/user-actions 형식
- 디자인 원칙: SOLID, DRY, KISS
- 주의할 점: legacy-auth 모듈은 건드리지 말 것
- 코드 리뷰: 모든 변경은 2명 이상 승인 필요

적재적소에 맞는 모드 선택​

  • 민감한 시스템: Edit 모드 (정밀한 제어)
  • 실험/프로토타입: Agent 모드 (빠른 반복)
  • 레거시 코드: Edit 모드 (주의 깊은 변경)
  • 새 프로젝트: Agent 모드 (빠른 시작)

실전 팁​

1. 항상 Diff를 읽으세요​

모든 모드에서 가장 중요한 규칙:

⚠️ ALWAYS READ THE DIFF ⚠️

2. 커스텀 인스트럭션 활용​

프로젝트 루트에 .github/copilot-instructions.md 생성:

---
description: 'Copilot 개발 가이드라인'
applyTo: '**'
---

# 프로젝트별 규칙

## 코드 스타일
- [구체적 규칙]

## 금지 사항
- [건드리지 말아야 할 파일/패턴]

## 선호 사항
- [선호하는 라이브러리/패턴]

3. 점진적으로 시작​

Ask → Edit → Agent 순서로 학습
  • Ask로 익숙해지기
  • Edit로 제어된 변경 경험
  • 준비되면 Agent 사용

4. 명확한 프롬프트 작성​

나쁜 예:

"코드 좀 고쳐줘"

좋은 예:

"UserController.ts의 login 메서드에 rate limiting을 추가해주세요.
- express-rate-limit 라이브러리 사용
- 5분당 최대 5회 시도
- 초과 시 429 상태 코드 반환
- 적절한 에러 메시지 포함"

5. 반복적 개선​

Agent 모드에서 한 번에 완벽을 기대하지 마세요:

1차: Agent로 기본 구조 생성
2차: Edit로 세부 조정
3차: Ask로 검증

실습 과제​

과제 1: 모드 비교 실습​

동일한 작업을 세 가지 모드로 수행하고 차이점 비교:

작업: "할 일 목록(Todo List) 컴포넌트 만들기"

  1. Ask 모드: "React로 할 일 목록을 어떻게 만들죠?"
  2. Edit 모드: "이 파일에 할 일 목록 컴포넌트를 추가해주세요"
  3. Agent 모드: "완전한 할 일 목록 앱을 만들어주세요 (CRUD, 상태 관리, 스타일링 포함)"

과제 2: 커스텀 인스트럭션 작성​

자신의 프로젝트에 맞는 .github/copilot-instructions.md 작성:

  • 코드 스타일 규칙
  • 선호하는 라이브러리
  • 금지 사항
  • 테스트 요구사항

과제 3: Plan → Agent 워크플로우​

  1. Plan 모드로 복잡한 기능의 구현 계획 수립
  2. 계획 검토 및 수정
  3. Agent 모드로 실행
  4. Edit 모드로 미세 조정
  5. Ask 모드로 최종 검증

모범 사례 요약​

✅ DO (이렇게 하세요)​

  • ✅ 항상 diff를 리뷰하세요
  • ✅ 커스텀 인스트럭션을 작성하세요
  • ✅ 작업에 맞는 모드를 선택하세요
  • ✅ 명확하고 구체적인 프롬프트를 작성하세요
  • ✅ 점진적으로 복잡도를 높이세요
  • ✅ Git으로 변경 사항을 추적하세요

❌ DON'T (이렇게 하지 마세요)​

  • ❌ Agent 모드를 맹목적으로 신뢰하지 마세요
  • ❌ 프로덕션에 바로 적용하지 마세요
  • ❌ 모호한 프롬프트를 사용하지 마세요
  • ❌ 모든 작업에 Agent 모드를 사용하지 마세요
  • ❌ 커스텀 인스트럭션 없이 복잡한 작업을 하지 마세요
  • ❌ 변경 사항 리뷰를 건너뛰지 마세요

추가 학습 자료​

공식 문서​

관련 블로그 포스트​

요약​

GitHub Copilot의 네 가지 모드는 각각 고유한 목적을 가지고 있습니다:

모드핵심 특징한 문장 요약
Ask질문/답변"빠른 확인이 필요할 때"
Edit검토 후 적용"내가 제어하되, 더 빠르게"
Agent자율 실행"내가 원하는 걸 알아서 해줘"
Plan계획 수립"실행 전에 계획부터"

핵심 원칙:

  1. 작업에 맞는 모드 선택
  2. 커스텀 인스트럭션 활용
  3. 항상 변경 사항 리뷰
  4. 점진적으로 학습

이 도구들은 여러분의 판단을 보완하기 위해 설계되었습니다. 여러분의 일을 더 잘하도록 돕기 위한 것이지, 대체하기 위한 것이 아닙니다.

그리고 무엇보다 중요한 것:

⚠️ 항상 diff를 읽으세요! ⚠️

다음 단계​

Copilot의 다양한 모드를 익혔다면 이제 영향력에서 Copilot이 실제 개발 생산성에 미치는 영향을 살펴보세요.