Chrome 93의 새로운 기능

Pete LePage

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

• 이제 JavaScript 모듈과 마찬가지로 import 문이 포함된 CSS 스타일 시트를 로드할 수 있습니다.
• 설치된 PWA는 URL 핸들러로 등록할 수 있으므로 사용자가 PWA로 바로 이동할 수 있습니다.
• 멀티스크린 창 배치 API가 사용자 의견을 바탕으로 업데이트되었으며 두 번째 출처 체험판이 시작됩니다.
• 10월 6~7일에 PWA Summit이 개최됩니다.
• 그 밖에도 다양한 기능이 있습니다.

저는 집에서 작업하고 촬영하는 피트 르페이지입니다. 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를 사용하여 프레젠테이션할 때 슬라이드는 기본 디스플레이에 전체 화면으로 표시되고 발표자 메모는 다른 디스플레이에 표시되도록 하려면 어떻게 해야 하나요?

멀티스크린 창 배치 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;
  }
});

자세한 내용은 웹.dev의 톰의 도움말 Multi-Screen Window Placement API로 여러 디스플레이 관리를 참고하세요.

출시 주기 단축

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

이제 그때가 왔습니다. 9월 21일에 Chrome 94가 출시됩니다. 각 버전의 예정된 출시일은 Chrome Calendar에서 확인할 수 있습니다.

새로운 PWA 기능

프로그레시브 웹 앱을 빌드하는 경우 확인해 볼 만한 두 가지 새로운 출처 체험판이 있습니다.

PWA의 URL 핸들러

참고: 이 기능은 실제로 Chrome 92에서 오리진 트라이얼로 출시되었지만 이전에 다루지 않았으므로 지금 다루고 있습니다.

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 Summit

10월에 PWA Summit이 개최됩니다. 프로그레시브 웹 앱으로 성공하는 데 도움이 되는 무료 온라인 컨퍼런스입니다. PWA Summit은 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 DevTools의 새로운 기능 (93)
• Chrome 93 지원 중단 및 삭제
• Chrome 93의 ChromeStatus.com 업데이트
• Chrome 93의 JavaScript 관련 새로운 기능
• Chromium 소스 저장소 변경사항 목록

구독

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

저는 Pete LePage입니다. Chrome 94가 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.