Google for Developers Korea Blog: Chrome 69 베타: AV1 동영상 디코더, CSS 트릭

Chrome 69 베타: AV1 동영상 디코더, CSS 트릭

2018년 9월 3일 월요일

.post-body span { white-space: normal !important; } 블로그 원문은 이 곳에서 확인하실 수 있고 번역 리뷰는 조은(Webtech GDE)님이 도와주셨습니다. 별도의 언급이 없는 한, 아래 변경 사항은 Android, Chrome OS, Linux, macOS, Windows용 최신 Chrome 베타 릴리즈에 적용됩니다. ChromeStatus.com에서 Chrome 69의 전체 기능 목록을 확인하실 수 있습니다. Chrome 69는 8월 2일 현재 베타 버전입니다.
새로운 CSS 트릭 Chrome에 여러 가지 새로운 CSS 기능이 추가되었습니다.
Conic 그라데이션 CSS Conic(좁은 타입/넓은 타입) 그라데이션은 색상이 중심에서 방사형으로 퍼지지 않고 중심을 주변으로 전환되도록 합니다. 예를 들어 아래와 같이 CSS 속성 2개만 사용하여 원형으로 퍼지는 색상 그라디언트를 만들 수 있습니다. 자세한 예시를 알아보세요.
div {
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
border-radius: 50%
}
새로운 여백, 패딩 및 테두리 속성 논리적 margin, padding 및 border 속성은 이제 표준 이름을 사용합니다. 특히 margin-{block,inline}-{start,end}, padding-{block,inline}-{start,end}, border-{block,inline}-{start,end}-{width,style,color}가 이에 해당합니다. 이전에 이 기능은 -webkit 접두사를 붙어거나 표준이 아닌 이름으로 지원되었습니다. 약칭 속성은 border-{block,inline}-{start,end}에만 추가되었습니다.
CSS 스크롤 스냅 CSS 스크롤 스냅 위치는 스크롤 컨테이너의 시각적 뷰포트에 있는 오프셋으로, 각 스크롤 동작을 완료한 후 스크롤이 멈추는 곳입니다. 쉽게 스크롤 가능한 영역을 미리 정의된 지점에 멈추게 할 수 있으므로 사용자 경험이 개선됩니다. 또한 JavaScript를 사용할 필요 없이 일반적인 UX 스크롤 패턴을 지원합니다. 그런 패턴의 예로는 아래와 같은 가로 이미지 캐러셀을 들 수 있습니다. 이에 관한 상세한 내용은 'Well-Controlled Scrolling with CSS Scroll Snap' 문서를 참조하시기 바랍니다.
#gallery {
scroll-snap-type: x mandatory;
overflow-x: scroll;
display: flex;
}

#gallery img {
  scroll-snap-align: center;
}

디스플레이 컷아웃 이제 Chrome에서는 디스플레이 컷아웃을 새로운 CSS env() 함수(환경 변수)와 뷰포트 맞춤 메타 태그를 통해 지원합니다. 이로써 개발자는 디스플레이 컷아웃이 있는 기기의 화면 전체를 활용할 수 있습니다.
예를 들어 브라우저에 디스플레이 컷아웃 영역 안으로 확장되도록 지시하려면 사이트에서 viewport 메타 태그의 viewport-fit 속성을 cover로 설정해야 합니다. 그런 다음 사이트가 안전 영역 인셋 CSS 환경 변수를 사용하면 컷아웃에 가리지 않고 콘텐츠를 배치할 수 있습니다. 아래를 참조하세요. 자세한 정보는 설명서와 사양에서 참조하세요.
<meta name="viewport" content="viewport-fit: cover" />

<style>
#box {
   margin-top: env(safe-area-inset-top);
   margin-left: env(safe-area-inset-left);
   margin-bottom: env(safe-area-inset-bottom);
   margin-right: env(safe-area-inset-right);
}
</style>

<div id=box></div>

