폴더 흩어진 VSCode, 워크스페이스로 한번에 관리

여러 프로젝트 폴더를 VSCode에서 각각 열고 닫기 번거롭거나, 모노레포 구조에서 탐색기가 너무 복잡해져서 작업이 불편한 상황이라면, 효과적인 VSCode 워크스페이스 관리법이 절실할 것입니다. 폴더를 일일이 찾아 열고 닫는 과정은 생각보다 많은 시간과 집중력을 소모시키며, 이는 곧 생산성 저하로 이어집니다. 특히 여러 프로젝트를 동시에 다루는 현대 개발 환경에서는 이러한 비효율성이 더욱 두드러집니다.

함께 보면 좋은 글: 맥 터미널 답답할 때, iTerm2 & Oh

이러한 불편함은 VSCode의 기본 탐색기 구조와 여러 프로젝트를 동시에 관리해야 하는 현대 개발 환경의 충돌에서 비롯됩니다. 하지만 VSCode는 이러한 문제를 해결할 수 있는 강력한 기능, 바로 '워크스페이스'를 제공합니다. 이 글에서는 VSCode 워크스페이스를 활용하여 여러 프로젝트 폴더를 하나의 작업 공간으로 묶어 효율적으로 관리하는 구체적인 방법을 제시하여 개발 효율을 극대화하는 VSCode 워크스페이스 관리법을 알려드립니다. 워크스페이스를 통해 복잡한 프로젝트 관리를 단순화하고, 각 프로젝트에 최적화된 개발 환경을 구축하는 방법을 자세히 살펴보겠습니다.

VSCode 워크스페이스, 왜 필요할까요?

개발 프로젝트를 진행하다 보면 자연스럽게 여러 개의 폴더를 동시에 열어두고 작업해야 하는 경우가 많습니다. 특히 백엔드 API 서버와 프론트엔드 애플리케이션을 함께 개발하는 경우, 혹은 여러 마이크로서비스를 관리하는 모노레포 환경에서는 탐색기가 수많은 파일과 폴더로 가득 차 작업 흐름을 방해하기 쉽습니다. VSCode의 기본 폴더 열기 방식은 하나의 폴더만을 집중적으로 관리하는 데는 효율적이지만, 여러 독립적인 프로젝트를 유기적으로 연결하여 관리하기에는 한계가 있습니다. 각 프로젝트를 개별적으로 열고 닫는 과정은 단순 반복 작업으로 느껴지며, 프로젝트 간 전환 시에도 다시 해당 폴더를 찾아야 하는 번거로움이 발생합니다.

이때 VSCode 워크스페이스 기능이 강력한 해결책을 제시합니다. 워크스페이스는 단순히 폴더를 나열하는 것을 넘어, 여러 프로젝트 폴더를 하나의 논리적인 단위로 묶고 각 프로젝트에 맞는 설정을 적용할 수 있게 해줍니다. 이를 통해 개발자는 복잡한 탐색기 대신 필요한 프로젝트만 빠르게 전환하며 작업에 집중할 수 있습니다. 이는 마치 여러 개의 독립된 작업 공간을 가진 사무실과 같습니다. 각 공간은 필요한 도구와 자료만 갖추고 있어, 필요에 따라 공간을 이동하며 업무를 처리하는 것과 유사합니다. 워크스페이스를 사용하면 이러한 '작업 공간'들을 VSCode 내에서 손쉽게 관리하고 전환할 수 있습니다.

실제로 많은 개발자들이 이러한 번거로움을 겪고 있으며, VSCode 워크스페이스 관리법에 대한 관심이 높습니다. 한 개발자는 "저는 익스텐션 모두 설치하고 워크스페이스 별로 disable 설정을 해서 사용했어요. 불편한 점은 익스텐션이 사용/미사용 모두 나열되어 보기 안 좋은 것과 최초 1회 일일이 설정해주는 점이네요"라고 언급하며 워크스페이스의 유용성과 함께 개선점을 이야기했습니다. (출처: clien.net) 이는 워크스페이스가 개발 환경을 체계화하는 데 중요한 역할을 하지만, 초기 설정의 번거로움이나 익스텐션 관리 등 추가적인 고려 사항이 있음을 시사합니다. 하지만 이러한 초기 설정의 노력은 장기적인 생산성 향상으로 이어질 수 있습니다.

