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

올해 8월 웹이 35주년을 맞이했습니다. 수 세대에 걸쳐 이 놀라운 기술이 탄생했으며 우리의 삶에 무수한 혁신이 이루어졌습니다. 이제 AI와 함께 새로운 세대가 열렸습니다 개발자 기조연설 및 I/O 세션에서 공개된 흥미로운 기능 10가지를 살펴보며 더욱 강력한 웹을 손쉽게 사용하여 더욱 효과적으로 개발할 수 있는 방법을 소개합니다.

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

Chrome 126부터 Gemini Nano가 Chrome 데스크톱에 내장됩니다. 이 정책이 왜 중요할까요? 프롬프트 엔지니어링, 미세 조정, 용량 또는 비용에 대한 걱정 없이 Chrome의 수십억 사용자에게 강력한 AI 기능을 제공할 수 있습니다. '작성 지원 기능'은 Chrome에서 기기 내 지원을 통해 사용할 수 있으며, 이 기능을 사용하면 사용자가 짧은 형식의 콘텐츠를 작성할 수 있습니다.

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

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

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

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

Chrome DevTools는 앱을 디버그하고 조정하는 가장 일반적인 방법 중 하나입니다. AI를 사용하면 디버깅이 훨씬 더 쉬워집니다. 유용한 정보를 생성하고, 문제가 무엇인지, 해결 방법까지 파악할 수 있도록 Gemini를 Chrome DevTools 콘솔에 도입했습니다.

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

4. 즉각적인 브라우징 환경을 제공하는 Speculation Rules API

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

Tokopedia 예시: 사전 렌더링이 인터넷 연결 속도가 느릴 때도 훨씬 빠른 로드 시간으로 이어지는 영향

5. 다중 페이지 사이트의 전환 보기

사용자가 웹을 경험하는 방식을 재정의하고자 합니다. 또한 우리는 개발자에게 웹용으로 빌드하는 방식을 바꾸고자 합니다. View Transition API를 사용하여 페이지 상태 간에 쉽게 애니메이션할 수 있습니다. 이제 이 기능이 다중 페이지 앱과 호환되어 사이트의 아키텍처에 관계없이 원활한 탐색을 만들 수 있습니다. 추측 규칙 및 AI와 함께 사용하면 페이지 전환이 원활하게 원활하게 이루어질 수 있습니다.

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

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

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

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

8. Angular의 부분 수분 보충으로 성능 개선

웹 앱을 빌드하고 배포하기 위한 최고의 플랫폼 중 하나가 Angular라고 생각합니다. 현재 부분 수화 관련 작업을 진행 중입니다. 따라서 JavaScript는 필요할 때만 앱의 일부만 로드하고 하이드레이션하여 성능에 민감한 앱의 Core Web Vitals를 크게 개선합니다. 몇 주 내로 개발자 미리보기에서 확인해 보세요.

9. 신호와 함께 즉시 사용할 수 있는 Angular의 세분화된 반응

Google에서는 개발자가 앱 변경사항 감지 및 관리를 보다 세밀하게 제어할 수 있도록 지원하고자 합니다. 진입: 신호 데이터를 활용한 세분화된 반응 Angular는 신호와 관련된 최고 수준의 개발자 환경을 지원하는 새로운 반응형 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에서 뵙겠습니다.