DEV Community

Cover image for VS 코드 Apidog 사용법
Rihpig
Rihpig

Posted on • Originally published at apidog.com

VS 코드 Apidog 사용법

요약 (TL;DR)

Apidog VS Code 확장 프로그램을 사용하면 편집기를 떠나지 않고도 API 요청을 보내고, 컬렉션을 관리하고, 테스트를 실행하고, 팀과 워크스페이스를 공유할 수 있습니다. 설정은 5분 이내에 완료됩니다. 확장 프로그램을 설치하고, 무료 Apidog 계정에 로그인하면 워크스페이스가 VS Code의 사이드바에 직접 로드됩니다.

지금 Apidog를 사용해 보세요

💡 Apidog는 무료 올인원 API 개발 플랫폼입니다. VS Code 확장 프로그램은 편집기를 Apidog 워크스페이스에 직접 연결하여 창을 전환하지 않고도 API를 테스트하고, 문서를 작성하고, 팀과 협업할 수 있도록 합니다. 신용 카드 없이 Apidog를 무료로 사용해 보세요.

소개

Apidog는 API 설계, 테스트 및 문서화를 위한 데스크톱 앱으로 시작했습니다. 시간이 지나면서 팀은 동일한 워크스페이스를 편집기 안에 직접 가져오는 VS Code 확장 프로그램을 출시했습니다. 이 확장 프로그램은 Apidog를 복제하는 것이 아니라, 기존 워크스페이스에 연결되므로 VS Code, 데스크톱 앱 또는 웹 인터페이스 어디에서든 컬렉션, 환경 및 테스트 케이스가 동기화된 상태로 유지됩니다.

이 가이드에서는 확장 프로그램 설치, 워크스페이스 연결, 요청 전송, 테스트 실행, 그리고 VS Code 확장 프로그램을 데스크톱 앱과 함께 사용하는 전체 워크플로우를 안내합니다.

1단계: Apidog VS Code 확장 프로그램 설치

  1. VS Code를 엽니다.
  2. 왼쪽 사이드바에서 확장 프로그램 아이콘(또는 Ctrl+Shift+X / Cmd+Shift+X)을 클릭합니다.
  3. 검색창에 "Apidog"를 입력하고, Apidog Inc.에서 배포한 확장 프로그램(스타일이 적용된 API 문자가 있는 어두운 아이콘)을 찾습니다.
  4. 설치를 클릭하면 VS Code 왼쪽 활동 표시줄에 Apidog 아이콘이 추가됩니다.
  5. 설치 후 활동 표시줄의 Apidog 아이콘을 클릭하면 사이드바에 Apidog 패널이 열립니다.

2단계: Apidog 계정에 로그인

  1. Apidog 패널에서 로그인(Sign In) 버튼을 클릭합니다.
  2. 브라우저 탭이 열리며 Apidog 인증 페이지로 이동합니다.
  3. 기존 계정이 있으면 이메일/비밀번호로 로그인, 없으면 "회원가입(Sign Up)"을 클릭해 이메일만 입력하고 가입합니다(신용 카드 필요 없음).
  4. 로그인 완료 후 브라우저에서 "VS Code 열기(Open VS Code)"를 클릭하거나 VS Code로 직접 전환합니다.
  5. 인증이 완료되면 사이드바에 Apidog 워크스페이스가 로드됩니다.

로그인 후 사이드바 구성:

  • 상단: 워크스페이스 이름, 환경 선택 드롭다운
  • 중간: 폴더 구조의 컬렉션 트리
  • 각 컬렉션: 폴더/요청 구조로 확장 가능

3단계: 컬렉션 탐색

  • Apidog 사이드바는 워크스페이스의 컬렉션 구조를 그대로 반영합니다.
  • 컬렉션 옆 화살표 클릭 시 폴더와 요청이 확장됩니다.
  • 각 요청은 HTTP 메서드 색상 배지와 함께 한 줄로 표시되며, 클릭 시 편집기 탭으로 열립니다.

검색 기능 사용:

  • 패널 상단의 검색창에 요청 이름, URL, 메서드를 입력해 컬렉션을 빠르게 필터링할 수 있습니다.

워크스페이스 전환:

  • 여러 워크스페이스에 속할 경우, 상단 워크스페이스 선택기를 통해 즉시 전환할 수 있습니다.

4단계: 요청 보내기

  1. 사이드바에서 요청을 열면 편집기 영역에 탭으로 로드됩니다.
  2. 상단 바: 메서드 선택 드롭다운, URL 입력란, 보내기(Send) 버튼
  3. URL 아래 탭: Params, Headers, Body, Auth, Pre-request Scripts, Tests, Settings

요청 보내기 절차:

  1. 메서드 및 URL을 확인합니다.
  2. Headers 탭에서 필요한 헤더를 추가합니다.
  3. POST/PUT 등 Body가 필요하면 Body 탭에서 콘텐츠 유형(JSON, 폼 데이터 등) 선택 후 데이터 입력
  4. Send 클릭

응답 확인:

  • 하단에 상태 코드, 응답 시간, 크기 등이 표시됩니다.
  • 본문(JSON/XML 구문 강조), 헤더, 쿠키, 테스트 결과를 탭에서 확인 가능

환경 변수 사용:

  • 패널 상단 환경 선택기를 통해 활성 환경을 설정
  • <code>{{base_url}}</code>, <code>{{token}}</code> 등 변수는 환경값으로 치환됨
  • 환경 전환만으로 개발/스테이징/운영에 대해 동일한 요청 실행 가능

