사용자 지정 레이아웃

Visual Studio Code는 간단한 사용자 인터페이스와 편리한 기본 레이아웃을 제공합니다. 동시에 VS Code는 선호도와 작업 스타일에 맞게 UI 레이아웃을 사용자 지정할 수 있는 옵션과 설정을 제공합니다. 이 섹션에서는 가장 생산적인 방식으로 뷰, 편집기 및 패널을 표시할 수 있도록 다양한 UI 사용자 지정을 강조합니다.

이 섹션에서는 사이드바, 뷰, 패널과 같은 UI 요소를 재정렬하기 위한 작업 영역 사용자 지정을 먼저 설명합니다. 섹션의 뒷부분에서는 편집기 그룹, 분할 편집기 및 편집기 탭을 사용하여 편집기 영역의 사용자 지정을 다룹니다.

워크벤치

기본 사이드바

기본적으로 기본 사이드바는 작업 영역 왼쪽에 있으며 탐색기, 검색, 소스 제어 뷰와 같은 뷰를 표시합니다. 활동 표시줄의 아이콘을 선택하여 뷰 간에 빠르게 전환할 수 있습니다.

기본 사이드바의 위치를 변경하려면 다음을 수행할 수 있습니다.

• 활동 표시줄을 마우스 오른쪽 버튼으로 클릭하고 기본 사이드바 오른쪽으로 이동을 선택합니다.
• 보기: 기본 사이드바 위치 전환 명령을 실행하여 기본 사이드바를 오른쪽과 왼쪽으로 전환합니다.
• 보기 > 모양 > 기본 사이드바 오른쪽으로 이동 메뉴 항목을 사용합니다.
• 설정 편집기에서 작업 영역 > 사이드바: 위치(workbench.sideBar.location) 설정을 right로 설정합니다.

보조 사이드바

기본적으로 VS Code는 편집기 영역 왼쪽에 있는 기본 사이드바에 뷰를 표시합니다. 두 개의 뷰를 동시에 보는 것이 유용할 수 있습니다. 이렇게 하려면 기본 사이드바의 반대쪽에 뷰를 표시하는 **보조 사이드바**를 사용할 수 있습니다. 보조 사이드바는 기본 사이드바의 위치를 전환했는지 여부에 관계없이 항상 기본 사이드바의 반대쪽에 위치합니다.

다음 이미지는 기본 사이드바의 탐색기 뷰와 보조 사이드바의 Copilot Chat 뷰를 보여줍니다.

보조 사이드바를 표시하려면 VS Code 제목 표시줄의 레이아웃 컨트롤을 사용할 수 있습니다. 레이아웃 컨트롤이 보이지 않으면 VS Code 제목 표시줄을 마우스 오른쪽 버튼으로 클릭하고 레이아웃 컨트롤을 선택합니다.

또는 다음과 같이 보조 사이드바를 열 수도 있습니다.

• 보기: 보조 사이드바 표시/숨기기 전환 명령을 실행하거나(⌥⌘B (Windows, Linux Ctrl+Alt+B)) 키를 누릅니다.
• 보기 > 모양 > 보조 사이드바 메뉴 항목을 사용합니다.

새 창이나 작업 영역을 열 때 보조 사이드바를 자동으로 표시하려면 workbench.secondarySideBar.defaultVisibility 설정을 사용하여 구성할 수 있습니다.

언제든지 뷰와 패널을 기본 사이드바 또는 보조 사이드바로 끌어서 놓을 수 있습니다. VS Code는 세션 전반에 걸쳐 뷰와 패널의 레이아웃을 기억합니다.

명령 팔레트 위치

명령 팔레트의 위쪽 가장자리를 마우스 커서로 잡고 다른 곳으로 끌어 다른 위치로 이동할 수 있습니다. 제목 표시줄의 **레이아웃 사용자 지정** 컨트롤을 선택한 다음 미리 구성된 **빠른 입력 위치** 중 하나를 선택할 수도 있습니다.

활동 표시줄 위치

