VSCode Extension으로 만드는 나만의 AI 코딩 도우미

VSCode Extension API를 활용하여 인라인 코드 제안, 코드 액션, 단축키 등 실무에서 바로 쓸 수 있는 AI 통합 기능을 개발하는 방법을 배웁니다. 초급 개발자도 쉽게 따라할 수 있도록 실전 예제와 함께 구성했습니다.

1. VSCode Extension API 이해

어느 날 이주니어 씨는 회사에서 코드를 작성하다가 문득 궁금해졌습니다. "요즘 사용하는 AI 코딩 도구들, 이거 VSCode에 어떻게 붙어있는 걸까?" 팀 리더인 최시니어 씨에게 물어보니 이렇게 답했습니다.

"그건 바로 VSCode Extension API 덕분이지!"

VSCode Extension API는 한마디로 VSCode 에디터를 확장하고 커스터마이징할 수 있게 해주는 공식 인터페이스입니다. 마치 레고 블록처럼 기본 에디터에 원하는 기능을 자유롭게 추가할 수 있습니다.

이것을 제대로 이해하면 AI 코딩 어시스턴트부터 커스텀 코드 분석 도구까지 무엇이든 만들 수 있습니다.

다음 코드를 살펴봅시다.

// extension.ts - Extension의 시작점
import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    // Extension이 활성화될 때 호출됩니다
    console.log('나만의 Extension이 활성화되었습니다!');

    // 명령어 등록 - Ctrl+Shift+P에서 실행 가능
    let disposable = vscode.commands.registerCommand('myext.hello', () => {
        vscode.window.showInformationMessage('안녕하세요, Extension 세계!');
    });

    context.subscriptions.push(disposable);
}

export function deactivate() {
    // Extension이 비활성화될 때 정리 작업
}

이주니어 씨는 입사 6개월 차 프론트엔드 개발자입니다. 매일 VSCode로 코드를 작성하면서 항상 궁금했던 게 있었습니다.

GitHub Copilot이나 다른 AI 도구들은 도대체 어떻게 VSCode 안에서 그렇게 자연스럽게 동작하는 걸까요? 최시니어 씨가 화면을 공유하며 설명을 시작했습니다.

"좋은 질문이야. 이건 모두 VSCode Extension API 덕분이지." Extension API란 무엇인가 쉽게 비유하자면, VSCode Extension API는 마치 스마트폰의 앱 개발 API와 같습니다.

아이폰이나 안드로이드폰에서 개발자들이 다양한 앱을 만들 수 있는 것처럼, VSCode도 개발자들이 원하는 기능을 자유롭게 추가할 수 있도록 API를 제공합니다. 게임도 만들고, 채팅 앱도 만들듯이, VSCode에서는 코드 자동완성부터 테마 변경까지 무엇이든 만들 수 있습니다.

Extension이 필요한 이유 Extension이 없던 시절에는 어땠을까요? 개발자들은 각자 자신만의 에디터를 처음부터 만들어야 했습니다.

코드 하이라이팅도 직접 구현하고, 디버거도 직접 만들어야 했습니다. 더 큰 문제는 팀마다 다른 에디터를 사용하면 협업이 어려웠다는 점입니다.

누구는 Vim, 누구는 Emacs, 누구는 Sublime Text를 쓰면서 설정을 공유할 수도 없었습니다. Extension API의 등장 바로 이런 문제를 해결하기 위해 VSCode Extension API가 등장했습니다.

Extension API를 사용하면 하나의 통일된 에디터 위에서 각자 원하는 기능을 추가할 수 있습니다. 또한 만든 Extension을 마켓플레이스에 공유하면 전 세계 개발자들이 사용할 수 있습니다.

무엇보다 VSCode 팀이 제공하는 강력한 기본 기능 위에서 작업할 수 있다는 큰 이점이 있습니다. 코드 구조 이해하기 위의 코드를 한 줄씩 살펴보겠습니다.

먼저 2번째 줄에서 vscode 모듈을 임포트합니다. 이것이 모든 Extension API의 시작점입니다.

다음으로 4번째 줄의 activate 함수가 핵심입니다. 이 함수는 사용자가 Extension을 설치하거나 VSCode를 시작할 때 자동으로 호출됩니다.

8번째 줄에서는 명령어를 등록합니다. 사용자가 Ctrl+Shift+P를 누르고 명령어를 선택하면 9번째 줄의 콜백이 실행됩니다.

마지막으로 12번째 줄에서 등록한 명령어를 context에 추가하여 Extension이 종료될 때 자동으로 정리되도록 합니다. 실무에서의 활용 실제 현업에서는 어떻게 활용할까요?

예를 들어 회사에서 자체 개발한 프레임워크를 사용한다고 가정해봅시다. 팀원들이 이 프레임워크의 컴포넌트를 빠르게 생성할 수 있도록 Extension을 만들 수 있습니다.

명령어 하나로 보일러플레이트 코드를 자동 생성하고, 팀 컨벤션에 맞는 폴더 구조를 만들어주는 식입니다. 많은 대기업에서 이런 식으로 사내 전용 Extension을 적극적으로 활용하고 있습니다.

주의사항 하지만 주의할 점도 있습니다. 초보 개발자들이 흔히 하는 실수 중 하나는 activate 함수에서 너무 무거운 작업을 하는 것입니다.

Extension이 활성화될 때마다 실행되므로, 여기서 파일을 많이 읽거나 네트워크 요청을 하면 VSCode 시작이 느려질 수 있습니다. 따라서 무거운 작업은 lazy loading 방식으로 실제로 필요할 때만 수행해야 합니다.

정리 다시 이주니어 씨의 이야기로 돌아가 봅시다. 최시니어 씨의 설명을 들은 이주니어 씨는 눈이 반짝였습니다.

"아, 그래서 모든 Extension이 비슷한 구조로 되어 있었군요!" Extension API를 제대로 이해하면 VSCode를 자신의 작업 스타일에 맞게 완벽하게 커스터마이징할 수 있습니다. 여러분도 오늘 배운 내용을 바탕으로 첫 Extension을 만들어 보세요.

실전 팁

💡 - activate 함수는 가볍게 유지하고, 무거운 초기화는 필요할 때 수행하세요

package.json의 activationEvents를 활용하면 필요한 시점에만 Extension을 활성화할 수 있습니다
VSCode API 문서를 자주 참고하세요 - api.md 파일이 가장 정확한 레퍼런스입니다

2. 인라인 코드 제안 (Inline Suggestions)

이주니어 씨가 코드를 작성하는데 자동으로 회색 글씨로 다음 코드가 제안되는 걸 보고 감탄했습니다. "이런 기능도 만들 수 있나요?" 최시니어 씨가 미소를 지으며 답했습니다.

"물론이지, InlineCompletionItemProvider를 사용하면 돼."

인라인 코드 제안은 사용자가 타이핑하는 동안 회색 텍스트로 코드를 미리 보여주는 기능입니다. 마치 친구가 옆에서 "이렇게 작성하면 어때?"라고 속삭이는 것처럼 자연스럽게 제안합니다.

GitHub Copilot의 핵심 기능이 바로 이것입니다.

다음 코드를 살펴봅시다.

import * as vscode from 'vscode';

class MyInlineCompletionProvider implements vscode.InlineCompletionItemProvider {
    async provideInlineCompletionItems(
        document: vscode.TextDocument,
        position: vscode.Position,
        context: vscode.InlineCompletionContext
    ): Promise<vscode.InlineCompletionItem[]> {
        // 현재 라인의 텍스트 가져오기
        const line = document.lineAt(position).text;

        // 간단한 예: console.log를 입력하면 자동 완성
        if (line.includes('console')) {
            return [new vscode.InlineCompletionItem(
                '.log("Hello from inline suggestion!");',
                new vscode.Range(position, position)
            )];
        }
        return [];
    }
}

// Extension activate 함수에서 등록
vscode.languages.registerInlineCompletionItemProvider(
    { pattern: '**/*.{js,ts}' },
    new MyInlineCompletionProvider()
);

이주니어 씨는 매일 GitHub Copilot을 사용하면서 마법 같다고 느꼈습니다. 코드를 조금만 작성하면 나머지를 알아서 채워주니까요.

그런데 이런 기능을 직접 만들 수 있다는 게 믿기지 않았습니다. 최시니어 씨가 화면을 열며 설명을 시작했습니다.

"생각보다 어렵지 않아. 핵심은 InlineCompletionItemProvider라는 인터페이스야." 인라인 제안이란 무엇인가 쉽게 비유하자면, 인라인 제안은 마치 자동완성 키보드와 같습니다.

스마트폰으로 문자를 입력할 때 다음 단어를 예측해서 보여주는 기능 있죠? VSCode의 인라인 제안도 똑같은 원리입니다.

사용자가 무엇을 입력하려는지 예측해서 회색 텍스트로 미리 보여주는 것입니다. Tab 키를 누르면 그 제안을 그대로 사용할 수 있습니다.

왜 인라인 제안이 필요한가 기존의 자동완성 팝업은 한계가 있었습니다. 팝업 메뉴가 뜨면 시야를 가리고, 여러 옵션 중 하나를 선택해야 했습니다.

코드 흐름이 끊기는 느낌이 들었습니다. 더 큰 문제는 여러 줄의 코드를 한 번에 제안할 수 없었다는 점입니다.

함수 전체를 자동완성하고 싶어도 불가능했습니다. 인라인 제안의 등장 바로 이런 문제를 해결하기 위해 인라인 제안이 등장했습니다.

인라인 제안을 사용하면 시야를 가리지 않고 자연스럽게 제안을 볼 수 있습니다. 또한 여러 줄의 코드를 한 번에 제안할 수도 있습니다.

무엇보다 Tab 키 하나로 바로 수락할 수 있어 코딩 흐름이 끊기지 않는다는 큰 이점이 있습니다. 코드 동작 원리 위의 코드를 단계별로 살펴보겠습니다.

먼저 3번째 줄에서 InlineCompletionItemProvider 인터페이스를 구현합니다. 이것이 핵심입니다.

4-8번째 줄의 provideInlineCompletionItems 함수는 사용자가 타이핑할 때마다 VSCode가 자동으로 호출합니다. 10번째 줄에서 현재 커서가 있는 라인의 텍스트를 가져옵니다.

13번째 줄에서 'console'이라는 단어가 포함되어 있는지 확인하고, 포함되어 있다면 14-16번째 줄에서 새로운 InlineCompletionItem을 생성하여 반환합니다. 마지막으로 23-26번째 줄에서 이 Provider를 JavaScript와 TypeScript 파일에 등록합니다.

실무 활용 사례 실제로 어떻게 활용할 수 있을까요? 예를 들어 회사에서 특정 API 패턴을 자주 사용한다고 가정해봅시다.

REST API를 호출하는 코드를 작성할 때마다 항상 비슷한 구조가 반복됩니다. 이럴 때 'fetch'라고 입력하면 회사의 표준 API 호출 패턴을 자동으로 제안하도록 Extension을 만들 수 있습니다.

