이제 Modern Web Guidance가 안정화되었습니다. 전문가가 검증한 웹 개발 권장사항으로 코딩 에이전트를 업그레이드하세요. 공지 확인하기

Google은 AI 기술을 사용하여 콘텐츠를 사용자의 기본 언어로 번역합니다. AI 번역에는 오류가 있을 수 있습니다.

Chrome 93의 새로운 기능

Pete LePage

다음 사항에 유의하시기 바랍니다.

이제 JavaScript 모듈과 마찬가지로 import 문을 사용하여 CSS 스타일 시트를 로드할 수 있습니다.
설치된 PWA는 URL 핸들러로 등록할 수 있으므로 사용자가 PWA로 바로 이동할 수 있습니다.
Multi-Screen Window Placement API가 의견을 바탕으로 업데이트되었으며 두 번째 오리진 트라이얼을 시작합니다.
PWA Summit이 10월 6~7일에 개최됩니다.
이 외에도 다양한 기능이 있습니다.

저는 피트 르페이지입니다. 집에서 일하고 촬영하고 있습니다. Chrome 93의 개발자용 새로운 기능을 살펴보겠습니다.

CSS 모듈 스크립트

이제 JavaScript 모듈과 마찬가지로 import 문을 사용하여 CSS 스타일시트를 로드할 수 있습니다. 그런 다음 스타일 시트를 구성 가능한 스타일 시트와 동일한 방식으로 문서 또는 섀도우 루트에 적용할 수 있습니다.

새로운 CSS 모듈 스크립트 기능은 맞춤 요소에 적합합니다. 또한 JavaScript에서 CSS를 적용하는 다른 방법과 달리 요소를 만들거나 CSS 텍스트의 JavaScript 문자열을 조작할 필요가 없습니다.

이를 사용하려면 assert {type: 'css'}를 사용하여 스타일 시트를 가져온 다음 adoptedStyleSheets를 호출하여 document 또는 shadowRoot에 적용합니다.

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

하지만 assert를 생략하면 파일이 JavaScript로 처리되어 작동하지 않으므로 주의하세요.

자세한 내용은 web.dev의 CSS 모듈 스크립트를 사용하여 스타일시트 가져오기를 참고하세요.

멀티스크린 창 배치 API

일부 앱의 경우 새 창을 열고 특정 위치나 특정 디스플레이에 배치하는 것이 중요한 기능입니다. 예를 들어 Slides를 사용하여 발표할 때 슬라이드는 기본 디스플레이에 전체 화면으로 표시되고 발표자 노트는 다른 디스플레이에 표시되도록 하고 싶습니다.

Multi-Screen Window Placement API를 사용하면 사용자의 머신에 연결된 디스플레이를 열거하고 특정 화면에 창을 배치할 수 있습니다. 이번이 두 번째 오리진 트라이얼이며, 개발자 의견을 바탕으로 여러 가지 변경사항을 적용했습니다.

기기에 연결된 화면이 두 개 이상인지 빠르게 확인할 수 있습니다.

const isExtended = window.screen.isExtended;
// returns true/false

하지만 핵심 기능은 window.getScreens()에 있으며, 연결된 디스플레이에 관한 모든 세부정보를 제공합니다.

const screens = await window.getScreens();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

예를 들어 기본 화면을 확인한 다음 requestFullscreen()를 사용하여 해당 화면에 요소를 표시할 수 있습니다.

try {
  const screens = await window.getScreens();
  const primary = screens.filter((screen) => screen.primary)[0];
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

또한 새 디스플레이가 연결되거나 삭제되는 경우와 같이 변경사항을 수신 대기하는 방법을 제공합니다.

const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

자세한 내용은 web.dev에서 Tom의 도움말 멀티스크린 창 배치 API를 사용하여 여러 디스플레이 관리를 참고하세요.

출시 주기 단축

3월에 Google은 출시 주기를 단축하고 4주마다 새로운 버전의 Chrome을 출시할 계획을 발표했습니다.

이제 그 시기가 되었으며 9월 21일에 Chrome 94가 출시될 예정입니다. Chrome 캘린더에서 각 버전의 출시 예정일을 확인할 수 있습니다.

새로운 PWA 기능

프로그레시브 웹 앱을 빌드하는 경우 확인해 볼 만한 새로운 오리진 트라이얼이 두 가지 있습니다.

PWA의 URL 핸들러

PWA가 설치되어 있고 해당 PWA의 링크를 클릭하면 브라우저 탭이 아닌 PWA에서 열리기를 원할 것입니다.

웹 앱 매니페스트에 url_handlers를 지정하고 .well-known/ 디렉터리에 web-app-origin-association 파일을 추가하면 사용자가 PWA 링크를 클릭할 때 설치된 PWA 내에서 열리도록 브라우저에 지시할 수 있습니다.

manifest.json 파일의 url_handlers 예시:

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

web-app-origin-association 파일 예시:

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

그리고 약간의 추가 인증을 통해 PWA가 소유한 다른 출처의 링크를 처리하도록 할 수도 있습니다.

오리진 트라이얼에 관한 모든 세부정보는 web.dev의 URL 핸들러로서의 PWA에서 확인할 수 있습니다.

창 컨트롤 오버레이

창 컨트롤 오버레이는 제목 표시줄과 닫기, 최대화, 최소화 버튼과 같은 창 컨트롤 버튼을 포함하여 전체 창을 포함하도록 클라이언트 영역을 확장합니다.

이 기능을 사용하면 설치된 PWA를 다른 설치된 앱과 더 유사하게 만들 수 있습니다.

오리진 트라이얼에 관한 자세한 내용은 PWA 제목 표시줄의 창 컨트롤 오버레이 맞춤설정을 참고하세요.

PWA 서밋

PWA Summit이 10월에 개최됩니다. 모든 사용자가 프로그레시브 웹 앱을 성공적으로 사용할 수 있도록 지원하는 데 중점을 둔 무료 온라인 컨퍼런스입니다. PWA 서밋은 PWA 기술 개발에 참여하는 여러 회사(Google, Intel, Microsoft, 삼성)의 공동작업입니다.

훌륭한 강연과 콘텐츠가 많이 준비되어 있습니다. PWASummit.org에서 자세히 알아보고 등록할 수 있습니다.

그 외에도 다양한 기능 제공

물론 이 외에도 다양한 기능이 있습니다.

Flexbox 및 flexbox 항목에 정렬 키워드 start, end, self-start, self-end, left, right에 대한 지원이 추가되었습니다.
이제 비동기 클립보드 API가 SVG 파일을 지원합니다.
또한 meta theme-color를 설정할 때 media 속성이 적용되므로 밝은 모드와 어두운 모드에 서로 다른 테마 색상을 지정할 수 있습니다.

<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">

추가 자료

이는 주요 하이라이트 중 일부에 불과합니다. Chrome 93의 추가 변경사항은 아래 링크를 확인하세요.

최신 소식을 확인하려면 Chrome 개발자 YouTube 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받을 수 있습니다.

저는 피트 르페이지입니다. Chrome 94가 출시되는 대로 Chrome의 새로운 기능을 알려드리겠습니다.