Google I/O 2024에서 발표한 10가지 업데이트: 모든 웹 개발자를 위한 AI 기능 활용

올해 8월에 웹이 35주년이 되었습니다. 수 세대에 걸쳐 개발자들이 이 놀라운 기술을 만들어 왔으며 우리 삶에 수많은 혁신을 가져왔습니다. 이제 AI와 함께하는 새로운 세대의 여명입니다 개발자 기조연설 및 I/O 세션에서 공개된 10가지 흥미로운 기능을 소개합니다. 더욱 강력해진 웹을 더욱 쉽게 만들어 더 나은 개발로 향하는 길을 열어줄 것입니다.

1. 새로운 온디바이스 AI 기능을 제공하기 위해 Chrome 데스크톱에 Gemini Nano 통합

Chrome 126부터 Gemini Nano가 Chrome 데스크톱에 기본 제공됩니다. 이 정책이 왜 중요할까요? 프롬프트 엔지니어링, 미세 조정, 용량, 비용에 대한 걱정 없이 수십억 명의 Chrome 사용자에게 강력한 AI 기능을 제공할 수 있습니다. '작성 도움 받기'는 사용자가 짧은 형식의 콘텐츠를 작성할 수 있도록 온디바이스 기능을 갖춘 Chrome에서 사용할 수 있습니다.

초기 미리보기 프로그램에 가입하여 웹의 미래를 함께 만들어 주세요.

2. 사용하는 AI 모델에 상관없이 온디바이스 AI를 지원하는 WebAssembly 및 WebGPU

Google은 웹에서 온디바이스 AI를 지원하는 백본 기술인 WebGPU와 Wasm을 사용하여 AI 모델을 빠르고 효율적으로 실행할 수 있도록 대대적으로 투자했습니다. WebGPU의 16비트 부동 소수점 값, Wasm의 Memory64 및 JavaScript Promise 통합과 같은 새로운 개선사항 덕분에 AI 실행 속도가 훨씬 빨라졌습니다. Wasm과 WebGPU를 사용하면 AI 라이브러리가 광범위한 하드웨어에서 대규모로 모델을 실행할 수 있습니다.

3. AI 기반 Chrome DevTools로 디버깅 프로세스 간소화

Chrome DevTools는 앱을 디버그하고 조정하는 데 가장 널리 사용되는 방법 중 하나입니다. AI를 사용하면 디버깅이 훨씬 더 쉬워집니다. Chrome DevTools Console에 Gemini를 도입하여 통계를 생성하고, 문제가 무엇인지 이해하고 해결 방법을 파악할 수도 있습니다.

Chrome DevTools 콘솔 통계는 현재 미국에서 실험용 기능으로 제공되며 곧 더 많은 국가에 출시될 예정입니다.

4. 인스턴트 브라우징 환경을 제공하는 Speculation Rules API

새로운 Speculation Rules API를 사용하면 거의 즉각적인 탐색이 가능하므로 백그라운드에서 페이지를 미리 가져오고 미리 렌더링하여 탐색 속도가 크게 향상됩니다. 초가 아닌 밀리초를 고려하세요. 가장 좋은 건 코드 몇 줄이면 시작할 수 있으며 AI를 사용해 탐색 패턴을 지능적으로 예측할 수 있습니다.

Tokopedia 예시: 느린 연결에서도 로드 시간이 훨씬 빨라지는 사전 렌더링의 영향

5. 다중 페이지 사이트용 Transitions API 보기

Google에서는 사용자가 웹을 경험하는 방식을 재정의하고자 합니다. 그리고 개발자의 입장에서도 웹용 빌드 방식을 바꾸려고 합니다. View Transitions API를 사용하면 페이지 상태 간에 쉽게 애니메이션을 적용할 수 있습니다. 이제 멀티 페이지 앱과 호환되므로 사이트 아키텍처와 관계없이 원활하게 탐색할 수 있습니다. Speculation Rules 및 AI와 결합하면 페이지 전환이 매우 원활해집니다.

6. 여러 브라우저에서 통합된 보기를 위한 웹 플랫폼 대시보드

지속적으로 업데이트되는 여러 브라우저에서 최신 플랫폼 변경사항, API, 프레임워크를 따라가기가 쉽지 않다는 점을 Google에서도 잘 알고 있습니다. 기준은 모든 브라우저에서 지원되는 웹 기능을 파악할 수 있는 방법을 제공합니다. 이제 웹 플랫폼 대시보드를 사용하면 기능 집합으로 매핑된 전체 웹 플랫폼을 확인하고 개발 상황을 추적하며 상호 운용성 상태를 확인할 수 있습니다.

7. 워크플로에서 바로 사용 가능한 기준 도구

기준은 워크플로에 통합될 때 가장 잘 작동합니다. 오늘부터 Akamai의 RUM Archive에는 개발자를 위한 새로운 RUM Archive Insights 도구가 있습니다. 처음으로 해당 버전의 기준 버전에서 사용할 수 있는 기능 및 기준 버전의 전체 사용자 점유율을 나란히 볼 수 있습니다.

8. Angular에서 부분 수분을 공급하여 성능을 개선할 수 있습니다.

우리는 웹 앱을 빌드하고 배포하기 위한 최고의 플랫폼 중 하나가 Angular라고 생각합니다. Google에서는 현재 부분 하이드레이션을 준비하고 있습니다. 따라서 JavaScript가 필요할 때만 앱의 일부를 로드하고 하이드레이션하여 성능에 민감한 앱의 코어 웹 바이탈을 크게 개선합니다. 몇 주 후에 개발자 프리뷰에서 확인해 보세요.

9. 즉시 사용할 수 있는 신호 기능으로 각세밀한 반응성을 제공합니다.

Google에서는 개발자가 앱의 변경사항 감지 및 관리를 더 세부적으로 제어할 수 있도록 하고자 합니다. 예를 들어, 신호로 세분화된 반응을 살펴보세요. Angular는 Signals를 통해 최고 수준의 개발자 환경을 지원하는 새로운 반응형 API 세트를 제공합니다. 신호는 구성요소 트리의 일부만 확인하여 상태 변경을 전파하는 세분화된 변경 감지를 사용 설정하므로 더 이상 UI를 수동으로 최적화할 필요가 없습니다.

신호 기반 반응형 API는 지금 바로 사용할 수 있습니다. 세분화된 변경 감지는 올해 말에 제공될 예정입니다.

10. Maps JavaScript API로 3D 몰입형 환경 빌드

Google Maps Platform의 친숙한 Maps JavaScript API에 실사 3D 지도를 도입하여 몰입도 높은 웹 환경을 구축하는 더 다양한 방법을 모색하고 있습니다. 이제 Google의 렌더링 기술을 활용하여 사용자가 기대하는 속도로 풍부한 3D 지도를 제공할 수 있습니다. 가장 좋은 점은 코드 한 줄로 시작할 수 있다는 것입니다

여러분이 어떤 멋지고 몰입도 높은 경험을 하실지 정말 기대됩니다. 자세히 알아보세요.


매일같이 개발의 복잡성에서 탈피하여 가능성의 한계를 뛰어넘고 있습니다. 모두가 즐길 수 있는 새로운 환경을 만들 수 있도록 도와드리게 되어 기쁩니다. developer.chrome.comweb.dev를 방문하여 이 강력한 웹에 대해 더 쉽게 자세히 알아보세요. X, YouTube, LinkedIn에서 만나는 것도 잊지 마세요.

다음 I/O에서 뵙겠습니다.