VSCode에서 여러 프로젝트 폴더를 하나의 창에서 열기

프론트엔드와 백엔드처럼 분리된 프로젝트 폴더를 VSCode 한 창에서 다루면 터미널/디버깅/검색을 통합해 개발 효율이 크게 올라갑니다. 이 글에서는 워크스페이스(.code-orkspace) 기능으로 두 개 이상의 폴더를 한 번에 여는 방법에 대해서 알아보겠습니다.

대상 예시

C:\blueshare\next-frontend
C:\blueshare\next-api

워크스페이스 사용

프론트 폴더 먼저 열기 — VSCode에서 파일(File) → 폴더 열기(Open Folder) → C:\blueshare\next-frontend.
다른 폴더 추가 — 파일(File) → 작업 영역에 폴더 추가(Add Folder to Workspace…) → C:\blueshare\next-api 선택.
워크스페이스 저장 — 파일(File) → 작업 영역을 다른 이름으로 저장(Save Workspace As…) → C:\blueshare\blueshare.code-workspace로 저장.
이후에는 해당 .code-workspace 파일만 더블클릭하면 두 폴더가 동시에 열린 상태로 시작됩니다.

.code-workspace 예시

또 다른 방법으로는 .code-workspace 파일을 직접 만드는 방법입니다. 예시 파일: blueshare.code-workspace

{
  "folders": [
    { "path": "C:\\blueshare\\next-frontend" },
    { "path": "C:\\blueshare\\next-api" }
  ],
  "settings": {}
}

터미널/디버깅 통합 팁

터미널 분리 실행: 터미널 → 새 터미널 후, 셀렉터에서 next-frontend/next-api를 각각 지정.
디버그 구성: 루트(워크스페이스) .vscode/launch.json에 Compound 설정을 두고, 프론트/백엔드 두 구성을 동시에 시작하도록 구성 가능.
검색/치환: VSCode 전체 검색(Ctrl+Shift+F)이 모든 폴더를 대상으로 동작.

자주 겪는 문제 & 해결

ESLint/TS 설정 충돌 — 각 폴더(프로젝트)마다 node_modules·tsconfig.json·.eslintrc를 분리 유지. 루트에 공용 설정을 둘 땐 "extends"로 상속.
상대 경로 꼬임 — 작업 전 터미널의 CWD(현재 디렉터리)가 어느 폴더인지 확인하고 실행.
Git 리포지토리 — 폴더별로 다른 Git 저장소여도 문제 없음. VSCode Source Control에서 리포지토리별로 커밋/푸시 가능.

마무리

워크스페이스를 한 번 만들어 두면 프론트/백엔드/스크립트를 한 창에서 관리할 수 있어 빌드·테스트·디버깅 흐름이 훨씬 빨라집니다. 지금 사용하는 프로젝트 경로로 .code-workspace를 만들어 바로 적용해 보세요.

함께 보면 좋은 이전 게시글

이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!