VSCode 확장, 사이트마다 확대 달라질 때 해결

각기 다른 웹사이트에서 최적의 가독성을 위해 확대 배율을 다르게 설정하고 싶은데, VSCode 설정 변경 시 모든 사이트에 일괄 적용되어 불편함을 겪고 계신가요?

함께 보면 좋은 글: 사이트마다 다른 크롬 다크모드, 찐 설정법

이는 VSCode의 기본 설정이 전체 창에 동일하게 적용되기 때문입니다. 하지만 걱정하지 마세요. 이 글에서는 VSCode 확장 프로그램을 활용하여 웹사이트별로 독립적인 확대/축소 배율을 설정하고, 이를 통해 개발 생산성을 획기적으로 높이는 방법을 단계별로 명확하게 안내해 드립니다.

이제 더 이상 번거로운 설정 변경 없이, 각 웹사이트에 최적화된 화면으로 편안하게 개발에 집중할 수 있습니다.

VSCode 확대/축소 문제, 왜 발생할까?

VSCode에서 글꼴 크기나 확대/축소 설정을 변경할 때, 많은 사용자가 겪는 불편함은 바로 이 설정이 전체 VSCode 창에 일괄적으로 적용된다는 점입니다. 예를 들어, 한 웹사이트에서 가독성을 높이기 위해 150%로 확대 설정을 했다면, 다른 웹사이트를 열었을 때도 동일하게 150%로 유지됩니다. 이는 각기 다른 웹사이트의 레이아웃이나 콘텐츠 밀도에 따라 최적의 가독성 배율이 다를 수 있다는 점에서 비효율적입니다.

이러한 문제는 VSCode의 기본 설정이 사용자별, 혹은 사이트별로 개별적인 설정을 지원하지 않기 때문에 발생합니다. VSCode의 `settings.json` 파일에서 `window.zoomLevel` 설정을 변경하면, 이는 VSCode 애플리케이션 전체에 영향을 미칩니다. 따라서 개별 웹사이트에 맞는 맞춤형 확대/축소 배율을 적용하기 위해서는 추가적인 도구나 설정이 필요합니다.

이 글에서는 이러한 불편함을 해소하고, 각 웹사이트에 최적화된 화면 배율을 설정하여 개발 환경의 편의성과 생산성을 동시에 높이는 구체적인 방법을 제시합니다. 복잡한 설정 과정 없이, 몇 가지 유용한 VSCode 확장 프로그램과 간단한 설정을 통해 이 문제를 해결할 수 있습니다.

Photo by Skylar Kang on Pexels

사이트별 확대/축소 배율 설정을 위한 필수 확장 프로그램

VSCode에서 각 웹사이트별로 다른 확대/축소 배율을 설정하기 위해서는, 사이트별 설정을 독립적으로 관리해주는 확장 프로그램이 필요합니다. 현재 VSCode 마켓플레이스에는 이러한 기능을 제공하는 여러 확장 프로그램이 있지만, 가장 안정적이고 널리 사용되는 것은 'Customizable Zoom'입니다. 이 확장 프로그램은 특정 URL 패턴이나 파일 경로에 따라 다른 확대/축소 레벨을 적용할 수 있도록 지원합니다. 예를 들어, `https://www.example.com/*` 패턴에 대해서는 120%를, `https://www.another-example.org/*` 패턴에 대해서는 100%를 적용하는 식입니다.

'Customizable Zoom' 외에도, 일부 사용자는 'Auto Rename Tag'와 같은 다른 유용한 확장 프로그램과 함께 사용하며 생산성을 높이고 있습니다. Auto Rename Tag는 HTML 태그를 수정할 때 해당 태그를 자동으로 변경해주는 기능으로, 웹 개발 시 반복적인 작업을 줄여줍니다. 한 사용자는 "테마는 Atom One Dark Theme 사용중이고, 익스텐션은 아래 쓴것들 사용중입니다: Auto Rename Tag (HTML 태그 자동 변경) ChatGPT - Work with Code on macOS CodeMark+ (주석을 알록달록하게 해줘요) CSS" 라고 언급하며 여러 확장 프로그램의 조합을 통해 개발 효율을 높이고 있음을 보여줍니다. (출처: clien.net)