이번 릴리즈에 포함된 기타 기능 캔버스 OffscreenCanvas는 워커에서 2D 및 WebGL 캔버스 렌더링 콘텍스트를 사용할 수 있게 해주는 새 인터페이스입니다. 이는 웹 애플리케이션의 병렬 처리를 늘리고 멀티 코어 시스템에서의 성능을 향상합니다.
이제 Chrome에서는 DedicatedWorker.requestAnimationFrame()도 지원하므로, Window에서와 같이 전용 워커에서도 애니메이션과 유사한 이벤트를 트리거할 수 있습니다. 예:
const offscreenCanvas = new OffscreenCanvas(100, 100);
const ctx = offscreenCanvas.getContext("2d");
ctx.fillRect(0, 0, 10, 10);
또는 캔버스를 포함하는 경우:
const canvasElement = document.getElementById("mycanvas")
const offscreenCanvas = canvasElement.transferControlToOffscreen();
const ctx = offscreenCanvas.getContext("2d");
ctx.fillRect(0, 0, 10, 10);

워커 내부:
self.onmessage = function(ev) {
const offscreenCanvas = ev.data;
const ctx = offscreenCanvas.getContext("2d");
let x = 0;
const draw = function() {
   ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
   ctx.fillRect(x, 0, 10, 10);
   x = (x + 1) % ctx.canvas.width;
   requestAnimationFrame(draw);
};
draw(0);
}

메인 페이지:
const worker = new Worker("worker.js");
const offscreenCanvas =
   document.getElementById("canvas").transferControlToOffscreen();
worker.postMessage(offscreenCanvas, [offscreenCanvas]);

DOM Element.toggleAttribute() 라는 새 메서드를 사용하면 Element.classList.toggle과 유사한 방법으로 요소 속성의 존재유무를 전환할 수 있습니다. 선택 사항으로 Force 매개변수를 사용하면 Force의 값에 따라 속성을 강제로 추가하거나 삭제합니다. 이렇게 하면 인터페이스가 Element.setAttribute()처럼 문자열을 사용하지 않기 때문에 불리언 속성을 훨씬 간편하게 관리할 수 있습니다.
Fetch API: Request.isHistoryNavigation 요청 객체에 불리언 속성을 추가하여 특정 요청이 히스토리 네비게이션인지 여부를 나타내게 하였습니다. 이렇게 하면 서비스 워커가 요청의 원인이 뒤로/앞으로 네비게이션인지 여부를 알 수 있습니다. 서비스 워커가 그러한 네비게이션에 캐시된 응답으로 대응할 수 있게 된다는 것이 좋은 활용 사례입니다.
JavaScript API JavaScript에 여러 개의 새로운 API가 생겼습니다.

ReportingObserver API는 지원 중단 및 브라우저 간섭에 대응하여 호출되는 JavaScript 콜백 함수를 제공합니다. 보고서는 저장하거나 서버에 전송하거나 임의의 JavaScript를 사용하여 처리할 수 있습니다. 이 기능은 개발자가 실제 기기에서 사이트의 작동 현황을 좀 더 잘 파악할 수 있도록 고안한 것입니다.

JavaScript 배열에는 새 메서드 2개가 추가됩니다. Array.prototype.flat()은 새 배열에 지정된 깊이까지 재귀적으로 연결된 모든 하위 배열 요소를 포함하여 반환합니다. 이러한 하위 배열 요소는 새 배열의 구성원이 됩니다. Array.prototype.flatMap()은 우선 매핑 함수를 사용하여 각 요소를 매핑한 다음 그 결과를 결합하여 새 배열로 만듭니다. 이 메서드는 깊이 = 1로 flat()을 호출했을 때 표시되는 맵과 기능적으로 동일합니다.

