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