VS Code: JSON 파일에서 컬러 피커(color picker)가 사라졌을 때 해결 방법

CSS나 스타일 작업을 할 때 코드 옆에 조그맣게 표시되는 색상 상자(Color Decorator)와 이를 클릭하면 나타나는 `컬러 피커(Color Picker)`는 개발 생산성을 높여주는 유용한 도구다. 하지만 잘 사용하던 이 기능이 어느 순간부터 JSON 파일에서만 동작하지 않는 현상이 발생하곤 한다. 정확한 시점은 알 수 없으나, 한 번 시작된 이 문제는 자연적으로 해결되지 않고 계속해서 불편함을 초래하였다.

분명 C#이나 HTML, CSS 파일에서는 문제없이 동작하는데 유독 JSON 환경에서만 이런 현상이 나타난다면, 이는 VS Code의 기본 설정이 다른 확장 프로그램이나 테마 설정에 의해 우선순위에서 밀렸을 가능성이 크다.

VS Code 에디터에서 JSON 코드 내 컬러 피커가 정상적으로 활성화된 모습

 

---

 

문제 현상 파악하기

일반적으로 VS Code는 설정된 컬러 스키마에 따라 HEX, RGB, HSL 형식을 자동으로 감지한다. 하지만 아래와 같은 JSON 구조에서 문자열로 취급되는 컬러 값 옆에 색상 사각형이 보이지 않는다면 설정 점검이 필요하다.

컬러 피커가 활성화 되지 않은 모습. HEX 형식임에도 컬러 피커가 보이지 않는다.

 

이 문제는 주로 VS Code의 `editor.defaultColorDecorators` 옵션이 `auto`로 설정되어 있을 때 발생한다. `auto` 모드에서는 현재 활성화된 언어 모드나 설치된 확장 프로그램의 컬러 스키마 제안에 따라 빌트인 기능을 활성화할지 결정하는데, 다른 컬러 스키마 관련 설정이 추가되거나 업데이트되면서 기존의 빌트인 기능이 오버라이드되어 더 이상 작동하지 않게 된 것으로 보인다.

 

---

 

해결 방법: 컬러 데코레이터 강제 활성화

이 문제를 해결하는 가장 확실한 방법은 사용자 설정에서 해당 기능을 always로 고정하는 것이다. 다음 과정을 통해 설정을 변경할 수 있다.

1. VS Code를 실행한 후 Ctrl + , (macOS는 Cmd + ,)를 눌러 설정(Settings) 창을 연다.
2. 상단 검색창에 `defaultColorDecorators`를 입력한다.
3. Editor: Default Color Decorators 항목을 찾는다. 또는 간단히 다음 링크(:fa-regular fa-gear: editor.defaultColorDecorators)를 클릭한다.
4. 기본값인 `auto`를 `always`로 변경한다.

VS Code 설정 화면에서 Editor: Default Color Decorators 항목을 always로 변경하는 과정

 

---

 

설정 적용 확인

설정을 `always`로 변경하는 즉시 VS Code는 다른 확장 프로그램의 간섭을 무시하고 자체 빌트인 컬러 데코레이터가 활성화된다. 이제 JSON 파일 내의 HEX 코드 옆에 색상 박스가 다시 나타나는 것을 확인할 수 있다. 박스를 클릭하면 다시 정상적으로 컬러 피커가 팝업되어 마우스 클릭만으로 색상을 자유롭게 변경할 수 있게 된다.

만약 이 설정을 변경했음에도 증상이 해결되지 않는다면, 특정 JSON 관련 확장 프로그램(예: JSON Schema 관련 도구)이 강제로 해당 기능을 차단하고 있는지 확인해 볼 필요가 있다. 하지만 대부분의 경우 always 설정만으로도 충분히 해결 가능하다.

이 설정을 통해 더 이상 색상 코드를 직접 타이핑하거나 외부 웹 사이트에서 코드를 복사해오는 번거로움을 겪지 않아도 된다.