지금 사용할 수 있는 기준 기능

기준의 일부인 기능에 관해 알아봅니다.

웹은 항상 진화하고 있으며 브라우저는 개발자에게 플랫폼을 혁신할 수 있는 새로운 도구를 제공하기 위해 끊임없이 업데이트됩니다. 이전에 도우미 라이브러리가 필요했던 기능이 웹 플랫폼의 일부가 되어 모든 브라우저에서 지원되며, 디자인 요소를 더 짧거나 더 쉽게 코딩할 수 있습니다.

이 같은 끊임없는 진화와 적응이 도움이 되기는 하지만 한편으로는 혼란을 초래할 수도 있습니다. 이러한 모든 업데이트를 탐색하는 것은 어려울 수 있습니다. 개발자 입장에서는 '모든 브라우저 엔진에서 언제 이 새로운 기능이 지원되나요?'라는 질문이 있습니다. "프로덕션 코드에서 이러한 기능을 실제로 언제부터 사용할 수 있나요?" "이전 브라우저를 얼마 동안 지원해야 하나요?"

올바른 답은 '상황에 따라 다를 수 있습니다'입니다. 무엇이 필요하고 어떤 것은 실제로 사용자 기반, 기술 스택, 팀 구조, 지원되는 기기에 따라 달라집니다. 하지만 현재의 웹 환경이 이러한 결정을 내리기가 어려워질 수 있다는 사실에 모두가 동의하는 바입니다.

Chrome팀은 보다 명확한 이해를 위해 다른 브라우저 엔진 및 웹 커뮤니티와 협력하고 있습니다. 여기에는 일련의 주요 기능의 상호 운용성을 개선하는 데 도움이 되는 Interop 2023과 같은 프로젝트에 대한 Google의 노력이 포함됩니다. 그렇다면 지난 몇 년 동안 출시된 기능은 어떨까요? 2년 전에 배운 실험용 기능을 사용할 수 있나요?

이 게시물에서는 지난 두 개의 주요 버전에서 현재 모든 주요 브라우저 엔진에서 사용할 수 있는 몇 가지 기능을 강조하고자 합니다. 이 시점은 대다수 개발자가 기능을 사용하기에 안전하다고 느끼는 컷오프 지점이며, 이 기능을 '기준'이라고 합니다. 자세한 내용은 여기에서 Baseline 공지사항을 확인하세요.

대화상자 요소

<dialog> 요소는 팝업 및 모달과 같은 대화상자 프롬프트를 만드는 새로운 HTML 요소입니다.

사용하려면 모달 요소를 정의한 다음 대화상자 요소에서 showModal() 메서드를 호출하여 대화상자를 엽니다.

<dialog id="d">
  <form method="dialog">
    <p>Hi, I'm a dialog.</p>
    <button>ok</button>
  </form>
</dialog>

<button onclick="d.showModal()">
  Open Dialog
</button>

포커스 관리, 탭 추적, 스택 컨텍스트 유지와 같은 기능이 네이티브 HTML 요소로 내장되어 있습니다. 자세한 내용은 대화상자 구성요소 빌드를 참고하세요.

개별 CSS 변환 속성

CSS 변환을 사용하면 사이트에 움직임을 효과적으로 추가할 수 있습니다.
3가지 속성을 한 줄로 사용하여 CSS 변환을 작성하는 데 익숙하실 것입니다.
이제 개별 변환 속성을 사용하여 변환 속성을 개별적으로 지정할 수 있습니다. 이 기능은 복잡한 키프레임 애니메이션을 작성할 때 유용합니다.

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

이 변경사항에 대한 자세한 설명은 개별 변환 속성으로 CSS 변환 세부 제어를 참조하세요.

새로운 표시 영역 단위

모바일에서 표시 영역 크기는 동적 툴바의 존재 여부에 따라 달라집니다.
URL 표시줄과 탐색 툴바가 표시되는데 툴바가 완전히 철회되는 경우도 있습니다.
표시 영역의 실제 크기는 툴바가 표시되는지 여부에 따라 다릅니다.
svh 및 lvh와 같은 새로운 표시 영역 단위를 사용하면 웹 개발자가 모바일용으로 디자인할 때 더 세밀하게 제어할 수 있습니다. 자세한 내용은 대형, 소형 및 동적 표시 영역 단위 도움말을 참고하세요.

자바스크립트의 전체 복사

이전에는 원래 객체에 관한 참조가 없는 객체의 전체 사본을 만들기 위해 JSON.stringify와 JSON.parse를 결합하는 방법을 주로 사용했습니다. 이는 V8 (Chrome의 자바스크립트 엔진)이 이 트릭의 성능을 적극적으로 개선한 일반적인 해킹 사례입니다. 그러나 structuredClone에서는 더 이상 이 해킹 방법이 필요하지 않습니다.

const original = {id: 0, prop: {name: "Tom"}}

/* Old hack */ 
const deepCopy = JSON.parse(JSON.stringify(original));

/* New way */
const deepCopy = structuredClone(original);

자세한 내용은 StructuredClone을 사용하여 JavaScript에서 딥 복사를 참고하세요.

:focus-visible 의사 클래스

웹 개발자라면 누구나 키보드로 페이지를 탐색하거나 입력 요소를 클릭할 때 표시되는 '포커스 링'에 대해 잘 알고 있습니다. 접근성에 필요한 기능이지만 사용자마다 시각적 디자인에 방해가 되기도 합니다. :focus-visible CSS 의사 클래스는 브라우저가 포커스가 표시되어야 한다고 생각하는지 확인합니다. 이제 포커스가 표시되어야 하는 경우에만 스타일을 지정할 수 있습니다.

/* focus with tab key */
:focus-visible {
    outline: 5px solid pink;
}

/* mouse click */
:focus:not(:focus-visible) {
    outline: none;
}

자세한 내용은 CSS 알아보기에 관한 포커스 섹션을 참고하세요.

TransformStream 인터페이스

Streams API의 TransformStream 인터페이스를 사용하면 스트림을 서로 파이핑할 수 있습니다.

예를 들어 한 위치에서 데이터를 스트리밍한 다음 데이터가 전달됨에 따라 데이터 스트림을 다른 위치로 압축할 수 있습니다. fetch API를 사용하여 요청 스트리밍 문서에서는 이 샘플 사용 사례를 설명합니다.

마무리

최근에는 웹 플랫폼에서 사용할 수 있도록 상호 운용이 가능하고 안정된 기능이 많이 있습니다. 앞으로 WebDX 커뮤니티 그룹과 협력하여 이러한 기준 기능을 보다 명확하게 정의할 예정입니다. 자세한 내용은 web.dev/baseline을 참고하세요.

기능이 상호 운용될 수 있게 되면 Google팀에서 기사를 게시하고 실험 기능부터 새로 상호 운용 가능한 기능까지 웹 플랫폼의 상황에 관한 월간 업데이트를 게시하여 최신 정보를 확인하세요.

저희가 어떤 도움을 드릴 수 있는지, 다른 종류의 지원이 필요하시다면 WebDX 커뮤니티 그룹을 통해 문의해 주세요.