기본적으로 활동 표시줄은 기본 사이드바와 함께 이동하며 작업 영역의 외부 가장자리에 유지됩니다. 활동 표시줄을 숨기거나 기본 사이드바의 위쪽 또는 아래쪽으로 이동하도록 선택할 수도 있습니다.

활동 표시줄 위치 메뉴는 활동 표시줄 상황 메뉴 또는 보기 > 모양 > 활동 표시줄 위치에서 기본값, 위, 아래 또는 숨기기 옵션을 사용할 수 있습니다.

활동 표시줄이 위쪽 또는 아래쪽 위치에 있을 때 일반적으로 활동 표시줄 맨 아래에 있는 **계정** 및 **관리** 버튼은 제목 표시줄의 오른쪽으로 이동합니다.

레이아웃 컨트롤 사용자 지정

VS Code 제목 표시줄에는 기본 UI 요소(사이드바 및 패널 영역)의 표시를 전환하는 버튼도 있습니다.

가장 오른쪽에 있는 버튼을 클릭하면 **레이아웃 사용자 지정** 드롭다운이 표시되며, 여기서 다양한 UI 요소의 표시 및 레이아웃을 추가로 변경하고 여러 레이아웃 모드를 포함할 수 있습니다.

레이아웃 모드는 다음과 같습니다.

• 전체 화면 - 편집기를 전체 디스플레이 화면으로 채우도록 설정합니다. 보기: 전체 화면 전환 (⌃⌘F (Windows, Linux F11)).
• Zen 모드 - 편집기 영역을 제외한 모든 UI를 숨깁니다. 보기: Zen 모드 전환 (⌘K Z (Windows, Linux Ctrl+K Z)).
• 가운데 레이아웃 - 편집기 영역 내에서 편집기를 가운데에 배치합니다. 보기: 가운데 레이아웃 전환.

창 및 메뉴 스타일

다음 설정을 사용하여 VS Code 창 및 메뉴 표시줄의 모양을 사용자 지정할 수 있습니다.

• window.titleBarStyle: VS Code 창 제목 표시줄의 모양을 OS별 네이티브 또는 사용자 지정으로 조정합니다. 변경 사항을 적용하려면 전체 다시 시작이 필요합니다.

• window.title: 열린 작업 영역 또는 활성 편집기와 같은 현재 컨텍스트를 기반으로 VS Code 창 제목을 구성합니다. 변수는 컨텍스트에 따라 대체됩니다. 예를 들어 ${activeEditorShort}는 현재 활성 편집기의 파일 이름을 표시합니다. 여러 변수를 결합할 수 있습니다. 예를 들어 ${dirty}${activeEditorShort}${separator}${rootName}${separator}${profileName}${separator}${appName}입니다.

• window.titleSeparator: window.title 설정에 사용되는 구분 기호 문자입니다.

• window.menuStyle: 메뉴 스타일을 OS별 네이티브, 사용자 지정 또는 제목 표시줄 스타일( window.titleBarStyle에 정의됨)에서 상속받도록 조정합니다. 이는 상황 메뉴 모양에도 영향을 미칩니다. 변경 사항을 적용하려면 전체 다시 시작이 필요합니다.

• window.menuBarVisibility: 메뉴 표시줄의 표시를 구성합니다.

  • classic: 메뉴 표시줄이 창 맨 위에 표시되며 전체 화면 모드일 때만 숨겨집니다.
  • visible: 메뉴 표시줄은 전체 화면 모드에서도 항상 표시됩니다.
  • toggle: 메뉴 표시줄이 숨겨지고 Alt 키를 한 번 누르면 표시됩니다.
  • compact: 메뉴가 사이드바로 이동합니다.
  • hidden: 메뉴 표시줄은 항상 숨겨집니다.

패널

패널 영역은 문제, 터미널, 출력 패널과 같은 UI 요소를 표시하며 기본적으로 편집기 영역 아래에 위치합니다.

패널 위치

편집기의 왼쪽, 오른쪽, 아래쪽 또는 위쪽으로 영역을 이동할 수 있습니다. 이 옵션은 보기 > 모양 > 패널 위치 메뉴 또는 패널 제목 표시줄 상황 메뉴에서 구성할 수 있습니다.