워크스페이스는 특히 다음과 같은 상황에서 빛을 발합니다:

• 모노레포 환경: 여러 개의 독립적인 서비스나 패키지가 하나의 저장소에 관리될 때, 각 서브 프로젝트를 워크스페이스에 추가하여 개별적으로 관리하고 전환할 수 있습니다.
• 프론트엔드/백엔드 동시 개발: 웹 애플리케이션 개발 시 프론트엔드와 백엔드 프로젝트를 별도의 폴더로 관리할 때, 워크스페이스를 통해 두 프로젝트를 하나의 작업 공간에서 효율적으로 관리할 수 있습니다.
• 협업 환경: 팀원들과 공유하는 프로젝트들이 여러 개일 경우, 워크스페이스 설정을 공유하여 모든 팀원이 동일한 개발 환경을 유지하도록 할 수 있습니다.
• 개인 프로젝트 관리: 여러 개의 개인 프로젝트를 진행할 때, 각 프로젝트별로 필요한 익스텐션이나 설정을 분리하여 깔끔하게 관리할 수 있습니다.

Photo by Atahan Demir on Pexels

워크스페이스 생성 및 프로젝트 추가 방법

VSCode 워크스페이스를 생성하는 과정은 매우 직관적입니다. 먼저 VSCode를 실행한 후, 메뉴에서 파일 > 새로운 워크스페이스 저장을 선택합니다. 그러면 .code-workspace 확장자를 가진 파일이 생성됩니다. 이 파일을 원하는 위치에 저장하면 기본 워크스페이스가 만들어집니다. 이 워크스페이스 파일은 앞으로 해당 프로젝트들을 묶어주는 역할을 하게 됩니다.

워크스페이스 파일이 생성되었다면, 이제 프로젝트 폴더를 추가할 차례입니다. VSCode의 왼쪽 사이드바에 있는 탐색기에서 폴더 추가 버튼을 클릭하거나, 메뉴에서 파일 > 폴더 열기를 선택하여 프로젝트 폴더를 추가할 수 있습니다. 여러 개의 프로젝트를 추가하고 싶다면 이 과정을 반복하면 됩니다. 추가된 프로젝트 폴더들은 VSCode의 탐색기 패널에 계층적으로 표시되어 한눈에 관리할 수 있습니다.

워크스페이스는 단순히 폴더를 나열하는 것을 넘어, 각 폴더에 대한 상대 경로 정보를 포함하는 JSON 형식의 파일을 생성합니다. 예를 들어, my_project.code-workspace 파일은 다음과 같은 구조를 가질 수 있습니다.

{
    "folders": [
        {
            "name": "frontend",
            "path": "client"
        },
        {
            "name": "backend",
            "path": "server"
        }
    ],
    "settings": {
        "editor.fontSize": 14
    }
}

여기서 folders 배열 안에 각 프로젝트 폴더의 이름(name)과 실제 경로(path)가 지정됩니다. settings 섹션은 이 워크스페이스에만 적용될 전역 설정을 정의할 수 있습니다.

단계별 워크스페이스 생성 및 프로젝트 추가 가이드:

1. VSCode 실행: Visual Studio Code를 실행합니다.
2. 새 워크스페이스 생성: 메뉴에서 파일 > 새로운 워크스페이스 저장을 선택합니다.
3. 워크스페이스 파일 저장: 생성된 .code-workspace 파일을 원하는 위치에 저장합니다. 예를 들어, 프로젝트 루트 폴더와 같은 레벨에 저장하는 것이 일반적입니다.
4. 프로젝트 폴더 추가: VSCode의 탐색기에서 폴더 추가 버튼을 클릭하거나, 메뉴에서 파일 > 폴더 열기를 선택하여 프로젝트 폴더를 선택합니다.
5. 다중 프로젝트 추가: 여러 프로젝트를 추가하려면 4단계를 반복합니다.
6. 워크스페이스 열기: 저장한 .code-workspace 파일을 더블 클릭하거나, VSCode에서 파일 > 워크스페이스 열기를 선택하여 해당 파일을 엽니다.