Keyboard Map API 게임과 같은 일부 애플리케이션에서는 특정 실제 키에 특정 함수를 할당합니다. 인터페이스가 해당 키를 참조하는 경우, 인터페이스는 키에 표시된 문자(로케일에 따라 다름)를 표시하거나 사용자가 설치한 대체 키보드 레이아웃으로 키에 할당한 문자를 표시해야 합니다. 이와 같은 레이아웃 차이가 있기 때문에 인터페이스에 표시된 문자가 원래 의도한 실제 키를 참조하지 않는 경우도 있습니다.
이러한 새 API는 실제 키를 나타내는 KeyboardEvent.code 값을 사용자에게 표시할 올바른 문자열로 변환할 방법을 제공합니다. 이 새로운 API에 대한 자세한 정보와 예시는 사양과 설명서를 참조하세요.
Loader "rtt", "downlink" 및 "ect" 클라이언트 힌트 값 지원과 HTTP 요청 헤더를 Chrome에 추가하여 서버에 대한 기기의 네트워크 연결 속도를 전달하도록 하였습니다. 예를 들어 rtt 클라이언트 힌트의 경우 현재 연결의 예상 유효 왕복 시간을 가장 가까운 25밀리초의 배수로 반올림/반내림하여 서버에 제공합니다. 연결 속도가 예상보다 느린 경우, 서버는 이것을 다운샘플링한 이미지로 사용할 수 있습니다. 이러한 네트워크 품질 힌트는 서버에 Network Information API(navigator.connection.rtt, navigator.connection.downlink 및 navigator.connection.effectiveType)가 웹페이지에 제공한 것과 동일한 값을 제공합니다.
미디어: EME를 통한 암호화 구성표 지원 쿼리 일부 플랫폼 또는 키 시스템은 CTR 모드의 AES-128만 지원하거나, CBCS 모드만 지원합니다. 두 가지 모드를 모두 지원할 수도 있습니다. 새 메서드를 사용하면 웹 개발자는 특정 암호화 구성표가 EME(Encrypted Media Extensions)로 지원되는지 쿼리할 수 있습니다.
합자 중 텍스트 선택 이제 Chrome에서는 합자(ligature) 내의 텍스트를 선택할 수 있습니다. (합자란 두 개 이상의 문자를 한 개의 기호로 결합한 것을 말합니다.) 여기에는 입력 및 텍스트 영역 요소의 마우스 선택과 커서 선택이 모두 포함됩니다. 이 변경 사항을 지원하기 위해 텍스트 선택을 렌더링하는 방법도 약간 변경하였습니다. 이제 선택 영역을 벗어난 텍스트 부분은 원래 방식대로 렌더링됩니다.

영어 합자에서의 선택.

아랍어 합자에서의 선택.
성능 프레임 간의 정보 유출을 방지하기 위해 현재 performance.memory 값을 무겁게 양자화하여 20분간 지연됩니다.
렌더러 프로세스를 단일 사이트의 문서로 제한된다면(예: 데스크톱에서 사이트 격리의 경우) 프레임 간 정보 유출에 대한 큰 걱정 없이 이 정보를 노출할 수 있습니다. 이런 경우에는 양자화된 메모리 사용 정보를 반환하지 않습니다(30초 지연). 이로써 메모리 측정이 더욱 정확해지고 더 자주 실시할 수 있기 때문에 개발자가 사용자 데이터 성능 저하를 쉽게 파악할 수 있습니다.
ServiceWorker 서비스 워커에 두 가지 개선 사항이 있습니다.

이전에 ServiceWorkerRegistration.update()는 undefined였지만 이제는 등록 객체로 나타납니다(사양에 따라 필요한 경우).

이전에는 기술적인 한계로 인해 비보안 컨텍스트에 액세스하면 navigator.serviceWorker가 SecurityError를 발생시켰습니다. 이번 변경 사항이 적용된 후 navigator.serviceWorker는 undefined을 반환합니다.

이는 스펙과 일치합니다.
CSS 그리드 레이아웃 퍼센테이지 행 트랙 및 여백의 동작 업데이트 향후 릴리즈에서는 규정되지 않은 높이의 그리드 컨테이너에서 퍼센테이지 행 트랙과 여백을 확인하는 방법이 변경됩니다. 이들은 현재 일반 블록의 비율 높이와 유사하게 동작하지만, 앞으로는 열과 같이 동작하여 대칭을 이루게 됩니다.
즉 기본 높이를 계산할 때는 비율을 무시하고(지금처럼) 나중에 높이에 비교하여 확인합니다. 이렇게 하면 열과 행 축이 모두 대칭으로 동작하므로 비율로 지정된 트랙과 여백을 확인할 수 있습니다.
Chrome 69에서는 이 변경 사항에 대한 경고를 JavaScript 콘솔로 전달할 예정입니다. Chrome 70에서 현재 동작을 그대로 유지하고자 하는 경우, 규정되지 않은 높이의 그리드 컨테이너에서 퍼센테이지 행 트랙과 여백을 각각 "auto"과 "0px"로 교체해야 합니다.
Web Locks API Web Locks API를 사용하면 한 탭에서 실행 중인 스크립트가 비동기식으로 잠금을 완료하고 작업을 수행 중인 동안에는 그대로 유지하다가 해제하도록 할 수 있습니다. 잠금 유지 시 같은 출처에서 실행 중인 다른 스크립트는 같은 잠금을 완료할 수 없습니다. 잠금은 몇 가지 잠재적인 공유 리소스를 나타내며, 이는 웹 앱이 선택한 이름으로 식별됩니다. 예를 들어 여러 탭에서 실행 중인 웹 앱이 하나의 탭만 네트워크에 동기화되도록 하고자 하는 경우 각 탭이 모두 my_net_sync 잠금을 완료하려 시도할 수 있지만, 한 탭만 성공하게 됩니다.
예를 들면 아래와 같습니다. 이 예시에서는 my_resource 잠금이 완료되었을 때 호출되는 함수를 나타냅니다.
await navigator.locks.request('my_resource', async lock => {
const url = await look_up_in_database();
const response = await fetch(url);
const body = await response.text();
await store_body_in_database(body);
});

