VS Code 스크롤바 크기 오류 및 스타일 오버라이드 해결법

VS Code 스크롤바 크기가 최근 업데이트 이후 얇은 실선처럼 변해버려 마우스로 잡기조차 힘들다는 제보가 잇따르고 있습니다. 이는 에디터의 스크롤바 전역 관리 방식이 대대적으로 개편(리팩토링)되면서 발생한 스타일 오버라이드 충돌 현상입니다.

기존의 개별 요소 제어 방식이 중앙 통제 방식으로 바뀌면서, 내가 쓰던 테마의 설정값이 무시되고 있는 것인데요. 이 글에서는 스크롤바 레이아웃 파손의 원인을 쉽게 이해하고, 단 1분 만에 원래의 편안한 굵기로 복구하는 방법을 명확하게 정리해 드립니다.

📌 목차 (Table of Contents)

1. 실제 불편 증상 및 변경 전/후 비교
2. 왜 작아졌을까? 기술적 원인 풀이
3. VS Code 스크롤바 크기 14px로 고정하는 해결법
4. 커스텀 테마 개발자를 위한 팁
5. 자주 묻는 질문 (FAQ)
6. 핵심 요약

1. 실제 불편 증상 및 변경 전/후 비교

최근 개발자 커뮤니티에 접수된 실제 피해 사례에 따르면, 에디터 업데이트 직후 VS Code 스크롤바 크기가 4px 미만으로 강제 축소되어 마우스 드래그 조작이 거의 불가능해지는 현상이 일어났습니다.

대표적인 시각적 오류 증상:

내 설정 무시: 내가 설정창에 적어둔 굵기 수치가 런타임(실행 중)에서 무시됩니다.
영역 짤림: 마크다운 미리보기 창이나 확장 프로그램 메뉴에서 스크롤바 영역 자체가 아예 숨겨집니다.
테마 붕괴: 강제로 디자인을 바꿨던 커스텀 다크 테마의 레이아웃이 완전히 깨집니다.

💡 필수 용어 쉬운 이해

스타일 오버라이드(Style Override): 쉽게 말해 ‘내 맘대로 디자인 덮어쓰기’입니다. 기본 테마를 무시하고 사용자가 원하는 색상이나 굵기를 강제로 입히는 기술입니다.

2. 왜 작아졌을까? 기술적 원인 풀이

과거에는 에디터 본체, 사이드바 메뉴, 하단 터미널 창이 각자 알아서 자신의 스크롤바 크기를 관리했습니다. 하지만 이 방식은 컴퓨터 메모리를 많이 잡아먹었습니다.

그래서 개발팀은 하나의 중앙 통제실이 VS Code 스크롤바 크기의 기본값을 일괄적으로 지시하도록 시스템을 뜯어고쳤습니다.

			
[중앙 통제실: scrollableElement.ts] (기본 스크롤바 굵기 변수 통제)
               │
               ▼ (크기 변경 이벤트 전역 브로드캐스팅)
┌───────────────────────┬───────────────────────┐
│                       │                       │
▼                       ▼                       ▼
[에디터 본체 영역]      [사이드바 메뉴]         [하단 쉘 출력 패널]
(전역 통제실의 지시에 따라 각 엘리먼트의 스크롤바 너비가 강제 동기화됨)

		

문제는 이 전역 통제실이 기본값을 아주 얇게 세팅하면서, 기존에 우리가 쓰던 구형 테마 설정들과 충돌이 발생한 것입니다. 중앙에서 얇게 만들라고 명령을 내리니, 하부 요소들이 사용자의 기존 설정을 무시하고 강제로 크기를 줄여버린 것이죠.

3. VS Code 스크롤바 크기 14px로 고정하는 해결법

중앙 통제실의 간섭을 막아내고, VS Code 스크롤바 크기를 사용자가 원하는 편안한 두께인 14px로 단단하게 고정하는 방법입니다.

방법 1: Settings.json에 명시적 수치 박아넣기 (가장 추천)

시스템의 기본 명령보다 ‘내 설정’이 무조건 최우선으로 작동하도록 정적 변수를 구성 프로필에 직접 주입합니다.

단축키 Ctrl + , (Mac은 Cmd + ,)를 눌러 설정 창을 켭니다.
우측 상단 모서리의 ‘설정 열기 (JSON)’ 문서 아이콘을 클릭합니다.
열린 문서 괄호 { } 안쪽에 아래 코드를 그대로 복사해서 붙여넣고 저장합니다.

			
{
    "editor.scrollbar.vertical": "visible",
    "editor.scrollbar.horizontal": "visible",
    "editor.scrollbar.verticalScrollbarSize": 14,
    "editor.scrollbar.horizontalScrollbarSize": 14,
    "workbench.colorCustomizations": {
        "scrollbarSlider.background": "#ff000033",
        "scrollbarSlider.hoverBackground": "#ff000055",
        "scrollbarSlider.activeBackground": "#ff000088"
    }
}

		