워크스페이스 설정: 프로젝트별 맞춤 환경 구축

VSCode 워크스페이스의 가장 큰 장점 중 하나는 각 프로젝트별로 독립적인 설정을 적용할 수 있다는 점입니다. 이는 개발 생산성을 크게 향상시키는 요소입니다. 예를 들어, 프론트엔드 프로젝트에서는 JavaScript 관련 익스텐션과 설정을 강화하고, 백엔드 프로젝트에서는 Python이나 Go 언어에 특화된 설정을 적용할 수 있습니다. 이를 통해 불필요한 익스텐션 충돌을 방지하고, 각 프로젝트에 최적화된 코딩 경험을 제공받을 수 있습니다. 예를 들어, 프론트엔드 프로젝트에서는 ESLint와 Prettier 설정을 엄격하게 적용하고, 백엔드 프로젝트에서는 다른 린터나 포맷터 설정을 사용하도록 구성할 수 있습니다.

워크스페이스 설정을 변경하려면, 워크스페이스가 열린 상태에서 파일 > 기본 설정 > 설정 메뉴를 선택한 후, 좌측 상단의 워크스페이스 탭을 선택하면 됩니다. 이곳에서 사용자가 직접 설정을 추가하거나 수정할 수 있습니다. 이 설정들은 해당 워크스페이스 파일(.code-workspace)에 저장되어, 워크스페이스를 열 때마다 자동으로 적용됩니다.

예를 들어, 특정 워크스페이스에서만 특정 익스텐션을 활성화하거나 비활성화하고 싶을 때 유용합니다. 실제 사용자의 후기에서 언급된 것처럼, 익스텐션을 워크스페이스별로 제어하는 것은 개발 환경을 깔끔하게 유지하는 데 큰 도움이 됩니다. 또한, 각 프로젝트에서 사용하는 코드 포맷터나 린터 설정을 다르게 지정하여 일관된 코드 스타일을 유지할 수 있습니다. 예를 들어, ESLint나 Prettier 설정을 워크스페이스별로 다르게 구성하여 팀원 간의 코드 스타일 통일성을 높일 수 있습니다.

워크스페이스 설정은 .code-workspace 파일 내의 settings 객체에 JSON 형식으로 직접 추가할 수도 있습니다. 이는 버전 관리 시스템에 워크스페이스 설정을 함께 커밋하여 팀원들과 동일한 개발 환경을 공유하는 데 효과적입니다. 이를 통해 새로운 팀원이 합류하더라도 복잡한 환경 설정 없이 바로 개발에 참여할 수 있도록 지원할 수 있습니다.

워크스페이스 설정을 통한 맞춤 환경 구축 예시:

• 익스텐션 관리: 특정 언어나 프레임워크에 필요한 익스텐션만 해당 워크스페이스에서 활성화하고, 불필요한 익스텐션은 비활성화하여 성능 저하를 방지합니다.
• 코드 포맷터 및 린터 설정: 프로젝트별로 다른 코드 스타일 가이드라인을 준수해야 하는 경우, ESLint, Prettier 등 린터 및 포맷터의 설정을 워크스페이스별로 다르게 지정합니다.
• 디버깅 설정: 각 프로젝트의 실행 방식이나 디버깅 환경이 다를 경우, launch.json 파일을 워크스페이스 설정에 포함시켜 프로젝트별 디버깅 환경을 구축합니다.
• 파일 탐색기 설정: 특정 프로젝트에서 자주 사용하는 파일 확장자나 폴더를 탐색기 상단에 고정하거나, 특정 파일/폴더를 숨기는 설정을 적용할 수 있습니다.

위 표에서 볼 수 있듯이, 워크스페이스 설정은 사용자 설정보다 낮은 우선순위를 가지지만 전역 설정보다는 높은 우선순위를 가집니다. 이는 특정 프로젝트에만 적용하고 싶은 설정을 전역 설정과 충돌 없이 관리할 수 있게 해줍니다. 예를 들어, VSCode의 기본 테마는 유지하되 특정 프로젝트에서는 코드 하이라이팅을 더 강조하고 싶을 때 워크스페이스 설정을 활용할 수 있습니다. 또한, 각 프로젝트별로 다른 버전의 Node.js를 사용해야 하는 경우, 워크스페이스 설정을 통해 해당 프로젝트에 맞는 Node.js 인터프리터를 지정하는 것도 가능합니다.