이 API 메서드와 옵션에 대한 자세한 정보는 설명서와 사양 초안을 참조하세요.
Web Authentication으로 CTAP2 FIDO 기기 지원 Web Authentication에 CTAP2 기기 지원을 추가하면 생체 인증, 상주 키(기기에 저장된 키)와 같은 고급 보안 기능을 제공합니다. WebAuthentication API는 이전에는 전송 계층에서 U2F(Universal 2nd Factor) 기기만 지원했습니다. 이번 변경 사항으로 API 외관 자체가 바뀌지 않지만 기존 Web Authentication API를 통해 더욱 풍부한 기기 상호작용을 지원하게 됩니다.
WebRTC WebRTC는 개선 사항이 두 가지 있습니다.

이제 Chrome에서 RTCRtpParameters.headerExtensions dictionary 항목을 지원하며 이는 RTCRtpSender.getParameters()에 의해 반환됩니다. 이는 읽기 전용 필드로, 협상 후 PeerConnection에 설정되는 매개변수를 검사할 수 있습니다.

이제 RTCRtpSender 및 RTCRtpReceiver 인터페이스가 getCapabilities() 메서드를 제공합니다.

이 메서드는 주어진 종류의 미디어 전송에 가장 적합한 시스템 기능 뷰를 반환합니다. 리소스, 포트 또는 기타 상태를 예약하지는 않지만 브라우저에서 어떤 유형의 기능이 지원되는지 알아볼 수 있습니다(예: 지원되는 코덱 또는 RTP 확장 프로그램).
지원 중단 및 상호 운용성 개선 사항 Chrome에서는 가끔 다른 브라우저와의 상호 운용성 증대를 위해 지원 중단, 삭제 또는 변경되는 기능이 있습니다. 이번 Chrome 버전에도 다음과 같이 변경되는 사항이 있습니다.
Media Source Extensions를 사용하는 HTMLMediaElements에서 'stalled' 이벤트 제거 이전에는 미디어 다운로드가 최소 3초 이상 진행되지 않으면 HTMLMediaElement.stalled 이벤트가 발생했습니다. Media Source Extensions에서는 웹 앱이 다운로드를 관리하며 미디어 요소는 다운로드 진행률을 인식하지 못합니다. 일부 앱의 경우 3초 이상의 미디어 데이터를 대량으로 추가하기 때문에 부적절한 시점에 stalled가 발생하였습니다. 이 문제를 해결하기 위해 Media Source Extensions에서 stalled를 제거하였습니다.
document.createTouchList 제거 document.createTouchList() 메서드가 삭제되고
그 대신 Chrome 48부터 지원되는 Touch() 생성자를 사용합니다.
Window.confirm() 메서드가 상위 탭을 더 이상 활성화시키지 않음 백그라운드 탭의 문서가 window.confirm()을 호출하면 이는 즉시 false를 반환하고, 사용자에게 아무런 대화상자를 표시하지 않습니다. 탭이 활성화된 경우에는 이 호출이 평소처럼 대화상자를 표시합니다. 구체적으로 설명하면 이번 조치로 인해 window.confirm()을 사용하여 탭을 전방으로 가져오지 못하게 됩니다. 사용자가 이를 바라는 경우는 거의 없기 때문입니다. 게시자: Jennifer Apacible