이제 Visual Studio Code에서 기준선을 지원합니다.

Rick Viscomi

게시일: 2025년 5월 20일

최신 코드 편집기는 효율적으로 빌드하는 데 필요한 도구와 참조 문서를 한곳에 모아 생산성을 크게 높여줍니다. IDE의 I가 바로 이 통합입니다. Visual Studio Code (VS Code)와 같은 많은 IDE에서 생산성을 향상하는 한 가지 방법은 편집기에서 웹 기능을 마우스로 가져갈 때 웹 기능에 관한 추가 정보를 표시하는 것입니다. 이 정보에는 기능 설명, 지원되는 브라우저, 문법 가이드, MDN에서 자세히 알아볼 수 있는 링크가 포함되어 있습니다.

브라우저 호환성 정보는 IDE의 맥락에서 특히 유용합니다. 마우스를 가져가기만 하면 기능의 상호 운용성에 관한 즉각적인 피드백을 받을 수 있기 때문입니다. 이 정보를 사용하여 기능이 브라우저 지원 타겟을 충족하는지, 점진적으로 개선하거나 polyfill하기 위한 방어 조치를 취해야 하는지, 아니면 완전히 사용하지 않아야 하는지 결정할 수 있습니다.

이전 버전의 VS Code에서는 MDN, Can I Use, web.dev와 같은 사이트의 호환성 표에서 볼 수 있는 것과 유사하게 브라우저 버전 번호로 이 정보를 표현했습니다. 하지만 이러한 사이트의 공통점은 Baseline을 사용하여 복잡한 브라우저 지원 환경을 요약하기 시작했다는 것입니다. 따라서 VS Code를 이러한 다른 리소스가 브라우저 호환성 정보를 전달하는 방식과 일치시키기 위해 이제 VS Code에서도 Baseline을 지원합니다.

새 기준 UI를 사용하려면 VS Code 버전 1.100 이상으로 업그레이드하세요. 모든 것이 기본적으로 작동하므로 확장 프로그램이나 추가 구성이 필요하지 않습니다.

최신 버전의 VS Code에서 웹 기능 위로 마우스를 가져가면 기준 상태가 표시됩니다. 이 기능이 지원된 기간을 파악할 수 있도록 VS Code에서는 기준이 된 연도도 알려줍니다. 아직 Baseline이 아닌 기능의 경우 기능이 아직 완전히 구현되지 않은 브라우저를 알려줍니다.

이전 버전의 VS Code에서는 이 작업이 간단하지 않았습니다. 지원되는 브라우저 버전 목록을 보고 누락된 브라우저를 파악하려면 약간의 생각이 필요합니다. 가장 파악하기 어려웠던 부분은 브라우저에서 이 기능이 지원된 기간이었습니다. 이를 위해서는 각 버전이 언제 출시되었는지 알아야 하는데, 이는 일반적인 지식이 아닙니다. 다행히도 이 모든 것이 기준 상태 및 연도에 반영됩니다.

이번 출시에는 완전히 새로운 기능도 포함되어 있습니다. 이전에는 CSS 속성에 대한 브라우저 지원 데이터만 가져올 수 있었습니다. 매년 새로운 CSS 기능이 출시되는 엄청난 속도를 고려할 때 특히 유용했습니다. 하지만 HTML에서도 많은 혁신이 일어나고 있습니다. 이번 출시부터 VS Code는 기준 상태 측면에서 HTML 요소와 속성의 브라우저 지원 정보도 표시합니다.

예를 들어 autocorrect 입력 속성은 몇 달 전에 첫 번째 브라우저인 Firefox에서 제공되었습니다. 기능의 사용 가능 여부가 제한적이라는 즉각적인 피드백을 받을 수 있어 기능이 작동하는 위치와 작동하지 않는 위치에 대해 더 잘 알 수 있습니다. 이 경우에는 지원되지 않는 브라우저에서 무해하므로 사용해도 됩니다.

dialog 요소와 같은 다른 HTML 기능은 autocorrect만큼 원활하게 다운그레이드되지 않습니다. 따라서 dialog 마우스 오버 카드를 호출하여 2022년부터 Baseline이었고 주요 브라우저에서 널리 사용 가능한 것으로 간주된다는 것을 확인할 수 있어 안심이 됩니다. 이러한 정보를 통해 그동안 너무 최첨단이라고 생각했던 기능을 도입할 수 있다는 자신감을 얻을 수 있습니다.

팝오버 API는 2024년부터 Baseline이 된 HTML 기능의 또 다른 예로, 아직 새로 제공되는 것으로 간주됩니다. 즉, 모든 주요 브라우저에서 지원되지만 널리 제공되는 데 필요한 2년 6개월이 아직 지나지 않았습니다. 따라서 이 기능을 모든 사용자에게 제공하기 전에 좀 더 신중하게 진행하는 것이 좋습니다.

VS Code에서 이 정보를 바로 사용할 수 있으면 생산성이 크게 향상됩니다. 하지만 기능을 마우스로 가져가지 않아도 Baseline인지 확인할 수 있다면 어떨까요? 이는 별도의 관련 도구인 린터를 통해 가능합니다.

예를 들어 VS Code용 ESLint 확장 프로그램은 HTML 및 CSS 파일을 린트하고 아직 Baseline이 아닌 기능에 물결선 밑줄을 추가할 수 있습니다. 이는 최근에 추가된 HTML ESLint 및 CSS용 ESLint 플러그인의 use-baseline 규칙에 의해 지원됩니다. Stylelint에도 비슷한 규칙이 있습니다. 물론 이는 린터의 여러 이점 중 하나일 뿐이지만, 새로운 기준선 지원 마우스 오버 카드를 얼마나 잘 보완하는지 보여줍니다.

VS Code 사용자라면 새로운 호버 카드를 사용해 보시기 바랍니다. VS Code 사용자가 아닌 경우에도 좋은 소식이 있습니다. 많은 IDE가 Code - OSS (VS Code의 오픈소스 버전)에서 포크되거나 HTML 및 CSS 마우스 오버 카드를 지원하는 동일한 언어 서버를 사용합니다. 이러한 다운스트림 IDE가 최신 버전으로 업그레이드하는 데 몇 주 또는 몇 개월이 걸릴 수 있지만 업그레이드되면 새로운 기준 UI가 자동으로 상속됩니다.

• VSCodium
• Firebase Studio
• 커서
• Windsurf
• Zed
• Eclipse Theia
• Trae
• GitHub Codespaces
• GitLab 워크스페이스
• Replit
• StackBlitz (볼트)

JetBrains는 WebStorm을 시작으로 모든 IntelliJ 기반 IDE에 Baseline을 통합하기 위해 노력하고 있습니다. 이와 관련된 내용은 별도의 블로그 게시물에서 자세히 다룰 예정이니 기대해 주세요.

점점 더 많은 개발자 도구와 리소스에서 Baseline을 지원하고 있으며, 특히 VS Code가 주도하는 이러한 새로운 IDE 통합은 매우 기대됩니다. IDE에서 많은 시간을 보내는데, 이 기준 데이터가 손쉽게 제공되면 개발 워크플로에 더 많은 명확성과 교차 도구 일관성을 가져올 수 있습니다. 기준 및 이와 같은 기타 도구 통합에 대해 자세히 알아보려면 기준 가이드에서 자세한 리소스를 확인하세요.