명령 팔레트에서 **패널 이동** 명령을 사용할 수도 있습니다.

• 보기: 패널 왼쪽으로 이동 (workbench.action.positionPanelLeft)
• 보기: 패널 오른쪽으로 이동 (workbench.action.positionPanelRight)
• 보기: 패널 아래쪽으로 이동 (workbench.action.positionPanelBottom)
• 보기: 패널 위쪽으로 이동 (workbench.action.positionPanelTop)

패널 정렬

이 옵션을 사용하면 아래쪽 패널이 창 전체에 걸쳐 얼마나 넓게 펼쳐지는지 구성할 수 있습니다. 네 가지 옵션이 있습니다.

• 가운데 - 이것이 기본 동작입니다. 패널은 편집기 영역의 너비만 차지합니다.
• 정렬 - 패널이 창 전체 너비를 차지합니다.
• 왼쪽 - 패널은 창의 왼쪽 가장자리에서 편집기 영역의 오른쪽 가장자리까지 확장됩니다.
• 오른쪽 - 패널은 창의 오른쪽 가장자리에서 편집기 영역의 왼쪽 가장자리까지 확장됩니다.

모든 패널 정렬 옵션에서 활동 표시줄은 창의 가장자리로 간주됩니다.

이 옵션은 보기 > 모양 > 패널 정렬 메뉴, 패널 제목 상황 메뉴 또는 새로운 패널 정렬 설정... 명령을 사용하여 구성할 수 있습니다.

패널 크기 최대화

패널 정렬이 **가운데**일 때 패널 영역의 오른쪽 상단에 있는 **패널 크기 최대화** 셰브런 버튼을 사용하여 패널 영역을 편집기 전체 영역으로 채우도록 빠르게 전환할 수 있습니다. 최대화된 패널에서 셰브런 버튼은 아래쪽을 가리켜 패널을 원래 크기로 복원합니다.

보기: 최대화된 패널 전환 명령을 사용하여 패널 영역을 최대화할 수도 있습니다.

참고: 전체 패널 영역 표시를 사용자 지정하는 것 외에도 개별 패널에는 자체 레이아웃 사용자 지정이 있을 수 있습니다. 예를 들어 터미널은 여러 개의 열린 탭을 가질 수 있고 기존 터미널을 분할할 수 있습니다.

뷰 및 패널 끌어서 놓기

VS Code는 기본 사이드바 및 패널 영역에 뷰와 패널의 기본 레이아웃을 가지고 있지만 이러한 영역 간에 뷰와 패널을 끌어서 놓을 수 있습니다. 예를 들어 소스 제어 뷰를 패널 영역으로 끌어서 놓거나 문제 패널을 기본 사이드바에 넣을 수 있습니다.

참고: **위치 재설정** 상황 메뉴 항목 또는 일반 **보기: 뷰 위치 재설정** 명령을 사용하여 뷰 및 패널을 기본 위치로 재설정할 수 있다는 점을 기억하십시오.

또한 기존 뷰 또는 패널에 뷰 및 패널을 추가하여 그룹을 만들 수 있습니다. 예를 들어 탐색기 활동 표시줄 항목 위로 끌어서 놓은 다음 뷰로 끌어서 놓아 출력 패널을 탐색기 뷰 그룹으로 이동할 수 있습니다.

뷰와 패널을 이동하기 위해 마우스만 사용할 필요는 없습니다. **보기: 뷰 이동** 및 **보기: 집중된 뷰 이동** 명령을 사용하여 키보드로 레이아웃을 사용자 지정할 수도 있습니다. 드롭다운 메뉴를 통해 이동할 UI 요소와 사이드바 또는 패널 영역과 같은 대상 또는 그룹을 만들 기존 뷰 또는 패널을 선택할 수 있습니다.

도구 모음

대부분의 VS Code 뷰와 패널에는 UI의 오른쪽 상단에 도구 모음이 표시됩니다. 예를 들어 검색 뷰에는 **새로 고침**, **검색 결과 지우기** 등의 작업이 있는 도구 모음이 있습니다.

도구 모음의 항목 숨기기