실전: 워크스페이스 활용 팁과 주의사항

워크스페이스 기능을 효과적으로 활용하기 위한 몇 가지 실질적인 팁을 소개합니다. 첫째, 프로젝트별로 명확한 이름을 지정하여 워크스페이스 파일 내에서 각 폴더를 쉽게 식별할 수 있도록 합니다. folders 배열의 name 속성을 활용하여 frontend, backend, database 와 같이 의미 있는 이름을 부여하는 것이 좋습니다. 이는 탐색기 패널에서 프로젝트를 구분하는 데 큰 도움을 줍니다.

둘째, Git과 같은 버전 관리 시스템을 사용할 때, 각 프로젝트 폴더가 독립적인 Git 저장소인 경우에도 워크스페이스는 문제없이 작동합니다. VSCode는 각 폴더의 Git 상태를 개별적으로 인식하고 표시해 줍니다. 이는 모노레포 환경에서 여러 Git 저장소를 동시에 관리할 때 특히 유용합니다. VSCode는 각 저장소의 변경 사항을 통합된 소스 제어 뷰에서 보여주어 효율적인 관리를 돕습니다. 각 프로젝트별로 다른 브랜치를 사용하거나, 커밋 기록을 확인할 때도 각 저장소의 정보가 명확하게 구분되어 표시됩니다.

셋째, 워크스페이스를 자주 전환해야 하는 경우, VSCode의 파일 > 최근 사용한 폴더 열기 또는 워크스페이스 열기 메뉴를 활용하여 빠르게 접근할 수 있습니다. 또한, 여러 워크스페이스를 동시에 열어두고 탭처럼 전환하는 것도 가능합니다. 각 워크스페이스는 별도의 VSCode 창으로 열리므로, 서로의 작업 환경에 영향을 주지 않고 독립적으로 작업할 수 있습니다.

마지막으로, 한 개발자는 이클립스 환경에서 VSCode로 전환하면서 퍼블리셔와의 공동 작업 시 발생하는 차이점에 대해 언급했습니다. "이클립스(with 전자정부프레임워크)로 프로젝트 개발중인 개발자인데요 퍼블리셔(FE)와 공동작업중입니다. git으로 공유중인데 이클립스랑 VSCode가 사용하는 방법도 다르고 서버(tomcat)으로 구동한 결과와 VS의 라이브 웹의 결과가 다르네요" (출처: clien.net) 이는 워크스페이스 자체의 문제라기보다는 개발 도구 간의 환경 설정 차이에서 비롯될 수 있습니다. 워크스페이스 설정을 통해 이러한 차이를 줄이고, 각 프로젝트 환경에 맞는 VSCode 설정을 적용함으로써 개발자 간의 협업 효율을 높일 수 있습니다. 예를 들어, 프론트엔드 개발자를 위한 Live Server 익스텐션 설정을 워크스페이스에 포함시키거나, 백엔드 개발자를 위한 디버깅 설정을 구성하는 식입니다. 이를 통해 개발자 간의 환경 설정 불일치로 인한 오류 발생 가능성을 줄이고, 보다 원활한 협업을 도모할 수 있습니다.

워크스페이스 활용 체크리스트:

• [ ] 모든 관련 프로젝트 폴더를 워크스페이스에 추가했는가?
• [ ] 각 프로젝트 폴더에 의미 있는 이름을 부여했는가?
• [ ] 프로젝트별로 필요한 익스텐션 설정을 구성했는가? (활성화/비활성화)
• [ ] 코드 포맷터 및 린터 설정을 프로젝트별로 통일했는가?
• [ ] Git 저장소 관리가 용이하도록 설정했는가?
• [ ] 워크스페이스 파일을 버전 관리 시스템에 커밋했는가? (팀 프로젝트 시)
• [ ] 자주 사용하는 워크스페이스는 즐겨찾기나 별도 폴더에 관리하는가?