TOAST UI

Applications
ChartEditorGridCalendarImage-editor
Components
App LoaderAuto CompleteColor PickerContext MenuDate PickerPaginationRollingSelect BoxTime PickerTree
Tools
TOAST UI DocESLint ConfigRelease Note
FE Guide
Posts

들어가며

프런트엔드 개발의 가장 큰 디펜던시인 크롬 브라우저의 주요 이슈를 Chrome Platform Status의 Roadmap과 한 달간 blink-dev 활동 요약을 기준으로 정리하여 공유한다.

💡 M은 Milestone을 의미하며, M93은 93버전을 의미한다.

💡 웹 플랫폼 관련 이슈 위주로 다루며, 서비스에 영향이 크다고 판단되는 부분은 목차에 📌 를 표시한다.

💡 표준화에 대한 웹 개발자의 의견은 크롬 스테이터스 사이트에 쓰인 내용을 그대로 인용했다.

목차

  1. M97

    • 자동 확장 <details> 요소
    • Keyboard API의 정책
    • HTMLScriptElement.supports(type) 메서드
    • form제출 시 개행 정규화 지연
    • PermissionStatus.prototype.name 추가
    • passthrough 서비스 워커에서의 요청 출처와 리다이렉션 체인 전파
    • <integer>만 허용하는 calc(<number>) 지원
    • WebTransport
    • transform: perspective(none)
    • WebRTC용 SDES 키 교환 제거

  2. M98 (beta)

    • Blob 클립보드 항목에 Promise 지원 추가
    • COLRv1 색상 그라디언트 벡터 폰트
    • CSS 색상 조정: color-scheme의 'only' 키워드
    • window.open()의 popup VS window
    • 하위 리소스에 대한 사설 네트워크 접근의 사전 요청
    • WritableStream 컨트롤러의 중지 요청
    • self.structuredClone()

  3. M99 (dev)

    • HTMLInputElement의 showPicker()
    • 필기 인식 API
    • 새로운 Canvas 2D API
    • 접두사가 없는 텍스트 강조 속성
    • 데스크탑 설치형 웹앱의 윈도우 제어 오버레이
    • font-family 값인 -webkit-standard 지원 중단

  4. Dev Trial

    • 사용자 활성화 없는 PaymentRequest.show 호출 방지

  5. 그 외 프로토타이핑

    • 포커스 그룹
    • CSS 서브 그리드

버전별 이슈 리스트

1. M97

자동 확장 <details> 요소

이슈

브라우저가 페이지에서 숨겨진 콘텐츠를 찾기 위해 스크롤을 하거나 ScrollToTextFragment 또는 요소의 일부로 전환하는 등의 작업을 할 때 자동적으로 숨겨진 정보를 검색 가능하게 만들고 확장하는 기능이다.

배경

현재는 접혀져 있어 숨겨진 세부 정보를 페이지 내 찾기로 검색할 수 없으며 이를 위해 모든 요소를 수동으로 확장하여야 한다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

references

Keyboard API 정책

이슈

getLayoutMap()은 영어-프랑스어 키보드와 같이 다른 레이아웃 맵을 가진 키보드에서 눌린 실제 키를 식별하는 문제를 해결하지만, 모든 컨텍스트에서 사용할 수 없다. 특히 iframe에서 사용이 불가하므로 허용 속성에 keyboard-map을 추가하여 이를 해결한다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

references

HTMLScriptElement.supports(type) 메서드

이슈

<script> 요소의 타입을 감지하는 통합된 방법을 제공한다.

배경

현재 HTMLScriptHElement의 type 속성 값을 알 수 있는 간단한 방법이 없다. nomodule 속성을 사용하여 모듈 지원을 감지할 수 있으나 통일된 방법이 필요하여 기능이 추가되었다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

  • Firefox: 배포됨

    • Chrome Platform Status에선 배포됨이라 되어 있으나 실제 참조 링크 페이지에선 부정적인 코멘트와 함께 이슈 클로즈 되었다.
  • Edge: 의견 없음
  • Safari: 의견 없음
  • 웹 개발자: 긍정적

references

form제출 시 개행 정규화 지연

