사상 최초로 모든 주요 브라우저 공급업체 및 기타 이해관계자들이 함께 협력하여 웹 개발자들이 식별한 주요 브라우저 호환성 문제를 해결했습니다. Interop 2022는 15가지 주요 영역에서 웹용 개발 환경을 개선합니다. 이 도움말에서는 지금까지의 성과, 프로젝트에서 중점을 두는 부분, 성공을 측정하는 방법, 진행 상황을 추적하는 방법에 대해 설명합니다.
이 모든 것은 2019년에 시작되었습니다
2019년에 Mozilla, Google 등은 MDN 개발자 니즈 평가 설문조사 및 심층 분석 브라우저 호환성 보고서를 통해 개발자의 고충을 이해하기 위해 대대적인 노력을 시작했습니다. 이러한 보고서는 웹 플랫폼 개발자가 직면하는 주요 문제를 해결하는 데 도움이 되는 상세하고 실행 가능한 정보를 제공하며 2021년 하반기의 노력으로 이어졌습니다.
무엇보다도 Compat 2021을 통해 CSS 그리드 (사용률 12% 증가, 꾸준히 성장) 및 CSS Flexbox (77% 사용)와 같은 강력한 기능의 기반을 마련했으며, 여기에는 새로운 레이아웃 메서드를 도입할 때 개발자가 가장 많이 겪는 고충을 해결하는 Flexbox의 gap 속성이 포함됩니다.
2021년 말에 모든 구현에서 90%이상의 점수를 달성하여 기뻤습니다.
Interop 2022란 무엇인가요?
Interop 2022는 세 가지 주요 브라우저 구현의 대표자들이 동의한 벤치마크로, 후원자인 Apple, Bocoup, Google, Igalia, Microsoft, Mozilla의 후원자 선정 및 검토 과정을 통해 개발되었습니다.
벤치마크는 15개 영역에 중점을 두고 있으며, 개발자가 이러한 영역이 누락되거나 브라우저 간 호환성 문제가 있을 때 특히 문제가 된다고 판단한 영역입니다. 모든 브라우저 공급업체는 이러한 영역에 집중하는 데 동의했으며, 관련된 모든 업체는 웹 개발 환경을 대폭 개선할 수 있기를 기대합니다.
15가지 중점 분야
다음 기능은 Interop 2022의 핵심입니다. 여기에는 10개의 새로운 영역과 2021년 호환성에서 5개가 이월된 영역이 포함됩니다. 새로운 중점 분야는 다음과 같습니다.
레이어 캐스케이드
캐스케이드 레이어를 사용하면 웹 개발자가 캐스케이드를 더 세밀하게 제어할 수 있습니다. 셀렉터를 각각 고유한 특정성이 있는 레이어로 그룹화하는 방법을 제공합니다. 즉, 기본 CSS 규칙을 덮어쓰기 위해 선택자의 순서를 신중하게 정하거나 매우 구체적인 선택자를 만들지 않아도 됩니다.
색상 공간 및 CSS 색상 함수
디자인 시스템에서 색상 함수를 사용하려면 현재는 HSL 값에 Sass, PostCSS 또는 calc()를 사용해야 합니다. CSS에 내장된 색상 함수는 색상을 동적으로 업데이트할 수 있으며, 새로운 색상 공간은 sRGB 색 공간에 대한 제한과 HSL의 인지적 제한을 제거합니다.
CSS 색상 수준 5에 정의된 두 가지 함수는 웹 플랫폼에서 더욱 동적인 테마 설정을 가능하게 합니다.
color-mix(): 두 가지 색상을 가져와 지정된 색상 공간에서 지정된 양으로 혼합한 결과를 반환합니다.color-contrast(): 색상 목록에서 지정된 단일 색상과 가장 대비되는 색상을 선택합니다.
이러한 함수는 확장된 색공간 (LAB, LCH, P3)을 지원하며 HSL 및 sRGB 외에도 기본적으로 균일 LCH 색공간을 사용합니다.
새로운 표시 영역 단위
표시 영역 크기 조정을 처리할 때의 어려움은 MDN 브라우저 호환성 보고서 2020과 새로운 2021년 CSS 현황 설문조사 모두에서 두드러졌습니다. CSS 값 및 단위 수준 4에서는 가장 크고 가장 작은 동적 표시 영역 크기인 lv*, sv*, dv*를 위한 새 단위를 추가합니다. 이러한 단위를 사용하면 주소 표시줄을 고려하면서 휴대기기에 표시되는 표시 영역을 채우는 레이아웃을 더 쉽게 만들 수 있습니다.
또한 Interop 2022를 지원하는 교차 공급업체팀은 기존 vh 유닛을 비롯한 기존 표시 영역 측정 기능의 상호 운용성 상태를 연구하고 개선하기 위해 협력할 것입니다.
스크롤
2021년 스크롤 설문조사 보고서에서는 스크롤 기능과 스크롤 호환성을 구현하기가 어렵고 개선할 부분이 많다는 사실을 확인했습니다. 여러 플랫폼에서 스크롤이 더 일관되고 부드럽게 구현되도록 스크롤 스냅, 스크롤 동작, 오버스크롤 동작을 중점적으로 살펴보겠습니다.
새로운 스크롤 스냅 기능 제안도 살펴보고 있습니다.
서브 그리드
grid-template-columns 및 grid-template-rows의 subgrid 값은 display: grid가 적용된 그리드 항목이 배치된 상위 그리드의 부분에서 트랙 정의를 상속할 수 있음을 의미합니다.
예를 들어 다음 세 개의 카드 구성요소에는 각 카드에 독립적인 그리드가 있더라도 인접한 카드 헤더와 바닥글에 맞춰 정렬된 헤더와 바닥글이 있습니다. 이 패턴은 각 카드가 상위 그리드의 행 세 개에 걸쳐 있는 항목이므로 하위 그리드를 사용하여 해당 행을 카드에 상속하기 때문입니다.
기타 포함
- CSS 포함 (
contain속성) <dialog>요소- 양식 컨트롤
- 서체 및 인코딩:
font-variant-alternates,font-variant-position,ic단위, CJK 텍스트 인코딩 포함 - Web Compat: 최종 사용자에게 영향을 미치는 사이트 호환성 문제를 일으킨 브라우저 간의 차이점에 초점을 맞춥니다.
다음 부문은 Compat 2021 프로젝트를 통해 큰 진전을 이루었지만 여전히 개선의 여지가 있습니다. 따라서 나머지 문제를 해결할 수 있도록 Interop 2022에 포함되었습니다.
- 가로세로 비율
- 플렉스박스
- 그리드
- 고정 포지셔닝
- 변환
조사 노력
Interop 2022에는 15개 중점 분야 외에 세 가지 조사 노력이 포함되어 있습니다. 다음과 같은 분야는 문제가 있고 개선이 필요하지만, 테스트 결과를 사용해 진행 상황을 평가할 수 있을 만큼 사양 또는 테스트의 현재 상태가 아직 충분하지 않은 분야입니다.
- 수정 중,
contenteditable및execCommand - 포인터 및 마우스 이벤트
- 표시 영역 측정
브라우저 벤더와 다른 이해관계자들은 이러한 분야에 대한 테스트와 사양을 개선하기 위해 협력할 것이며, 그러면 향후 반복 과정에 포함될 수 있습니다.
성공 여부 측정 및 진행 상황 추적
기존의 web-platform-tests 대시보드를 사용하여 15개 중점 영역의 진행 상황을 추적할 수 있습니다. 각 영역에서 일련의 테스트가 확인되었습니다. 그런 다음 각 영역에 대한 점수와 15개 영역 모두에 대한 종합 점수가 부여됩니다.
Interop 2022 대시보드에서 진행 상황을 확인하고 추적하세요. 한 해 동안 여러분이 빌드하려는 플랫폼이 어떻게 개선되고 있는지 살펴보며 직접 확인해 보세요.
개발자에게는 어떤 영향을 미칠까요?
2021년 Compat 2021, Interop 2022 등의 형태로 다년간의 상호 운용성 노력의 목표는 개발자들이 수년간 겪은 고충을 완전히 인정하고 해결하는 것입니다. 이는 브라우저별 노력이 아니라, 전반적인 웹 플랫폼을 개선하기 위해 모든 주요 브라우저 공급업체와 협력업체 간의 강력한 협업입니다.
본질적으로 목표는 개발자가 브라우저 불일치 문제를 해결하는 대신 훌륭한 웹 환경을 빌드하는 데 더 많은 시간을 할애할 수 있도록 개발자가 더 유용하고 안정적인 웹 플랫폼을 만드는 것입니다.
의견을 알려 주세요
Compat 2021 동안 개선된 사항 또는 Interop 2022에 포함된 기능에 대한 의견이 있으면 언제든지 알려 주세요. 다음 중 작업에 가장 큰 영향을 미치는 기능은 무엇인가요? 무엇에 대해 정말로 기다렸나요? GitHub 저장소 관련 문제를 제출하거나 트위터를 통해 알려주세요.
Interop 2022 자세히 알아보기: