UX 지침

이 가이드라인은 VS Code의 네이티브 인터페이스 및 패턴과 원활하게 통합되는 확장을 만들기 위한 모범 사례를 다룹니다. 이 가이드라인에서는 다음을 찾을 수 있습니다.

VS Code의 전반적인 UI 아키텍처 및 요소 개요
확장에서 제공하는 UI에 대한 권장 사항 및 예제
관련 가이드 및 샘플 링크

자세히 알아보기 전에 VS Code의 다양한 아키텍처 UI 부분이 어떻게 맞춰지는지, 그리고 확장이 어떻게 어디에 기여할 수 있는지 이해하는 것이 중요합니다.

컨테이너

VS Code 인터페이스는 크게 두 가지 주요 개념으로 나눌 수 있습니다: **컨테이너**와 **항목**입니다. 일반적으로 컨테이너는 하나 이상의 항목을 렌더링하는 VS Code 인터페이스의 더 큰 섹션으로 간주될 수 있습니다.

활동 표시줄

활동 표시줄은 VS Code의 핵심 탐색 표면입니다. 확장은 활동 표시줄에 기본 사이드바에서 보기를 렌더링하는 보기 컨테이너 역할을 하는 항목을 기여할 수 있습니다.

기본 사이드바는 하나 이상의 보기를 렌더링합니다. 활동 표시줄과 기본 사이드바는 긴밀하게 연결되어 있습니다. 기여된 활동 표시줄 항목(즉, 보기 컨테이너)을 클릭하면 기본 사이드바가 열리고 해당 보기 컨테이너와 연결된 하나 이상의 보기가 렌더링됩니다. 구체적인 예는 탐색기입니다. 탐색기 항목을 클릭하면 폴더, 타임라인 및 개요 보기가 표시되는 기본 사이드바가 열립니다.

보조 사이드바는 보기 컨테이너와 보기를 렌더링하는 표면으로도 작동합니다. 사용자는 레이아웃을 사용자 지정하기 위해 터미널 또는 문제 보기와 같은 보기를 보조 사이드바로 끌어다 놓을 수 있습니다.

편집기

편집기 영역에는 하나 이상의 편집기 그룹이 포함됩니다. 확장은 편집기 영역에서 열릴 사용자 지정 편집기 또는 웹뷰를 기여할 수 있습니다. 또한 편집기 도구 모음에 추가 아이콘 단추를 노출하기 위해 편집기 작업을 기여할 수 있습니다.

패널

패널은 보기 컨테이너를 노출하는 또 다른 영역입니다. 기본적으로 터미널, 문제 및 출력과 같은 보기는 패널에서 한 번에 하나의 탭에서 볼 수 있습니다. 사용자는 편집기에서처럼 보기를 분할 레이아웃으로 끌어다 놓을 수도 있습니다. 또한 확장은 활동 표시줄/기본 사이드바 대신 패널에 보기 컨테이너를 추가하도록 선택할 수 있습니다.