Visual Studio Code용 웹뷰 UI 툴킷
2021년 10월 11일, David Dossett, @david_dossett 및 Hawk Ticehurst, @hawkticehurst 작성
Visual Studio Code용 Webview UI Toolkit의 공개 미리 보기를 발표하게 되어 매우 기쁩니다. 이 툴킷을 사용하면 확장 프로그램 개발자가 Visual Studio Code에서 편집기 자체와 같은 모양, 느낌 및 동작을 제공하는 웹뷰 기반 확장 프로그램을 빠르고 쉽게 만들 수 있습니다.
Webview UI Toolkit이란 무엇인가요?
핵심적으로 이 툴킷은 개발자가 확장 웹뷰 내에서 사용자 인터페이스를 구축하는 데 사용할 수 있는 구성 요소 라이브러리입니다. 이것이 웹뷰가 꼭 필요한 경우가 아니라면 확장 프로그램에서 웹뷰 사용을 피하라는 권장 사항을 변경하는 것은 아닙니다.
라이브러리의 기능은 다음과 같습니다.
- Visual Studio Code 디자인 언어 구현: 편집기의 나머지 부분과 일관된 모양과 느낌을 가진 확장 프로그램을 만듭니다.
- 색상 테마 자동 지원: 모든 구성 요소는 테마를 염두에 두고 설계되었으며 현재 편집기 테마를 자동으로 표시합니다.
- 모든 기술 스택 사용 가능: 라이브러리는 웹 구성 요소 세트로 제공되므로 개발자는 확장 프로그램이 어떤 기술 스택(React, Vue, Svelte 등)으로 구축되었는지에 관계없이 툴킷을 사용할 수 있습니다.
- 즉시 사용 가능한 접근성: 모든 구성 요소는 웹 표준을 준수하는 ARIA 레이블 및 키보드 탐색 기능을 제공합니다.
왜 만들었나요?
웹뷰를 사용하는 확장 프로그램이 사용자에게 예측 가능하고 일관적이며 접근 가능하도록 만들고 싶었습니다.
Webview API를 사용하는 확장 프로그램의 경우 웹뷰 지침을 준수하는 UI를 만드는 책임은 확장 프로그램 작성자에게 있습니다. 그 결과 웹뷰는 Visual Studio Code의 나머지 부분과 다르게 보이거나 동작할 위험이 있습니다. 최악의 경우 사용자는 편집기의 나머지 부분과 전혀 다르게 보이는 접근 불가능한 확장 프로그램 UI를 탐색해야 합니다.
Webview UI Toolkit을 통해 이제 확장 프로그램 작성자와 일부 책임을 공유하게 되었습니다. 테마, 접근성 및 핵심 UI 구성 요소의 동작/스타일링 구현과 같은 까다로운 세부 사항을 우리가 걱정하므로 여러분은 걱정할 필요가 없습니다. 이는 개발 편의성 향상, 개발자 속도 향상, 그리고 궁극적으로 확장 프로그램의 고유한 부분을 만들 시간 확보를 의미합니다!
여러분의 피드백이 필요합니다!
Webview UI Toolkit을 꼭 사용해 보시기 바랍니다! 1.0 릴리스를 향해 나아가는 동안 웹뷰 기반 확장 프로그램 제작 경험을 어떻게 개선할 수 있는지 알려주세요.
자세히 알아보려면 Visual Studio Code용 Webview UI Toolkit 설명서를 참조하세요. 또한 질문이 있거나 문제가 발생하거나 기능 요청이 있는 경우 언제든지 문의해 주세요.
행복한 코딩 되세요,
David와 Hawk