VS Code 확장을 유료 구독형으로 만들려면?

VS Code 확장은 강력한 개발 생산성 도구지만, 자체적으로 결제 기능은 제공하지 않는다. 따라서 유료 구독 기반의 기능을 만들기 위해서는 외부 백엔드, 결제 시스템, 인증 API 연동까지 전체 흐름을 구성해야 한다. 이 글에서는 실질적인 구현 관점에서 구독 기반 유료 확장을 만드는 데 필요한 모든 것을 다룬다.

전체 구성요소와 구조

VS Code 확장을 유료화하려면 다음 네 가지 컴포넌트가 필요하다:

확장 프로그램 (VS Code Extension) – 사용자 인터페이스, 명령 호출, API 연동
외부 백엔드 서버 – 사용자 식별, 구독 상태 저장, API 인증 처리
결제 시스템 (Stripe 등) – 실제 결제 처리 및 Webhook 연동
구독 페이지 (웹 UI) – 사용자 결제 진행, 상태 확인용

사용자 플로우: 구독 요청부터 기능 제한까지

확장에서 “구독하기” 버튼 클릭
외부 웹페이지로 이동하여 Stripe 등으로 결제
Webhook을 통해 구독 완료 여부를 백엔드에서 확인
확장에서 API를 통해 구독 상태 조회
유료 기능 허용 또는 차단

백엔드 API 설계 핵심

확장과 백엔드가 통신하기 위한 최소 API 예시는 다음과 같다:

GET /api/validate-subscription?user_id=abc123  
→ { "active": true, "plan": "pro", "expires": "2025-12-31" }

사용자 인증 방식은 GitHub OAuth, JWT 토큰, API Key 등 선택 가능하며, VS Code 내부에서는 globalState에 저장하여 유지할 수 있다.

VS Code 확장 내부 처리 흐름

사용자가 명령 실행 시 구독 상태 확인 요청
구독 미확인 시 “결제하기” 안내 메시지 출력
결제 URL (https://yourapp.com/subscribe) 로 브라우저 열기
구독 확인 후 API 결과에 따라 기능 차단 또는 허용

const res = await fetch("https://yourapi.com/api/validate-subscription?user_id=abc123");
const json = await res.json();
if (!json.active) {
  window.showErrorMessage("유료 플랜이 필요합니다. 구독하시겠습니까?", "결제하기")
    .then(sel => {
      if (sel === "결제하기")
        env.openExternal(Uri.parse("https://yourapp.com/subscribe"));
    });
  return;
}

결제 처리와 Webhook 연동

Stripe를 사용하는 경우:

Checkout 세션 완료 시 Webhook (checkout.session.completed) 수신
고객 이메일 또는 ID 기준으로 DB 업데이트
API에서 구독 상태 조회 시 최신 정보 반환

app.post("/webhook", raw(), async (req, res) => {
  const event = stripe.webhooks.constructEvent(req.body, req.headers["stripe-signature"], STRIPE_SECRET);
  if (event.type === "checkout.session.completed") {
    const email = event.data.object.customer_email;
    db.activateSubscription(email);
  }
});

보안 및 운영 시 유의사항

API 키는 환경변수 또는 OS 키체인에 저장
구독 상태는 주기적으로 재확인하고 캐싱 제한
사용자 데이터는 개인정보 처리방침 링크와 함께 안내
VS Code 마켓플레이스 설명에 “외부 유료 서비스 포함” 명시

유료 확장 사례 분석

Continue – API Key 입력 방식, GPT-4/Claude 전환 제공
Cody – GitHub 로그인 기반 유료 기능 분리
CodeWhisperer – IAM 인증 기반 프로플랜 구성

마무리

VS Code 확장을 구독 기반 유료화하려면 단순 UI 구현만으로는 부족하다. 결제와 인증, 기능 제한 흐름까지 외부 시스템과 체계적으로 연결해야 한다. Stripe 또는 Toss 결제 시스템, JWT 기반 인증 API, 사용자 행동 기반 제어까지 통합 구성해야만 안정적으로 서비스할 수 있다.