위 코드에서 14라는 숫자가 바로 픽셀(px) 너비입니다. 이 숫자를 16이나 18로 늘리면 스크롤바가 훨씬 두꺼워집니다. 명시적으로 지정을 해주어야 전역 오버라이드보다 높은 우선순위를 획득하게 됩니다.

방법 2: 실험적 스타일 덮어쓰기 기능 강제 끄기

설정 파일 하단에 아래 명령어를 한 줄 추가하면, 에디터가 강제로 테마를 변형하는 실험 기능을 원천 차단할 수 있습니다.

			
{
    "workbench.experimental.styleOverrides": false
}

값을 false로 두면, 시스템이 간섭하지 않고 여러분이 설치한 테마 원본 디자인을 그대로 화면에 뿌려줍니다. 더 자세한 엔진 빌드 업그레이드 내역은 VS Code 공식 문서를 통해 직접 크로스 체크하실 수 있습니다.

4. 커스텀 테마 개발자를 위한 팁

만약 VS Code 웹뷰(Webview) 컴포넌트나 나만의 확장 테마를 직접 만드는 개발자라면, 새롭게 바뀐 전역 이벤트 규칙을 소스 코드에 꼭 반영해야 레이아웃 파손을 방지할 수 있습니다.

			
import { setGlobalDefaultScrollbarSize } from 'vs/base/browser/ui/scrollbar/scrollableElement';
// 1. 실행될 때 전역 스크롤바 너비를 14px로 강제 세팅합니다.
setGlobalDefaultScrollbarSize(14);
class MyCustomElement {
    constructor() {
        // 2. 중앙 통제실에서 크기 변경 신호가 오면, 내 컴포넌트도 크기를 맞추도록 구독(리스닝)합니다.
        this._register(onGlobalScrollbarSizeChange((newSize) => {
            this.updateScrollbarSize(newSize);
        }));
    }
}

		

이 이벤트 리스너를 달아주지 않으면, 사용자가 테마를 바꿀 때 내가 만든 컴포넌트의 스크롤바만 홀로 깨지는 렌더링 오류가 발생합니다. 권한 관련 에러가 동반된다면 권한 사슬을 먼저 복구하십시오.

5. 자주 묻는 질문 (FAQ)

설정을 바꿀 때 흔히 겪는 예외 상황들을 일관성 있는 서식으로 정리했습니다.

궁금한 점 (Q)	명확한 해결책 (A)
Q1. 설정을 고쳤는데도 평소엔 사라졌다가 마우스를 올릴 때만 나타납니다. 항상 보이게 할 순 없나요?	A1. Mac 운영체제의 숨김 정책 때문입니다. 해결하려면 1) 에디터 설정에서 `"editor.scrollbar.vertical": "visible"`을 켜주시고, 2) Mac 시스템 설정 > 모양새(Appearance) 메뉴에서 ‘스크롤 막대 보기’를 항상(Always)으로 체크하셔야 합니다.
Q2. 다른 외부 테마로 교체했더니 세팅해둔 VS Code 스크롤바 크기가 무시되고 다시 원상복구 됩니다.	A2. 테마 자체가 내부 클래스 강제 오버라이드를 내장했기 때문입니다. 일부 테마 제작자가 스크롤바 크기를 내부 CSS 파일에 하드코딩해둔 경우입니다. 이럴 때는 본문 3단락에 있는 `workbench.colorCustomizations` 코드를 추가하여 내부 설정 우선순위를 테마 파일보다 높게 끌어올려 주어야 방어됩니다.
Q3. 이번 글로벌 이벤트 모델 리팩토링으로 인해 에디터의 렌더링 성능 저하가 발생하지는 않나요?	A3. 오히려 성능이 대폭 향상되었습니다. 과거에는 개별 컴포넌트마다 메모리를 할당해 스크롤바를 그렸지만, 변경된 구조에서는 하나의 중앙 인스턴스만 상주하므로 불필요한 자원 낭비가 사라지고 가상 메모리 누수가 원천 차단됩니다.

6. 핵심 요약

VS Code 스크롤바 크기가 제멋대로 얇아지는 현상은 에디터가 메모리 효율을 높이기 위해 전역 중앙 통제 방식으로 업데이트하면서 생긴 과도기적 충돌입니다.

문제를 해결하려면 복잡하게 테마 파일을 뜯어고칠 필요 없이, settings.json 파일에 “verticalScrollbarSize”: 14 수치를 박아넣고 “experimental.styleOverrides”: false로 선언해 시스템 간섭을 끄는 것이 가장 빠르고 확실한 정답입니다.

이 가이드를 통해 눈에 안 보이는 얇은 스크롤바 스트레스에서 벗어나, 쾌적하고 편안한 코딩 환경을 되찾으시길 바랍니다!

sys-hack