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

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

기준점의 일부 기능에 대해 알아보세요.

Mariko Kosaka

게시일: 2023년 5월 10일

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

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

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

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 변환을 더 세부적으로 제어를 참고하세요.

새로운 표시 영역 단위

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

JavaScript의 심층 복사

이전에는 원래 객체를 참조하지 않고 객체의 전체 사본을 만들기 위해 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를 사용한 스트리밍 요청 도움말에서는 이 샘플 사용 사례를 안내합니다.

마무리

최근에는 웹 플랫폼에서 상호 운용성과 안정성을 갖추게 된 기능이 더 많이 있습니다. 앞으로 WebDX 커뮤니티 그룹과 협력하여 이러한 기준 기능 세트를 더 명확하게 설명할 예정입니다. 새로운 개발사항은 기준 페이지를 참고하세요.

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

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