게시일: 2025년 5월 20일
모든 브라우저에서 웹 플랫폼 기능이 구현되면 기준 새로 사용 가능이 됩니다. 30개월 후에는 해당 기능이 기준 널리 사용 가능이 되며, 이는 대부분의 웹사이트에서 호환성 문제 없이 기능을 채택할 수 있는 기준점입니다. 이 가이드에서는 기준을 사용하는 방법과 웹사이트 사용자가 제공하는 데이터를 사용하여 기준 타겟을 선택하는 방법을 설명합니다.
기준 타겟이란 무엇인가요?
기준 타겟은 개발자가 기준 상태에 따라 지원하도록 선택할 수 있는 웹 기능 그룹입니다. 이동 타겟과 고정 타겟이라는 두 가지 유형의 기준 타겟이 있습니다.
기준 널리 사용 가능 또는 기준 새로 사용 가능과 같은 이동 타겟은 포함된 기능 집합이 시간이 지남에 따라 변경될 수 있는 타겟입니다. 이동 타겟은 새 브라우저 버전이 출시될 때 지원되는 기능 집합이 자동으로 발전하기를 원하는 경우에 적합합니다.
고정 타겟은 기능 집합이 시간이 지나도 변경되지 않는 타겟입니다. 일반적으로 고정 타겟은 연도를 기준으로 합니다. 예를 들어 기준 2023은 2023년에 기준 새로 사용 가능이 된 웹 기능 집합이 포함된 고정 타겟입니다. 기준 2023에는 2023년 이후에 기준이 된 기능이 포함되지 않으므로 기준 2023 기능 집합은 변경되지 않습니다.
고정 타겟은 예측 가능성과 결정론이 가장 중요한 경우에 적합하지만 시간이 지남에 따라 오래될 수 있으므로 고정 타겟을 사용할 때는 타겟을 정기적으로 재평가하는 것이 좋습니다.
타겟을 선택하는 이유는 무엇인가요?
웹에서 기능 채택은 호환성 문제로 인해 지연되며, 이는 웹이 최대한의 성능을 발휘하지 못하도록 합니다. 기준은 브라우저의 기능 지원에 관한 질문을 명확히 할 뿐만 아니라 특정 기능을 사용할 수 있는 시기 에 관한 질문을 명확히 하는 데도 도움이 될 수 있습니다. 잠재고객과 요구사항을 반영하는 타겟을 선택하면 개별 기능을 하나씩 확인할 필요 없이 해당 타겟 그룹 내에서 기능을 자신 있게 사용할 수 있습니다.
데이터를 사용하여 기준 타겟 선택
선택할 적절한 기준 타겟을 파악하는 것은 가능한 경우 데이터 기반 의사 결정이어야 합니다. 데이터가 있으면 선택할 타겟을 더 쉽고 더 많은 정보를 바탕으로 결정할 수 있습니다.
사이트에 실제 사용자 모니터링 데이터가 있는 경우 기준 타겟이 사용자에게 어떻게 매핑되는지 알아볼 수 있습니다. 예를 들어 Google 애널리틱스를 사용하는 경우 Google 애널리틱스 기준 검사기를 사용하여 이 정보를 무료로 얻을 수 있습니다.
이 도구를 사용하려면 Google 계정으로 인증하고 도구에 Google 애널리틱스 데이터를 볼 수 있는 읽기 전용 권한을 부여해야 합니다. 그런 다음 기준 타겟 데이터를 생성할 Google 애널리틱스 속성을 선택합니다. 이 단계를 완료하면 다음과 유사한 출력이 표시됩니다.
이제 다른 도구에서 기준 지원을 구현하기 시작했으며, 이를 통해 잠재고객이 특정 타겟을 얼마나 지원하는지 동적으로 확인할 수 있습니다. 예를 들어 RUMvision에는 각 기준 연도에 대한 잠재고객의 지원 정도를 보여주는 대시보드가 포함되어 있습니다.
애널리틱스 또는 RUM 제공업체에 아직 기준 타겟 보고서가 없는 경우 어떻게 해야 하나요?
아직 기준 타겟 보고서를 제공하지 않지만 브라우저 버전에 관한 데이터가 있는 애널리틱스 또는 RUM 도구를 사용하는 경우 실제 데이터를 baseline-browser-mapping 모듈의 브라우저 버전 매핑과 결합할 수 있습니다. 이 모듈은 브라우저를 이름과 버전별로 기준 연도 및 널리 사용 가능에 대한 지원 상태에 매핑하는 JavaScript 함수인 getAllVersions()를 제공합니다. 이러한 매핑은 배열, 키가 지정된 객체 또는 CSV로 제공될 수 있습니다. 예를 들어 Google 애널리틱스 기준 검사기는 이 모듈을 사용하여 애널리틱스 데이터를 기준 타겟과 결합합니다.
이 함수의 출력은 매일 업데이트되는 호스팅된 JSON 또는 CSV 파일로도 제공됩니다. all_versions_with_supports.csv 파일에는 다음 필드를 사용하여 애널리틱스 제공업체의 브라우저 버전 데이터와 일치시킬 수 있는 데이터가 포함되어 있습니다.
browser:baseline-browser-mapping에서 사용되는 브라우저의 이름입니다.version: 브라우저의 버전입니다. 일부 브라우저는 메이저 버전 번호만 사용하고 다른 브라우저는 major.minor 버전 번호를 사용합니다.year: 이 브라우저 버전이 지원하는 기준 연도 특성 세트입니다. 2015년 7월에 기준 지원을 결정하기 전에 브라우저 버전이 출시된 경우 이 필드에는pre_baseline이 포함됩니다.supports: 이 필드에는 이러한 기능 집합을 지원하는 브라우저 버전의 경우widely또는newly가 포함되며, 이러한 기능 집합을 지원하지 않는 버전의 경우 비어 있습니다. 새로 사용 가능을 지원하는 모든 브라우저 버전은 널리 사용 가능도 지원합니다.release_date: 이 브라우저 버전이 출시된 날짜입니다(사용 가능한 경우).engine: 핵심 Baseline 브라우저의 다운스트림에 있는 브라우저의 엔진 이름입니다. Blink 기반 브라우저만 포함되지만 향후 다른 브라우저 엔진도 표시될 수 있습니다.engine_version: 이 브라우저 버전이 구현하는 Chromium 버전입니다. 이는 다운스트림 버전이 지원하는 기준 특성 세트를 결정하는 데 사용됩니다.
이 파일은 새 브라우저 버전이 출시되고 다양한 브라우저의 지원 상태가 변경됨에 따라 자주 업데이트됩니다. 매일 데이터를 새로고침해야 합니다.
실제 사용자의 지원 데이터가 없는 경우 어떻게 해야 하나요?
기준인 기능과 관련하여 실제 사용자 데이터를 가져올 수 없는 상황에 처할 수 있습니다. 좋은 소식은 RUM 보관 통계를 통해 다양한 기준 타겟에 대한 지원을 대략적으로 파악할 수 있으며, 국가 수준으로 필터링할 수도 있다는 것입니다. 이 데이터는 웹사이트 사용자에 국한되지 않습니다. 이는 다음 가정이 일반적으로 안전하다는 것을 보여주는 일반적인 정보 도구입니다.
- 현재 연도 또는 전년도와 같은 최신 기준 타겟은 사용자 간에 지원이 가장 적을 가능성이 높습니다. 하지만 다른 기준 타겟과 마찬가지로 시간이 지남에 따라 지원이 개선됩니다.
- 이전 기준 타겟, 특히 기준 널리 사용 가능은 잘 지원됩니다. 널리 사용 가능은 30개월 기간이 지남에 따라 발전하는 훌륭한 타겟입니다.
- 30개월 널리 사용 가능 기간을 훨씬 넘어서는 이전 기준 타겟도 가장 잘 지원됩니다. 널리 사용 가능은 좋은 기본 타겟이지만 엄격한 SLA가 필요한 특별한 사용 사례입니다.
5년이 넘은 기준 타겟을 선택하더라도 지금 사용하지 않는 기능을 채택할 수 있을 가능성이 높습니다. 가장 좋은 시나리오는 이러한 기능을 이미 사용하고 있지만 필요하지 않은 폴리필을 사용하고 있을 수 있다는 것입니다.
프로젝트에서 선택한 기준 타겟을 어떻게 적용하나요?
Browserslist는 지원하려는 브라우저를 타겟팅하는 데 흔히 사용되는 방법입니다. 번들러 및 Babel, PostCSS와 같은 기타 관련 도구에서 특정 코드 비트를 변환하거나 폴리필해야 하는지 결정하는 데 사용됩니다.
이제 기준 타겟을 선택할 때 이를 유효한 Browserslist 쿼리로 지정할 수 있도록 Browserslist와 함께 기준을 사용할 수 있습니다. 이렇게 하면 프로젝트의 도구가 선택한 타겟에 따라 코드를 변환합니다. 자세한 내용은 Browserslist와 함께 기준 사용을 참고하세요.
기준 타겟을 충족하지 않는 기능은 어떻게 해야 하나요?
기준 타겟을 선택한 후 사용하고 싶지만 해당 타겟에 속하지 않는 기능이 있을 수 있습니다. 기준은 여기서 무엇을 해야 하는지 알려주지 않으며, 이러한 기능을 사용할지 고려할지는 빌드 중인 웹사이트의 유형과 예상 잠재고객에 따라 다릅니다.
예를 들어 전자상거래 또는 B2B 웹사이트는 지원 기준점을 낮추고 사용자가 지원할 때 문제를 처리할 수 있지만 정부 웹사이트는 높은 지원 기준점이 필요할 수 있습니다. 여기서 중요한 경험 법칙은 모든 웹 기능이 동일한 방식으로 실패하는 것은 아니다 라는 것입니다. 실패 방식에 따라 기능을 분류하는 방법은 여러 가지가 있지만 유용할 수 있는 기능을 분류하는 한 가지 방법은 다음과 같습니다.
- 개선: 지원되지 않는 브라우저에서 기능을 사용해도 환경이 손상되지 않습니다. 환경이 저하될 수는 있지만 사용자가 알아차리지 못할 수도 있습니다. 예:
loading="lazy". - 추가: 이 기능은 페이지 스타일 지정 또는 일부 함수와 같이 눈에 띄는 추가적인 혜택을 제공합니다. 이 기능을 지원하는 브라우저에서 비교하지 않는 한 기능이 지원되지 않는 경우 사용자가 차이점을 알아차리지 못할 수 있습니다. 예: 하위 그리드
- 중요: 이 기능이 지원되지 않으면 사용자에게 부정적인 사용자 환경이 제공되며, 완전히 손상될 수도 있습니다. 예: 중앙 및 필수 기능으로 사용되는 파일 시스템 액세스 API
타겟 외부의 특정 기능이 생각보다 더 잘 지원된다는 것을 알 수도 있습니다. 특정 기능을 지원하는 사용자의 수를 파악할 수 있습니다. Can I Use에는 애널리틱스 데이터에 대해 개별 기능의 지원을 확인할 수 있는 기능이 있습니다. RUMvision에는 드릴다운하여 기능 수준 데이터를 탐색하는 기능도 있습니다(유용한 경우).
이러한 방식으로 기준 타겟을 사용하여 신중하게 고려해야 하는 기능의 수를 줄일 수 있습니다. 타겟 내의 모든 항목은 걱정할 필요가 없습니다. 타겟 외부에 특히 유용한 기능이 하나 또는 두 개 있는 경우 추가로 탐색하고 폴리필할지 점진적 개선으로 사용할지 결정하는 도구가 있습니다.
결론
모든 웹 애플리케이션에는 호환성 문제를 더 많이 허용할 수 있는 전자상거래 사이트부터 가능한 한 많은 사용자에게 제공되고 작동해야 하는 정부 웹사이트까지 다양한 요구사항이 있습니다. 이러한 계산은 직접 해야 하며, 기준의 목표는 새로운 웹 기능을 채택할 때 어떤 결정을 내려야 하는지 알려주는 것이 아니라 어떻게 해야 하는지를 알려주는 것입니다.