Continue 가이드

소개

Continue.dev는 VS Code와 JetBrains IDE에서 사용할 수 있는 오픈소스 AI 코딩 어시스턴트입니다. GitHub Copilot과 유사하지만, 다양한 LLM 제공자를 자유롭게 선택하고 설정할 수 있습니다.

왜 Continue인가?

핵심 기능

• 인라인 편집 (Cmd+I): 코드 중간에 AI 호출
• 채팅 (Cmd+L): 사이드바에서 대화형 코딩
• 자동완성: GitHub Copilot처럼 Tab 키로 완성
• 문서 검색: @docs로 문서 참조
• 코드베이스 검색: @codebase로 전체 프로젝트 검색
• 컨텍스트 제공자: 파일, 터미널, 문제 등 자동 컨텍스트

설치

VS Code 확장 설치

방법 1: 마켓플레이스

# VS Code 열기
1. Extensions (Cmd/Ctrl + Shift + X)
2. "Continue" 검색
3. "Continue - Codestral, Claude, and more" 설치
4. Reload

방법 2: 커맨드라인

code --install-extension continue.continue

JetBrains IDE 설치

# IntelliJ, PyCharm, WebStorm 등
1. Settings → Plugins
2. "Continue" 검색
3. Install
4. Restart IDE

초기 설정

설치 후 처음 실행 시:

# 1. Continue 사이드바 열기
Cmd/Ctrl + L

# 2. LLM 제공자 선택
- Ollama (로컬, 무료)
- Anthropic Claude
- OpenAI GPT-4
- Google Gemini
- Azure OpenAI
- 기타 커스텀

# 3. API 키 입력 (필요 시)
# Ollama 선택 시 API 키 불필요

기본 사용법

인라인 편집 (Cmd+I)

코드 작성 중 AI를 즉시 호출하여 편집하거나 생성합니다. 가장 자주 사용하는 기능입니다.

사용 예시

// 1. 함수 작성 요청
// 커서를 빈 줄에 두고 Cmd+I

[Continue]: "사용자 인증 함수 만들어줘. JWT 토큰 검증."

// AI가 생성:
function verifyToken(token) {
  const jwt = require('jsonwebtoken');
  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    return { valid: true, user: decoded };
  } catch (error) {
    return { valid: false, error: error.message };
  }
}

// 2. 코드 리팩토링
// 기존 코드 선택 후 Cmd+I

function processUsers(users) {
  let result = [];
  for (let i = 0; i < users.length; i++) {
    if (users[i].active) {
      result.push(users[i].name);
    }
  }
  return result;
}

[Continue]: "이 코드를 함수형으로 리팩토링해줘"

// AI가 변환:
const processUsers = (users) =>
  users
    .filter(user => user.active)
    .map(user => user.name);

채팅 (Cmd+L)

사이드바에서 AI와 대화하며 코드를 작성하고 질문합니다.

# 채팅 패널 열기
Cmd/Ctrl + L

💬 You: "React 컴포넌트 만들어줘. 사용자 프로필 카드.
이름, 이메일, 아바타 표시. TypeScript 사용."

🤖 Continue: "UserProfileCard.tsx를 생성하겠습니다."

// 파일이 생성되고 코드가 삽입됨

채팅 슬래시 명령어

자동완성 (Tab)

타이핑하면 자동으로 코드 제안이 나타납니다. Tab 키로 수락.

