2024년 기준: 웹 개발자를 위한 더 많은 도구

게시일: 2024년 12월 10일

2024년은 기준 프로젝트에 있어 흥미로운 해였습니다. 기본 데이터 세트가 거의 완성되었으며 웹 플랫폼 상태 대시보드기준 상태 위젯과 같은 도구가 출시되었습니다. RUM 보관처리소와 같은 다른 프로젝트에서도 기준을 채택하기 시작했습니다. 이 게시물에서는 2024년의 기준선을 되돌아봅니다.

기준점이란 무엇인가요?

기준점은 데스크톱과 모바일 모두에서 모든 핵심 브라우저에서 지원되는 웹 기능을 라벨링합니다. 사용되는 기능이 기준의 일부인 경우 브라우저 호환성 수준을 신뢰할 수 있습니다.

기능을 지원하는 모든 브라우저가 새롭게 제공되는 로고
기준 MDN의 콘텐츠 표시 상태 페이지에 표시되는 새로 사용 가능한 로고입니다.

기준점의 다양한 라벨과 웹 지형지물이 기준점이 되는 방식에 관한 자세한 내용은 기준점 사이트를 확인하거나 기준점으로 안심하고 빌드하기를 시청하세요.

2024년 기준 프로젝트

web-features 작업이 81% 완료되었습니다.

web-features는 웹 플랫폼 기능의 공유 카탈로그를 빌드하기 위한 노력입니다. 각 지형지물에는 그룹과 정의가 할당되며 이 데이터 세트에는 기준 지원 데이터가 표시됩니다.

YouTube는 올해 이 작업을 진행하기 위해 많은 노력을 기울였습니다. 현재 기능 키의 81% 가 web-features npm 패키지를 사용하여 매핑되고 사용됩니다. web-features은 기준 상태의 정보 소스입니다.

새로운 웹 플랫폼 상태 대시보드

웹 플랫폼 상태 대시보드는 여러 브라우저에서 웹 플랫폼 기능 구현에 대한 통계를 제공합니다. 이 대시보드는 web-features 데이터를 기반으로 하므로 웹 기능 작업이 점점 완료됨에 따라 이 대시보드의 안정성이 크게 개선되었습니다.

특정 기능의 진행 상황을 추적하거나 필터링하여 기준점 2024와 같은 기능 집합을 확인할 수 있습니다. 이 대시보드는 Can I Use 및 MDN의 호환성 데이터와 같은 기존 리소스를 보완하여 웹 플랫폼의 발전에 대한 더 폭넓은 시야를 제공합니다.

대시보드에 관한 자세한 내용은 웹 플랫폼 대시보드 발표를 참고하세요. 출시 이후 group:snapshot:와 같은 더 많은 필터가 추가되었습니다. 예를 들어 snapshot:ecmascript-2023를 사용하면 ES2023에 포함된 기능을 확인할 수 있습니다.

<baseline-status> 위젯

<baseline-status> 웹 구성요소도 웹 지형지물 데이터를 사용하며 이제 자체 사이트와 슬라이드에서 사용할 수 있습니다. npm에서 설치한 후 기능을 언급할 때마다 구성요소를 사용합니다.

이미지로 렌더링된 baseline-status 위젯
<baseline-status> 위젯

기준 상태 웹 구성요소 사용에 대해 자세히 알아보세요.

공식 사이트 및 로고

기준은 W3C WebDX 커뮤니티 그룹에서 소유하고 있으며, 올해 기준 프로젝트의 공식 페이지를 만들었습니다.

프로젝트에서 기준을 채택하거나, 기준에 관해 작성하거나, 기준에 관해 강연하는 경우 실제 사용 중인 기준 페이지에 프로젝트를 표시하도록 풀 리퀘스트를 제출할 수 있습니다.

프로젝트에서 기준선을 사용할 때는 이름 및 로고 사용 가이드라인을 확인하세요. 로고는 웹 기능의 상태를 표시할 때마다 사용할 수 있는 라이선스가 부여됩니다.

상호 운용성 프로젝트를 통해 많은 기능을 Baseline에서 새로 사용할 수 있게 되었습니다.

상호 운용성 프로젝트는 웹의 상호 운용성을 개선하기 위한 크로스브라우저 노력입니다. 이 프로젝트의 기능은 교차 브라우저 구현을 타겟팅하여 '새로 사용 가능' 기준이 되는 시간을 단축합니다. Interop 2024 기간 동안 선언적 Shadow DOM, font-size-adjust, requestVideoFrameCallback, text-wrap: balance가 기준 2024에 포함되었으며, 그 밖에도 많은 기능이 완료 단계에 있습니다.

