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

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

Mariko Kosaka
X

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

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

정답은 '상황에 따라 다름'입니다. 필요한 항목과 사용 가능한 항목은 사용자층, 기술 스택, 팀 구조, 지원되는 기기에 따라 달라집니다. 하지만 웹 환경의 현 상황으로 인해 결정을 내리기가 어렵다는 점에 모두가 동의하는 바입니다.

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

이 게시물에서는 최근의 두 가지 주요 버전에 대해 모든 주요 브라우저 엔진에서 사용할 수 있는 몇 가지 기능을 소개하고자 합니다. 이는 대부분의 개발자가 기능을 사용하기에 안전하다고 생각하는 컷오프 지점이며, 이를 Baseline이라고 부르는 기능 세트입니다. 자세한 내용은 여기에서 기준 관련 공지사항을 확인하세요.

대화상자 요소

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

브라우저 지원

  • Chrome: 37. <ph type="x-smartling-placeholder">
  • Edge: 79. <ph type="x-smartling-placeholder">
  • Firefox: 98 <ph type="x-smartling-placeholder">
  • Safari 15.4. <ph type="x-smartling-placeholder">

소스

사용하려면 모달 요소를 정의한 다음 대화상자 요소에서 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 변환을 사용하면 사이트에 움직임을 추가할 수 있습니다.
한 줄에 세 가지 속성이 있는 CSS 변환을 작성하는 데 익숙하실 것입니다.
이제 개별 변환 속성을 사용하여 변환 속성을 개별적으로 지정할 수 있습니다. 이 기능은 복잡한 키프레임 애니메이션을 작성할 때 유용합니다. 

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

브라우저 지원

  • Chrome: 104 <ph type="x-smartling-placeholder">
  • Edge: 104. <ph type="x-smartling-placeholder">
  • Firefox: 72 <ph type="x-smartling-placeholder">
  • Safari 14.1. <ph type="x-smartling-placeholder">

소스

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

새 표시 영역 단위

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

브라우저 지원

  • Chrome: 108. <ph type="x-smartling-placeholder">
  • Edge: 108. <ph type="x-smartling-placeholder">
  • Firefox: 101 <ph type="x-smartling-placeholder">
  • Safari 15.4. <ph type="x-smartling-placeholder">

자바스크립트의 딥 카피

이전에는 원본 객체에 대한 참조 없이 객체의 전체 사본을 만들기 위해 인기 있는 해킹 방법이 JSON.stringify와 JSON.parse를 결합했습니다. 이는 매우 일반적인 해킹 방법으로 V8 (Chrome의 JavaScript 엔진)이 이 트릭의 성능을 적극적으로 개선했습니다. 하지만 structuredClone에서는 더 이상 해킹 방법을 배울 필요가 없습니다.

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

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

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

브라우저 지원

  • Chrome: 98. <ph type="x-smartling-placeholder">
  • Edge: 98. <ph type="x-smartling-placeholder">
  • Firefox: 94 <ph type="x-smartling-placeholder">
  • Safari 15.4. <ph type="x-smartling-placeholder">

소스

자세한 내용은 structuredClone을 사용하여 자바스크립트에서 딥 복사하기를 참고하세요.

:focus-visible 의사 클래스

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

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

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

브라우저 지원

  • Chrome: 86 <ph type="x-smartling-placeholder">
  • Edge: 86. <ph type="x-smartling-placeholder">
  • Firefox: 85 <ph type="x-smartling-placeholder">
  • Safari 15.4. <ph type="x-smartling-placeholder">

소스

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

TransformStream 인터페이스

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

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

브라우저 지원

  • Chrome: 67 <ph type="x-smartling-placeholder">
  • Edge: 79. <ph type="x-smartling-placeholder">
  • Firefox: 102 <ph type="x-smartling-placeholder">
  • Safari 14.1. <ph type="x-smartling-placeholder">

소스

마무리

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

최신 정보를 확인하고 싶으시다면 Google팀에서 기능이 상호 운용될 때 기사를 게시하며 실험 기능부터 새롭게 상호 운용 가능한 기능까지 웹 플랫폼 상황에 관한 월간 업데이트를 게시합니다.

Google에서는 언제나 유용한 정보를 얻고 있는지, 혹은 다른 지원이 필요하신지 궁금합니다. WebDX 커뮤니티 그룹을 통해 문의해 주세요.