도구 모음이 너무 복잡하고 자주 사용하지 않는 작업을 숨기고 싶다면 아무 작업이나 마우스 오른쪽 버튼으로 클릭하고 **숨기기** 명령을 선택하거나(예: **'검색 결과 지우기' 숨기기**) 드롭다운에서 작업을 선택 취소할 수 있습니다. 숨겨진 작업은 ... **추가 작업** 메뉴로 이동하며 거기서 호출할 수 있습니다.

작업을 도구 모음으로 복원하려면 도구 모음 버튼 영역을 마우스 오른쪽 버튼으로 클릭하고 **메뉴 재설정** 명령을 선택하거나 숨겨진 작업을 다시 선택합니다. VS Code의 모든 메뉴를 복원하려면 명령 팔레트(⇧⌘P (Windows, Linux Ctrl+Shift+P))에서 **보기: 모든 메뉴 재설정**을 실행합니다.

편집기

작업 영역 UI와 독립적으로 VS Code 편집기 영역의 레이아웃을 사용자 지정할 수 있습니다. 기본적으로 편집기 영역은 미니맵, 탐색 경로, 편집기 탭과 같은 유용한 기능을 표시하며 고정 스크롤과 같은 선택적 UI가 있습니다. 편집기 자체의 레이아웃을 조정하거나 플로팅 창으로 이동할 수도 있습니다.

미니맵 및 탐색 경로

보기 > 모양 메뉴에는 편집기 영역 사용자 지정을 위한 섹션이 있습니다. 거기서 전환 기능을 찾을 수 있습니다.

• 미니맵 - 현재 파일의 시각적 개요입니다. 보기: 미니맵 전환.
• 탐색 경로 - 활성 파일에 대한 폴더, 파일, 현재 기호 정보를 표시합니다. 보기: 탐색 경로 전환.
• 고정 스크롤 - 활성 파일에서 중첩된 기호 범위를 표시합니다. 보기: 고정 스크롤 전환.

편집기 그룹

기본적으로 열린 각 편집기는 동일한 **편집기 그룹**으로 들어가며 오른쪽에 새 편집기 탭이 추가됩니다. 비슷한 파일이나 관련 파일을 그룹화하거나 동일한 파일을 나란히 편집할 수 있도록 새 편집기 그룹을 만들 수 있습니다.

편집기를 옆으로 끌어서 새 편집기 그룹을 만들거나, 편집기 탭 상황 메뉴에서 **분할** 명령 중 하나를 사용하여 현재 편집기를 왼쪽, 오른쪽, 위쪽 또는 아래쪽에 있는 새 편집기 그룹으로 복제합니다.

**분할** 편집기 명령은 보기 > 편집기 레이아웃 메뉴와 명령 팔레트에서도 사용할 수 있습니다.

세로 및 가로 편집기 그룹 레이아웃 간을 빠르게 전환하려면 **세로/가로 편집기 레이아웃 전환** 명령(⌥⌘0 (Windows, Linux Shift+Alt+0))을 사용할 수 있습니다.

그룹 내 분할

**보기: 그룹 내 편집기 분할** 명령(⌘K ⇧⌘\ (Windows, Linux Ctrl+K Ctrl+Shift+\))을 사용하여 동일한 그룹 내에서 편집기를 분할하여 나란히 편집할 수도 있습니다.

그룹 내 분할 기능을 사용할 때 이 모드를 전환하고 두 분할 편집기 간을 이동하는 특정 명령이 있습니다.

• 보기: 그룹 내 편집기 분할 - 현재 편집기를 분할합니다.
• 보기: 그룹 내 편집기 분할 전환 - 활성 편집기의 분할 모드를 전환합니다.
• 보기: 그룹 내 편집기 병합 - 활성 파일에 대해 단일 편집기로 돌아갑니다.
• 보기: 그룹 내 분할 편집기 레이아웃 전환 - 가로 및 세로 레이아웃 간을 전환합니다.

측면 간 이동