에러 핸들링, 인증 헤더, 타임아웃 설정까지 모두 포함된 완벽한 코드를 Tab 키 하나로 입력할 수 있습니다. AI와 연결하기 여기서 한 걸음 더 나아가면 진짜 마법이 시작됩니다.

provideInlineCompletionItems 함수 안에서 OpenAI API나 Claude API를 호출할 수 있습니다. 현재 파일의 컨텍스트를 AI에게 전달하고, AI가 생성한 코드를 인라인 제안으로 보여주는 것입니다.

이것이 바로 GitHub Copilot과 Cursor가 사용하는 방식입니다. 성능 최적화 하지만 주의할 점도 있습니다.

초보 개발자들이 흔히 하는 실수 중 하나는 타이핑할 때마다 무조건 API를 호출하는 것입니다. 사용자가 한 글자 입력할 때마다 API를 호출하면 비용도 많이 들고, 응답도 느려집니다.

따라서 디바운싱을 활용하여 사용자가 타이핑을 잠시 멈췄을 때만 API를 호출해야 합니다. 보통 300-500ms 정도의 딜레이를 주는 것이 좋습니다.

정리 이주니어 씨는 직접 코드를 작성해보며 신기해했습니다. "와, 제가 입력한 대로 정말 회색 글씨가 나타나네요!" 인라인 제안을 제대로 구현하면 팀 전체의 생산성을 크게 향상시킬 수 있습니다.

여러분도 자주 사용하는 코드 패턴을 분석해서 나만의 인라인 제안 Extension을 만들어 보세요.

실전 팁

💡 - 디바운싱을 꼭 구현하세요 - 타이핑할 때마다 API 호출하면 비용이 큽니다

컨텍스트를 충분히 제공하세요 - 현재 파일뿐만 아니라 관련 파일도 AI에게 전달하면 더 정확한 제안을 받습니다
여러 제안을 제공할 수 있습니다 - 배열로 반환하면 사용자가 Alt+]로 다음 제안을 볼 수 있습니다

3. 코드 액션 프로바이더

어느 날 이주니어 씨는 에러가 난 코드 위에 전구 아이콘이 뜨는 걸 발견했습니다. 클릭하니 "Quick Fix" 메뉴가 나타났습니다.

"이것도 Extension으로 만들 수 있나요?" 최시니어 씨가 고개를 끄덕였습니다. "물론이지, CodeActionProvider를 사용하면 돼."

코드 액션 프로바이더는 코드에 문제가 있거나 개선할 점이 있을 때 전구 아이콘과 함께 해결 방법을 제안하는 기능입니다. 마치 개인 코치가 "이렇게 바꾸면 더 좋아요"라고 조언하는 것처럼 작동합니다.

Quick Fix, 리팩토링, 코드 최적화 등을 제공할 수 있습니다.

다음 코드를 살펴봅시다.

import * as vscode from 'vscode';

class MyCodeActionProvider implements vscode.CodeActionProvider {
    provideCodeActions(
        document: vscode.TextDocument,
        range: vscode.Range,
        context: vscode.CodeActionContext
    ): vscode.CodeAction[] {
        // 선택된 텍스트 가져오기
        const selectedText = document.getText(range);

        // console.log를 찾으면 제거 옵션 제공
        if (selectedText.includes('console.log')) {
            const action = new vscode.CodeAction(
                'Remove console.log',
                vscode.CodeActionKind.QuickFix
            );

            action.edit = new vscode.WorkspaceEdit();
            action.edit.delete(document.uri, range);

            return [action];
        }

        return [];
    }
}

// Extension activate 함수에서 등록
vscode.languages.registerCodeActionsProvider(
    { pattern: '**/*.{js,ts}' },
    new MyCodeActionProvider(),
    { providedCodeActionKinds: [vscode.CodeActionKind.QuickFix] }
);

이주니어 씨는 VSCode로 코딩하다가 빨간 밑줄이 그어진 코드를 자주 봅니다. 그 위에 마우스를 올리면 전구 아이콘이 뜨고, 클릭하면 문제를 자동으로 고쳐주는 메뉴가 나타납니다.

이게 정말 편리한데, 직접 만들 수 있다니 놀라웠습니다. 최시니어 씨가 웃으며 말했습니다.

"이건 CodeActionProvider라는 인터페이스로 만드는 거야. 생각보다 간단해." 코드 액션이란 무엇인가 쉽게 비유하자면, 코드 액션은 마치 자동차의 경고등과 같습니다.

엔진에 문제가 생기면 경고등이 켜지고, 정비소에 가면 정비사가 "이 부품을 교체하면 됩니다"라고 알려주죠. 코드 액션도 똑같습니다.

VSCode가 코드에서 문제를 발견하면 전구 아이콘을 보여주고, 개발자가 클릭하면 해결 방법을 제시합니다. 클릭 한 번으로 코드가 자동으로 수정됩니다.

왜 코드 액션이 필요한가 예전에는 모든 문제를 수동으로 찾아 고쳐야 했습니다. 린터가 "여기 문제 있어요"라고 알려줘도, 직접 찾아가서 수정해야 했습니다.

특히 같은 문제가 여러 곳에 있으면 일일이 찾아다니며 고쳐야 했습니다. 더 큰 문제는 어떻게 고치는 게 맞는지 모르는 경우도 많았다는 점입니다.

에러 메시지만 보고 정확한 해결책을 찾기는 어려웠습니다. 코드 액션의 등장 바로 이런 문제를 해결하기 위해 코드 액션이 등장했습니다.

코드 액션을 사용하면 문제를 발견하는 동시에 해결 방법도 제시할 수 있습니다. 또한 한 번의 클릭으로 자동 수정이 가능합니다.

무엇보다 여러 가지 해결 방법을 제시하여 개발자가 선택할 수 있게 한다는 큰 이점이 있습니다. 코드 구조 분석 위의 코드를 자세히 살펴보겠습니다.

먼저 3번째 줄에서 CodeActionProvider 인터페이스를 구현합니다. 4-8번째 줄의 provideCodeActions 함수는 사용자가 코드를 선택하거나 전구 아이콘을 클릭할 때 VSCode가 호출합니다.

10번째 줄에서 현재 선택된 텍스트를 가져옵니다. 13번째 줄에서 'console.log'가 포함되어 있는지 확인하고, 있다면 14-16번째 줄에서 새로운 CodeAction을 생성합니다.

19-20번째 줄이 핵심입니다. WorkspaceEdit를 사용하여 실제로 어떤 변경을 수행할지 정의합니다.

여기서는 해당 범위의 텍스트를 삭제합니다. 실무에서의 활용 실제 프로젝트에서는 어떻게 활용할까요?

예를 들어 회사에서 React 프로젝트를 진행한다고 가정해봅시다. 팀 컨벤션에 따르면 모든 컴포넌트는 TypeScript interface로 Props 타입을 정의해야 합니다.

하지만 주니어 개발자들이 자주 깜빡하고 any를 사용합니다. 이럴 때 코드 액션으로 "Generate Props Interface"를 제공하면, 클릭 한 번으로 컴포넌트에 맞는 interface를 자동 생성할 수 있습니다.

AI와 결합하기 더 강력한 활용법도 있습니다. provideCodeActions 함수 안에서 AI API를 호출할 수 있습니다.

선택한 코드를 AI에게 보내고 "이 코드를 최적화해줘" 또는 "이 코드의 버그를 찾아줘"라고 요청하는 것입니다. AI가 제안한 여러 개선 방법을 코드 액션으로 보여주고, 개발자가 원하는 방법을 선택하면 자동으로 적용됩니다.

Cursor의 "Fix with AI" 기능이 바로 이 방식입니다. 주의사항 하지만 조심해야 할 점도 있습니다.

초보 개발자들이 흔히 하는 실수 중 하나는 너무 많은 코드 액션을 제공하는 것입니다. 전구 아이콘을 클릭했는데 선택지가 10개 이상 나오면 오히려 혼란스럽습니다.

따라서 정말 유용한 액션만 선별하여 제공해야 합니다. 보통 3-5개 정도가 적당합니다.

정리 이주니어 씨는 직접 코드 액션을 만들어보고 감탄했습니다. "console.log 위에 정말 전구가 뜨네요!

클릭하니까 바로 삭제되고요!" 코드 액션을 잘 활용하면 팀의 코드 품질을 자동으로 관리할 수 있습니다. 여러분도 팀에서 자주 발생하는 실수를 분석해서 자동 수정 기능을 만들어 보세요.

실전 팁

💡 - CodeActionKind를 적절히 사용하세요 - QuickFix, Refactor, Source 등으로 구분하면 사용자가 찾기 쉽습니다

isPreferred 속성을 true로 설정하면 Ctrl+. 누를 때 바로 적용됩니다
diagnostics와 연동하면 더 강력합니다 - 에러나 경고와 함께 해결 방법을 제시할 수 있습니다

4. 단축키와 명령 팔레트

이주니어 씨는 매일 Ctrl+Shift+P를 눌러 명령어를 실행합니다. 그런데 문득 궁금해졌습니다.

"제가 만든 기능도 여기에 추가할 수 있나요?" 최시니어 씨가 package.json 파일을 열며 답했습니다. "당연하지, 그것도 아주 쉬워."

명령 팔레트는 VSCode의 모든 기능을 단축키로 실행할 수 있게 해주는 중앙 집중식 인터페이스입니다. 마치 스포트라이트 검색처럼 원하는 명령어를 빠르게 찾아 실행할 수 있습니다.

자신만의 명령어를 등록하고 커스텀 단축키를 설정할 수 있습니다.

다음 코드를 살펴봅시다.

// package.json - Extension 설정 파일
{
  "contributes": {
    "commands": [
      {
        "command": "myext.aiRefactor",
        "title": "AI Refactor: 선택한 코드 리팩토링",
        "category": "AI Assistant"
      }
    ],
    "keybindings": [
      {
        "command": "myext.aiRefactor",
        "key": "ctrl+shift+r",
        "mac": "cmd+shift+r",
        "when": "editorTextFocus"
      }
    ]
  }
}

// extension.ts - 명령어 구현
import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    let disposable = vscode.commands.registerCommand(
        'myext.aiRefactor',
        async () => {
            const editor = vscode.window.activeTextEditor;
            if (!editor) return;

            const selection = editor.document.getText(editor.selection);
            vscode.window.showInformationMessage(
                `리팩토링 중: ${selection.substring(0, 30)}...`
            );
        }
    );

    context.subscriptions.push(disposable);
}

이주니어 씨는 VSCode를 사용하면서 Ctrl+Shift+P를 가장 자주 누릅니다. 파일 포맷팅도 하고, Git 명령어도 실행하고, Extension 설정도 여기서 합니다.

이 편리한 기능에 자신의 명령어를 추가할 수 있다니 흥미진진했습니다. 최시니어 씨가 화면을 공유하며 설명했습니다.

"명령 팔레트에 명령어를 추가하는 건 두 단계야. 먼저 package.json에 등록하고, 그 다음 실제 코드를 작성하는 거지." 명령 팔레트란 무엇인가 쉽게 비유하자면, 명령 팔레트는 마치 만능 리모컨과 같습니다.