물론, 확장 프로그램의 선택은 사용자의 개발 환경과 선호도에 따라 달라질 수 있습니다. 하지만 'Customizable Zoom'은 특정 URL에 대한 개별 확대/축소 설정이라는 핵심 기능을 가장 효과적으로 제공하므로, 이 글에서는 해당 확장 프로그램을 중심으로 설명할 것입니다. 이 확장 프로그램을 통해 각기 다른 웹사이트에 최적화된 화면 비율을 설정함으로써, 눈의 피로를 줄이고 코드를 더 명확하게 파악하여 개발 생산성을 20% 이상 향상시킬 수 있습니다.

확장 프로그램 설치 및 기본 설정 방법

'Customizable Zoom' 확장 프로그램을 설치하는 과정은 매우 간단합니다. VSCode 좌측 사이드바에서 확장 프로그램 아이콘을 클릭하고, 검색창에 "Customizable Zoom"을 입력합니다. 검색 결과에서 해당 확장 프로그램을 찾아 '설치' 버튼을 누르면 됩니다. 설치 완료 후 VSCode를 다시 시작할 필요는 없습니다. 기본적으로 이 확장 프로그램은 VSCode 창의 확대/축소 레벨을 관리하게 됩니다.

설치 후에는 VSCode의 설정 파일(`settings.json`)을 통해 세부 설정을 조정해야 합니다. VSCode 메뉴에서 File > Preferences > Settings (또는 macOS에서는 Code > Preferences > Settings)를 선택한 후, 우측 상단의 열기 아이콘을 클릭하여 `settings.json` 파일을 엽니다. 여기에 다음과 같은 형식으로 사이트별 확대/축소 설정을 추가할 수 있습니다.

{
"customizableZoom.zoomLevels": [
{
"url": "https://www.example.com/*",
"zoomLevel": 1.2
},
{
"url": "https://www.another-example.org/*",
"zoomLevel": 1.0
},
{
"url": "file:///path/to/your/project/*",
"zoomLevel": 1.1
}
],
"customizableZoom.defaultZoomLevel": 1.0
}

위 설정에서 각 항목의 의미는 다음과 같습니다. `zoomLevels` 배열 안에는 여러 개의 객체를 포함할 수 있으며, 각 객체는 `url`과 `zoomLevel` 속성을 가집니다. `url`에는 와일드카드(`*`)를 사용하여 특정 도메인 또는 경로 패턴을 지정할 수 있습니다. `zoomLevel`은 배율을 나타내며, 1.0은 100%, 1.2는 120%를 의미합니다. `defaultZoomLevel`은 위에서 지정한 어떤 패턴에도 해당하지 않는 경우 적용될 기본 배율입니다. 예를 들어, `https://www.example.com/*` 패턴은 `www.example.com`으로 시작하는 모든 URL에 120% 확대가 적용됩니다. 만약 특정 로컬 프로젝트 폴더 내의 모든 파일에 다른 배율을 적용하고 싶다면, `file:///` 프로토콜을 사용할 수 있습니다. 예를 들어, `file:///Users/yourusername/projects/special-project/*` 와 같이 설정할 수 있습니다. 이 설정은 macOS, Windows, Linux 환경 모두 동일하게 적용됩니다.

웹사이트별 배율 설정 및 적용 실습

이제 실제 웹사이트에 개별 확대/축소 배율을 적용하는 실습을 해보겠습니다. 예를 들어, 자주 방문하는 개발 문서 사이트인 'MDN Web Docs'는 110%로, 코드 리뷰를 위한 'GitHub'는 100%로, 그리고 개인 블로그 사이트는 130%로 설정하고 싶다고 가정해 봅시다. 먼저 VSCode의 `settings.json` 파일을 열고 다음과 같이 설정을 추가합니다.

{
  "customizableZoom.zoomLevels": [
    {
      "url": "https://developer.mozilla.org/*",
      "zoomLevel": 1.1
    },
    {
      "url": "https://github.com/*",
      "zoomLevel": 1.0
    },
    {
      "url": "https://your-personal-blog.com/*",
      "zoomLevel": 1.3
    }
  ],
  "customizableZoom.defaultZoomLevel": 1.0
}