• 보기: 활성 편집기에서 첫 번째 측면 집중 - 분할 편집기의 첫 번째(왼쪽 또는 위쪽) 측면으로 초점을 이동합니다.
• 보기: 활성 편집기에서 두 번째 측면 집중 - 두 번째(오른쪽 또는 아래쪽) 측면으로 초점을 이동합니다.
• 보기: 활성 편집기에서 다른 측면 집중 - 분할 편집기 측면 간을 전환합니다.

작업 영역 > 편집기: 그룹 내 분할 레이아웃(workbench.editor.splitInGroupLayout) 설정을 사용하여 선호하는 분할 편집기 레이아웃을 가로(기본값) 또는 세로로 설정할 수 있습니다.

격자 레이아웃

편집기 그룹 레이아웃을 더 세밀하게 제어하려면 여러 행과 열의 편집기 그룹을 볼 수 있는 격자 레이아웃을 사용할 수 있습니다. 보기 > 편집기 레이아웃 메뉴에는 다양한 편집기 레이아웃 옵션(예: **두 열**, **세 열**, **격자(2x2)**)이 나열되어 있으며, 구분선을 잡고 이동하여 그룹 크기를 조정할 수 있습니다.

플로팅 창

편집기, 터미널 또는 특정 뷰를 플로팅 창에서 열 수 있습니다. 이는 다중 모니터 설정에서 유용하며, 편집기를 다른 모니터로 또는 동일한 모니터의 다른 위치로 이동할 수 있습니다.

플로팅 창에서 편집기를 열려면 편집기를 메인 창 밖으로 끌어 현재 VS Code 창 외부의 아무 곳에나 놓습니다.

플로팅 창은 격자 레이아웃에서 원하는 만큼 많은 편집기를 열 수 있습니다. 창은 다시 시작 후 해당 위치에 복원되고 그 안에 있는 모든 편집기를 다시 엽니다.

편집기를 분리하는 또 다른 방법은 편집기 탭을 마우스 오른쪽 버튼으로 클릭하고 **새 창으로 이동** (workbench.action.moveEditorToNewWindow) 또는 **새 창으로 복사** (⌘K O (Windows, Linux Ctrl+K O)) 옵션을 선택하는 것입니다.

전체 편집기 그룹을 이동하려면 **편집기 그룹을 새 창으로 이동** () 또는 **편집기 그룹을 새 창으로 복사** () 명령을 사용합니다.

컴팩트 모드

플로팅 창에서 불필요한 UI 요소를 제거하고 콘텐츠 공간을 더 확보하려면 플로팅 창 제목 표시줄에서 **컴팩트 모드 설정** 옵션을 선택합니다. 다시 선택하면 플로팅 창이 원래 모드로 복원됩니다.

상단 고정

플로팅 창 제목 표시줄의 **항상 위에 표시** 옵션을 선택하여 플로팅 창을 화면 맨 위에 고정할 수 있습니다. 이는 메인 VS Code 창에서 작업하는 동안 터미널 또는 미리보기 창을 항상 보이게 하는 데 유용할 수 있습니다. 다시 선택하면 플로팅 창의 고정이 해제됩니다.

고정된 탭

편집기 탭을 항상 표시하려면 편집기 탭 표시줄에 고정할 수 있습니다. 상황 메뉴를 사용하거나 **보기: 편집기 고정** 명령(⌘K ⇧Enter (Windows, Linux Ctrl+K Shift+Enter))을 사용하여 편집기 탭을 고정할 수 있습니다.

고정된 탭은 다음과 같은 이유로 중요한 파일에 액세스하는 데 도움이 됩니다.

• 고정된 탭은 항상 고정되지 않은 탭보다 먼저 나타납니다.
• 많은 탭이 열려 있어도 보이지 않게 스크롤되지 않습니다.
• **다른 닫기** 또는 **모두 닫기**와 같은 편집기 탭 명령을 사용할 때 닫히지 않습니다.
• 열린 편집기 개수에 대한 설정 한도를 초과해도 닫히지 않습니다.

고정 아이콘을 클릭하거나, **고정 해제** 편집기 탭 상황 메뉴 항목 또는 **보기: 편집기 고정 해제** 명령을 사용하여 편집기의 고정을 해제합니다.