이슈

기존 form 항목의 개행은 form 제출 프로세스 초기에 정규화되었으며 form의 페이로드가 application/x-www-form-urlencoded라는 타입으로 인코드되기 때문에 추가적으로 지연된 정규화가 일어났었다. 이제 초기에 진행되는 정규화가 제거되고 지연 정규화로 통합된다.

배경

타 브라우저들과의 싱크를 맞추며 오래된 상호 운용성 문제를 해결한다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

  • Firefox: 배포됨
  • Safari: 배포됨
  • 웹 개발자: 의견 없음

references

PermissionStatus.prototype.name 추가

이슈

읽기 전용 속성인 name을 PermissionStatus 인터페이스에 추가하여 권한의 이름을 가져올 수 있도록 한다. Permission API를 통해 여러 권한을 동시에 쿼리할 때 식별 방법이 없기에 기존엔 배열 순서 등을 이용했으나 이제 name을 통해 안정적으로 처리가 가능하다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

  • Firefox: 긍정적
  • Safari: 의견 없음
  • 웹 개발자: 의견 없음

references

passthrough 서비스 워커에서의 요청 출처와 리다이렉션 체인 전파

이슈

fetch(evt.request)를 호출해 탐색 요청을 처리하는 서비스 워커가 FetchEvent.request의 출처 및 리다이렉션 체인을 사용하도록 한다. 이전에는 항상 리다이렉션 체인 없이 서비스 워커의 출처로 설정되었으나 이제 이 정보를 통해 서버에 대한 요청과 함께 전송되는 출처 헤더와 SameSite 쿠키를 제어할 수 있다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

  • Firefox: 의견 없음
  • Safari: 배포됨
  • 웹 개발자: 의견 없음

references

기타

출처 전파는 M97, 리다이렉션 체인 전파는 M98에 배포되었다.

<integer>만 허용하는 calc(<number>) 지원

이슈

<number>로 파싱되는 CSS의 계산 함수는 <integer>만 허용하는 모든 속성에서 사용할 수 있다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

  • Firefox: 배포됨
  • Safari: 배포됨
  • 웹 개발자: 의견 없음

references

WebTransport

이슈

WebTransport는 웹 보안 모델을 지키는 클라이언트가 보안 다중 전송을 사용하여 서버와 통신할 수 있도록 하는 프로토콜 프레임워크이다.

배경

현재 웹 애플리케이션에서 클라이언트-서버 간 양방향 통신을 하는 API는 WebSocket과 RTCDataChannel 두 가지다. WebSocket은 TCP 기반으로 대기 시간에 민감할 때 사용하기 어렵고 RTCDataChannel은 피어 간 컨텍스트에서 사용하도록 설계가 되어 있어 클라이언트-서버 간 통신에서 거의 사용되지 않았다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

references

transform: perspective(none)

이슈

CSS의 transform 속성 중 perspective 함수에 none이란 매개변수를 지원하도록 한다. none은 무한한 값과 동일하게 취급된다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

references

WebRTC용 SDES 키 교환 제거

이슈

WebRTC용 SDES 키 교환 매커니즘은 2013년 이후 표준에서 MUST NOT으로 선언되었다. 크롬에서도 사용량이 최근 몇 년간 크게 감소했으므로 더 이상 사용하지 않고 제거한다.

배경

SDES가 더 이상 사용되지 않는 이유는 보안 문제로 세션 키를 자바스크립트에 노출하는 문제를 갖고 있다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

  • Firefox: 배포됨
  • Safari: 배포됨
  • 웹 개발자: 의견 없음

references

2. M98 (beta)

Blob 클립보드 항목에 Promise 지원 추가

이슈

ClipboardItem 객체에 Promise 지원을 추가한다. 이제 Blob 데이터를 동기적으로 제공하지 않고도 비동기인 clipboard.write()에서 처리할 수 있다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

  • Firefox: 개발 중
  • Safari: 배포됨
  • 웹 개발자: 긍정적

references

COLRv1 색상 그라디언트 벡터 폰트

이슈

