요약 (TL;DR)
Apidog VS Code 확장 프로그램을 사용하면 편집기를 떠나지 않고도 API 요청을 보내고, 컬렉션을 관리하고, 테스트를 실행하고, 팀과 워크스페이스를 공유할 수 있습니다. 설정은 5분 이내에 완료됩니다. 확장 프로그램을 설치하고, 무료 Apidog 계정에 로그인하면 워크스페이스가 VS Code의 사이드바에 직접 로드됩니다.
소개
Apidog는 API 설계, 테스트 및 문서화를 위한 데스크톱 앱으로 시작했습니다. 시간이 지나면서 팀은 동일한 워크스페이스를 편집기 안에 직접 가져오는 VS Code 확장 프로그램을 출시했습니다. 이 확장 프로그램은 Apidog를 복제하는 것이 아니라, 기존 워크스페이스에 연결되므로 VS Code, 데스크톱 앱 또는 웹 인터페이스 어디에서든 컬렉션, 환경 및 테스트 케이스가 동기화된 상태로 유지됩니다.
이 가이드에서는 확장 프로그램 설치, 워크스페이스 연결, 요청 전송, 테스트 실행, 그리고 VS Code 확장 프로그램을 데스크톱 앱과 함께 사용하는 전체 워크플로우를 안내합니다.
1단계: Apidog VS Code 확장 프로그램 설치
VS Code를 열고 왼쪽 사이드바에서 확장 프로그램 아이콘을 클릭하거나(Ctrl+Shift+X / Cmd+Shift+X 누름) 실행합니다.
확장 프로그램 마켓플레이스 검색창에 "Apidog"를 검색합니다. Apidog Inc.에서 게시한 확장 프로그램을 찾으세요. Apidog 로고(스타일이 적용된 API 문자가 있는 어두운 아이콘)가 표시됩니다.
설치를 클릭합니다. VS Code는 확장 프로그램을 설치하고 왼쪽 활동 표시줄에 Apidog 아이콘을 추가합니다.
설치 후 활동 표시줄에 있는 Apidog 아이콘을 클릭합니다. VS Code는 사이드바에 Apidog 패널을 엽니다.
2단계: Apidog 계정에 로그인
Apidog 패널에 "로그인(Sign In)" 버튼이 표시됩니다. 이 버튼을 클릭합니다.
브라우저 탭이 Apidog의 인증 페이지로 열립니다. 이미 Apidog 계정이 있는 경우 이메일과 비밀번호를 입력합니다. 계정이 없는 경우 "회원가입(Sign Up)"을 클릭하세요. 무료 티어는 이메일 주소만 필요하며 신용 카드는 필요하지 않습니다.
로그인 후 브라우저에 확인 메시지가 표시되고 VS Code로 돌아가라는 요청이 나타납니다. "VS Code 열기(Open VS Code)"를 클릭하거나 수동으로 VS Code로 전환합니다.
VS Code는 인증 핸드셰이크를 완료하고 사이드바에 Apidog 워크스페이스를 로드합니다.
로그인 후 사이드바 모습: 왼쪽 패널에 워크스페이스의 트리 뷰가 표시됩니다. 상단에는 워크스페이스 이름이 보입니다. 그 아래에는 컬렉션이 폴더 형태로 나타납니다. 각 컬렉션은 폴더 구조로 정리된 내부 요청을 표시하기 위해 확장됩니다. 환경은 패널 상단의 드롭다운에 나타납니다.
3단계: 컬렉션 탐색
VS Code의 Apidog 사이드바는 Apidog 워크스페이스의 컬렉션 구조를 정확히 반영합니다.
컬렉션을 탐색하려면 컬렉션 이름 옆의 화살표를 클릭합니다. 그러면 폴더와 요청이 확장되어 표시됩니다. 폴더는 개별 요청으로 더 확장됩니다.
각 요청은 HTTP 메서드를 나타내는 색상 배지(녹색 GET, 파란색 POST, 주황색 PUT, 빨간색 DELETE)와 함께 한 줄 항목으로 나타납니다. 요청을 클릭하면 VS Code 편집기 영역에 탭으로 열립니다.
검색창 사용: Apidog 패널 상단에 검색 입력란이 있습니다. 요청 이름, URL 또는 메서드를 기준으로 컬렉션을 필터링하려면 키워드를 입력하세요. 워크스페이스에 수십 개의 컬렉션이 있을 때 유용합니다.
워크스페이스 전환: Apidog 계정이 여러 워크스페이스(개인, 팀 또는 프로젝트별)에 속해 있는 경우, 패널 상단의 워크스페이스 선택기를 통해 워크스페이스 간에 전환할 수 있습니다.
4단계: 요청 보내기
사이드바에서 요청을 열면 기본 편집기 영역에 탭으로 로드됩니다. 요청 인터페이스는 익숙한 레이아웃을 가지고 있습니다.
상단 바: 메서드 선택기(GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS 드롭다운), URL 필드 및 보내기(Send) 버튼.
URL 아래 탭: Params, Headers, Body, Auth, Pre-request Scripts, Tests, Settings. 각 탭은 관련 구성 섹션을 엽니다.
요청을 보내려면:
- 상단 바에서 메서드와 URL을 확인합니다.
- Headers 탭에서 필요한 헤더를 추가합니다.
- 요청에 본문(POST, PUT)이 있는 경우 Body를 클릭하고 콘텐츠 유형(JSON, 폼 데이터, 바이너리 등)을 선택합니다.
- 보내기(Send)를 클릭합니다.
응답은 탭의 하단에 나타납니다. 상태 코드, 응답 시간 및 응답 크기를 보여줍니다. 응답 아래 탭을 통해 본문(JSON 및 XML에 대한 구문 강조 표시 포함), 헤더, 쿠키 및 테스트 결과를 볼 수 있습니다.
환경 사용: Apidog 패널 상단의 환경 선택기는 활성 환경을 설정합니다. {{base_url}} 또는 {{token}}과 같은 변수는 해당 환경에 정의된 값으로 확인됩니다. URL을 편집하지 않고 개발, 스테이징 또는 프로덕션 환경에 대해 동일한 요청을 실행하려면 환경을 전환하세요.
5단계: 요청 편집 및 생성
VS Code에서 기존 요청을 직접 편집할 수 있습니다. 변경 사항은 Apidog 워크스페이스에 자동으로 동기화됩니다.
새 요청을 생성하려면:
- 사이드바에서 컬렉션 또는 폴더를 마우스 오른쪽 버튼으로 클릭합니다.
- "새 요청(New Request)"을 선택합니다.
- 빈 요청 탭이 열립니다.
- 메서드, URL, 헤더 및 본문을 설정합니다.
Ctrl+S/Cmd+S를 눌러 저장합니다.
새 요청은 사이드바에 나타나며 Apidog 데스크톱 앱, 웹 인터페이스 또는 팀원의 VS Code에서 즉시 액세스할 수 있습니다.
이름 변경 및 정리: 사이드바에서 요청 또는 폴더를 마우스 오른쪽 버튼으로 클릭하여 이름 변경, 이동, 복제 및 삭제 옵션에 액세스할 수 있습니다. 사이드바 내에서 드래그 앤 드롭으로 순서를 변경할 수 있습니다.
6단계: 테스트 실행
Apidog는 각 응답 후 실행되는 테스트 어설션을 지원합니다. 열린 요청의 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');
});
보내기(Send)를 클릭하면 응답 섹션의 Tests 탭에 어떤 어설션이 통과하고 어떤 어설션이 실패했는지, 통과/실패 횟수 및 실패에 대한 오류 메시지가 표시됩니다.
컬렉션 실행: 사이드바에서 컬렉션 또는 폴더를 마우스 오른쪽 버튼으로 클릭하고 "컬렉션 실행(Run Collection)"을 선택합니다. 러너 패널이 열리면 반복 횟수, 요청 간 지연 시간 및 환경을 설정할 수 있습니다. 실행(Run)을 클릭하면 모든 요청이 순서대로 실행됩니다. 결과에는 각 요청 어설션의 통과/실패 상태가 표시됩니다.
7단계: VS Code 확장 프로그램과 데스크톱 앱 함께 사용
VS Code 확장 프로그램과 데스크톱 앱은 동일한 워크스페이스를 실시간으로 공유합니다. "기본" 버전은 없으며, 동일한 데이터의 두 가지 보기입니다.
둘 다 사용하는 일반적인 워크플로우:
데스크톱에서 설계하고 VS Code에서 테스트: Apidog 데스크톱 앱을 사용하여 API 스키마를 정의하고, 문서를 작성하고, 목(mock) 서버를 설정합니다. 그런 다음 VS Code로 전환하여 개발 환경을 떠나지 않고 요청을 실행하고 테스트 어설션을 작성합니다.
팀 API 검토: 백엔드 개발자가 데스크톱 앱에서 엔드포인트를 업데이트합니다. 프런트엔드 개발자는 Apidog 확장 프로그램이 설치된 VS Code를 열고 새 매개변수가 있는 업데이트된 요청을 즉시 확인합니다. 풀 리퀘스트도, 가져올 JSON 파일도 필요 없습니다.
컨텍스트 내 테스트 작성: VS Code에서 API를 소비하는 코드를 작성하고 있습니다. 창을 전환하지 않고 Apidog 패널을 열고 관련 엔드포인트를 찾아서 실행하고 응답 형태를 확인한 다음 코드로 돌아갈 수 있습니다. 이 모든 과정이 동일한 애플리케이션 내에서 이루어집니다.
데스크톱 앱이 더 잘하는 것: 스키마 설계, 목 서버 설정, API 문서 게시 및 많은 환경 관리. 이것들은 VS Code에서 참조할 수 있지만 전체 화면 데스크톱 보기에서 구성하기 더 쉬운 데스크톱 앱 우선 기능입니다.
8단계: 팀과 공유
한두 명의 다른 개발자와 함께 작업하는 경우, 그들을 Apidog 워크스페이스에 추가하세요. Apidog 웹 인터페이스 또는 데스크톱 앱에서 워크스페이스 설정으로 이동하여 이메일로 팀원을 초대합니다.
초대를 수락하고 VS Code 확장 프로그램을 설치하면 그들의 사이드바에도 여러분이 보는 것과 동일한 컬렉션이 표시됩니다. 그들이 추가하거나 수정하는 모든 요청은 즉시 모든 사람에게 나타납니다.
무료 티어는 최대 3명의 사용자를 지원합니다. 변경 사항은 Apidog 클라우드를 통해 동기화되며, Git 작업, 파일 내보내기, 병합 충돌이 없습니다.
자주 묻는 질문 (FAQ)
Apidog VS Code 확장 프로그램은 데스크톱 앱 없이 작동하나요? 네. 이 확장 프로그램은 Apidog 워크스페이스의 완전한 클라이언트입니다. 확장 프로그램을 사용하기 위해 데스크톱 앱을 설치할 필요가 없습니다.
Apidog VS Code 확장 프로그램을 오프라인에서 사용할 수 있나요? 오프라인 상태에서 캐시된 컬렉션을 보고 편집할 수 있습니다. 외부 API로 요청을 보내려면 인터넷 액세스가 필요합니다(변경 사항 동기화도 마찬가지). 완전한 오프라인 지원은 Apidog 워크스페이스의 캐시 상태에 따라 다릅니다.
기존 Thunder Client 또는 Postman 컬렉션을 어떻게 가져오나요? Apidog 데스크톱 앱 또는 웹 인터페이스에서 가져오기(Import)로 이동하여 적절한 형식(Thunder Client JSON, Postman collection v2.1, OpenAPI 등)을 선택합니다. 가져온 컬렉션은 워크스페이스에 나타나며 VS Code 확장 프로그램에서 즉시 액세스할 수 있습니다.
VS Code 확장 프로그램이 Apidog에서 새 프로젝트를 만드는 것과 동일한가요? 아닙니다. 이 확장 프로그램은 기존 Apidog 워크스페이스에 연결됩니다. 워크스페이스는 데스크톱 앱 또는 웹 인터페이스에서 생성하고 관리합니다. VS Code 확장 프로그램은 VS Code 내에서 해당 워크스페이스에서 작업할 수 있도록 하는 클라이언트입니다.
여러 사람이 동시에 동일한 컬렉션을 열 수 있나요? 네. 이 확장 프로그램은 편집을 위해 컬렉션을 잠그지 않습니다. 두 사용자가 동시에 동일한 요청을 편집하는 경우, 마지막 저장이 우선합니다. 협업 편집을 위해서는 데스크톱 앱의 협업 기능을 사용하세요.
확장 프로그램이 환경 변수 자동 완성을 지원하나요? 네. URL 또는 매개변수 필드에 {{를 입력하면 확장 프로그램이 활성 환경에서 사용 가능한 변수를 제안합니다. 이는 변수 이름의 오타를 방지하는 데 도움이 됩니다.
Apidog VS Code 확장 프로그램은 VS Code 내에서 API 개발을 이미 하고 있는 경우 일상적인 도구로 가장 잘 작동합니다. 컬렉션, 환경 및 팀 워크스페이스에 모두 창 전환 없이 액세스할 수 있게 되면 2분도 채 안 되는 설정 비용이 빠르게 보상됩니다.