작업 영역 > 편집기: 고정 탭 크기(workbench.editor.pinnedTabSizing) 설정을 사용하여 고정된 편집기를 표시하는 방법을 선택할 수 있습니다. 옵션은 다음과 같습니다.

• normal: 고정된 탭은 다른 탭과 동일한 모양을 상속합니다(기본값).
• shrink: 고정된 탭은 편집기 레이블의 일부를 표시하는 고정된 크기로 축소됩니다.
• compact: 고정된 탭은 아이콘 또는 편집기 레이블의 첫 글자만 표시됩니다.

작업 영역 > 편집기: 고정 탭을 별도 행에 표시를 설정하여 고정된 편집기 탭을 일반 편집기 탭 표시줄 위 별도 행에 표시할 수도 있습니다. 탭을 두 행 간에 끌어서 놓아 편집기를 고정하거나 고정 해제할 수 있습니다.

잠긴 편집기 그룹

여러 편집기를 사용할 때 항상 표시하고 싶은 하나 이상의 편집기가 있는 경우가 많습니다. 편집기 그룹 전체가 잠기고 표시되는 잠긴 편집기 그룹 기능은 안정적인 표시를 제공하며 새 편집기를 열려는 모든 요청은 다른 그룹에서 생성됩니다. 편집기 그룹이 잠겨 있는지 여부는 편집기 그룹 도구 모음의 잠금 아이콘으로 알 수 있습니다.

편집기 도구 모음의 **추가 작업** ... 드롭다운에서 **그룹 잠금**을 선택하거나 **보기: 편집기 그룹 잠금** 명령을 실행하여 편집기 그룹을 잠글 수 있습니다.

잠금 아이콘을 클릭하거나 **보기: 편집기 그룹 잠금 해제** 명령을 실행하여 편집기 그룹의 잠금을 해제할 수 있습니다.

잠긴 그룹은 잠기지 않은 그룹과 다르게 작동합니다.

• 새 편집기는 명시적으로 해당 그룹으로 이동되지 않는 한(예: 끌어서 놓기) 잠긴 그룹에 열리지 않습니다.
• 새 편집기가 잠긴 그룹을 건너뛰면 가장 최근에 사용한 잠기지 않은 그룹에 열리거나 잠긴 그룹 옆에 새 그룹을 만듭니다.
• 편집기 그룹의 잠긴 상태는 유지되며 다시 시작할 때 복원됩니다.
• 빈 그룹도 잠글 수 있어 더 안정적인 편집기 레이아웃을 제공합니다.

주요 사용 사례는 편집기 영역의 터미널입니다. 예를 들어 왼쪽에서 텍스트를 편집하고 오른쪽에서 항상 표시되는 터미널을 원할 수 있습니다. 터미널 편집기가 생성되어 옆으로 이동하면 자동으로 잠깁니다. 이는 오른쪽의 터미널에 포커스가 맞춰져 있어도 파일을 열면 파일을 열기 전에 수동으로 포커스를 변경할 필요 없이 왼쪽에서 열립니다.

자동 잠금 그룹은 기본적으로 터미널 편집기만 포함하지만, 동일한 동작을 얻기 위해 모든 편집기 유형을 추가할 수 있는 workbench.editor.autoLockGroups 설정을 사용하여 구성할 수 있습니다.

편집기 그룹 잠금과 관련된 명령

• 보기: 편집기 그룹 잠금 - 활성 편집기 그룹을 잠급니다.
• 보기: 편집기 그룹 잠금 해제 - 활성 잠긴 편집기 그룹의 잠금을 해제합니다.
• 보기: 편집기 그룹 잠금 전환 - 활성 편집기 그룹을 잠그거나 잠금 해제합니다.

이 명령을 사용하려면 두 개 이상의 편집기 그룹이 있어야 합니다.

다음 단계

자세한 내용은 계속 읽어보세요.

• Visual Studio Code 사용자 인터페이스 - VS Code에 대한 빠른 개요입니다.
• 기본 편집 - 강력한 VS Code 편집기에 대해 알아보세요.
• 코드 탐색 - 소스 코드를 빠르게 이동합니다.