Continue.dev 가이드

소개

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 사이드바가 보이지 않음

해결:

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 가이드의 핵심 개념과 흐름을 정리합니다.
• 소개를 단계별로 이해합니다.
• 실전 적용 시 기준과 주의점을 확인합니다.