게시일: 2024년 10월 23일
이 게시물에서는 웹 플랫폼 기능에 관해 작성하거나 이야기할 때마다 자체 사이트에서 새로운 <baseline-status> 웹 구성요소를 사용하고 프레젠테이션에서 Baseline 로고를 사용하는 방법을 알아봅니다.
대부분의 개발자는 웹 개발 문제의 해결 방법을 검색하다가 완벽한 해결 방법을 설명하는 도움말을 발견한 후 마지막에 해당 해결 방법이 하나의 브라우저에서만 제공된다는 사실을 깨달은 경험이 있습니다. 또는 컨퍼런스 발표자가 설명하는 기능에 흥미를 느꼈는데 실험적인 기능이라는 것을 알게 될 수도 있습니다. Chrome 개발자 사이트에서 개선하고 싶었던 부분이었고, 지난 2년간 MDN의 호환성 데이터를 게시물에 추가해 왔습니다.
하지만 기준선을 사용하면 훨씬 더 명확해집니다. 개별 브라우저 버전을 확인하는 대신 기능이 Baseline Widely available인지 확인하여 걱정 없이 사용할 수 있는지 확인할 수 있습니다. 또는 Baseline에서 새로 사용할 수 있으므로 상호 운용이 가능하지만 새 기능이므로 대체 전략을 고려해야 할 수도 있습니다. web.dev에서는 일부 페이지에 새로운 기준 상태 구성요소를 추가하기 시작했습니다. CSS font-size-adjust에 관한 블로그 게시물에서 확인할 수 있습니다.
사이트에 구성요소 추가
웹 구성요소는 Google에서만 사용하는 것이 아닙니다. <baseline-status> 구성요소를 공유하게 되어 기쁩니다. 이 값은 내가 만든 콘텐츠의 기준 상태를 표시하는 데 사용할 수 있습니다. 이 구성요소는 npm에서 설치하거나 CDN에서 사전 컴파일할 수 있습니다. 설치 안내를 참고하세요.
설치되면 font-size-adjust의 다음 HTML과 같이 기능의 상태를 표시합니다.
<baseline-status featureId="font-size-ad><just"/basel>ine-status
그러면 기능이 제한적 사용 가능에서 새로 사용 가능, 광범위하게 사용 가능으로 이동함에 따라 구성요소가 자동으로 업데이트됩니다.
featureId 찾기
구성요소에 전달되는 featureId는 web-features 저장소의 기능 이름입니다.
이 구성요소는 웹 기능 프로젝트를 통해 수집된 데이터에서 기능의 상태를 가져옵니다.
기준 로고 추가
인쇄, PDF로 게시하거나 컨퍼런스에서 발표하는 경우 로고가 당시의 상태를 보여주는 데 도움이 될 수 있습니다. 웹 플랫폼 상태 대시보드를 사용하면 기능의 기준 상태를 확인할 수 있습니다.
기준 로고는 모든 자료에서 사용할 수 있도록 라이선스가 부여됩니다. PNG 및 SVG 형식으로 다운로드하세요.
기준을 사용하는 위치를 알려주세요.
Baseline이 사용되는 위치를 확인하고 싶습니다. PR을 만들고 실제 환경의 기준에 사용한 위치의 링크를 추가합니다.
다른 통합 아이디어가 있으신가요?
다른 방식으로 Baseline을 통합할 아이디어가 있으신가요? 이 정보를 포함할 수 있는 개발자 도구가 있거나 관리 패널에서 사용되는 기준 버전을 공유할 수 있는 제품이 있을 수 있습니다. 아이디어에 관한 문제를 제기해 주시면 기꺼이 도와드리겠습니다.