안녕하세요! 2026년 3월, 크롬 146이 도착했습니다.
개발자 여러분, 안녕하세요! 벌써 2026년 3월이 되었네요. 지난 3월 10일, 구글은 웹 브라우저 크롬의 최신 안정 버전인 Chrome 146을 공식 출시했습니다. 이번 업데이트는 단순한 성능 개선을 넘어, 개발자들의 생산성을 높여줄 새로운 API와 보안 강화, 그리고 웹 그래픽 기술의 진보를 포함하고 있어 많은 관심을 받고 있습니다.
오늘은 Chrome for Developers 블로그와 다양한 기술 소스를 통해 확인된 Chrome 146의 핵심 변경 사항들을 친절하게 정리해 드리겠습니다. 어떤 새로운 기능들이 우리를 기다리고 있는지 함께 살펴보시죠!
스크롤 트리거 애니메이션(Scroll-Triggered Animations)
웹 개발을 하다 보면 스크롤 위치에 따라 요소가 움직이는 효과를 구현해야 할 때가 많습니다. 이전에는 자바스크립트를 사용하여 복잡하게 스크롤 이벤트를 리스닝하고 계산해야 했지만, Chrome 146부터는 이것이 훨씬 간편해졌습니다.
이번에 도입된 스크롤 트리거 애니메이션 기능은 스크롤 위치를 기반으로 애니메이션의 재생, 일시중지, 재설정을 제어할 수 있게 해줍니다. 이 기능은 개발자가 별도의 커스텀 스크립트 없이도 스크롤 위치에 따른 효과를 선언적으로 제어할 수 있게 합니다. 즉, CSS를 중심으로 더 직관적이고 효율적으로 인터랙티브한 웹 경험을 만들 수 있게 된 것이죠.
- 주요 기능: 애니메이션 재생, 일시중지, 재설정 제어
- 장점: 복잡한 자바스크립트 로직 감소, CSS 기반의 선언적 제어 가능
보안 강화: Sanitizer API
보안은 크롬 업데이트에서 항상 최우선 순위입니다. Chrome 146은 개발자가 더 안전한 웹 애플리케이션을 구축할 수 있도록 돕는 새로운 도구를 도입했습니다.
Sanitizer API 도입
크로스 사이트 스크립팅(XSS) 공격은 웹 보안의 오랜 문제입니다. Chrome 146은 이를 방지하기 위해 Sanitizer API를 도입했습니다. 이 API는 사용자가 제공하거나 외부에서 가져온 임의의 HTML 콘텐츠에서 스크립트를 실행할 수 있는 내용을 제거하는 방법을 제공합니다.
Winaero의 기사에 따르면, Sanitizer API는 HTML을 조작하고 해로운 요소를 제거하는 메서드를 제공합니다. 특히 기존의 innerHTML 대신 사용할 수 있는 element.setHTML() 메서드는 XSS 공격으로부터 보호하는 기능을 내장하고 있어 안전한 HTML 파싱을 가능하게 합니다. 또한 document.parseHTML()을 통한 안전한 파싱도 지원합니다.
WebGPU의 진화: 새로운 확장
웹에서의 고성능 그래픽 처리를 담당하는 WebGPU도 이번 업데이트에서 상당한 개선이 이루어졌습니다.
WGSL 언어 확장
Gigazine의 보도에 따르면, WebGPU 셰이딩 언어(WGSL)에 texture_and_sampler_let 언어 확장 기능이 추가되었습니다. 이를 통해 개발자는 WGSL 셰이더에서 let 키워드로 선언된 변수에 텍스처 객체와 샘플러 객체를 할당할 수 있게 되었습니다. 이는 셰이더 코드를 더 유연하고 효율적으로 작성할 수 있는 기회를 제공합니다.
@group(0) @binding(0) var tex: texture_2d<f32>;
@group(1) @binding(0) var store : texture_storage_2d<rgba8unorm, read_write>;
// texture_and_sampler_let 확장을 통해 let 변수에 할당 가능개발자 도구(DevTools)의 새로운 기능
개발자들이 매일 사용하는 도구인 Chrome DevTools도 146 버전에서 업그레이드되었습니다.
- 통합 Lighthouse 감사: 이제 MCP(Model Context Protocol)를 통해 Lighthouse 감사를 직접 실행할 수 있어, 에이전트 워크플로우 내에서 자동화된 성능 및 품질 검사가 가능해졌습니다.
- Slim Mode: 토큰 절약을 위해 도구 설명과 매개변수를 최적화하는 새로운
--slim모드가 추가되었습니다. - 새로운 디버깅 스킬: 접근성 감사 및 디버깅, LCP(Largest Contentful Paint) 최적화 및 디버깅을 위한 전용 스킬이 추가되었습니다.
- 요소 패널 및 콘솔 개선: 요소 패널의 채택된 스타일 시트 지원이 개선되었고, 콘솔 기록 탐색이 크게 향상되었습니다.
그 외의 주요 변경 사항
범위가 지정된 맞춤 요소 레지스트리(Scoped Custom Element Registry)
웹 앱이 여러 소스의 라이브러리를 사용할 때 맞춤 요소(Custom Element) 이름 충돌은 흔한 문제입니다. Chrome 146은 단일 태그 이름에 대한 여러 맞춤 요소 정의가 페이지 내에 존재할 수 있도록 하는 범위가 지정된 맞춤 요소 레지스트리 기능을 도입했습니다. 사용자 코드는 여러 맞춤 요소 레지스트리를 생성하고 이를 트리 범위 및 범위 지정 객체로 기능하는 요소와 연결할 수 있어, 이름 충돌 걱정 없이 라이브러리를 통합할 수 있게 되었습니다.
마치며
Chrome 146은 개발자에게 더 강력한 도구와 보안 기능을 제공하는 동시에, 사용자에게는 더 안전하고 부드러운 웹 경험을 약속합니다. 특히 스크롤 애니메이션과 WebGPU의 개선은 웹의 표현력을 한층 더 높여줄 것으로 기대됩니다. DevTools의 새로운 기능까지 활용한다면, 2026년의 웹 개발은 한층 더 효율적이고 즐거워질 것 같네요.
지금 바로 크롬을 최신 버전으로 업데이트하고 새로운 기능들을 경험해 보시는 건 어떨까요?
답글 남기기