TV 리모컨, 에어컨 리모컨, 오디오 리모컨을 각각 찾아 쓰는 대신, 하나의 만능 리모컨으로 모든 기기를 제어하는 것처럼 말이죠. VSCode의 명령 팔레트도 똑같습니다.

메뉴를 이리저리 찾아다니는 대신, Ctrl+Shift+P 한 번으로 모든 기능에 접근할 수 있습니다. 왜 명령 팔레트가 중요한가 마우스로 메뉴를 찾아다니는 건 비효율적입니다.

파일 메뉴를 클릭하고, 하위 메뉴를 찾고, 또 그 안의 옵션을 찾다 보면 시간이 오래 걸립니다. 더 큰 문제는 원하는 기능이 어디 있는지 기억하지 못할 때입니다.

"분명 어디선가 봤는데..."하면서 모든 메뉴를 뒤적거린 경험, 다들 있으시죠? 명령 팔레트의 위력 바로 이런 문제를 해결하기 위해 명령 팔레트가 있습니다.

명령 팔레트를 사용하면 기능 이름만 기억하면 됩니다. 또한 퍼지 검색이 지원되어 정확한 이름을 몰라도 찾을 수 있습니다.

무엇보다 자주 쓰는 명령어는 커스텀 단축키를 지정하여 더 빠르게 실행할 수 있다는 큰 이점이 있습니다. 설정 파일 분석 위의 코드를 단계별로 살펴보겠습니다.

먼저 package.json의 3-10번째 줄에서 commands를 정의합니다. 이것이 명령 팔레트에 표시될 내용입니다.

6번째 줄의 command는 고유한 ID이고, 7번째 줄의 title은 사용자에게 보여질 이름입니다. 8번째 줄의 category를 지정하면 "AI Assistant: 선택한 코드 리팩토링"처럼 카테고리와 함께 표시됩니다.

11-18번째 줄에서는 단축키를 설정합니다. 13번째 줄의 key는 Windows/Linux용이고, 14번째 줄의 mac은 macOS용입니다.

15번째 줄의 when 조건이 중요합니다. "editorTextFocus"는 에디터에 포커스가 있을 때만 단축키가 작동하도록 제한합니다.

extension.ts의 25-28번째 줄에서 실제 명령어를 등록합니다. 29-30번째 줄에서 현재 활성화된 에디터를 가져오고, 32번째 줄에서 선택된 텍스트를 읽어옵니다.

실무 활용 사례 실제로 어떻게 활용할 수 있을까요? 예를 들어 회사에서 자주 사용하는 코드 스니펫이 있다고 가정해봅시다.

React 컴포넌트를 만들 때마다 항상 같은 구조로 시작합니다. 이럴 때 "Create React Component"라는 명령어를 만들고 Ctrl+Shift+C 단축키를 지정할 수 있습니다.

명령어를 실행하면 컴포넌트 이름을 입력받고, 자동으로 파일을 생성하고, 보일러플레이트 코드를 작성해주는 것입니다. AI 기능과 통합 더 강력한 활용도 가능합니다.

"AI Code Review"라는 명령어를 만들어봅시다. 현재 파일 전체를 AI에게 전달하고, 코드 리뷰 결과를 받아옵니다.

결과를 Webview 패널로 보여주면 마치 GitHub PR 리뷰처럼 인라인 코멘트를 볼 수 있습니다. 이런 식으로 명령 팔레트를 통해 복잡한 AI 기능도 쉽게 실행할 수 있습니다.

주의사항 하지만 조심해야 할 점도 있습니다. 초보 개발자들이 흔히 하는 실수 중 하나는 너무 많은 단축키를 등록하는 것입니다.

VSCode에는 이미 수백 개의 기본 단축키가 있습니다. 기존 단축키와 충돌하면 사용자가 혼란스러워합니다.

따라서 정말 자주 쓰는 기능에만 단축키를 부여하고, 나머지는 명령 팔레트에서 검색하도록 하는 것이 좋습니다. 정리 이주니어 씨는 직접 명령어를 등록하고 Ctrl+Shift+P를 눌러봤습니다.

"와, 제가 만든 명령어가 정말 나타나네요! 단축키도 작동하고요!" 명령 팔레트를 잘 활용하면 자주 반복하는 작업을 자동화할 수 있습니다.

여러분도 매일 하는 반복 작업을 분석해서 커스텀 명령어로 만들어 보세요.

실전 팁

💡 - when 조건을 활용하세요 - editorLangId, resourceExtname 등으로 특정 파일 타입에서만 명령어가 보이도록 제한할 수 있습니다

icon을 추가하면 더 전문적으로 보입니다 - package.json의 command에 icon 속성을 추가하세요
명령어 이름 짓기가 중요합니다 - 검색하기 쉽고 기억하기 쉬운 이름을 사용하세요

5. 실습: VSCode Extension 개발

드디어 실습 시간입니다. 이주니어 씨는 손을 비비며 준비했습니다.

"이제 제가 직접 Extension을 만들어볼 차례네요!" 최시니어 씨가 웃으며 말했습니다. "Yeoman 제너레이터로 시작하면 쉬워.

따라해봐."

VSCode Extension 개발을 위해서는 Yeoman 제너레이터로 프로젝트를 생성하고, TypeScript로 코드를 작성하고, F5 키로 디버깅하는 워크플로우를 이해해야 합니다. 마치 요리할 때 레시피를 따라가듯이 단계별로 진행하면 누구나 만들 수 있습니다.

다음 코드를 살펴봅시다.

# 1. Yeoman과 Extension 제너레이터 설치
npm install -g yo generator-code

# 2. Extension 프로젝트 생성
yo code

# 선택 옵션:
# - New Extension (TypeScript)
# - Extension name: my-ai-assistant
# - Description: AI 코딩 어시스턴트
# - Initialize git: Yes

# 3. 프로젝트 열기
cd my-ai-assistant
code .

# 4. F5 키를 눌러 Extension 디버깅 시작
# - Extension Development Host 창이 열립니다
# - Ctrl+Shift+P로 명령 팔레트를 열고
# - "Hello World" 명령어를 실행해보세요

# 5. 코드 수정 후 리로드
# - src/extension.ts 파일을 수정
# - Extension Development Host 창에서 Ctrl+R로 리로드
# - 변경사항이 즉시 반영됩니다

이주니어 씨는 이제 실제로 Extension을 만들어볼 준비가 되었습니다. 하지만 어디서부터 시작해야 할지 막막했습니다.

빈 폴더에서 처음부터 모든 설정을 해야 하나요? 최시니어 씨가 안심시켰습니다.

"걱정하지 마. VSCode 팀이 Yeoman이라는 도구를 제공해.

몇 가지 질문에 답하면 자동으로 프로젝트를 만들어줘." Yeoman이란 무엇인가 쉽게 비유하자면, Yeoman은 마치 집을 지을 때 사용하는 설계도와 같습니다. 건축가가 벽돌 하나하나 어디에 쌓을지 고민하는 대신, 표준 설계도를 사용하면 빠르게 집을 지을 수 있죠.

Extension 개발도 마찬가지입니다. package.json 설정, tsconfig.json 설정, 폴더 구조 등을 일일이 만드는 대신, Yeoman이 모든 걸 자동으로 생성해줍니다.

프로젝트 생성 과정 위의 명령어를 단계별로 실행해봅시다. 먼저 1-2번째 줄에서 Yeoman과 제너레이터를 설치합니다.

npm install -g는 전역으로 설치한다는 의미입니다. 한 번만 설치하면 계속 사용할 수 있습니다.

4-5번째 줄에서 yo code 명령어를 실행하면 대화형 인터페이스가 나타납니다. 여기서 Extension 타입, 이름, 설명 등을 입력합니다.

TypeScript를 선택하는 것을 추천합니다. JavaScript보다 타입 안정성이 높고, VSCode API 자동완성도 잘 작동하기 때문입니다.

개발 워크플로우 프로젝트가 생성되면 진짜 개발이 시작됩니다. 13-16번째 줄이 핵심입니다.

F5 키를 누르면 Extension Development Host라는 새 VSCode 창이 열립니다. 이것은 우리가 만든 Extension이 설치된 별도의 VSCode 인스턴스입니다.

여기서 Extension을 실제로 테스트할 수 있습니다. Ctrl+Shift+P를 눌러보세요.

"Hello World"라는 명령어가 보일 겁니다. 이것이 제너레이터가 기본으로 만들어준 샘플 명령어입니다.

코드 수정과 리로드 이제 코드를 수정해봅시다. src/extension.ts 파일을 열어보세요.

activate 함수 안에 "Hello World" 메시지를 출력하는 코드가 있을 겁니다. 이 메시지를 "안녕하세요, 제 첫 Extension입니다!"로 바꿔보세요.

저장한 다음, Extension Development Host 창으로 돌아가서 Ctrl+R을 누르면 Extension이 리로드됩니다. 다시 명령어를 실행해보세요.

변경된 메시지가 나타날 겁니다. 실제 기능 추가하기 이제 진짜 유용한 기능을 추가해봅시다.

예를 들어 현재 파일의 줄 수를 세는 명령어를 만들어봅시다. extension.ts에 새로운 명령어를 등록하고, activeTextEditor에서 document.lineCount를 읽어오면 됩니다.

그 다음 package.json의 contributes.commands에 이 명령어를 추가해야 합니다. 이 두 파일을 수정하고 Ctrl+R로 리로드하면 바로 테스트할 수 있습니다.

디버깅 활용 개발하다 보면 버그가 생깁니다. 이럴 때 중단점을 활용하세요.

extension.ts에서 원하는 줄 번호 왼쪽을 클릭하면 빨간 점이 생깁니다. 이것이 중단점입니다.

F5로 디버깅을 시작하고 해당 명령어를 실행하면 중단점에서 코드가 멈춥니다. 이 상태에서 변수 값을 확인하고, 한 줄씩 실행하면서 문제를 찾을 수 있습니다.

console.log보다 훨씬 강력합니다. 패키징과 배포 Extension이 완성되면 배포할 차례입니다.

vsce라는 도구를 사용하면 Extension을 .vsix 파일로 패키징할 수 있습니다. 이 파일을 VSCode 마켓플레이스에 업로드하면 전 세계 개발자들이 여러분의 Extension을 사용할 수 있습니다.

회사 내부에서만 사용한다면 .vsix 파일을 공유하고, "Install from VSIX" 옵션으로 설치하면 됩니다. 주의사항 하지만 조심해야 할 점도 있습니다.

초보 개발자들이 흔히 하는 실수 중 하나는 package.json과 코드의 불일치입니다. 코드에서 명령어 ID를 변경했는데 package.json은 수정하지 않으면 Extension이 작동하지 않습니다.

두 파일의 명령어 ID가 정확히 일치하는지 항상 확인하세요. 정리 이주니어 씨는 첫 Extension을 성공적으로 만들었습니다.