RUM 통계

RUM 보관처리의 통계 페이지는 기준을 통합한 최초의 도구였습니다. 데이터를 기반으로 각 기준 연도에 포함된 사용자 수를 확인할 수 있습니다. 이렇게 하면 널리 사용 가능한 기준선을 채택하는 대신 프로젝트의 기준 연도를 선택할 수 있습니다.

자세한 내용은 RUM 보관 파일과의 기준점 통합을 참고하세요.

This Is Baseline 동영상 시리즈

새로 제공되는 기준치 기능을 간단하고 빠르게 설명해 드리기 위해 #thisisbaseline이라는 동영상 시리즈를 게시하고 있습니다. 60초 이내에 새로운 Set 메서드, Screen Wake Lock API, CSS 하위 그리드 등에 대해 알아보세요.

여기에서 기준점 동영상을 모두 확인하세요.

직접 채팅으로 문의해 주세요.

올해 Baseline을 소개하고 사용자의 의견을 듣고 질문에 답변하기 위해 여러 회의에 참석했습니다. 다음은 YouTube에서 진행한 몇 가지 강연입니다.

10월에 레이첼이 FITC Web Unleashed에서 진행한 프레젠테이션, 11월에 피트가 connect.tech에서 진행한 세션, 마리코가 JSNation에서 진행한 강연을 확인하세요. 2025년에도 멋진 이벤트에서 만나뵐 수 있기를 기대합니다.

2024년 기준의 내용

한 해가 저물어 가는 가운데, 기준 프로필 2024에 포함되는 기능이 무엇인지 확인할 수 있습니다. 주요 내용은 다음과 같습니다.

@property

CSS 맞춤 속성 (CSS 변수라고도 함)은 널리 사용되는 기능입니다. 2024년 7월부터 모든 핵심 브라우저에서 @property 규칙을 사용하여 유형, 기본값, 상속이 있는 맞춤 속성을 정의할 수 있는 기능이 지원되었습니다.

새 Set 메서드

Set은 ES2015부터 JavaScript의 일부였지만 올해는 intersectionunion와 같은 Set에서 수학 연산을 실행하는 더 많은 메서드가 추가되고 모든 핵심 브라우저에서 지원됩니다.

AVIF

AVIF는 일반적으로 WebP, JPEG, PNG, GIF와 같은 다른 이미지 형식보다 압축률이 우수한 최신 이미지 형식입니다. AVIF는 2024년 1월부터 모든 핵심 브라우저에서 지원됩니다.

그 밖의 다양한 신호

물론 올해 기준이 된 기능은 이 외에도 많습니다. 2024년 중에 기준선에 포함된 기능은 여기에서 확인하세요.

마무리

2022년 5월에 기준 프로젝트가 발표되었을 때는 기준의 개념과 초기 정의에 불과했습니다. 이 게시물에서는 기준선을 모든 개발자의 워크플로에 포함할 수 있는 것으로 전환하기 위해 수행한 작업 중 일부를 강조 표시합니다.

기준 프로젝트에 참여해 주신 모든 분들께 감사드립니다.

web-features에 참여한 개인: 빅터 앨런, 디트리히 아얄라, 다니엘 벡, 패트릭 브로세트, 소ndra 에비, 아드리아나 자라, 마리코 코사카, 피트 르페이지, 플로리안 슐츠, 제임스 스튜키 웨버, 퀸구버그 (LP)

<baseline-status> 위젯: 에와 가스페로비츠 및 Chrome DevRel팀

웹 플랫폼 상태 대시보드: 파노스 아스티타스, 카일 주, 제임스 스콧, 다니엘 스미스, 제이슨 쉬우

Google의 기준팀: 아론 아바르노, 레이첼 앤드류, 토니 코니웨이, 필립 예겐슈테드, 아드리아나 자라, 마리코 코사카, 피트 르페이지, 난두 나이르, 알리 스피박, 카디르 토팔

감사의 인사: CanIUse의 Alexis Deveria, Claas Augner, Hermina Condei, Florian Dieminger, Ruth John, MDN의 Leo McArdle, RUM Archive의 Nic Jansma 및 Robin Marx, 상호 운용성 프로젝트 참여자, Apple, Firefox, Igalia, Microsoft, Open Web Docs, OddBird, WebDX 커뮤니티 그룹 회원.