web-features 패키지로 기준 도구 만들기

Jeremy Wagner
Rick Viscomi

게시일: 2025년 9월 12일

Baseline을 위한 새로운 도구를 사용하면 현재 웹 애플리케이션에서 안전하게 사용할 수 있는 웹 기능을 확인할 수 있습니다. 린터 및 IDE 기능과 같은 이러한 도구는 최신 브라우저에서의 지원에 관한 데이터가 포함된 웹 플랫폼 기능의 데이터 소스를 사용합니다.

웹 플랫폼 상태 대시보드는 이러한 기능의 데이터 소스 중 하나이며 쿼리 가능한 HTTP API를 제공합니다. 이 데이터 소스를 필요에 따라 쿼리하는 것은 모든 도구에 적합하지 않습니다. 많은 도구 사용 사례에서 web-features npm 패키지는 로컬에서 사용하는 웹 기능 데이터의 더 안정적이고 실용적인 버전입니다. 이 가이드에서는 web-features 패키지를 사용하여 자체 기준 도구를 개발하는 방법을 보여줍니다.

web-features 패키지 시작하기

먼저 프로젝트에 종속 항목으로 패키지를 설치합니다.

npm install web-features

설치가 끝나면 web-features 패키지에서 이름이 지정된 내보내기를 하나 이상 프로젝트로 가져옵니다.

import { features, groups, browsers, snapshots } from 'web-features';

목표에 따라 이러한 내보내기가 모두 필요하지 않을 수도 있습니다. 이러한 내보내기는 다음 정보를 제공합니다.

  • features: 객체의 배열로, 각 객체는 웹 기능을 나타냅니다. 가장 자주 사용하게 될 내보내기입니다.
  • browsers: 브라우저를 설명하는 객체의 배열입니다.
  • groups: 기능의 논리적 그룹화를 정의하는 객체의 배열입니다. CSS, JavaScript, 더 구체적인 그룹과 같은 웹 플랫폼 기능의 하위 집합을 타겟팅하는 것이 목표인 경우에 유용합니다.
  • snapshots: ES2023, ES2022, 기타 ECMAScript 버전과 같은 해당 JavaScript 기능의 ECMAScript 버전을 포함합니다.

기능 내보내기는 기준 도구를 빌드하기 위한 다음 속성을 제공합니다.

  • id: 기능의 고유 식별자입니다. 예를 들어 CSS 그리드의 식별자는 "grid"입니다. 참고: 데이터 객체 내의 속성이 아닙니다. 객체 키입니다.
  • compat_features: 기능에 포함된 개별 BCD 키의 배열입니다.
  • name: 기능의 사람이 읽을 수 있는 문자열 이름입니다(예: "Container Queries").
  • description: 기능에 대한 간단한 설명입니다.
  • group: 특성이 속한 그룹입니다. 이는 groups 내보내기에서 찾은 그룹 데이터에 해당합니다.
  • baseline: 기능의 기준 상태입니다. 다음 세 가지 값 중 하나일 수 있습니다.
    1. false: 기능의 상태가 제한적 사용 가능입니다.
    2. "low': 이 기능은 Baseline Newly available입니다.
    3. "high: 이 기능은 기준선으로 널리 제공됩니다.
    4. baseline_high_date: 기능이 널리 사용 가능한 기준이 된 날짜입니다. 참고: 이 기능은 Baseline Widely available이 아닌 경우 사용할 수 없습니다.
    5. baseline_low_date: 이 기능이 기준선으로 새로 제공된 날짜입니다. 참고: 제한된 사용 가능 기능에는 사용할 수 없습니다.

다음은 CSS 하위 그리드 기능의 전체 데이터 객체입니다.

"subgrid": {
  "caniuse": "css-subgrid",
  "compat_features": [
    "css.properties.grid-template-columns.subgrid",
    "css.properties.grid-template-rows.subgrid"
  ],
  "description": "The subgrid value for the grid-template-columns and grid-template-rows properties allows a grid item to inherit the grid definition of its parent grid container.",
  "description_html": "The <code>subgrid</code> value for the <code>grid-template-columns</code> and <code>grid-template-rows</code> properties allows a grid item to inherit the grid definition of its parent grid container.",
  "group": "grid",
  "name": "Subgrid",
  "spec": "https://drafts.csswg.org/css-grid-2/#subgrids",
  "status": {
    "baseline": "low",
    "baseline_low_date": "2023-09-15",
    "support": {
      "chrome": "117",
      "chrome_android": "117",
      "edge": "117",
      "firefox": "71",
      "firefox_android": "79",
      "safari": "16",
      "safari_ios": "16"
    }
  }
}

