[2023 Google I/O] What's new in web

원본 링크: https://io.google/2023/program/cafbe05a-c19e-4fe5-9e25-61c5c0c2f6cf/

Google I/O 2023

 

구글 I/O 두번째로 본 세션. 웹 개발에 새로 추가된 기능들, 특히 메이저 브라우저들에서 최신 2버전 지원을 하는 기능들에 대해 소개하고 있다. (최신 2버전 정도는 돼야 프로덕션에서 사용을 고려할 수 있는 수준이라고 생각해서 그렇게 선정했다고 한다.) 

발표자분도 영상 초반에 언급하셨듯이 요즘 웹 플랫폼의 변화가 굉장히 빠르기 때문에 모든 변화를 따라갈 수는 없지만 이런 세션이나 web.dev 등 사이트에 올라오는 정보들로 이런게 있구나 하고 알아두면 항상 도움이 되는 것 같다. 

 

1. Dialog Element

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

<dialog>: The Dialog element - HTML: HyperText Markup Language | MDN

Dialog를 HTML으로 쉽게 작성할 수 있게 되었다.

 

2. Individual CSS Transform

https://web.dev/css-individual-transform-properties/

Finer grained control over CSS transforms with individual transform properties

여러 Transform의 동작이 합쳐져야할 경우, keyframe을 다룰 때 CSS 코드가 번잡해지는 경우가 있었다.
개별 CSS Transform을 통해 각각의 transform 시켜야할 속성에 대해 transform을 작성할 수 있게 하여 더욱 간편하게 작성할 수 있게 되었다.

이미지 출처 - 위 web.dev 블로그 링크

위와 같은 상황일 때, 기존에는 키프레임에서 중간값들을 계산하여 아래와 같이 작성했다.

@keyframes anim {
  0% { transform: translateX(0%); }
  5% { transform: translateX(5%) rotate(90deg) scale(1.2); }
  10% { transform: translateX(10%) rotate(180deg) scale(1.2); }
  90% { transform: translateX(90%) rotate(180deg) scale(1.2); }
  95% { transform: translateX(95%) rotate(270deg) scale(1.2); }
  100% { transform: translateX(100%) rotate(360deg); }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

반면 각각에 대해 지정하는 방식으로는 아래와 같다.

@keyframes anim {
  0% { translate: 0% 0; }
  100% { translate: 100% 0; }

  0%, 100% { scale: 1; }
  5%, 95% { scale: 1.2; }

  0% { rotate: 0deg; }
  10%, 90% { rotate: 180deg; }
  100% { rotate: 360deg; }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

 

3. 새로운 뷰포트 단위

https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_viewport

<length> - CSS: Cascading Style Sheets | MDN

lvh/lvw(large viewport height/width)
svh/svw(small viewport height/width)

뷰포트 단위가 모바일에서의 사용성을 위해 새롭게 추가되었다.
모바일 사용시에는 브라우저 인터페이스 때문에 뷰포트가 바뀔 수 있다. 위아래로 인터페이스가 나오는 경우 vh가 줄어드는 셈.

svh는 인터페이스가 생겨서 줄어든 경우의 vh를 의미하고, lvh는 그 반대의 큰 상태에서의 vh를 의미한다.

 

4. Structured Clone

https://developer.mozilla.org/en-US/docs/Web/API/structuredClone

structuredClone() global function - Web APIs | MDN

객체의 깊은 복사를 할 때 더이상 외부라이브러리에 의존하거나 (lodash의 cloneDeep 등) JSON.parse(JSON.stringify(obj)) 같은 방법을 쓸 필요가 없다. 

structuredClone(obj)을 통해 간단히 복제 가능하다.

 

5. CSS :focus-visible

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

:focus-visible - CSS: Cascading Style Sheets | MDN

:focus 셀렉터에 매칭되고, UserAgent에서 포커스를 명시해야겠다고 판단하는 경우에 활성화되는 셀렉터이다.
Tab 이동과 mouse 선택 시에 포커스 디자인을 다르게 하고 싶을 때 유용하게 사용할 수 있다.
예를 들어 기본적으로 크롬의 인풋은 아래와 같이 파란색 테두리가 나온다.

이를 스타일링할 때 보통 focus를 쓸 수 있는데, 버튼의 경우는 탭을 해서 이동했을 때와 클릭했을 때 동작이 다르다.
탭을 통해 이동한 경우에만 UserAgent에서 포커스를 명시해야한다고 판단하여 focus ring을 보여준다.
그러므로 버튼에 대해 :focus 셀렉터를 사용해서 스타일링하면 클릭시에도 불필요한 focus ring이 나올 수 있다.
이런 경우 focus-visible selector를 통해 탭 이동으로 focus 될 때에만 스타일을 추가하도록 할 수 있다.

(MDN 참고)

 

이외에도 TransformStream, importMap에 대한 소개도 담고 있고, 영상도 간략히 소개하고 있으므로 한 번 시청하면 좋을 것 같다.