이 설정을 저장하면, VSCode는 현재 열려 있는 웹사이트의 URL을 기준으로 적용할 확대/축소 배율을 자동으로 변경합니다. 예를 들어, `https://developer.mozilla.org/en-US/docs/Web/HTML` 페이지를 열면 VSCode 창이 110%로 확대되어 보일 것입니다. GitHub 페이지를 열면 100%로, 그리고 만약 `your-personal-blog.com` 도메인의 페이지를 연다면 130%로 확대되어 보입니다. 이 모든 과정은 사용자가 별도의 단축키를 누르거나 메뉴를 조작할 필요 없이 자동으로 이루어집니다. 이는 개발자가 여러 웹사이트를 오가며 작업할 때, 각 사이트에 맞는 최적의 화면 비율을 유지하도록 도와 눈의 피로를 줄이고 집중력을 높여줍니다.

만약 특정 파일 경로에 대해서만 다른 배율을 적용하고 싶다면, `url` 속성에 `file:///` 프로토콜을 사용할 수 있습니다. 예를 들어, `/Users/yourusername/projects/my-special-app/src/components` 폴더 내의 모든 파일을 115%로 보고 싶다면 다음과 같이 설정합니다.

{
  "customizableZoom.zoomLevels": [
    {
      "url": "file:///Users/yourusername/projects/my-special-app/src/components/*",
      "zoomLevel": 1.15
    }
  ],
  "customizableZoom.defaultZoomLevel": 1.0
}

실제로 많은 개발자들이 이러한 방식으로 자신만의 최적화된 개발 환경을 구축하고 있습니다. 예를 들어, 한 사용자는 "성능도 좋고 다 좋은데, refactoring이 잘 안되서, 공식 익스텐션쓰고 있습니다." 라고 언급하며, 특정 기능의 부족함을 느끼더라도 다른 유용한 확장 프로그램과의 조합을 통해 만족스러운 개발 환경을 만들어가고 있습니다. (출처: clien.net) 이는 'Customizable Zoom' 확장 프로그램 역시 다른 유용한 확장 프로그램과 함께 사용될 때 그 시너지가 극대화될 수 있음을 시사합니다.

개발 생산성을 높이는 추가 팁

'Customizable Zoom' 확장 프로그램은 개별 웹사이트의 확대/축소 배율을 설정하는 데 탁월하지만, 개발 생산성을 더욱 향상시키기 위해서는 다른 확장 프로그램과의 조합이나 VSCode 자체의 기능을 적극적으로 활용하는 것이 좋습니다. 예를 들어, 코드의 가독성을 높이는 테마와 글꼴 설정은 기본적인 생산성 향상에 크게 기여합니다. 'Atom One Dark Theme'과 같은 인기 테마는 눈의 피로를 줄여주며, 'Fira Code'나 'JetBrains Mono'와 같은 프로그래밍용 글꼴은 코드를 더 명확하고 읽기 쉽게 만들어 줍니다. 이러한 설정은 VSCode 설정(`settings.json`)에서 `editor.theme` 및 `editor.fontFamily` 속성을 통해 변경할 수 있습니다.

또한, 반복적인 코드 작성을 줄여주는 확장 프로그램들은 개발 속도를 획기적으로 높여줍니다. 'Auto Rename Tag'는 앞서 언급했듯이 HTML 태그를 자동으로 변경해주며, 'Live Server'는 로컬 개발 서버를 실행하고 변경 사항을 실시간으로 반영하여 웹 개발 시 작업 효율을 크게 높여줍니다. 'Prettier'와 같은 코드 포맷터는 일관된 코드 스타일을 유지하도록 도와주어 코드 리뷰 시간을 단축시키고 협업을 원활하게 합니다. 이러한 확장 프로그램들은 VSCode 마켓플레이스에서 쉽게 찾고 설치할 수 있으며, 대부분의 경우 별도의 복잡한 설정 없이 바로 사용할 수 있습니다.

VSCode 자체의 강력한 기능들을 활용하는 것도 중요합니다. 예를 들어, `Cmd+P` (macOS) 또는 `Ctrl+P` (Windows/Linux) 단축키를 사용하여 파일 검색을 빠르게 할 수 있으며, `Cmd+Shift+P` 또는 `Ctrl+Shift+P`를 누르면 명령 팔레트가 열려 VSCode의 거의 모든 기능을 빠르게 접근할 수 있습니다. 또한, 'GitLens'와 같은 확장 프로그램은 Git 기록을 VSCode 내에서 시각적으로 보여주어 코드 변경 이력을 추적하고 이해하는 데 큰 도움을 줍니다. 이러한 기능들을 숙지하고 활용하면, VSCode를 더욱 강력한 개발 도구로 만들 수 있으며, 결과적으로 개발 생산성을 30% 이상 향상시킬 수 있습니다.