기존 색상 폰트 포맷의 문제를 해결하기 위해 강력한 2D 그래픽 글리프 정의(그라디언트, 변환)를 가능하게 하고 다양한 변형을 지원하며 기존 윤곽 정의를 재사용하는 COLRv1이라는 웹에 초점을 맞춘 차세대 폰트 형식을 설계한다

배경

COLRv1은 비트맵 글꼴의 크기 조정 문제를 해결한다. 실험에서 이모지 폰트 사이즈를 1/5로 줄이는 동시에 렌더링 정확도도 높일 필요가 있었다.

데모

https://codepen.io/drott_chrome/pen/ExvaYxm

표준화

references

CSS 색상 조정: color-scheme의 'only' 키워드

이슈

color-scheme 값에 only 키워드가 방법으로 다시 추가된다. 일반적인 값인 light, dark 등을 선택하면 운영 체제에서 사용자 인터페이스를 바꾸며 시스템 색상 값으로 처리한다. 하지만 only 키워드를 추가하면 강제로 다크 모드 인터페이스를 사용하더라도 해당 요소에 대해선 적용을 받지 않게 된다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

  • Firefox: 개발 중
  • Safari: 배포됨
  • 웹 개발자: 의견 없음

references

window.open()의 popup VS window

이슈

window.open()의 windowFeatures에 popup 속성을 추가하여 popup 또는 tab/window로 창을 만들고 모든 BarProp 속성들에 !is_popup을 반환하도록 한다. popup이 1이면 팝업으로 윈도우가 열리고 0이면 일반 윈도우가 열린다.

const popup = window.open('_blank','','popup=1');
const tab = window.open('_blank','','popup=0');

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

  • Firefox: 긍정적
  • Safari: 의견 없음
  • 웹 개발자: 의견 없음

references

하위 리소스에 대한 사설 네트워크 접근의 사전 요청

이슈

크로미움은 공용 웹 사이트에서 하위 리소스에 대한 사설 네트워크 요청을 하기 전 CORS의 사전 요청을 수행한다. 이를 통해 사설 네트워크 또는 localhost에서 제공되는 최종 리소스가 정상적으로 사전 요청을 처리한 경우 공용 웹 사이트에서 온 교차 출처 요청만 수신할 수 있게 된다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

references

WritableStream 컨트롤러의 중지 요청

이슈

이전 Stream API의 WritableStream의 writer.abort()는 오래 걸리는 쓰기 작업이 완료된 후에야 중지할 수 있었다. 하지만 이번 변경으로 진행 중이던 쓰기 작업을 바로 중단하거나 사용자 요청 시 중단할 수 있게 된다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

references

self.structuredClone()

이슈

The structured clone 알고리즘을 사용하여 객체의 깊은 복사를 만들어내는 메서드가 추가된다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

references

3. M99 (dev)

HTMLInputElement의 showPicker()

이슈

HTMLInputElement의 showPicker() 메서드는 API를 호출해 input 엘리먼트에 선택기 패널이 노출되도록 할 수 있다. (색상, 파일, 날짜 등)

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

references

필기 인식 API

이슈

실시간으로 필기 그림에서 텍스트를 인식하기 위해 고급 필기 인식 서비스를 사용하는 웹 어플리케이션용 API이다. 여기서 필기 그림이란 사람의 필기 과정을 설명하기 위한 시간적, 위치적 정보를 말한다.

배경

최신 고급 필기 인식 알고리즘을 사용하여 써드파티 통합의 필요성을 줄이는 데 필요하다. 이 API를 사용하면 필기 입력을 처리하는 웹 어플리케이션(예: 메모 작성 앱)을 쉽게 개발할 수 있다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

references

새로운 Canvas 2D API

이슈

Canvas 2D에 다음과 같은 기능 및 API가 추가된다.

  1. 캔버스 컨텍스트를 폐기하고 요청에 따라 다시 그릴 수 있도록 허용한다.
  2. 특정 캔버스 컨텍스트가 많이 읽힐 것이라고 선언하는 옵션이 추가된다.
  3. 새로운 색상 입력을 지원한다. (ex. new CSSRGB())
  4. 캔버스의 텍스트 관련 속성을 추가한다. (문자간격, 단어간격, 글꼴 확장, 글꼴 커닝 등)
  5. 캔버스를 초기화하는 기능(reset())을 추가한다. (기존에는 clearRect()를 복잡하게 사용해야 했음.)
  6. RoundRect를 네이티브로 지원한다.
  7. 원근감과 관련된 2D 변환을 허용한다. image
  8. 원뿔형 그라디언트를 추가한다.
  9. SVG 필터를 추가한다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