5단계: 요청 편집 및 생성

기존 요청 편집:

  • 편집기에서 직접 요청을 수정하면 Apidog 워크스페이스에 자동 동기화

새 요청 생성:

  1. 사이드바에서 컬렉션/폴더 우클릭
  2. "새 요청(New Request)" 선택
  3. 빈 요청 탭에서 메서드, URL, 헤더, Body 등 설정
  4. Ctrl+S / Cmd+S로 저장
  • 새 요청은 즉시 사이드바에 반영되며, 데스크톱 앱/웹/팀원 VS Code에서도 동기화

정리 및 관리:

  • 우클릭 시 이름 변경, 이동, 복제, 삭제 가능
  • 드래그 앤 드롭으로 요청/폴더 순서 변경 지원

6단계: 테스트 실행

요청별 테스트 작성:

  • 요청의 Tests 탭에서 JavaScript 기반 어설션 작성 
pm.test("Status is 200", function () {
  pm.response.to.have.status(200);
});

pm.test("Response contains user id", function () {
  const json = pm.response.json();
  pm.expect(json.id).to.be.a('number');
});
Enter fullscreen mode Exit fullscreen mode
  • Send 클릭 후 응답의 Tests 탭에서 테스트 결과(통과/실패, 오류 메시지) 확인

컬렉션 실행:

  1. 사이드바에서 컬렉션/폴더 우클릭 → "컬렉션 실행(Run Collection)" 선택
  2. 러너 패널에서 반복 횟수, 지연, 환경 등 설정 후 실행
  3. 모든 요청이 순차 실행, 각 요청의 테스트 결과 확인 가능

7단계: VS Code 확장 프로그램과 데스크톱 앱 함께 사용

  • 두 플랫폼은 워크스페이스를 실시간으로 공유하며, 데이터는 항상 동기화됨

  • 실전 워크플로우 예시:

    • 데스크톱 앱에서 API 스키마/문서/Mock 서버 설계 → VS Code에서 테스트 및 어설션 작성
    • 백엔드가 데스크톱 앱에서 엔드포인트 업데이트 → 프론트엔드는 VS Code 확장 프로그램에서 즉시 확인
    • 코드 작성 중 Apidog 패널에서 엔드포인트 실행 및 응답 확인 후 즉시 코드로 복귀

  • 데스크톱 앱에 적합한 작업: 스키마 설계, Mock 서버 설정, API 문서 게시, 복잡한 환경 관리 등은 데스크톱 앱에서 더 효율적

8단계: 팀과 공유

  1. Apidog 웹 또는 데스크톱 앱에서 워크스페이스 설정으로 이동
  2. 팀원 이메일로 초대 발송
  3. 팀원이 초대 수락 후 VS Code 확장 프로그램 설치
  4. 동일한 컬렉션/요청 구조를 공유하며, 변경 사항이 실시간 반영됨
  • 무료 티어는 최대 3명까지 지원
  • Apidog 클라우드 동기화로 Git, 파일 내보내기, 병합 충돌 없이 협업 가능

자주 묻는 질문 (FAQ)

Q. Apidog VS Code 확장 프로그램은 데스크톱 앱 없이 작동하나요?

A. 네. 확장 프로그램만으로도 Apidog 워크스페이스를 사용할 수 있으며, 데스크톱 앱은 필요하지 않습니다.

Q. 오프라인에서도 사용할 수 있나요?

A. 오프라인에서 캐시된 컬렉션은 보고 편집할 수 있지만, 외부 API 요청이나 변경 동기화에는 인터넷이 필요합니다. 완전한 오프라인 지원은 캐시 상태에 따라 달라집니다.

Q. Thunder Client나 Postman 컬렉션을 가져오려면?

A. Apidog 데스크톱 앱 또는 웹 인터페이스에서 '가져오기(Import)' 메뉴로 이동 후 Thunder Client JSON, Postman collection v2.1, OpenAPI 등 포맷을 선택하면 됩니다. 가져온 컬렉션은 VS Code 확장 프로그램에서도 즉시 사용 가능.

Q. VS Code 확장 프로그램에서 새 프로젝트를 만들 수 있나요?

A. 아니요. 확장 프로그램은 기존 Apidog 워크스페이스에 연결합니다. 워크스페이스 생성/관리는 데스크톱 앱이나 웹에서 수행해야 합니다.

Q. 여러 사람이 동시에 컬렉션을 열 수 있나요?

A. 가능합니다. 컬렉션 잠금 없이 동시에 편집 가능하며, 마지막 저장 내용이 우선 적용됩니다. 협업 편집이 필요하다면 데스크톱 앱의 협업 기능을 활용하세요.

Q. 환경 변수 자동 완성 지원하나요?

A. 네. URL이나 매개변수 필드에 {{ 입력 시, 활성 환경 변수 목록이 자동 제안되어 변수 오타를 방지할 수 있습니다.

Apidog VS Code 확장 프로그램은 VS Code 내에서 API 개발을 하는 개발자에게 최적화되어 있습니다. 컬렉션, 환경, 팀 워크스페이스를 창 전환 없이 통합적으로 관리할 수 있어, 2분이면 설정이 끝나고 바로 생산성을 높일 수 있습니다.

Top comments (0)