"와, 생각보다 어렵지 않네요! 이제 제가 원하는 기능을 뭐든 만들 수 있겠어요!" Extension 개발은 처음에는 어려워 보이지만, 워크플로우를 익히면 빠르게 개발할 수 있습니다.

여러분도 오늘 배운 내용으로 첫 Extension을 만들어 보세요.

실전 팁

💡 - Extension Host를 자주 리로드하세요 - 코드 변경 후 반드시 Ctrl+R을 눌러야 반영됩니다

.vscode/launch.json을 커스터마이징하면 디버깅 설정을 조정할 수 있습니다
VSCode API 문서를 북마크하세요 - https://code.visualstudio.com/api 여기가 가장 정확한 레퍼런스입니다

6. 실습: 실시간 코드 완성 기능

마지막 실습입니다. 이주니어 씨는 진짜 AI 기능을 만들어보고 싶었습니다.

"Claude API를 연결해서 실시간 코드 완성 기능을 만들 수 있을까요?" 최시니어 씨가 고개를 끄덕였습니다. "물론이지.

지금까지 배운 걸 다 합치면 돼."

실시간 코드 완성은 InlineCompletionItemProvider와 Claude API를 결합하여 사용자가 타이핑하는 동안 AI가 다음 코드를 예측하고 제안하는 기능입니다. 마치 코딩하는 당신의 마음을 읽는 것처럼 자연스럽게 작동합니다.

GitHub Copilot과 같은 프로덕션 수준의 기능을 직접 구현할 수 있습니다.

다음 코드를 살펴봅시다.

import * as vscode from 'vscode';
import Anthropic from '@anthropic-ai/sdk';

class AICompletionProvider implements vscode.InlineCompletionItemProvider {
    private anthropic: Anthropic;
    private debounceTimer?: NodeJS.Timeout;

    constructor(apiKey: string) {
        this.anthropic = new Anthropic({ apiKey });
    }

    async provideInlineCompletionItems(
        document: vscode.TextDocument,
        position: vscode.Position
    ): Promise<vscode.InlineCompletionItem[]> {
        // 디바운싱: 500ms 대기
        return new Promise((resolve) => {
            if (this.debounceTimer) {
                clearTimeout(this.debounceTimer);
            }

            this.debounceTimer = setTimeout(async () => {
                // 현재 파일의 컨텍스트 수집
                const prefix = document.getText(
                    new vscode.Range(new vscode.Position(0, 0), position)
                );
                const suffix = document.getText(
                    new vscode.Range(position,
                        new vscode.Position(document.lineCount, 0))
                );

                try {
                    // Claude API 호출
                    const message = await this.anthropic.messages.create({
                        model: 'claude-3-5-sonnet-20241022',
                        max_tokens: 500,
                        messages: [{
                            role: 'user',
                            content: `다음 코드의 빈 부분을 완성해주세요.

이전 코드:
${prefix}

<CURSOR>

이후 코드:
${suffix}

완성된 코드만 출력하세요.`
                        }]
                    });

                    // AI 응답을 인라인 제안으로 변환
                    const completion = message.content[0].type === 'text'
                        ? message.content[0].text : '';

                    resolve([new vscode.InlineCompletionItem(
                        completion,
                        new vscode.Range(position, position)
                    )]);
                } catch (error) {
                    console.error('AI completion error:', error);
                    resolve([]);
                }
            }, 500);
        });
    }
}

// Extension activate 함수에서 등록
export function activate(context: vscode.ExtensionContext) {
    const apiKey = vscode.workspace
        .getConfiguration('aiAssistant')
        .get<string>('apiKey');

    if (!apiKey) {
        vscode.window.showErrorMessage(
            'Claude API 키를 설정해주세요'
        );
        return;
    }

    const provider = new AICompletionProvider(apiKey);

    context.subscriptions.push(
        vscode.languages.registerInlineCompletionItemProvider(
            { pattern: '**/*.{js,ts,jsx,tsx,py}' },
            provider
        )
    );
}

이주니어 씨는 드디어 최종 목표에 도달했습니다. 지금까지 배운 모든 내용을 합쳐서 진짜 AI 코딩 어시스턴트를 만드는 것입니다.

손에 땀을 쥐며 최시니어 씨의 설명을 듣기 시작했습니다. 최시니어 씨가 화면을 공유하며 말했습니다.

"자, 이제 진짜 실전이야. Claude API를 Extension에 연결해보자." 전체 구조 이해하기 쉽게 비유하자면, 이 시스템은 마치 번역 앱과 같습니다.

사용자가 말을 하면(타이핑), 앱이 그걸 서버로 보내고(API 호출), 서버가 번역 결과를 돌려주고(AI 응답), 앱이 화면에 표시합니다(인라인 제안). 우리가 만들 Extension도 똑같은 흐름입니다.

사용자가 코드를 작성하면, Claude에게 전달하고, Claude가 다음 코드를 예측하고, 회색 텍스트로 보여주는 것입니다. API 키 관리 먼저 API 키를 안전하게 관리해야 합니다.

68-72번째 줄을 보세요. workspace.getConfiguration을 사용하여 사용자 설정에서 API 키를 읽어옵니다.

코드에 하드코딩하면 절대 안 됩니다. package.json에 설정 항목을 추가하면 사용자가 VSCode 설정 UI에서 API 키를 입력할 수 있습니다.

이렇게 하면 코드를 GitHub에 올려도 API 키가 노출되지 않습니다. 디바운싱의 중요성 17-22번째 줄이 매우 중요합니다.

사용자가 한 글자 입력할 때마다 API를 호출하면 어떻게 될까요? 1초에 여러 번 API를 호출하게 되어 비용이 폭발하고, 응답도 느려집니다.

따라서 디바운싱을 구현합니다. 사용자가 타이핑을 멈추고 500ms가 지나면 그때 API를 호출하는 것입니다.

setTimeout과 clearTimeout을 조합하여 구현합니다. 이전 타이머를 취소하고 새로 시작하는 방식입니다.

컨텍스트 수집 24-30번째 줄에서 파일의 컨텍스트를 수집합니다. prefix는 커서 이전의 모든 코드이고, suffix는 커서 이후의 모든 코드입니다.

AI에게 이 두 가지를 모두 전달하면 훨씬 정확한 예측을 할 수 있습니다. 마치 문장 중간에 빈칸이 있을 때, 앞뒤 문맥을 보면 무슨 단어가 들어갈지 쉽게 알 수 있는 것과 같습니다.

Claude API 호출 34-50번째 줄에서 실제 API를 호출합니다. anthropic.messages.create 메소드를 사용합니다.

model은 'claude-3-5-sonnet-20241022'를 사용하는 것을 추천합니다. 속도와 품질의 균형이 가장 좋기 때문입니다.

max_tokens는 500 정도가 적당합니다. 너무 크면 응답이 느려지고, 너무 작으면 코드가 잘립니다.

프롬프트는 명확하게 작성해야 합니다. "다음 코드의 빈 부분을 완성해주세요"라고 요청하고, prefix와 suffix를 제공합니다.

응답 처리 53-58번째 줄에서 AI 응답을 인라인 제안으로 변환합니다. Claude의 응답은 message.content 배열에 들어있습니다.

첫 번째 요소가 text 타입인지 확인하고, text를 추출합니다. 그 다음 InlineCompletionItem으로 감싸서 반환하면 VSCode가 자동으로 회색 텍스트로 보여줍니다.

사용자가 Tab 키를 누르면 그대로 입력됩니다. 에러 처리 59-62번째 줄의 에러 처리도 중요합니다.

네트워크 문제나 API 한도 초과 등으로 실패할 수 있습니다. 이럴 때 Extension 전체가 멈추면 안 됩니다.

try-catch로 감싸고, 에러가 발생하면 빈 배열을 반환합니다. 사용자에게는 아무 제안도 보이지 않지만, Extension은 계속 작동합니다.

console.error로 로그를 남기면 나중에 디버깅할 때 유용합니다. 성능 최적화 실무에서는 더 많은 최적화가 필요합니다.

예를 들어 캐싱을 추가할 수 있습니다. 같은 컨텍스트에 대한 요청이 반복되면 캐시에서 바로 반환하는 것입니다.

또한 컨텍스트 길이 제한도 중요합니다. 파일이 10,000줄이면 모든 걸 API로 보내면 안 됩니다.

커서 주변 100줄 정도만 추출하여 보내는 것이 효율적입니다. 실제 사용 경험 이주니어 씨가 직접 테스트해봤습니다.

function을 입력하기 시작하자 회색 글씨로 함수 전체가 나타났습니다. Tab 키를 누르니 코드가 그대로 입력됐습니다.

"와, 진짜 Copilot처럼 작동하네요!" 최시니어 씨가 웃으며 말했습니다. "맞아.

이제 너도 AI 코딩 도구를 만들 수 있는 거야." 주의사항 하지만 조심해야 할 점도 있습니다. API 비용을 항상 염두에 두세요.

개발자 한 명이 하루에 몇 천 번 API를 호출할 수 있습니다. 디바운싱과 캐싱 없이 사용하면 한 달에 수백 달러가 나올 수 있습니다.

따라서 사용량 모니터링을 반드시 추가하세요. 하루 한도를 설정하거나, 사용자에게 비용을 표시하는 것도 좋은 방법입니다.

정리 이주니어 씨는 자신이 만든 AI 코딩 어시스턴트를 자랑스럽게 바라봤습니다. "제가 정말 이걸 만들었다니 믿기지 않아요!" 실시간 AI 코드 완성은 복잡해 보이지만, 각 단계를 이해하면 충분히 만들 수 있습니다.

여러분도 오늘 배운 내용으로 나만의 AI 코딩 도구를 만들어 보세요. 여러분의 작업 스타일에 딱 맞는 완벽한 도구가 될 겁니다.

실전 팁

💡 - 스트리밍을 활용하면 더 빠릅니다 - Claude API의 stream 옵션을 사용하면 응답을 조금씩 받을 수 있습니다

파일 타입별로 다른 프롬프트를 사용하세요 - Python과 TypeScript는 코딩 스타일이 다릅니다
사용자 피드백을 수집하세요 - 제안이 수락되었는지, 거부되었는지 추적하면 프롬프트를 개선할 수 있습니다

이상으로 학습을 마칩니다. 위 내용을 직접 코드로 작성해보면서 익혀보세요!

#VSCode#Extension#API#InlineSuggestion#CodeAction#LLM,VSCode,Extension

VSCode Extension으로 만드는 나만의 AI 코딩 도우미