// 타이핑 중...
function fetchUser(

// Continue가 자동 제안 (회색 텍스트):
function fetchUser(id) {
  return fetch(`/api/users/${id}`)
    .then(res => res.json());
}

// Tab 키로 수락

고급 기능

컨텍스트 제공자

@ 기호로 특정 컨텍스트를 참조할 수 있습니다.

@codebase - 코드베이스 검색

💬 You: "@codebase 사용자 인증 로직이 어디 있어?"

🤖 Continue: "src/auth/verifyToken.js에 JWT 검증 로직이 있습니다."

@docs - 문서 참조

💬 You: "@docs React useEffect 사용법 알려줘"

🤖 Continue: "React 공식 문서를 참조했습니다. useEffect는..."

@file - 특정 파일 참조

💬 You: "@file:src/App.tsx 이 파일에 라우팅 추가해줘"

@terminal - 터미널 출력 참조

💬 You: "@terminal 이 에러 수정해줘"

# 터미널의 마지막 출력을 AI가 읽고 분석

@problems - VS Code 문제 패널 참조

💬 You: "@problems 모든 경고 수정해줘"

멀티파일 편집

한 번의 요청으로 여러 파일을 동시에 수정할 수 있습니다.

💬 You: "사용자 인증 시스템 전체 추가해줘.
- auth.js (JWT 로직)
- middleware.js (Express 미들웨어)
- routes/auth.js (회원가입/로그인 라우트)
- models/User.js (Mongoose 모델)

필요한 파일 모두 생성해줘."

🤖 Continue: "4개 파일을 생성하겠습니다..."

# 파일들이 자동 생성되고 내용이 채워짐

커스텀 명령어

자주 사용하는 작업을 커스텀 슬래시 명령으로 저장할 수 있습니다.

// config.json
{
  "slashCommands": [
    {
      "name": "test",
      "description": "Generate unit tests",
      "prompt": "Write comprehensive unit tests for {{{ input }}} using Jest"
    },
    {
      "name": "docstring",
      "description": "Add docstrings",
      "prompt": "Add detailed docstrings to this code: {{{ input }}}"
    }
  ]
}

사용:

# 코드 선택 후
💬 You: "/test"
# → 자동으로 테스트 코드 생성

설정 (config.json)

설정 파일 열기

# VS Code에서
Cmd/Ctrl + Shift + P → "Continue: Open Config"

# 또는 직접 편집
~/.continue/config.json  # macOS/Linux
%USERPROFILE%\.continue\config.json  # Windows

LLM 설정

Claude 설정

{
  "models": [
    {
      "title": "Claude Sonnet (균형)",
      "provider": "anthropic",
      "model": "claude-",
      "apiKey": "YOUR_ANTHROPIC_API_KEY"
    }
  ]
}

Ollama 설정 (로컬)

{
  "models": [
    {
      "title": "Llama 3.2 (로컬)",
      "provider": "ollama",
      "model": "llama3.2",
      "apiBase": "http://localhost:11434"
    }
  ]
}

다중 모델 설정

{
  "models": [
    {
      "title": "Claude (복잡한 작업)",
      "provider": "anthropic",
      "model": "claude-",
      "apiKey": "${ANTHROPIC_API_KEY}"
    },
    {
      "title": "GPT-4 (일반)",
      "provider": "openai",
      "model": "gpt-4",
      "apiKey": "${OPENAI_API_KEY}"
    },
    {
      "title": "Ollama (간단)",
      "provider": "ollama",
      "model": "llama3.2"
    }
  ],
  "tabAutocompleteModel": {
    "title": "Starcoder (자동완성)",
    "provider": "ollama",
    "model": "starcoder2:3b"
  }
}

컨텍스트 제공자 설정

{
  "contextProviders": [
    {
      "name": "code",
      "params": {}
    },
    {
      "name": "docs",
      "params": {
        "startUrl": "https://react.dev"
      }
    },
    {
      "name": "diff",
      "params": {}
    },
    {
      "name": "terminal",
      "params": {}
    },
    {
      "name": "problems",
      "params": {}
    },
    {
      "name": "codebase",
      "params": {}
    }
  ]
}

완전한 설정 예시

{
  "models": [
    {
      "title": "Claude Sonnet (균형)",
      "provider": "anthropic",
      "model": "claude-",
      "apiKey": "${ANTHROPIC_API_KEY}"
    },
    {
      "title": "Llama 3.2",
      "provider": "ollama",
      "model": "llama3.2"
    }
  ],
  "tabAutocompleteModel": {
    "title": "Starcoder",
    "provider": "ollama",
    "model": "starcoder2:3b"
  },
  "embeddingsProvider": {
    "provider": "ollama",
    "model": "nomic-embed-text"
  },
  "contextProviders": [
    {
      "name": "code",
      "params": {}
    },
    {
      "name": "docs",
      "params": {}
    },
    {
      "name": "diff",
      "params": {}
    },
    {
      "name": "terminal",
      "params": {}
    },
    {
      "name": "codebase",
      "params": {}
    }
  ],
  "slashCommands": [
    {
      "name": "edit",
      "description": "Edit highlighted code"
    },
    {
      "name": "comment",
      "description": "Write comments for highlighted code"
    },
    {
      "name": "share",
      "description": "Export this session to markdown"
    },
    {
      "name": "cmd",
      "description": "Generate a shell command"
    }
  ]
}

Ollama 연동 (무료 사용)

Ollama를 사용하면 API 키 없이 완전 무료로 Continue를 사용할 수 있습니다.

Ollama 설치

# macOS/Linux
curl -fsSL https://ollama.com/install.sh | sh

# Windows
# https://ollama.com 에서 다운로드

# 모델 다운로드
ollama pull llama3.2         # 채팅용
ollama pull starcoder2:3b    # 자동완성용
ollama pull nomic-embed-text # 임베딩용

Continue + Ollama 설정

{
  "models": [
    {
      "title": "Llama 3.2",
      "provider": "ollama",
      "model": "llama3.2"
    }
  ],
  "tabAutocompleteModel": {
    "title": "Starcoder",
    "provider": "ollama",
    "model": "starcoder2:3b"
  },
  "embeddingsProvider": {
    "provider": "ollama",
    "model": "nomic-embed-text"
  }
}

추천 Ollama 모델

Ollama 가이드 →

실전 워크플로우

새 기능 개발

# 1. Cmd+L로 채팅 열기
💬 You: "Next.js 프로젝트에 블로그 기능 추가해줘.

필요한 것:
- app/blog/page.tsx (블로그 목록)
- app/blog/[slug]/page.tsx (개별 글)
- lib/posts.ts (Markdown 파싱)
- 글 3개 샘플 (content/posts/)

TypeScript + Tailwind 사용."

🤖 Continue: "블로그 기능을 생성하겠습니다..."

# 여러 파일이 자동 생성됨

버그 수정

# 1. 터미널에서 에러 발생
TypeError: Cannot read property 'map' of undefined

# 2. Cmd+L
💬 You: "@terminal 이 에러 수정해줘"

🤖 Continue: "UserList.tsx의 users가 undefined입니다.
Optional chaining을 추가하겠습니다."

# 자동으로 파일이 수정됨

코드 리팩토링

# 1. 코드 선택
# 2. Cmd+I
[Continue]: "이 코드를 다음과 같이 개선해줘:
- TypeScript로 변환
- 함수형으로 리팩토링
- 에러 처리 추가
- JSDoc 주석 작성"

# AI가 즉시 리팩토링

테스트 작성

# 함수 선택 후 Cmd+I
[Continue]: "이 함수에 대한 Jest 테스트 작성해줘.
엣지 케이스 모두 포함."

# 자동으로 .test.ts 파일 생성

문서화

# 코드 선택 후
💬 You: "/comment"

# 또는
💬 You: "이 모듈에 대한 README.md 작성해줘.
설치, 사용법, API 문서 포함."

모범 사례

효과적인 사용법

1. 적절한 기능 선택

2. 컨텍스트 제공

• 명확한 요청: "React 컴포넌트" 대신 "React + TypeScript + Tailwind 컴포넌트"
• @ 활용: @file, @codebase, @docs로 정확한 컨텍스트
• 예시 포함: 원하는 결과의 예시를 제공

3. 모델 전환

# config.json에서 여러 모델 설정
# 간단한 작업: Ollama
# 복잡한 작업: Claude
# 채팅 중 모델 전환 가능

비용 최적화

• Ollama 우선: 간단한 작업은 로컬 모델 사용
• 자동완성 모델: 가벼운 모델 (starcoder2:3b) 사용
• 컨텍스트 최소화: 필요한 파일만 @file로 참조
• 임베딩 로컬화: Ollama의 nomic-embed-text 사용

생산성 팁

1. 단축키 숙달: Cmd+I, Cmd+L 근육 기억
2. 슬래시 명령: /edit, /comment, /commit 활용
3. 커스텀 명령: 반복 작업을 슬래시 명령으로 저장
4. 멀티모델: 작업별로 최적 모델 사용
5. 컨텍스트 제공자: @terminal, @problems로 즉시 디버깅

다른 도구와 비교

vs GitHub Copilot

vs Cursor

vs Codex

Continue는 IDE 확장 기반의 보조형 도구인 반면, Codex는 앱/웹/CLI에서 작업 단위로 실행되는 코딩 에이전트입니다. 자세한 흐름은 Codex 가이드를 참고하세요.

vs Cline

운영 플레이북

Continue를 팀에서 안정적으로 쓰려면 모델 선택, 설정 배포, 비용 관리를 분리해서 운영하는 것이 좋습니다. 아래는 실무에서 바로 적용 가능한 최소 기준안입니다.

모델 정책 기준

팀 설정 템플릿

{
  "$schema": "https://continue.dev/config.json",
  "models": [
    {
      "title": "Primary",
      "provider": "anthropic",
      "model": "claude-"
    },
    {
      "title": "CheapFast",
      "provider": "ollama",
      "model": "qwen2.5-coder"
    }
  ],
  "tabAutocompleteModel": {
    "provider": "ollama",
    "model": "starcoder2:3b"
  }
}

비용 관리 체크리스트

• 개인/팀 월 예산 상한을 미리 정의
• 자동완성 모델은 저비용 모델로 고정
• 긴 컨텍스트 요청은 명시적으로 승인 후 실행
• 주간 사용량 점검(요청 수, 평균 토큰, 실패 재시도 횟수)

트러블슈팅

일반적인 문제

❌ Continue 사이드바가 보이지 않음

해결:

Cmd/Ctrl + L # 사이드바 토글
# 또는
View → Command Palette → "Continue: Open Continue"

❌ API 키 오류

해결:

# config.json 확인
"apiKey": "${ANTHROPIC_API_KEY}"  # 환경 변수 사용
"apiKey": "sk-ant-api03-xxx"      # 또는 직접 입력

# 환경 변수 설정
export ANTHROPIC_API_KEY="sk-ant-api03-xxx"
code  # VS Code 재시작

❌ Ollama 연결 실패

해결:

# Ollama 서버 확인
ollama list
curl http://localhost:11434

# Ollama 재시작
ollama serve

❌ 자동완성이 느림

해결:

# 더 가벼운 모델 사용
{
  "tabAutocompleteModel": {
    "provider": "ollama",
    "model": "starcoder2:3b"  # 1.7GB, 빠름
  }
}

❌ 파일이 생성되지 않음

해결:

• 더 명확한 요청 (파일 경로 명시)
• 워크스페이스 폴더가 열려 있는지 확인
• 파일 쓰기 권한 확인

디버깅

# 개발자 도구 열기
Help → Toggle Developer Tools

# Console에서 Continue 로그 확인
# 에러 메시지 확인

핵심 정리

• Continue.dev 가이드의 핵심 개념과 흐름을 정리합니다.
• 소개를 단계별로 이해합니다.
• 실전 적용 시 기준과 주의점을 확인합니다.