VSCode 확장 프로그램을 만들어 VSCode 확장이 어떻게 작동하는지 배웠다
Source: Dev.to
개요
저는 만들면서 배우는 사람입니다. 언제나 그래왔죠.
또한 VSCode가 코딩은 물론 그 밖의 영역에서도 혁신을 일으킬 수 있는, 아직 눈에 잘 띄지 않는 환경이라고 생각합니다.
수년간 VSCode 확장 기능이 어떻게 동작하는지 이해하고 싶었지만, 문서는 여기저기 흩어져 있었습니다. 그래서 그냥 읽는 대신 직접 하나를 만들고 그 과정을 모두 기록했습니다.
확장 자체는 약간 재미있습니다: 스테이징된 Git 변경 사항으로 5‑7‑5 하이쿠 커밋 메시지를 생성합니다.
코드를 스테이징하고 Cmd+Shift+H를 누르면 다음과 같은 결과를 얻을 수 있습니다:
Config paths diverge
Settings flow through typed channels
Defaults guide the lost
하지만 하이쿠 자체가 핵심은 아닙니다.
왜 이 확장을 만들었나요
다음과 같은 것을 배우고 싶었습니다:
- VSCode 명령이 어떻게 동작하는지
- Source Control 패널과 어떻게 통합되는지
- 설정과 구성은 어떻게 관리되는지
- 여러 AI 제공자(Claude, GPT‑5, Gemini)를 어떻게 다루는지
- VS Code Marketplace에 어떻게 배포하는지
문서만 읽어서는 한계가 있습니다. 실제 무언가를 만들면 실제 문제를 해결해야 하니까요.
배운 점
1. 명령은 예상보다 간단합니다
명령을 등록하는 코드는 다음과 같습니다:
const disposable = vscode.commands.registerCommand('575.haikuCommit', async () => {
// your logic here
});
context.subscriptions.push(disposable);복잡한 부분은 내부 로직에 있습니다.
2. SCM 통합에는 특이점이 있습니다
스테이징된 diff를 얻으려면 VSCode의 Git 확장 API를 사용해야 합니다. 어렵지는 않지만 직관적이지도 않습니다. 레포에는 이를 깔끔하게 구현하는 예제가 포함돼 있습니다.
3. 설정은 강력하지만 장황합니다
VSCode의 설정 시스템은 견고하지만 package.json에 설정을 정의하면 금방 길어집니다. 저는 API 키, 제공자 선택, 모델 오버라이드, 재시도 제한 등 여러 설정을 만들게 되었습니다.
4. 오류 처리의 중요성
AI API는 실패합니다. 레이트 제한에 걸리기도 하고, 네트워크가 타임아웃되기도 합니다. 하이쿠의 음절 수가 틀릴 경우 확장은 교정 안내와 함께 재시도합니다. 이 재시도 로직은 예상보다 더 흥미로웠습니다.
학습 자료로서의 레포
코드베이스를 다른 사람도 배울 수 있도록 구조화했습니다.
docs/GUIDES.md에는 다음과 같은 단계별 가이드가 포함돼 있습니다:
- 이 레포를 자신의 확장으로 템플릿화하는 방법
- 명령과 키보드 단축키가 동작하는 원리
- Source Control과 통합하는 방법
- 설정 및 구성 관리가 어떻게 이루어지는지
- 여러 API 제공자를 추상화하는 방법
- 배포 준비와 퍼블리시 방법
VSCode 확장을 만들고 싶지만 어디서 시작해야 할지 몰랐던 분들은 레포를 클론하고 직접 살펴보세요.
첫 번째 프로젝트, 앞으로도 계속
AI(그리고 인생의 대부분)를 이해하는 가장 좋은 방법은 책을 읽는 것이 아니라 직접 손에 흙을 묻히고 만드는 것이라고 믿습니다.
이번이 제가 공개적으로 공유하는 첫 번째 “배우면서 만들기” 프로젝트이며, 앞으로도 더 많은 프로젝트가 이어질 것입니다.
사용해 보기 / 배워 보기
Marketplace: 575 Haiku Commit
GitHub: AIMateyApps/575-haiku-commit
MIT 라이선스. 클론하고, 부수고, 자신만의 무언가를 만들어 보세요.
여러분이 만들고 배우고 싶지만 아직 시작하지 못한 것이 무엇인가요?