references

접두사가 없는 텍스트 강조 속성

이슈

'text-emphasis', 'text-emphasis-color', 'text-emphasis-position', 'text-emphasis-style' CSS 속성을 말한다. 이는 -webkit 접두사가 빠진 속성이다.

데모

https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

  • Firefox: 배포됨
  • Safari: 배포됨
  • 웹 개발자: 의견 없음

references

데스크탑 설치형 웹앱의 윈도우 제어 오버레이

이슈

설치된 데스크탑용 웹앱의 창 제어 오버레이가 활성화되면 클라이언트 영역이 제목 표시줄 영역을 포함한 전체를 덮도록 확장되며, 창 제어 버튼(닫기, 최대화, 최소화)이 오버레이 된다.

배경

이 기능을 통해 설치된 데스크탑 웹 앱을 기본 앱처럼 보이게 한다.

  • 기존 img img

  • 변경

    • 새로운 기능을 통해 제목 표시줄 영역에 컨텐츠를 넣을 수 있게 된다. img

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

  • Firefox: 의견 없음
  • Safari: 의견 없음
  • 웹 개발자: 의견 없음

references

font-family 값인 -webkit-standard 지원 중단

이슈

font-family 값인 -webkit-standard의 지원을 중단한다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다

  • Firefox: 배포됨
  • Safari: 중립적
  • 웹 개발자: 의견 없음

references

4. Dev Trial

사용자 활성화 없는 PaymentRequest.show 호출 방지

이슈

사용자 활성화 없는 PaymentRequest.show 호출을 허용하면 악성 웹사이트에서 악용될 수 있다. 사용자를 보호하기 위해 사용자 활성화가 필요하도록 스펙이 변경되었으며 변경된 스펙에 따라 개발 중이다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

references

기타

M98에 deprecated 되고 M99에 제거될 예정이다.

5. 그 외 프로토타이핑

이제 막 이슈 생성 단계지만 관련 API가 추가될 가능성을 공유하고자 한다.

포커스 그룹

이슈

포커스 그룹 기능은 포커스가 가능한 엘리먼트들 사이에서 키보드 화살표 키를 이용한 키보드 포커스 탐색을 용이하게 하는 기능이다.

references

CSS 서브 그리드

이슈

중첩된 그리드 컨테이너에 "서브 그리드" 개념을 도입하는 CSS 그리드 레이아웃 모듈 레벨 2 스펙을 구현한다.

배경

CSS 서브 그리드는 중첩된 그리드 컨테이너에서의 상속 문제를 해결할 수 있다. 그리드 컨테이너의 직계 자식만 부모의 그리드 속성(트랙의 크기, 각 그리드 라인의 이름)을 알고 있다. 웹 작성자가 다른 그리드의 일부 영역에 걸쳐 있는 그리드로 작업할 때마다 가장 안쪽 그리드의 자식은 가장 바깥쪽 그리드 구조를 알지 못한다. "서브 그리드"는 행 및 열의 정의가 부모로 지연되는 중첩 그리드 컨테이너다. 이를 이용해 상위 그리드의 스팬 그리드 영역에서 그리드 속성 및 정렬을 상속하여 문제를 해결할 수 있다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

  • Firefox: 배포됨
  • Safari: 긍정적
  • 웹 개발자: 매우 긍정적

references

#browser
#toastui
임재언2022.01.27
Back to list
Applications
ChartEditorGridCalendarImage-editor
Components
App LoaderAuto CompleteColor PickerContext MenuDate PickerPaginationRollingSelect BoxTime PickerTree
Tools
TOAST UI DocESLint ConfigRelease Note
FE Guide
Posts
© NHN Cloud Corp.