티스토리 뷰
목차
Chrome 137 DevTools가 2025년 5월 대규모 업데이트를 통해 새롭게 개편되었습니다. 이번 버전은 Google Gemini AI를 도구에 직접 통합하고, 워크스페이스 파일 자동 저장을 지원하며, 성능 분석 및 프로파일링 기능도 대폭 강화되었습니다. 웹 개발자라면 꼭 알아야 할 필수 기능들을 정리해 드립니다.
1. Gemini AI와 DevTools의 통합: 스마트 개발의 시작
Chrome 137의 가장 주목할 기능은 Gemini AI의 DevTools 통합입니다. Elements, Sources, Performance 탭 등 주요 패널에 ‘Ask AI’ 버튼이 추가되어, 코드 분석 및 수정 작업을 AI에게 직접 요청할 수 있습니다.
- CSS 코드 자동 수정: 예를 들어, "글씨가 너무 작아요"라고 요청하면, 폰트 크기를 조정하는 CSS 코드를 제안해 줍니다.
- 성능 이슈 분석: 트레이스 뷰에서 병목 지점을 선택하면, 해당 이벤트가 페이지 성능에 어떤 영향을 주는지 AI가 해석하여 설명해 줍니다.
- 스크린숏 기반 분석: ‘Take screenshot’ 기능으로 페이지 캡처 후, Gemini에게 시각 기반 레이아웃 분석도 요청 가능합니다.
이러한 기능은 특히 비전문 개발자나 UI/UX 디자이너가 프런트엔드 디버깅을 도울 때 매우 유용합니다.
2. 실시간 소스 수정이 가능한 워크스페이스 폴더 자동 연결
이전 버전에서는 DevTools에서 HTML이나 CSS를 수정해도 브라우저에서만 반영되고, 소스코드에는 영향을 주지 않았습니다. 이제는 워크스페이스 폴더를 DevTools에 자동 연결 </strong 하여, 실제 파일에 직접 저장이 가능합니다.
예를 들어, CSS 파일을 열고 border-radius 값을 수정하면, 해당. css 파일에 즉시 저장됩니다. 실시간 협업이나 CI/CD 파이프라인 환경에서 이 기능은 엄청난 생산성 향상을 가져옵니다.
또한 자동 저장 설정은 프로젝트별로 기억되어, 매번 연결할 필요가 없습니다.
3. Performance 패널 기능 강화: AI 기반 인사이트 제공
Chrome 137 DevTools의 Performance 패널은 이제 성능 병목을 자동 분석 </strong 하여 보여줍니다. ‘Ask AI’ 버튼을 통해 다음과 같은 인사이트를 얻을 수 있습니다.
- 레이아웃 시프트 분석: CLS 점수가 높은 지점을 표시하고, 해당 원인을 설명해 줍니다.
- LCP 지연 추적: 이미지나 폰트 로딩으로 인해 발생한 렌더링 지연을 시각화합니다.
- 네트워크 병목 구간: 문서 요청 타이밍, 메인 스레드 점유 시간 등을 도식화하여 해석
실무에서는 이 기능을 통해 SEO 성능 향상, 퍼포먼스 마케팅 페이지 최적화 등에 효과적으로 활용할 수 있습니다.
4. 관리형 브라우저를 위한 엔터프라이즈 커스터마이징
Chrome 137은 관리형 프로필에 대한 설정 기능을 확장했습니다. 이제 기업 환경에서 브랜드 요소를 브라우저 UI에 삽입 </strong 할 수 있습니다.
- EnterpriseCustomLabel: 툴바에 조직명이 표시됩니다.
- EnterpriseLogoURL: 프로필 메뉴에 회사 로고 이미지 삽입 가능
이는 회사 IT 관리자가 조직 소속 여부를 명확히 하고, 사용자 혼동을 줄이기 위한 시각적 요소로 유용합니다.
5. WebGL 렌더링 엔진 변경: WARP 기본 적용
Windows 사용자의 경우 Chrome 137부터 WebGL의 기본 소프트웨어 렌더러가 SwiftShader에서 WARP로 변경되었습니다. 이는 DirectX 기반 가속이 없는 시스템에서 WebGL 콘텐츠가 제대로 동작하지 않을 수 있음을 의미합니다.
특히 가상머신이나 일부 원격 데스크톱 환경에서는 WebGL 요소가 비활성화될 수 있으니 테스트가 필요합니다.
6. 자주 묻는 질문 (FAQ)
Q. Gemini AI는 무료인가요?
A. 현재 DevTools 내 통합 Gemini는 추가 요금 없이 제공됩니다. 단, 로그인된 Google 계정이 필요할 수 있습니다.
Q. 자동 저장은 어떤 파일 확장자까지 지원되나요?
A. .js, .css, .html 등 대부분의 정적 자산 파일이 지원됩니다.
Q. 이전 버전에서도 Gemini AI를 사용할 수 있나요?
A. 아닙니다. Gemini 기능은 Chrome 137부터 통합되었으며, 이전 버전에서는 지원되지 않습니다.
결론: Chrome DevTools는 더 이상 단순한 디버깅 도구가 아니다
Chrome 137 DevTools는 디버깅 이상의 기능을 제공합니다. 개발자는 더 빠르게 문제를 식별하고, 더 정확하게 수정하며, 효율적으로 소스를 관리할 수 있게 되었습니다.
- AI 기반 분석으로 생산성 향상
- 소스 파일 실시간 저장으로 협업 효율 강화
- Enterprise 친화적인 UI 설정 지원