웹에는 엄청난 양의 기능이 있습니다. 브라우저 호환성 데이터 프로젝트에는 14,000개 이상의 항목이 나열되어 있습니다! 이 모든 것을 어떻게 이해할까요?

오랫동안 답변되지 않은 질문입니다. 예, 모든 웹 개발자는 caiuse.com을 사용합니다. 아니면 구글에 검색하거나 chatgpt에 물어볼 수도 있습니다. 문제는 이러한 도구가 특정 질문에 대한 답변을 제공하지만 더 큰 그림이나 정보 소스에 대한 링크가 부족하다는 것입니다.

WebDX 그룹

더 이상은 아닙니다! WebDX 그룹은 이제 웹 플랫폼을 중심으로 사물을 구성하고 분류하고 이름을 지정하는 놀라운 작업을 수행하고 있습니다(← 아시다시피 이것이 어려운 부분입니다). 그들은 웹과 브라우저에 대한 전반적인 개발자 경험을 조화로운 방식으로 개선하려고 노력하고 있습니다.

WebDX는 W3C에 속한 커뮤니티 그룹입니다. 저장소에서 그들이 무엇을 요리하고 있는지 볼 수 있습니다. 나에게 가장 흥미로운 결과는 웹 기능 저장소입니다. 그들이 한 일은 엄청난 양의 특정 기능을 더 이해하기 쉬운 상위 수준 기능 세트로 분류하는 것입니다.

예를 들어 새로 사용할 수 있는 기능 중 하나는 방법 설정입니다. 세트를 조작하는 새로운 방법은 단일 기능이 될 수 있습니다. 그러나 단일 상위 수준 기능으로 전달되고 문서화되면 훨씬 더 유용해집니다.

문서

다른 부분은 기능에 대한 자세한 정보를 찾는 방법입니다. 글쎄, 이것이 Open Web Docs 이니셔티브가 시작된 곳입니다. MDN은 항상 훌륭한 참고 자료였지만 실습 콘텐츠가 부족했습니다. Open Web Docs 그룹은 이를 바꾸려고 노력하고 있습니다. 그들은 MDN 웹 문서에 대한 수많은 새로운 튜토리얼, 가이드, 설명은 물론 기본 데이터인 BCD(브라우저 호환 데이터)에 대한 업데이트도 준비하고 있습니다.

한 가지 예는 상대 색상에 대한 MDN 페이지입니다. 이는 상위 수준의 웹 기능에 깔끔하게 매핑됩니다. 각 색상 기능에 대한 개별 참조 페이지보다 해당 기능에 대한 더 나은 이해와 맥락을 제공합니다.

설문 조사

위의 노력에서 정말 좋은 점은 그들이 정말로 협력하고 싶어한다는 것입니다. 그들은 The State of HTML 및 The State of CSS와 같은 설문 조사에서 입력을 받고 나중에 웹 기능에 대해 동일한 이름 집합을 사용하여 해당 기능에 대한 설문 조사 결과를 추적할 수 있습니다.

그런데, 이 설문조사를 작성하는 동안 "읽기 목록에 추가" 버튼을 클릭할 수 있습니다. 당신이 몰랐던 것들에 대해 더 자세히 배울 수 있는 MDN 링크를 제공할 것입니다.

현실

좋아요. 그런데 웹이 점점 좋아지고 있나요? 정말 그렇습니다!

브라우저 전반에 걸쳐 원하는 기능과 실제 가용성 사이의 격차를 줄이려는 계획은 분명합니다. 즉, Interop 프로젝트는 모든 주요 브라우저에서 일련의 기능이 최대한 완벽하게 구현되도록 보장합니다. 이 프로젝트는 매년 새로운 반복이 있습니다.

이러한 기능이 얼마나 잘 구현되었는지는 웹 플랫폼 테스트를 사용하여 측정됩니다. 모든 브라우저에 대해 동일한 테스트 세트가 실행됩니다. 이것이 바로 브라우저 기능의 실제 상태를 반영하는 멋진 비율을 확보한 이유입니다.

기준선

모든 주요 브라우저에서 기능이 구현되는 순간은 매우 중요한 순간입니다. 위에서 설명한 대로 기능을 훌륭하게 그룹화했으므로 누락된 유일한 것은 현재 이름입니다. 그리고 거기에 있습니다: 기능은 모든 주요 브라우저에서 지원될 때 새로 사용할 수 있는 Baseline입니다. 그리고 해당 기능은 신규 출시된 지 2년 반이 지나면 광범위하게 사용할 수 있게 됩니다.

Google에서 시작한 기준 아이디어에 대한 자세한 내용은 web.dev에서 확인할 수 있습니다.

시각적 대시보드

더 시각적인 방식으로 볼 수 있으면 모든 것이 더 이해되기 시작합니다. 잘 디자인된 표, 그래프, 리소스에 대한 편리한 링크가 바로 거기에 있습니다...

이는 유용한 대시보드를 만들기 위한 몇 가지 시도로 구현되었습니다. 모두 확인해 보세요. 각각은 주제에 대해 서로 다른 해석을 갖고 있습니다.

• WebDX 그룹의 사람들이 만든 간단한 대시보드
• Google Chrome 팀의 기능별 웹 플랫폼 테스트 통과에 대한 멋진 그래프
• 더 대화형 버전을 만들려는 시도

가끔 이를 사용하여 일반적인 새로운 내용이나 폭넓은 채택 상태의 새로운 내용을 확인할 수 있습니다. 또한 새 프로젝트를 시작하고 어떤 기능 세트가 실제로 사용 가능하고 충분히 지원되는지 결정할 때 좋은 참고 자료가 됩니다.

웹 기능 탐색기는 정보를 깔끔하게 표시합니다.

Webstatus.dev는 그래프로 통과한 웹 플랫폼 테스트 측면에서 기능의 실제 진행 상황을 보여줍니다.

내 웹 플랫폼 기능 대시보드에서는 기능 필터링 및 정렬이 가능합니다.

미래

일부 기능은 최근 모든 브라우저에서 매우 빠르게 구현되었습니다. 그러나 일부 브라우저 제조업체에서는 일부를 좋은 아이디어로 간주하지 않을 수도 있습니다. 다음 사이트에서 제공되거나 제공되지 않을 수 있는 항목에 대한 자세한 정보를 확인할 수 있습니다.

• Mozilla 표준 입장
• 웹킷 팀 표준 위치
• Google 크롬 기능 로드맵

결론

웹 플랫폼이 발전하는 것을 지켜보는 것은 흥미롭습니다. 피드백 루프가 개선되고 있습니다. 상호 운용성은 여러 분야에서 향상되고 있습니다.

오랫동안 웹 기능이 포함된 유용한 대시보드를 갖고 싶었는데, 갑자기 데이터 품질이 너무 좋아서 이틀 만에 나만의 대시보드를 만들 수 있었습니다.