돈 버는 IT 지식 연구소
#1인개발자는 개발만 잘해선 안된다
#마케터는 기술을 모르면 안된다
이 포스팅은 최근 공개된 2023 구글 I/O 컨퍼런스에서 제가 관심있는 주제를 선별하여 번역 및 요약 작성하였습니다.
이번 주제는 크롬 팀에서 발표한 2023년 5월의 새로운 웹 플랫폼 기능 소개입니다.
원문 출처 : https://web.dev/baseline-features/
웹은 항상 진화하고 있으며, 브라우저는 지속적으로 업데이트되어 개발자들에게 혁신적인 도구를 제공합니다.
이전에는 외부 라이브러리가 필요했던 기능들이 이제는 웹 플랫폼의 일부로 포함되어
모든 브라우저에서 지원되며,
디자인 요소를 더 간결하고 쉽게 작성할 수 있게 되었습니다.
하지만 이러한 지속적인 진화와 적응은 혼란을 가져올 수도 있습니다.
어떻게 동시다발적으로 발생하는 모든 업데이트를 하나하나 적응하고 파악할 수 있을까요.
개발자로서 우리는 항상 다음과 같은 질문을 던지곤 합니다.
"그래서 모든 브라우저 엔진이 이 기능을 지원하는 시점은 언제일까요?"
"제품 코드에서 이 기능을 실제로 사용할 수 있는 시점은 언제일까요?"
"과거 버전의 브라우저를 얼마동안 지원해야 할까요?"
사실 정답은 "상황에 따라 다릅니다".
실제로 사용자층, 기술 스택, 팀 구조 및 지원되는 장치에 따라 다르기 때문입니다.
하지만 어쨌든 확실한 것은 현재처럼 무분별한 업데이트가 발생하는 웹 환경이 이러한 질문을 더 어렵게 만든다는 점입니다.
크롬 개발진은 다른 브라우저 엔진과 웹 커뮤니티와 함께 협력하여
이러한 혼돈을 해소하기 위해 노력하고 있습니다.
Interop 2023과 같은 프로젝트에서 진행 중인 작업도 이러한 노력의 일환입니다.
이 프로젝트는 일련의 주요 기능들의 상호 운용성을 개선하는 데 도움이 됩니다.
그렇다면 최근 몇 년 동안 도입된 기능들은 언제부터 사용할 수 있게 되었을까요?
두 해 전에 알게 된 실험적인 기능들은 지금 사용할 준비가 되었을까요?
이 포스팅에서는 최근 주요 브라우저 엔진에서 모두 사용 가능한 몇가지 기능에 주목합니다.
즉 현재로서 대다수의 개발자들이 이 기능들을 안전하게 사용할 수 있다고 느끼는 시점이며,
이러한 기능들을 우리는 Baseline이라고 부릅니다. 더 자세한 내용은 Baseline의 공지를 확인해주세요.
대화 상자 요소 (The dialog element)
<dialog> 요소는 팝업 및 모달과 같은 대화 상자 프롬프트를 만드는 데 사용되는 새로운 HTML 요소입니다.
이 요소를 사용하려면 모달 요소를 정의한 다음, dialog 요소의 showModal() 메서드를 호출하여 대화 상자를 엽니다.
<dialog id="d">
<form method="dialog">
<p>안녕하세요, 저는 대화 상자입니다.</p>
<button>확인</button>
</form>
</dialog>
<button onclick="d.showModal()">
대화 상자 열기
</button><dialog> 태그는 네이티브 HTML 요소로서 초점 관리, 탭 추적 및 스택 컨텍스트 유지와 같은 기능이 내장되어 있습니다. 더 자세한 내용은 대화 상자 컴포넌트 빌드를 읽어보세요.
(스파게티 장인 생각) >>> 굳이 필요한건가 싶지만 어쨌든 팝업창 전용 태그가 하나 생겼네요. 코드 몇 줄을 아낄 수 있게 되었습니다.
개별 CSS 변형 프로퍼티 (Individual CSS transform properties)
CSS transform은 사이트에 움직임을 추가하는 효율적인 방법입니다.
여러분은 이미 일련의 세 가지 프로퍼티로 CSS 변형을 작성하는 것에 익숙할 수도 있습니다.
하지만 개별 변형 프로퍼티를 사용하면 복잡한 키프레임 애니메이션을 작성할 때 유용합니다.
.target {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}이 변경 사항에 대한 자세한 설명은 "개별 변형 프로퍼티를 사용하여 CSS 변형을 더 세밀하게 제어하기" 포스팅을 읽어보세요.
(스파게티 장인 생각) >>> 매우 좋은 업데이트라고 생각합니다. 이제 애니메이션 3요소 (translate, rotate, scale) 를 키프레임 단위로 하나하나 정의하지 않아도 되네요.
새로운 뷰포트 단위 (New viewport units)
모바일에서는 동적으로 나타나는 툴바의 유무에 따라 뷰포트 크기가 영향을 받습니다.
URL 바 및 탐색 툴바가 표시되기도 하지만 이러한 툴바가 완전히 숨겨질 수도 있습니다.
툴바의 노출 여부에 따라 실제 뷰포트 크기가 달라지는 것입니다.
svh 및 lvh와 같은 새로운 뷰포트 단위를 사용하면 모바일 디자인을 할 때 더욱 세밀한 제어가 가능합니다.
더 자세한 내용은 "큰, 작은 및 동적 뷰포트 단위" 포스팅을 확인하세요.
(스파게티 장인 생각) >>> 이게 제일 좋아요!! 이제 디바이스와 무관하게 비슷한 사용자 경험을 구현할 수 있는 날이 정말 머지않았습니다.
JavaScript에서의 깊은 복사 (Deep copy in JavaScript)
과거에는 원본 객체와 무관한 객체의 깊은 복사를 생성하기 위해
JSON.stringify와 JSON.parse를 함께 사용하는 일반적인 방법이 있었습니다.
이러한 트릭은 널리 사용되어 V8(크롬의 JavaScript 엔진)에서도 이러한 기법의 성능을 대폭 개선하였습니다.
하지만 이제 structuredClone을 사용하면 이러한 임시방편을 사용할 필요가 없습니다.
const original = {id: 0, prop: {name: "Tom"}}
/* Old hack */
const deepCopy = JSON.parse(JSON.stringify(original));
/* New way */
const deepCopy = structuredClone(original);더 자세한 내용은 structuredClone을 사용한 JavaScript에서의 깊은 복사를 참조하세요.
(스파게티 장인 생각) >>> 요것은 기억해두고 써먹어야겠네요.
:focus-visible 가상 클래스 (:focus-visible pseudo-class)
당신이 웹 개발자라면 키보드로 페이지를 탐색하거나 입력 요소를 클릭할 때 표시되는 ""포커스 링""에 익숙할 것입니다.
이는 접근성을 위해 필요한 기능이지만 다양한 사용자를 위한 시각적 디자인에 방해가 될 수도 있습니다.
:focus-visible CSS 가상 클래스를 사용하면 브라우저가 포커스가 표시되어야 할지 여부를 확인할 수 있습니다.
이제 포커스가 표시되어야 할 때의 스타일을 지정할 수 있습니다.
/* 탭 키로 포커스 */
:focus-visible {
outline: 5px solid pink;
}
/* 마우스 클릭 */
:focus:not(:focus-visible) {
outline: none;
}자세한 내용은 Learn CSS의 포커스 섹션을 확인하세요.
(스파게티 장인 생각) >>> 한마디로 포커스링 못생겼으니까 컨트롤 가능하게 해준다는 말이네요.
TransformStream 인터페이스 (The TransformStream interface)
Streams API의 TransformStream 인터페이스를 사용하면 스트림을 서로 연결할 수 있습니다.
예를 들어 데이터를 한 곳에서 스트림으로 전달한 다음 데이터가 전달되는 동안 데이터 스트림을 압축할 수 있습니다. fetch API를 사용하여 요청을 스트리밍하는 예제 사용 사례는 Streaming requests with the fetch API 문서에서 확인할 수 있습니다.
(스파게티 장인 생각) >>> body내의 모든 요소가 로드 되기 전에도 새로운 리퀘스트를 서버에 보낼 수 있다는 뜻이네요. 비동기 방식의 확장이라고 생각됩니다.
마무리
최근 웹 플랫폼에서는 상호 운용성이 개선되고 안정화된 기능이 많이 추가되었습니다.
앞으로는 WebDX 커뮤니티 그룹과 함께 Baseline 기능 세트에 대해
더 많은 명확성을 제공하기 위해 노력할 것입니다.
계속해서 web.dev/baseline을 확인해주시기 바랍니다.
업데이트된 내용을 알고 싶다면, 저희 팀 블로그를 팔로우하세요.
매 기능이 상호 운용 가능해지는 경우에 포스팅을 게시하고
실험적인 기능부터 최신 상호 운용 가능한 기능에 이르기까지 매월 업데이트를 게시하고 있습니다.
우리가 하는 일이 여러분에게 도움이 되는지 또는 다른 종류의 지원이 필요한지 궁금합니다.
WebDX 커뮤니티 그룹에 참여해주세요!
네, 이렇게 크롬 업데이트 및 모든 브라우저에서 사용 가능한 Baseline 기능들에 대해 알아보았습니다.
저는 구글 I/O를 이번에 처음 알게되었는데, 유익한 내용이 많네요!
구글 크롬 블로그는 구독해두고 종종 좋은 정보가 있으면 포스팅으로 작성하겠습니다.
관심있으신 분은 구독 추천드립니다 ^^