groups 내보내기는 다음과 같은 구조의 기능 그룹에 관한 데이터를 제공합니다.

  • id: 그룹의 고유 식별자입니다. 예를 들어 CSS 기능의 ID는 'css'입니다. 참고: 그룹 객체 내의 속성이 아닙니다. 객체 키 자체입니다.
  • name: 사람이 읽을 수 있는 그룹 이름입니다.
  • parent: 그룹의 상위 그룹 ID입니다. 그룹에 상위 항목이 없는 경우에는 사용할 수 없습니다.

예

다음 예에서는 web-features package를 사용하여 기준 도구를 빌드하는 데 필요한 데이터를 가져오는 방법을 보여줍니다.

특정 기능의 기준 상태 조회

import { features } from 'web-features';

function getBaselineStatus (featureId) {
  return features[featureId]?.status.baseline;
}

이 예는 status.baseline 속성에서 사용할 수 있는 기준 데이터를 가져오기 위해 기능의 ID를 지정하는 web-features 패키지의 가장 직접적인 사용 사례를 나타냅니다. 이 속성은 기능이 제한적으로 제공되는지, 새로 제공되는지, 널리 제공되는지를 나타냅니다. 후자의 두 경우에서는 기능이 특정 기준선에 도달한 시점을 설명하는 날짜에도 액세스할 수 있습니다.

특정 BCD 키의 기준 상태 조회

BCD는 브라우저 전반의 기능 지원을 카탈로그화하기 위해 MDN에서 유지관리하는 프로젝트인 browser-compat-data를 나타냅니다. BCD 키는 사양에 정의된 특정 CSS 속성 값이나 동작 하위 기능과 같은 세부 기능에 해당합니다.

web-features 프로젝트는 관련 BCD 키를 각 기능의 compat_features 배열로 그룹화합니다. 전체 기능의 기준 상태가 아닌 하나의 BCD 키의 기준 상태가 필요한 경우가 있습니다. 예를 들어 CSS 린터를 빌드하고 속성-값 쌍이 주요 브라우저에서 호환되는지 알아야 하는 경우 기능 수준 데이터는 너무 거칩니다. 이는 패키지가 모든 구성 BCD 키에 걸쳐 각 기능을 집계하기 때문이며 일부 키는 다른 키보다 브라우저 지원이 더 좋습니다.

BCD 키의 기준 상태를 조회하려면 기능 객체의 status.by_compat_key 속성을 검사하세요 (web-features 3.6.0 이상에서 사용 가능).

import { features } from 'web-features';

function getBaselineStatus (featureId, bcdKey) {
  return features[featureId]?.status.by_compat_key[bcdKey];
}

예를 들어 getBaselineStatus('outline', 'css.properties.outline')의 출력은 다음과 같습니다.

{
  "baseline": "low",
  "baseline_low_date": "2023-03-27",
  "support": {
    "chrome": "94",
    "chrome_android": "94",
    "edge": "94",
    "firefox": "88",
    "firefox_android": "88",
    "safari": "16.4",
    "safari_ios": "16.4"
  }
}

기준선 상태별로 기능 정렬

이 예시에서는 features 객체의 모든 기능을 반복하고 기준 상태별로 배열로 정렬합니다.

import { features } from "web-features";

const webFeatures = Object.values(features);

const widelyAvailable = webFeatures.filter(feature => {
  return feature.status.baseline === 'high';
});

const newlyAvailable = webFeatures.filter(feature => {
  return feature.status.baseline === 'low';
});

const limitedAvailability = webFeatures.filter(feature => {
  return feature.status.baseline === false;
});

이 예에서는 도구에서 status.baseline 속성을 사용하는 방법을 보여줍니다. 예를 들어 웹 애플리케이션에서 이 접근 방식을 사용하여 기준 상태별로 모든 웹 기능을 목록으로 표시할 수 있습니다.

그룹 내의 모든 기능 찾기

지금까지 표시된 모든 예에서는 features 내보내기를 사용했지만 groups 내보내기는 그룹 내에서 모든 기능을 논리적으로 정리합니다. 즉, 뷰 전환에 포함된 모든 기능을 찾을 수 있습니다.