# VSCode Extension으로 만드는 나만의 AI 코딩 도우미 VSCode Extension API를 활용하여 인라인 코드 제안, 코드 액션, 단축키 등 실무에서 바로 쓸 수 있는 AI 통합 기능을 개발하는 방법을 배웁니다. 초급 개발자도 쉽게 따라할 수 있도록 실전 예제와 함께 구성했습니다. --- ## 목차 1. [VSCode Extension API 이해](#vscode-extension-api-이해) 2. [인라인 코드 제안 (Inline Suggestions)](#인라인-코드-제안-(inline-suggestions)) 3. [코드 액션 프로바이더](#코드-액션-프로바이더) 4. [단축키와 명령 팔레트](#단축키와-명령-팔레트) 5. [실습: VSCode Extension 개발](#실습:-vscode-extension-개발) 6. [실습: 실시간 코드 완성 기능](#실습:-실시간-코드-완성-기능) --- ## 1. VSCode Extension API 이해 어느 날 이주니어 씨는 회사에서 코드를 작성하다가 문득 궁금해졌습니다. "요즘 사용하는 AI 코딩 도구들, 이거 VSCode에 어떻게 붙어있는 걸까?" 팀 리더인 최시니어 씨에게 물어보니 이렇게 답했습니다. "그건 바로 VSCode Extension API 덕분이지!" **VSCode Extension API**는 한마디로 VSCode 에디터를 확장하고 커스터마이징할 수 있게 해주는 공식 인터페이스입니다. 마치 레고 블록처럼 기본 에디터에 원하는 기능을 자유롭게 추가할 수 있습니다. 이것을 제대로 이해하면 AI 코딩 어시스턴트부터 커스텀 코드 분석 도구까지 무엇이든 만들 수 있습니다. 다음 코드를 살펴봅시다. ```typescript // extension.ts - Extension의 시작점 import * as vscode from 'vscode'; export function activate(context: vscode.ExtensionContext) { // Extension이 활성화될 때 호출됩니다 console.log('나만의 Extension이 활성화되었습니다!'); // 명령어 등록 - Ctrl+Shift+P에서 실행 가능 let disposable = vscode.commands.registerCommand('myext.hello', () => { vscode.window.showInformationMessage('안녕하세요, Extension 세계!'); }); context.subscriptions.push(disposable); } export function deactivate() { // Extension이 비활성화될 때 정리 작업 } ``` 이주니어 씨는 입사 6개월 차 프론트엔드 개발자입니다. 매일 VSCode로 코드를 작성하면서 항상 궁금했던 게 있었습니다. GitHub Copilot이나 다른 AI 도구들은 도대체 어떻게 VSCode 안에서 그렇게 자연스럽게 동작하는 걸까요? 최시니어 씨가 화면을 공유하며 설명을 시작했습니다. "좋은 질문이야. 이건 모두 VSCode Extension API 덕분이지." **Extension API란 무엇인가** 쉽게 비유하자면, VSCode Extension API는 마치 스마트폰의 앱 개발 API와 같습니다. 아이폰이나 안드로이드폰에서 개발자들이 다양한 앱을 만들 수 있는 것처럼, VSCode도 개발자들이 원하는 기능을 자유롭게 추가할 수 있도록 API를 제공합니다. 게임도 만들고, 채팅 앱도 만들듯이, VSCode에서는 코드 자동완성부터 테마 변경까지 무엇이든 만들 수 있습니다. **Extension이 필요한 이유** Extension이 없던 시절에는 어땠을까요? 개발자들은 각자 자신만의 에디터를 처음부터 만들어야 했습니다. 코드 하이라이팅도 직접 구현하고, 디버거도 직접 만들어야 했습니다. 더 큰 문제는 팀마다 다른 에디터를 사용하면 협업이 어려웠다는 점입니다. 누구는 Vim, 누구는 Emacs, 누구는 Sublime Text를 쓰면서 설정을 공유할 수도 없었습니다. **Extension API의 등장** 바로 이런 문제를 해결하기 위해 VSCode Extension API가 등장했습니다. Extension API를 사용하면 하나의 통일된 에디터 위에서 각자 원하는 기능을 추가할 수 있습니다. 또한 만든 Extension을 마켓플레이스에 공유하면 전 세계 개발자들이 사용할 수 있습니다. 무엇보다 VSCode 팀이 제공하는 강력한 기본 기능 위에서 작업할 수 있다는 큰 이점이 있습니다. **코드 구조 이해하기** 위의 코드를 한 줄씩 살펴보겠습니다. 먼저 2번째 줄에서 vscode 모듈을 임포트합니다. 이것이 모든 Extension API의 시작점입니다. 다음으로 4번째 줄의 **activate 함수**가 핵심입니다. 이 함수는 사용자가 Extension을 설치하거나 VSCode를 시작할 때 자동으로 호출됩니다. 8번째 줄에서는 **명령어를 등록**합니다. 사용자가 Ctrl+Shift+P를 누르고 명령어를 선택하면 9번째 줄의 콜백이 실행됩니다. 마지막으로 12번째 줄에서 등록한 명령어를 context에 추가하여 Extension이 종료될 때 자동으로 정리되도록 합니다. **실무에서의 활용** 실제 현업에서는 어떻게 활용할까요? 예를 들어 회사에서 자체 개발한 프레임워크를 사용한다고 가정해봅시다. 팀원들이 이 프레임워크의 컴포넌트를 빠르게 생성할 수 있도록 Extension을 만들 수 있습니다. 명령어 하나로 보일러플레이트 코드를 자동 생성하고, 팀 컨벤션에 맞는 폴더 구조를 만들어주는 식입니다. 많은 대기업에서 이런 식으로 사내 전용 Extension을 적극적으로 활용하고 있습니다. **주의사항** 하지만 주의할 점도 있습니다. 초보 개발자들이 흔히 하는 실수 중 하나는 activate 함수에서 너무 무거운 작업을 하는 것입니다. Extension이 활성화될 때마다 실행되므로, 여기서 파일을 많이 읽거나 네트워크 요청을 하면 VSCode 시작이 느려질 수 있습니다. 따라서 무거운 작업은 **lazy loading** 방식으로 실제로 필요할 때만 수행해야 합니다. **정리** 다시 이주니어 씨의 이야기로 돌아가 봅시다. 최시니어 씨의 설명을 들은 이주니어 씨는 눈이 반짝였습니다. "아, 그래서 모든 Extension이 비슷한 구조로 되어 있었군요!" Extension API를 제대로 이해하면 VSCode를 자신의 작업 스타일에 맞게 완벽하게 커스터마이징할 수 있습니다. 여러분도 오늘 배운 내용을 바탕으로 첫 Extension을 만들어 보세요. **실전 팁** 💡 - **activate 함수는 가볍게 유지**하고, 무거운 초기화는 필요할 때 수행하세요 - **package.json의 activationEvents**를 활용하면 필요한 시점에만 Extension을 활성화할 수 있습니다 - **VSCode API 문서**를 자주 참고하세요 - api.md 파일이 가장 정확한 레퍼런스입니다 --- ## 2. 인라인 코드 제안 (Inline Suggestions) 이주니어 씨가 코드를 작성하는데 자동으로 회색 글씨로 다음 코드가 제안되는 걸 보고 감탄했습니다. "이런 기능도 만들 수 있나요?" 최시니어 씨가 미소를 지으며 답했습니다. "물론이지, InlineCompletionItemProvider를 사용하면 돼." **인라인 코드 제안**은 사용자가 타이핑하는 동안 회색 텍스트로 코드를 미리 보여주는 기능입니다. 마치 친구가 옆에서 "이렇게 작성하면 어때?"라고 속삭이는 것처럼 자연스럽게 제안합니다. GitHub Copilot의 핵심 기능이 바로 이것입니다. 다음 코드를 살펴봅시다. ```typescript import * as vscode from 'vscode'; class MyInlineCompletionProvider implements vscode.InlineCompletionItemProvider { async provideInlineCompletionItems( document: vscode.TextDocument, position: vscode.Position, context: vscode.InlineCompletionContext ): Promise { // 현재 라인의 텍스트 가져오기 const line = document.lineAt(position).text; // 간단한 예: console.log를 입력하면 자동 완성 if (line.includes('console')) { return [new vscode.InlineCompletionItem( '.log("Hello from inline suggestion!");', new vscode.Range(position, position) )]; } return []; } } // Extension activate 함수에서 등록 vscode.languages.registerInlineCompletionItemProvider( { pattern: '**/*.{js,ts}' }, new MyInlineCompletionProvider() ); ``` 이주니어 씨는 매일 GitHub Copilot을 사용하면서 마법 같다고 느꼈습니다. 코드를 조금만 작성하면 나머지를 알아서 채워주니까요. 그런데 이런 기능을 직접 만들 수 있다는 게 믿기지 않았습니다. 최시니어 씨가 화면을 열며 설명을 시작했습니다. "생각보다 어렵지 않아. 핵심은 InlineCompletionItemProvider라는 인터페이스야." **인라인 제안이란 무엇인가** 쉽게 비유하자면, 인라인 제안은 마치 자동완성 키보드와 같습니다. 스마트폰으로 문자를 입력할 때 다음 단어를 예측해서 보여주는 기능 있죠? VSCode의 인라인 제안도 똑같은 원리입니다. 사용자가 무엇을 입력하려는지 예측해서 회색 텍스트로 미리 보여주는 것입니다. Tab 키를 누르면 그 제안을 그대로 사용할 수 있습니다. **왜 인라인 제안이 필요한가** 기존의 자동완성 팝업은 한계가 있었습니다. 팝업 메뉴가 뜨면 시야를 가리고, 여러 옵션 중 하나를 선택해야 했습니다. 코드 흐름이 끊기는 느낌이 들었습니다. 더 큰 문제는 여러 줄의 코드를 한 번에 제안할 수 없었다는 점입니다. 함수 전체를 자동완성하고 싶어도 불가능했습니다. **인라인 제안의 등장** 바로 이런 문제를 해결하기 위해 인라인 제안이 등장했습니다. 인라인 제안을 사용하면 시야를 가리지 않고 자연스럽게 제안을 볼 수 있습니다. 또한 여러 줄의 코드를 한 번에 제안할 수도 있습니다. 무엇보다 Tab 키 하나로 바로 수락할 수 있어 코딩 흐름이 끊기지 않는다는 큰 이점이 있습니다. **코드 동작 원리** 위의 코드를 단계별로 살펴보겠습니다. 먼저 3번째 줄에서 **InlineCompletionItemProvider 인터페이스**를 구현합니다. 이것이 핵심입니다. 4-8번째 줄의 **provideInlineCompletionItems 함수**는 사용자가 타이핑할 때마다 VSCode가 자동으로 호출합니다. 10번째 줄에서 현재 커서가 있는 라인의 텍스트를 가져옵니다. 13번째 줄에서 'console'이라는 단어가 포함되어 있는지 확인하고, 포함되어 있다면 14-16번째 줄에서 새로운 **InlineCompletionItem**을 생성하여 반환합니다. 마지막으로 23-26번째 줄에서 이 Provider를 JavaScript와 TypeScript 파일에 등록합니다. **실무 활용 사례** 실제로 어떻게 활용할 수 있을까요? 예를 들어 회사에서 특정 API 패턴을 자주 사용한다고 가정해봅시다. REST API를 호출하는 코드를 작성할 때마다 항상 비슷한 구조가 반복됩니다. 이럴 때 'fetch'라고 입력하면 회사의 표준 API 호출 패턴을 자동으로 제안하도록 Extension을 만들 수 있습니다. 에러 핸들링, 인증 헤더, 타임아웃 설정까지 모두 포함된 완벽한 코드를 Tab 키 하나로 입력할 수 있습니다. **AI와 연결하기** 여기서 한 걸음 더 나아가면 진짜 마법이 시작됩니다. provideInlineCompletionItems 함수 안에서 **OpenAI API나 Claude API**를 호출할 수 있습니다. 현재 파일의 컨텍스트를 AI에게 전달하고, AI가 생성한 코드를 인라인 제안으로 보여주는 것입니다. 이것이 바로 GitHub Copilot과 Cursor가 사용하는 방식입니다. **성능 최적화** 하지만 주의할 점도 있습니다. 초보 개발자들이 흔히 하는 실수 중 하나는 타이핑할 때마다 무조건 API를 호출하는 것입니다. 사용자가 한 글자 입력할 때마다 API를 호출하면 비용도 많이 들고, 응답도 느려집니다. 따라서 **디바운싱**을 활용하여 사용자가 타이핑을 잠시 멈췄을 때만 API를 호출해야 합니다. 보통 300-500ms 정도의 딜레이를 주는 것이 좋습니다. **정리** 이주니어 씨는 직접 코드를 작성해보며 신기해했습니다. "와, 제가 입력한 대로 정말 회색 글씨가 나타나네요!" 인라인 제안을 제대로 구현하면 팀 전체의 생산성을 크게 향상시킬 수 있습니다. 여러분도 자주 사용하는 코드 패턴을 분석해서 나만의 인라인 제안 Extension을 만들어 보세요. **실전 팁** 💡 - **디바운싱을 꼭 구현**하세요 - 타이핑할 때마다 API 호출하면 비용이 큽니다 - **컨텍스트를 충분히 제공**하세요 - 현재 파일뿐만 아니라 관련 파일도 AI에게 전달하면 더 정확한 제안을 받습니다 - **여러 제안을 제공**할 수 있습니다 - 배열로 반환하면 사용자가 Alt+]로 다음 제안을 볼 수 있습니다 --- ## 3. 코드 액션 프로바이더 어느 날 이주니어 씨는 에러가 난 코드 위에 전구 아이콘이 뜨는 걸 발견했습니다. 클릭하니 "Quick Fix" 메뉴가 나타났습니다. "이것도 Extension으로 만들 수 있나요?" 최시니어 씨가 고개를 끄덕였습니다. "물론이지, CodeActionProvider를 사용하면 돼." **코드 액션 프로바이더**는 코드에 문제가 있거나 개선할 점이 있을 때 전구 아이콘과 함께 해결 방법을 제안하는 기능입니다. 마치 개인 코치가 "이렇게 바꾸면 더 좋아요"라고 조언하는 것처럼 작동합니다. Quick Fix, 리팩토링, 코드 최적화 등을 제공할 수 있습니다. 다음 코드를 살펴봅시다. ```typescript import * as vscode from 'vscode'; class MyCodeActionProvider implements vscode.CodeActionProvider { provideCodeActions( document: vscode.TextDocument, range: vscode.Range, context: vscode.CodeActionContext ): vscode.CodeAction[] { // 선택된 텍스트 가져오기 const selectedText = document.getText(range); // console.log를 찾으면 제거 옵션 제공 if (selectedText.includes('console.log')) { const action = new vscode.CodeAction( 'Remove console.log', vscode.CodeActionKind.QuickFix ); action.edit = new vscode.WorkspaceEdit(); action.edit.delete(document.uri, range); return [action]; } return []; } } // Extension activate 함수에서 등록 vscode.languages.registerCodeActionsProvider( { pattern: '**/*.{js,ts}' }, new MyCodeActionProvider(), { providedCodeActionKinds: [vscode.CodeActionKind.QuickFix] } ); ``` 이주니어 씨는 VSCode로 코딩하다가 빨간 밑줄이 그어진 코드를 자주 봅니다. 그 위에 마우스를 올리면 전구 아이콘이 뜨고, 클릭하면 문제를 자동으로 고쳐주는 메뉴가 나타납니다. 이게 정말 편리한데, 직접 만들 수 있다니 놀라웠습니다. 최시니어 씨가 웃으며 말했습니다. "이건 CodeActionProvider라는 인터페이스로 만드는 거야. 생각보다 간단해." **코드 액션이란 무엇인가** 쉽게 비유하자면, 코드 액션은 마치 자동차의 경고등과 같습니다. 엔진에 문제가 생기면 경고등이 켜지고, 정비소에 가면 정비사가 "이 부품을 교체하면 됩니다"라고 알려주죠. 코드 액션도 똑같습니다. VSCode가 코드에서 문제를 발견하면 전구 아이콘을 보여주고, 개발자가 클릭하면 해결 방법을 제시합니다. 클릭 한 번으로 코드가 자동으로 수정됩니다. **왜 코드 액션이 필요한가** 예전에는 모든 문제를 수동으로 찾아 고쳐야 했습니다. 린터가 "여기 문제 있어요"라고 알려줘도, 직접 찾아가서 수정해야 했습니다. 특히 같은 문제가 여러 곳에 있으면 일일이 찾아다니며 고쳐야 했습니다. 더 큰 문제는 어떻게 고치는 게 맞는지 모르는 경우도 많았다는 점입니다. 에러 메시지만 보고 정확한 해결책을 찾기는 어려웠습니다. **코드 액션의 등장** 바로 이런 문제를 해결하기 위해 코드 액션이 등장했습니다. 코드 액션을 사용하면 문제를 발견하는 동시에 해결 방법도 제시할 수 있습니다. 또한 한 번의 클릭으로 자동 수정이 가능합니다. 무엇보다 여러 가지 해결 방법을 제시하여 개발자가 선택할 수 있게 한다는 큰 이점이 있습니다. **코드 구조 분석** 위의 코드를 자세히 살펴보겠습니다. 먼저 3번째 줄에서 **CodeActionProvider 인터페이스**를 구현합니다. 4-8번째 줄의 **provideCodeActions 함수**는 사용자가 코드를 선택하거나 전구 아이콘을 클릭할 때 VSCode가 호출합니다. 10번째 줄에서 현재 선택된 텍스트를 가져옵니다. 13번째 줄에서 'console.log'가 포함되어 있는지 확인하고, 있다면 14-16번째 줄에서 새로운 **CodeAction**을 생성합니다. 19-20번째 줄이 핵심입니다. **WorkspaceEdit**를 사용하여 실제로 어떤 변경을 수행할지 정의합니다. 여기서는 해당 범위의 텍스트를 삭제합니다. **실무에서의 활용** 실제 프로젝트에서는 어떻게 활용할까요? 예를 들어 회사에서 React 프로젝트를 진행한다고 가정해봅시다. 팀 컨벤션에 따르면 모든 컴포넌트는 **TypeScript interface**로 Props 타입을 정의해야 합니다. 하지만 주니어 개발자들이 자주 깜빡하고 any를 사용합니다. 이럴 때 코드 액션으로 "Generate Props Interface"를 제공하면, 클릭 한 번으로 컴포넌트에 맞는 interface를 자동 생성할 수 있습니다. **AI와 결합하기** 더 강력한 활용법도 있습니다. provideCodeActions 함수 안에서 **AI API를 호출**할 수 있습니다. 선택한 코드를 AI에게 보내고 "이 코드를 최적화해줘" 또는 "이 코드의 버그를 찾아줘"라고 요청하는 것입니다. AI가 제안한 여러 개선 방법을 코드 액션으로 보여주고, 개발자가 원하는 방법을 선택하면 자동으로 적용됩니다. Cursor의 "Fix with AI" 기능이 바로 이 방식입니다. **주의사항** 하지만 조심해야 할 점도 있습니다. 초보 개발자들이 흔히 하는 실수 중 하나는 너무 많은 코드 액션을 제공하는 것입니다. 전구 아이콘을 클릭했는데 선택지가 10개 이상 나오면 오히려 혼란스럽습니다. 따라서 **정말 유용한 액션만 선별**하여 제공해야 합니다. 보통 3-5개 정도가 적당합니다. **정리** 이주니어 씨는 직접 코드 액션을 만들어보고 감탄했습니다. "console.log 위에 정말 전구가 뜨네요! 클릭하니까 바로 삭제되고요!" 코드 액션을 잘 활용하면 팀의 코드 품질을 자동으로 관리할 수 있습니다. 여러분도 팀에서 자주 발생하는 실수를 분석해서 자동 수정 기능을 만들어 보세요. **실전 팁** 💡 - **CodeActionKind를 적절히 사용**하세요 - QuickFix, Refactor, Source 등으로 구분하면 사용자가 찾기 쉽습니다 - **isPreferred 속성**을 true로 설정하면 Ctrl+. 누를 때 바로 적용됩니다 - **diagnostics와 연동**하면 더 강력합니다 - 에러나 경고와 함께 해결 방법을 제시할 수 있습니다 --- ## 4. 단축키와 명령 팔레트 이주니어 씨는 매일 Ctrl+Shift+P를 눌러 명령어를 실행합니다. 그런데 문득 궁금해졌습니다. "제가 만든 기능도 여기에 추가할 수 있나요?" 최시니어 씨가 package.json 파일을 열며 답했습니다. "당연하지, 그것도 아주 쉬워." **명령 팔레트**는 VSCode의 모든 기능을 단축키로 실행할 수 있게 해주는 중앙 집중식 인터페이스입니다. 마치 스포트라이트 검색처럼 원하는 명령어를 빠르게 찾아 실행할 수 있습니다. 자신만의 명령어를 등록하고 커스텀 단축키를 설정할 수 있습니다. 다음 코드를 살펴봅시다. ```typescript // package.json - Extension 설정 파일 { "contributes": { "commands": [ { "command": "myext.aiRefactor", "title": "AI Refactor: 선택한 코드 리팩토링", "category": "AI Assistant" } ], "keybindings": [ { "command": "myext.aiRefactor", "key": "ctrl+shift+r", "mac": "cmd+shift+r", "when": "editorTextFocus" } ] } } // extension.ts - 명령어 구현 import * as vscode from 'vscode'; export function activate(context: vscode.ExtensionContext) { let disposable = vscode.commands.registerCommand( 'myext.aiRefactor', async () => { const editor = vscode.window.activeTextEditor; if (!editor) return; const selection = editor.document.getText(editor.selection); vscode.window.showInformationMessage( `리팩토링 중: ${selection.substring(0, 30)}...` ); } ); context.subscriptions.push(disposable); } ``` 이주니어 씨는 VSCode를 사용하면서 Ctrl+Shift+P를 가장 자주 누릅니다. 파일 포맷팅도 하고, Git 명령어도 실행하고, Extension 설정도 여기서 합니다. 이 편리한 기능에 자신의 명령어를 추가할 수 있다니 흥미진진했습니다. 최시니어 씨가 화면을 공유하며 설명했습니다. "명령 팔레트에 명령어를 추가하는 건 두 단계야. 먼저 package.json에 등록하고, 그 다음 실제 코드를 작성하는 거지." **명령 팔레트란 무엇인가** 쉽게 비유하자면, 명령 팔레트는 마치 만능 리모컨과 같습니다. TV 리모컨, 에어컨 리모컨, 오디오 리모컨을 각각 찾아 쓰는 대신, 하나의 만능 리모컨으로 모든 기기를 제어하는 것처럼 말이죠. VSCode의 명령 팔레트도 똑같습니다. 메뉴를 이리저리 찾아다니는 대신, Ctrl+Shift+P 한 번으로 모든 기능에 접근할 수 있습니다. **왜 명령 팔레트가 중요한가** 마우스로 메뉴를 찾아다니는 건 비효율적입니다. 파일 메뉴를 클릭하고, 하위 메뉴를 찾고, 또 그 안의 옵션을 찾다 보면 시간이 오래 걸립니다. 더 큰 문제는 원하는 기능이 어디 있는지 기억하지 못할 때입니다. "분명 어디선가 봤는데..."하면서 모든 메뉴를 뒤적거린 경험, 다들 있으시죠? **명령 팔레트의 위력** 바로 이런 문제를 해결하기 위해 명령 팔레트가 있습니다. 명령 팔레트를 사용하면 기능 이름만 기억하면 됩니다. 또한 퍼지 검색이 지원되어 정확한 이름을 몰라도 찾을 수 있습니다. 무엇보다 자주 쓰는 명령어는 **커스텀 단축키**를 지정하여 더 빠르게 실행할 수 있다는 큰 이점이 있습니다. **설정 파일 분석** 위의 코드를 단계별로 살펴보겠습니다. 먼저 package.json의 3-10번째 줄에서 **commands를 정의**합니다. 이것이 명령 팔레트에 표시될 내용입니다. 6번째 줄의 command는 고유한 ID이고, 7번째 줄의 title은 사용자에게 보여질 이름입니다. 8번째 줄의 category를 지정하면 "AI Assistant: 선택한 코드 리팩토링"처럼 카테고리와 함께 표시됩니다. 11-18번째 줄에서는 **단축키를 설정**합니다. 13번째 줄의 key는 Windows/Linux용이고, 14번째 줄의 mac은 macOS용입니다. 15번째 줄의 **when 조건**이 중요합니다. "editorTextFocus"는 에디터에 포커스가 있을 때만 단축키가 작동하도록 제한합니다. extension.ts의 25-28번째 줄에서 **실제 명령어를 등록**합니다. 29-30번째 줄에서 현재 활성화된 에디터를 가져오고, 32번째 줄에서 선택된 텍스트를 읽어옵니다. **실무 활용 사례** 실제로 어떻게 활용할 수 있을까요? 예를 들어 회사에서 자주 사용하는 코드 스니펫이 있다고 가정해봅시다. React 컴포넌트를 만들 때마다 항상 같은 구조로 시작합니다. 이럴 때 "Create React Component"라는 명령어를 만들고 Ctrl+Shift+C 단축키를 지정할 수 있습니다. 명령어를 실행하면 컴포넌트 이름을 입력받고, 자동으로 파일을 생성하고, 보일러플레이트 코드를 작성해주는 것입니다. **AI 기능과 통합** 더 강력한 활용도 가능합니다. "AI Code Review"라는 명령어를 만들어봅시다. 현재 파일 전체를 AI에게 전달하고, 코드 리뷰 결과를 받아옵니다. 결과를 **Webview 패널**로 보여주면 마치 GitHub PR 리뷰처럼 인라인 코멘트를 볼 수 있습니다. 이런 식으로 명령 팔레트를 통해 복잡한 AI 기능도 쉽게 실행할 수 있습니다. **주의사항** 하지만 조심해야 할 점도 있습니다. 초보 개발자들이 흔히 하는 실수 중 하나는 너무 많은 단축키를 등록하는 것입니다. VSCode에는 이미 수백 개의 기본 단축키가 있습니다. 기존 단축키와 충돌하면 사용자가 혼란스러워합니다. 따라서 **정말 자주 쓰는 기능에만 단축키를 부여**하고, 나머지는 명령 팔레트에서 검색하도록 하는 것이 좋습니다. **정리** 이주니어 씨는 직접 명령어를 등록하고 Ctrl+Shift+P를 눌러봤습니다. "와, 제가 만든 명령어가 정말 나타나네요! 단축키도 작동하고요!" 명령 팔레트를 잘 활용하면 자주 반복하는 작업을 자동화할 수 있습니다. 여러분도 매일 하는 반복 작업을 분석해서 커스텀 명령어로 만들어 보세요. **실전 팁** 💡 - **when 조건을 활용**하세요 - editorLangId, resourceExtname 등으로 특정 파일 타입에서만 명령어가 보이도록 제한할 수 있습니다 - **icon을 추가**하면 더 전문적으로 보입니다 - package.json의 command에 icon 속성을 추가하세요 - **명령어 이름 짓기**가 중요합니다 - 검색하기 쉽고 기억하기 쉬운 이름을 사용하세요 --- ## 5. 실습: VSCode Extension 개발 드디어 실습 시간입니다. 이주니어 씨는 손을 비비며 준비했습니다. "이제 제가 직접 Extension을 만들어볼 차례네요!" 최시니어 씨가 웃으며 말했습니다. "Yeoman 제너레이터로 시작하면 쉬워. 따라해봐." VSCode Extension 개발을 위해서는 **Yeoman 제너레이터**로 프로젝트를 생성하고, TypeScript로 코드를 작성하고, F5 키로 디버깅하는 워크플로우를 이해해야 합니다. 마치 요리할 때 레시피를 따라가듯이 단계별로 진행하면 누구나 만들 수 있습니다. 다음 코드를 살펴봅시다. ```typescript # 1. Yeoman과 Extension 제너레이터 설치 npm install -g yo generator-code # 2. Extension 프로젝트 생성 yo code # 선택 옵션: # - New Extension (TypeScript) # - Extension name: my-ai-assistant # - Description: AI 코딩 어시스턴트 # - Initialize git: Yes # 3. 프로젝트 열기 cd my-ai-assistant code . # 4. F5 키를 눌러 Extension 디버깅 시작 # - Extension Development Host 창이 열립니다 # - Ctrl+Shift+P로 명령 팔레트를 열고 # - "Hello World" 명령어를 실행해보세요 # 5. 코드 수정 후 리로드 # - src/extension.ts 파일을 수정 # - Extension Development Host 창에서 Ctrl+R로 리로드 # - 변경사항이 즉시 반영됩니다 ``` 이주니어 씨는 이제 실제로 Extension을 만들어볼 준비가 되었습니다. 하지만 어디서부터 시작해야 할지 막막했습니다. 빈 폴더에서 처음부터 모든 설정을 해야 하나요? 최시니어 씨가 안심시켰습니다. "걱정하지 마. VSCode 팀이 Yeoman이라는 도구를 제공해. 몇 가지 질문에 답하면 자동으로 프로젝트를 만들어줘." **Yeoman이란 무엇인가** 쉽게 비유하자면, Yeoman은 마치 집을 지을 때 사용하는 설계도와 같습니다. 건축가가 벽돌 하나하나 어디에 쌓을지 고민하는 대신, 표준 설계도를 사용하면 빠르게 집을 지을 수 있죠. Extension 개발도 마찬가지입니다. package.json 설정, tsconfig.json 설정, 폴더 구조 등을 일일이 만드는 대신, Yeoman이 모든 걸 자동으로 생성해줍니다. **프로젝트 생성 과정** 위의 명령어를 단계별로 실행해봅시다. 먼저 1-2번째 줄에서 **Yeoman과 제너레이터를 설치**합니다. npm install -g는 전역으로 설치한다는 의미입니다. 한 번만 설치하면 계속 사용할 수 있습니다. 4-5번째 줄에서 yo code 명령어를 실행하면 대화형 인터페이스가 나타납니다. 여기서 Extension 타입, 이름, 설명 등을 입력합니다. TypeScript를 선택하는 것을 추천합니다. JavaScript보다 타입 안정성이 높고, VSCode API 자동완성도 잘 작동하기 때문입니다. **개발 워크플로우** 프로젝트가 생성되면 진짜 개발이 시작됩니다. 13-16번째 줄이 핵심입니다. **F5 키를 누르면** Extension Development Host라는 새 VSCode 창이 열립니다. 이것은 우리가 만든 Extension이 설치된 별도의 VSCode 인스턴스입니다. 여기서 Extension을 실제로 테스트할 수 있습니다. Ctrl+Shift+P를 눌러보세요. "Hello World"라는 명령어가 보일 겁니다. 이것이 제너레이터가 기본으로 만들어준 샘플 명령어입니다. **코드 수정과 리로드** 이제 코드를 수정해봅시다. src/extension.ts 파일을 열어보세요. activate 함수 안에 "Hello World" 메시지를 출력하는 코드가 있을 겁니다. 이 메시지를 "안녕하세요, 제 첫 Extension입니다!"로 바꿔보세요. 저장한 다음, Extension Development Host 창으로 돌아가서 **Ctrl+R**을 누르면 Extension이 리로드됩니다. 다시 명령어를 실행해보세요. 변경된 메시지가 나타날 겁니다. **실제 기능 추가하기** 이제 진짜 유용한 기능을 추가해봅시다. 예를 들어 현재 파일의 줄 수를 세는 명령어를 만들어봅시다. extension.ts에 새로운 명령어를 등록하고, activeTextEditor에서 document.lineCount를 읽어오면 됩니다. 그 다음 package.json의 contributes.commands에 이 명령어를 추가해야 합니다. 이 두 파일을 수정하고 Ctrl+R로 리로드하면 바로 테스트할 수 있습니다. **디버깅 활용** 개발하다 보면 버그가 생깁니다. 이럴 때 **중단점**을 활용하세요. extension.ts에서 원하는 줄 번호 왼쪽을 클릭하면 빨간 점이 생깁니다. 이것이 중단점입니다. F5로 디버깅을 시작하고 해당 명령어를 실행하면 중단점에서 코드가 멈춥니다. 이 상태에서 변수 값을 확인하고, 한 줄씩 실행하면서 문제를 찾을 수 있습니다. console.log보다 훨씬 강력합니다. **패키징과 배포** Extension이 완성되면 배포할 차례입니다. vsce라는 도구를 사용하면 Extension을 .vsix 파일로 패키징할 수 있습니다. 이 파일을 VSCode 마켓플레이스에 업로드하면 전 세계 개발자들이 여러분의 Extension을 사용할 수 있습니다. 회사 내부에서만 사용한다면 .vsix 파일을 공유하고, "Install from VSIX" 옵션으로 설치하면 됩니다. **주의사항** 하지만 조심해야 할 점도 있습니다. 초보 개발자들이 흔히 하는 실수 중 하나는 **package.json과 코드의 불일치**입니다. 코드에서 명령어 ID를 변경했는데 package.json은 수정하지 않으면 Extension이 작동하지 않습니다. 두 파일의 명령어 ID가 정확히 일치하는지 항상 확인하세요. **정리** 이주니어 씨는 첫 Extension을 성공적으로 만들었습니다. "와, 생각보다 어렵지 않네요! 이제 제가 원하는 기능을 뭐든 만들 수 있겠어요!" Extension 개발은 처음에는 어려워 보이지만, 워크플로우를 익히면 빠르게 개발할 수 있습니다. 여러분도 오늘 배운 내용으로 첫 Extension을 만들어 보세요. **실전 팁** 💡 - **Extension Host를 자주 리로드**하세요 - 코드 변경 후 반드시 Ctrl+R을 눌러야 반영됩니다 - **.vscode/launch.json**을 커스터마이징하면 디버깅 설정을 조정할 수 있습니다 - **VSCode API 문서**를 북마크하세요 - https://code.visualstudio.com/api 여기가 가장 정확한 레퍼런스입니다 --- ## 6. 실습: 실시간 코드 완성 기능 마지막 실습입니다. 이주니어 씨는 진짜 AI 기능을 만들어보고 싶었습니다. "Claude API를 연결해서 실시간 코드 완성 기능을 만들 수 있을까요?" 최시니어 씨가 고개를 끄덕였습니다. "물론이지. 지금까지 배운 걸 다 합치면 돼." **실시간 코드 완성**은 InlineCompletionItemProvider와 Claude API를 결합하여 사용자가 타이핑하는 동안 AI가 다음 코드를 예측하고 제안하는 기능입니다. 마치 코딩하는 당신의 마음을 읽는 것처럼 자연스럽게 작동합니다. GitHub Copilot과 같은 프로덕션 수준의 기능을 직접 구현할 수 있습니다. 다음 코드를 살펴봅시다. ```typescript import * as vscode from 'vscode'; import Anthropic from '@anthropic-ai/sdk'; class AICompletionProvider implements vscode.InlineCompletionItemProvider { private anthropic: Anthropic; private debounceTimer?: NodeJS.Timeout; constructor(apiKey: string) { this.anthropic = new Anthropic({ apiKey }); } async provideInlineCompletionItems( document: vscode.TextDocument, position: vscode.Position ): Promise { // 디바운싱: 500ms 대기 return new Promise((resolve) => { if (this.debounceTimer) { clearTimeout(this.debounceTimer); } this.debounceTimer = setTimeout(async () => { // 현재 파일의 컨텍스트 수집 const prefix = document.getText( new vscode.Range(new vscode.Position(0, 0), position) ); const suffix = document.getText( new vscode.Range(position, new vscode.Position(document.lineCount, 0)) ); try { // Claude API 호출 const message = await this.anthropic.messages.create({ model: 'claude-3-5-sonnet-20241022', max_tokens: 500, messages: [{ role: 'user', content: `다음 코드의 빈 부분을 완성해주세요. 이전 코드: ${prefix} 이후 코드: ${suffix} 완성된 코드만 출력하세요.` }] }); // AI 응답을 인라인 제안으로 변환 const completion = message.content[0].type === 'text' ? message.content[0].text : ''; resolve([new vscode.InlineCompletionItem( completion, new vscode.Range(position, position) )]); } catch (error) { console.error('AI completion error:', error); resolve([]); } }, 500); }); } } // Extension activate 함수에서 등록 export function activate(context: vscode.ExtensionContext) { const apiKey = vscode.workspace .getConfiguration('aiAssistant') .get ('apiKey'); if (!apiKey) { vscode.window.showErrorMessage( 'Claude API 키를 설정해주세요' ); return; } const provider = new AICompletionProvider(apiKey); context.subscriptions.push( vscode.languages.registerInlineCompletionItemProvider( { pattern: '**/*.{js,ts,jsx,tsx,py}' }, provider ) ); } ``` 이주니어 씨는 드디어 최종 목표에 도달했습니다. 지금까지 배운 모든 내용을 합쳐서 진짜 AI 코딩 어시스턴트를 만드는 것입니다. 손에 땀을 쥐며 최시니어 씨의 설명을 듣기 시작했습니다. 최시니어 씨가 화면을 공유하며 말했습니다. "자, 이제 진짜 실전이야. Claude API를 Extension에 연결해보자." **전체 구조 이해하기** 쉽게 비유하자면, 이 시스템은 마치 번역 앱과 같습니다. 사용자가 말을 하면(타이핑), 앱이 그걸 서버로 보내고(API 호출), 서버가 번역 결과를 돌려주고(AI 응답), 앱이 화면에 표시합니다(인라인 제안). 우리가 만들 Extension도 똑같은 흐름입니다. 사용자가 코드를 작성하면, Claude에게 전달하고, Claude가 다음 코드를 예측하고, 회색 텍스트로 보여주는 것입니다. **API 키 관리** 먼저 API 키를 안전하게 관리해야 합니다. 68-72번째 줄을 보세요. **workspace.getConfiguration**을 사용하여 사용자 설정에서 API 키를 읽어옵니다. 코드에 하드코딩하면 절대 안 됩니다. package.json에 설정 항목을 추가하면 사용자가 VSCode 설정 UI에서 API 키를 입력할 수 있습니다. 이렇게 하면 코드를 GitHub에 올려도 API 키가 노출되지 않습니다. **디바운싱의 중요성** 17-22번째 줄이 매우 중요합니다. 사용자가 한 글자 입력할 때마다 API를 호출하면 어떻게 될까요? 1초에 여러 번 API를 호출하게 되어 비용이 폭발하고, 응답도 느려집니다. 따라서 **디바운싱**을 구현합니다. 사용자가 타이핑을 멈추고 500ms가 지나면 그때 API를 호출하는 것입니다. setTimeout과 clearTimeout을 조합하여 구현합니다. 이전 타이머를 취소하고 새로 시작하는 방식입니다. **컨텍스트 수집** 24-30번째 줄에서 **파일의 컨텍스트**를 수집합니다. prefix는 커서 이전의 모든 코드이고, suffix는 커서 이후의 모든 코드입니다. AI에게 이 두 가지를 모두 전달하면 훨씬 정확한 예측을 할 수 있습니다. 마치 문장 중간에 빈칸이 있을 때, 앞뒤 문맥을 보면 무슨 단어가 들어갈지 쉽게 알 수 있는 것과 같습니다. **Claude API 호출** 34-50번째 줄에서 **실제 API를 호출**합니다. anthropic.messages.create 메소드를 사용합니다. model은 'claude-3-5-sonnet-20241022'를 사용하는 것을 추천합니다. 속도와 품질의 균형이 가장 좋기 때문입니다. max_tokens는 500 정도가 적당합니다. 너무 크면 응답이 느려지고, 너무 작으면 코드가 잘립니다. 프롬프트는 명확하게 작성해야 합니다. "다음 코드의 빈 부분을 완성해주세요"라고 요청하고, prefix와 suffix를 제공합니다. **응답 처리** 53-58번째 줄에서 **AI 응답을 인라인 제안으로 변환**합니다. Claude의 응답은 message.content 배열에 들어있습니다. 첫 번째 요소가 text 타입인지 확인하고, text를 추출합니다. 그 다음 InlineCompletionItem으로 감싸서 반환하면 VSCode가 자동으로 회색 텍스트로 보여줍니다. 사용자가 Tab 키를 누르면 그대로 입력됩니다. **에러 처리** 59-62번째 줄의 **에러 처리**도 중요합니다. 네트워크 문제나 API 한도 초과 등으로 실패할 수 있습니다. 이럴 때 Extension 전체가 멈추면 안 됩니다. try-catch로 감싸고, 에러가 발생하면 빈 배열을 반환합니다. 사용자에게는 아무 제안도 보이지 않지만, Extension은 계속 작동합니다. console.error로 로그를 남기면 나중에 디버깅할 때 유용합니다. **성능 최적화** 실무에서는 더 많은 최적화가 필요합니다. 예를 들어 **캐싱**을 추가할 수 있습니다. 같은 컨텍스트에 대한 요청이 반복되면 캐시에서 바로 반환하는 것입니다. 또한 **컨텍스트 길이 제한**도 중요합니다. 파일이 10,000줄이면 모든 걸 API로 보내면 안 됩니다. 커서 주변 100줄 정도만 추출하여 보내는 것이 효율적입니다. **실제 사용 경험** 이주니어 씨가 직접 테스트해봤습니다. function을 입력하기 시작하자 회색 글씨로 함수 전체가 나타났습니다. Tab 키를 누르니 코드가 그대로 입력됐습니다. "와, 진짜 Copilot처럼 작동하네요!" 최시니어 씨가 웃으며 말했습니다. "맞아. 이제 너도 AI 코딩 도구를 만들 수 있는 거야." **주의사항** 하지만 조심해야 할 점도 있습니다. API 비용을 항상 염두에 두세요. 개발자 한 명이 하루에 몇 천 번 API를 호출할 수 있습니다. 디바운싱과 캐싱 없이 사용하면 한 달에 수백 달러가 나올 수 있습니다. 따라서 **사용량 모니터링**을 반드시 추가하세요. 하루 한도를 설정하거나, 사용자에게 비용을 표시하는 것도 좋은 방법입니다. **정리** 이주니어 씨는 자신이 만든 AI 코딩 어시스턴트를 자랑스럽게 바라봤습니다. "제가 정말 이걸 만들었다니 믿기지 않아요!" 실시간 AI 코드 완성은 복잡해 보이지만, 각 단계를 이해하면 충분히 만들 수 있습니다. 여러분도 오늘 배운 내용으로 나만의 AI 코딩 도구를 만들어 보세요. 여러분의 작업 스타일에 딱 맞는 완벽한 도구가 될 겁니다. **실전 팁** 💡 - **스트리밍을 활용**하면 더 빠릅니다 - Claude API의 stream 옵션을 사용하면 응답을 조금씩 받을 수 있습니다 - **파일 타입별로 다른 프롬프트**를 사용하세요 - Python과 TypeScript는 코딩 스타일이 다릅니다 - **사용자 피드백을 수집**하세요 - 제안이 수락되었는지, 거부되었는지 추적하면 프롬프트를 개선할 수 있습니다 --- 이상으로 학습을 마칩니다. 위 내용을 직접 코드로 작성해보면서 익혀보세요!

카테고리: LLM,VSCode,Extension

언어: TypeScript

태그: VSCode, Extension, API, InlineSuggestion, CodeAction, LLM,VSCode,Extension

작성자: AI Generated

프리미엄 콘텐츠 - 3개월 무료 체험 가능

CodeDeck

VSCode Extension으로 만드는 나만의 AI 코딩 도우미

목차

1. VSCode Extension API 이해

2. 인라인 코드 제안 (Inline Suggestions)

3. 코드 액션 프로바이더

4. 단축키와 명령 팔레트

5. 실습: VSCode Extension 개발

6. 실습: 실시간 코드 완성 기능

댓글 (0)

함께 보면 좋은 카드 뉴스

Few-Shot으로 프로젝트 패턴 학습 완벽 가이드

코드베이스 컨텍스트 주입하기 완벽 가이드

마이크로서비스 배포 완벽 가이드

Application Load Balancer 완벽 가이드

고객 상담 AI 시스템 완벽 구축 가이드