이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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

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

Mariko Kosaka

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

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

정답은 '상황에 따라 다름'입니다. 필요한 기능과 사용할 수 있는 기능은 사용자층, 기술 스택, 팀 구조, 지원되는 기기에 따라 다릅니다. 하지만 모두가 동의하는 한 가지는 현재 웹 환경으로 인해 이러한 결정을 내리기가 쉽지 않다는 점입니다.

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

이 게시물에서는 지난 두 가지 주요 버전의 모든 주요 브라우저 엔진에서 사용할 수 있는 몇 가지 기능을 강조하고자 합니다. 이 지점은 대부분의 개발자가 기능을 안전하게 사용할 수 있다고 생각하는 기준점이며, Google에서 기준이라고 부르는 기능 세트입니다. 자세한 내용은 기준점 공지사항을 참고하세요.

대화상자 요소

<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 변환을 사용하면 사이트에 움직임을 추가하는 데 효과적입니다.
한 줄에 세 개의 속성이 있는 CSS 변환을 작성하는 데 익숙할 수 있습니다.
이제 개별 변환 속성을 사용하여 변환 속성을 개별적으로 지정할 수 있습니다. 이는 복잡한 키프레임 애니메이션을 작성할 때 유용합니다.

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

브라우저 지원

소스

이 변경사항에 관한 자세한 내용은 개별 변환 속성을 사용하여 CSS 변환을 더 세부적으로 제어를 참고하세요.

새로운 표시 영역 단위

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

브라우저 지원

자바스크립트의 딥 카피

이전에는 원본 객체에 대한 참조 없이 객체의 전체 사본을 만들기 위해 인기 있는 해킹 방법이 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);

브라우저 지원

소스

자세한 내용은 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를 사용한 스트리밍 요청 도움말에서는 이 샘플 사용 사례를 안내합니다.

브라우저 지원

소스

마무리

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

최신 정보를 확인하려면 기능이 상호 운용 가능해질 때 Google에서 게시하는 도움말을 참고하고 실험용 기능부터 새로 상호 운용 가능한 기능에 이르기까지 웹 플랫폼의 진행 상황을 월별로 업데이트하세요.

Google에서는 Google의 지원이 도움이 되었는지, 다른 종류의 지원이 필요한지 항상 궁금합니다. WebDX 커뮤니티 그룹을 통해 문의해 주세요.

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

대화상자 요소

개별 CSS 변환 속성

새로운 표시 영역 단위

자바스크립트의 딥 카피

:focus-visible 의사 클래스

TransformStream 인터페이스

마무리

`:focus-visible` 의사 클래스