import { features, groups } from 'web-features';

const groupKeys = Object.keys(groups);
const featuresData = Object.values(features);

const viewTransitionsGroup = groupKeys.find(groupKey => {
  return groupKey === 'view-transitions';
});

const viewTransitionsFeatures = featuresData.filter(feature => {
  return feature.group === viewTransitionsGroup;
});

features 및 group 내보내기 간의 교차점을 사용하면 속한 그룹별로 웹 기능 검색 범위를 좁힐 수 있습니다.

요약 정리

조회를 사용하여 유용한 도구를 빌드할 수 있습니다(예: CSS 린터 만들기).

CSS 린터는 at-rule, 의사 요소, 속성, 속성-값 쌍을 평가합니다. 기준선 린터의 경우 상위 기능이 아닌 BCD 키로 각 토큰의 상태를 조회합니다.

CSSTree와 같은 파서는 CSS를 토큰화하여 스타일시트를 추상 구문 트리 (AST)로 나눕니다. 다음 예시는 일반 클래스 선택기와 스타일 선언을 사용하는 CSS 규칙을 보여줍니다.

.foo {
  word-break: auto-phrase;
}

AST는 다음과 같이 표시됩니다.

{
  "type": "StyleSheet",
  "children": [
    {
      "type": "Rule",
      "prelude": {
        "type": "SelectorList",
        "children": [
          {
            "type": "Selector",
            "children": [
              {
                "type": "ClassSelector",
                "name": "foo"
              }
            ]
          }
        ]
      },
      "block": {
        "type": "Block",
        "children": [
          {
            "type": "Declaration",
            "important": false,
            "property": "word-break",
            "value": {
              "type": "Value",
              "children": [
                {
                  "type": "Identifier",
                  "name": "auto-phrase"
                }
              ]
            }
          }
        ]
      }
    }
  ]
}

AST를 탐색하면서 속성 선언을 찾으면 해당 속성 이름을 상응하는 BCD 키에 매핑하여 기준 상태를 확인합니다. BCD는 CSS 속성을 css.properties 객체 아래에 분류하므로 해당 BCD 키는 css.properties.word-break입니다.

그런 다음 해당 BCD 키와 연결된 기능을 찾아 상태를 조회합니다.

// Assuming we only know the BCD key and not the feature ID.
const bcdKey = 'css.properties.word-break';
const [featureId, feature] = Object.entries(features).find(([id, feature]) =>
  feature.compat_features?.includes(bcdKey)
) || [];
const status = feature?.status.by_compat_key[bcdKey];

word-break 속성의 기준 상태는 다음과 같습니다.

{
  "baseline": "high",
  "baseline_high_date": "2018-03-30",
  "baseline_low_date": "2015-09-30",
  "support": {
    "chrome": "44",
    "chrome_android": "44",
    "edge": "12",
    "firefox": "15",
    "firefox_android": "15",
    "safari": "9",
    "safari_ios": "9"
  }
}

"high" 기준 상태는 속성이 널리 제공됨을 나타내므로 린터에서 경고를 발행할 필요가 없습니다. 그런 다음 속성 값을 검사합니다.

AST에 이 속성의 값이 auto-phrase로 표시됩니다. 해당 BCD 키를 가져오려면 값을 상위 속성의 BCD 키(css.properties.word-break.auto-phrase)에 추가합니다.

이 경우 web-features는 word-break: auto-phrase 속성-값 쌍의 상태가 기준이 아님을 보여줍니다.

{
  "baseline": false,
  "support": {
    "chrome": "119",
    "chrome_android": "119",
    "edge": "119"
  }
}

이 린터 예의 정보를 사용하여 이 속성-값 쌍이 기준이 아님을 개발자에게 경고합니다. 이 경고를 통해 개발자는 주요 브라우저 엔진에서 예상대로 작동하지 않는다는 것을 알 수 있습니다.

실제 사례

이전 예에서는 web-features 패키지의 기본 사용법을 보여줍니다. 이미 이 데이터를 활용하는 도구가 많이 있습니다. 예를 들면 다음과 같습니다.

이 데이터 소스를 사용하여 기준 도구를 빌드하는 방법의 예가 더 많이 있습니다. 프로젝트가 그중 하나가 되기를 바랍니다.