VS Code가 새 UI 미리보기를 공개하고 밀도 설정을 추가했다

VS Code가 편집기와 Agents 창에 공통 디자인을 적용한 새 사용자 인터페이스(UI) 미리보기를 공개했다. 화면 공간을 더 쓰는 새 UI가 부담스러운 사용자는 레이아웃 밀도를 Compact로 낮추거나 기존 Classic UI를 계속 선택할 수 있다.

이번 개편은 편집기 자체를 다시 설계하기보다 작업 영역의 시각적 위계를 정리하고, 편집과 에이전트 세션 등 여러 작업 흐름에서 일관된 디자인을 제공하는 데 초점을 둔다. VS Code 팀은 2026년 색상 테마를 시작으로 Agents 창에 새 디자인을 적용했고, 이제 편집기로 범위를 넓혔다.

새 디자인과 밀도 설정

새 디자인은 Dark 2026·Light 2026 테마와 구문 강조 색상을 함께 다듬으며 시작됐다. 표면 색상 범위를 좁혀 코드가 중심에 보이도록 하고, 마우스 오버·포커스·선택·유효성 검사·에이전트 상태의 색상도 일관되게 정리했다. 이후 간격, 글꼴, 탭, 컨트롤에도 공통 규칙을 적용했다.

Agents 창은 세션을 시작하고 진행 상황을 살피며 결과를 검토하는 작업을 한곳에 모은다. 편집기 창과 같은 타이포그래피, 간격, 색상, 탭, 컨트롤을 사용하지만, 두 창의 배치를 똑같이 만들지는 않았다. 각 창은 용도에 맞게 최적화되며, 사용자는 테마와 화면 밀도, 작업 공간 배치를 계속 조정할 수 있다.

화면 공간을 더 확보하고 싶다면 제목 표시줄의 Customize Layout에서 Layout Density > Compact를 선택하거나 window.density.layout을 compact로 설정하면 된다. VS Code 팀이 제시한 기준으로, 1920 x 1080 화면에서 확대율 100%일 때 새 UI는 레이아웃에 따라 기존보다 가로 공간을 약 20px, 세로 공간을 12~18px 더 사용한다.

편집기 탭도 바뀌었다. 처음 적용한 알약 모양 탭은 활성 파일과 편집기 내용의 연결이 덜 분명하다는 피드백을 받았다. 새 연결형 탭은 선택된 탭과 아래 편집기 영역을 하나의 면처럼 보이게 한다. 기존 알약 모양을 선호하면 workbench.experimental.modernUIEditorTabStyle 설정으로 선택할 수 있다. 탭 디자인 변경 배경은 관련 피드백 논의에서 확인할 수 있다.

그 밖에도 대문자 레이블을 없애고 글꼴과 간격, 모서리 둥글기, 패널 구분선, 상태 표시줄 간격을 다듬었다. 선택적으로 workbench.experimental.modernUIUppercaseViewHeaders로 뷰 헤더 등의 대문자 표시를 켤 수 있고, workbench.activityBar.compact로 Activity Bar 폭을 줄일 수 있다. workbench.editor.tabActionReserveSpace는 탭이 동작 버튼 자리를 항상 확보할지 제어한다. 이름에 experimental이 들어간 설정은 디자인이 안정되는 과정에서 바뀌거나 제거될 수 있다.

피드백과 성능 측정

VS Code 팀은 새 UI를 Stable의 실험 설정으로 먼저 제공하고 Insiders에서는 기본 활성화했다. 이후 Stable 사용자 일부를 대상으로 통제된 실험을 진행했으며, 피드백을 반영한 뒤에는 기존 UI로 돌아갈 선택지를 남긴 채 새 UI를 기본값으로 전환했다. 공개 피드백 논의와 개별 이슈 제보, 팀 내부 사용을 통해 화면 크기와 확대율, 테마, 작업 흐름에 따른 불편을 살폈다.

주요 의견은 코드와 터미널을 볼 공간이 줄었다는 점, 탭의 활성 파일 표시와 가로 공간 사용, 상태 표시줄에 들어가는 정보량, 패널 경계와 크기 조절 컨트롤의 발견 가능성, 테마 대비와 화면 응답성이었다. 이에 Compact 밀도와 연결형 탭, 테마 사용자 지정을 추가하거나 조정했다.

렌더링 성능 우려에는 브라우저 추적과 반복 가능한 벤치마크로 대응했다. VS Code 팀은 DOM의 넓은 영역을 살피던 CSS 선택자 일부를 컴포넌트 상태 클래스로 바꾸고, 크기 조절·뷰 전환·스크롤·차이 비교 열기·위젯 애니메이션 등을 포함한 작업으로 측정했다. 수정 후 해당 묶음 벤치마크에서 스타일 재계산 시간은 8.2%, 전체 경과 시간은 3.3% 줄었지만 레이아웃 시간은 6.6% 늘었다. 팀은 이를 전체 작업 영역이 빨라졌다는 뜻이 아니라 일부 비용을 줄인 결과라고 설명했다. 비슷한 선택자가 다시 생기지 않도록 린트 규칙을 추가하고, npm run perf:css로 반복 측정을 할 수 있게 했다.

기존 UI와 테마 제작자

새 UI와 기존 Classic UI는 전환 기간 동안 모두 사용할 수 있다. 기존 UI로 돌아가려면 설정에서 workbench.experimental.modernUI를 검색해 체크를 해제하면 된다. 이 선택지는 임시이며, 제거 일정은 아직 정해지지 않았다. VS Code 팀은 종료 시점을 미리 알리겠다고 밝혔다.

기존 색상 테마는 두 UI에서 계속 호환된다. 새 색상 ID를 지정하지 않은 테마는 기존 작업 영역 색상을 사용한다. 테마 제작자는 새 색상 ID를 사용해 표면, 테두리, 탭, Activity Bar, 창 상태를 더 세밀하게 조정할 수 있다. 새 ID는 실험 단계이므로 새 UI와 Classic UI, 밝은 테마와 어두운 테마, 고대비 테마에서 각각 확인해야 한다. 전체 토큰과 기본값, 우선순위 규칙은 새 UI 테마 안내에, 테마 확장 패키징과 배포 방법은 색상 테마 안내에 정리돼 있다.

VS Code 팀은 앞으로 Agents 창과 편집기의 공통 디자인을 다듬고, 탭과 밀도 설정, 테마 대비, 렌더링 비용을 계속 개선할 계획이다. 2026년 테마 변경의 시작점은 Dark 2026·Light 2026이며, 구문 강조 조정도 함께 진행됐다. 작업 영역 구성 요소에 관한 자세한 내용은 사용자 인터페이스 안내에서 볼 수 있다. 새 UI에 대한 의견이나 문제는 VS Code 이슈 저장소에 전달할 수 있다.