첫 번째 VS Code 확장 프로그램을 배포했어요 — 배운 점

Source: Dev.to

컨텍스트 전환의 숨은 비용

현대 개발 작업이 어려운 이유는 프레임워크가 나쁘기 때문이 아니다.
스택을 오갈 때마다 시작 명령어를 외워야 하게 되고, 이는 정신 에너지를 낭비한다.

# JavaScript / Node
React (Vite)      → npm run dev
Next.js           → npm run dev
Angular           → npm start

# Python
Flask             → flask run
Django            → python manage.py runserver
FastAPI           → uvicorn main:app --reload

여러 스택을 다루면 뇌가 명령어를 찾는 테이블이 된다. 컴퓨터가 패턴을 감지하는 데는 인간보다 더 뛰어나다.

아이디어: 에디터가 대신 처리하게

명령어를 외우는 대신, VS Code가 프로젝트를 감지하고 자동으로 실행한다면 어떨까? 라는 질문이 첫 번째 VS Code 확장인 WebRun을 만들게 했다.

사용자 입장에서 작동 방식

1. 프로젝트를 연다.
2. ▶️ 버튼을 클릭한다.
3. 올바른 개발 서버가 시작된다—설정이 필요 없다.

작동 원리 (AI도, 마법도 없음)

WebRun은 추측하지 않는다. 눈에 보이는 프로젝트 단서를 검사한다.

JavaScript / Node 단서

• package.json의 스크립트와 의존성을 통해 Vite, Next.js, CRA, NestJS, Express, Fastify 같은 프레임워크를 판단한다.
• vite.config.js, next.config.js, angular.json 같은 설정 파일이 스택을 추가로 확인한다.

Python 단서

폴더 구조

frontend/와 backend/ 같은 일반적인 풀스택 레이아웃을 감지하고, WebRun은 두 서버를 동시에 시작할 수 있다.

WebRun이 지원하는 것

• 프론트엔드: React, Next.js, Vue, Angular, Svelte, Astro
• 백엔드 (Node): Express, Fastify, NestJS
• 백엔드 (Python): Flask, Django, FastAPI
• 정적: HTML/CSS/JS
• 풀스택 프로젝트

모두 VS Code 안에서 한 번의 클릭으로 실행된다.

첫 번째 확장 배포에서 얻은 교훈

• 구현은 쉬운 편.
• 배포가 완벽함보다 우선 – 사용자가 전혀 없는 완벽한 도구는 의미가 없다.
• 문서는 제품 자체 – 사람들이 빠르게 이해하지 못하면 바로 삭제한다.
• 자동화 > 설정 – 노출된 설정 하나하나가 이탈의 기회가 된다.
• 오픈 소스가 신뢰를 빠르게 만든다 – 명확한 범위와 MIT 라이선스가 기여를 촉진한다.
• 작은 도구가 실제로 배포된다 – “프로젝트 실행”이라는 한 가지 작업에 집중했기에 배포가 가능했다.

오픈 소스 및 링크

WebRun은 완전 오픈 소스이며 MIT 라이선스를 사용한다.

• VS Code 마켓플레이스:
• GitHub 저장소:

피드백, 이슈, 기여를 언제든 환영한다.

마무리 생각

WebRun은 터미널을 대체하려는 것이 아니라 반복 작업을 자동화하려는 것이다. 개발자 도구를 만든다면:

• 일찍 배포하라.
• 공개적으로 배우라.
• 실제 사용을 기반으로 반복하라.

이러한 마인드셋이 WebRun을 탄생시켰다.