(번역) 개발자를 위한 Chrome의 2024년 요약: DevTools의 AI, 내장된 Gemini, 새로운 UI 기능으로 웹의 가능성을 다시 정의하기
원문: https://developer.chrome.com/blog/chrome-2024-recap?hl=en
웹이 막 시작되던 시절, 온라인에 접속한다는 것은 느린 다이얼업(전화 접속 방식) 연결을 기다리며 Perl과 HTML 코드와 씨름하는 것을 의미했습니다. 그러나 웹은 눈 깜짝할 사이에 기하급수적으로 발전했습니다. 당일 식료품 배달을 받거나 긴 기사를 AI로 요약하는 등, 링크 하나가 무한한 가능성을 여는 포탈이 되었습니다.
이것이 바로 많은 사람들이 웹을 사랑하는 이유입니다. 전 세계 더 많은 사람들의 마음을 사로잡을 수 있도록, 우리는 프런트엔드인지 풀스택인지, 초보자인지 전문가인지와 상관없이 모든 웹 개발자를 위한 새로운 도구를 출시하고 있습니다.
적은 노력으로 더 상상력 넘치는 웹 경험을 구축할 수 있는 2024년의 혁신적인 기능들을 확인해보세요.
Gemini를 활용한 Chrome 내장 AI로 강력한 기능 제공
2024년 Google I/O에서, 우리는 Chrome에 내장된 Gemini Nano를 통해 AI로 웹을 강화하는 방법을 발표했습니다. 지금까지 13,000명 이상의 사용자가 초기 프리뷰 프로그램에 참여해 웹의 미래를 함께 만들어가는 데 도움을 주셨습니다. 여러분의 기여에 진심으로 감사드리며, 여러분이 구축할 혁신적인 AI 경험이 기대됩니다.
AI를 최대한 활용할 수 있도록, 우리는 여러 내장 API를 오리진 트라이얼(origin trials)로 출시했습니다. 여기에는 Prompt API, Translator API, Summarizer API, Language Detector API와 같은 실험적인 API가 포함됩니다. 이 API들은 서버 호출 없이 브라우저에서 AI 기반 작업을 실행할 수 있도록 하며, 직접 AI 모델을 관리하고 배포할 필요가 없습니다. 8,600명 이상의 개발자가 이 API들을 활용해 웹 애플리케이션이나 Chrome 확장 프로그램을 개발하기 위해 Google Chrome Built-in AI Challenge에 등록했습니다. 우승자는 1월 중순에 발표될 예정이니 기대해 주세요.
WebAssembly(Wasm)와 WebGPU 개선으로 온디바이스 AI 성능 향상
우리는 웹이 모든 사람이 접근할 수 있는 AI 지원 앱을 구축하기 위한 최고의 런타임이라고 믿습니다. 내장 AI API 작업을 보완하기 위해, 자체 AI 모델을 웹에 가져와 빠르게 실행할 수 있도록 돕는 두 가지 기술, WebGPU와 Wasm을 개선했습니다.
WebGPU에서는 16비트 부동 소수점 값과 패킹된 정수 도트 프로덕트(packed integer dot products)를 도입하여 컴퓨트 셰이더(compute shader)를 통해 디바이스 GPU를 더 유연하게 활용할 수 있게 했습니다. 앞으로 WebGPU에는 서브그룹과 서브그룹 행렬과 같은 개선 사항이 추가될 예정입니다. 이 기능들은 GPU 스레드 간의 빠른 통신을 가능하게 하고, 고정 크기 행렬 곱셈(matrix multiplication)을 최대한 활용할 수 있도록 돕습니다. 또한, 2025년에는 Wasm에 Memory64를 도입하여 더 큰 AI 모델을 메모리에서 처리할 수 있도록 지원할 계획입니다.
View Transition API로 더 부드럽고 연결된 내비게이션 구현
새롭게 추가된 크로스 도큐먼트 뷰 전환(cross-document view transitions) 기능으로 여러 페이지 간에 매끄럽고 유연한 내비게이션을 구현할 수 있습니다. 몇 줄의 CSS만으로 성가신 페이지 새로고침 “깜빡임”을 제거할 수 있습니다. 이로 인해 다중 페이지 아키텍처의 이점을 유지하면서도 몰입감 있는 네이티브 앱과 같은 탐색이 가능합니다.
CSS 팝오버와 앵커 포지셔닝으로 자바스크립트 없이 상호작용 오버레이 구현
이제 popover로 툴팁, 메뉴 및 기타 오버레이를 만들고 CSS Anchor Positioning API를 사용하여 이들을 트리거 요소에 시각적으로 연결할 수 있습니다. 사용자가 창 크기를 조정할 때에도 오버레이가 고정되게 보이도록 하기 위해 약간의 CSS와 HTML만 있으면 됩니다. 이를 통해 사용자는 더욱 안정적이고 동적인 웹 경험을 누릴 수 있고, 개발자는 복잡한 자바스크립트 위치 계산이나 z-index 관리에서 자유로워질 수 있습니다. 개발자와 사용자 모두에게 이상적인 솔루션입니다.
최신 CSS 및 UI 리소스는 CSS Wrapped 2024를 확인하세요.
Speculation Rules API로 거의 즉각적인 페이지 로드 구현
올해 들어 Speculation Rules API를 통해 페이지 로드 시간이 빠르다 못해 거의 즉각적으로 느껴질 정도로 향상되었습니다. 몇 줄의 JSON 코드로 구현 가능한 이 API는 페이지를 백그라운드에서 완전히 사전 렌더링하여, 사용자가 방문했을 때 즉시 사용할 수 있도록 준비합니다.
Interaction to Next Paint(INP)가 새로운 Core Web Vital로 도입
INP(Interaction to Next Paint)는 첫 번째 사용자 입력 이후의 페이지 응답성을 더 포괄적으로 측정하기 위해 3월에 First Input Delay를 대체하여 새로운 Core Web Vital로 채택되었습니다. 이후 모바일에서 “좋은” INP 점수를 가진 사이트의 수가 9% 증가했으며, 이는 웹 전반에 걸쳐 더 빠르고 즐거운 사용자 경험으로 이어지고 있습니다.
Autofill로 더 원활한 온라인 결제 제공
autofill은 브라우저가 사용자의 저장된 정보를 활용해 양식(form) 필드를 자동으로 채우는 기능으로, 이를 설정하면 사용자가 양식을 끝까지 작성하도록 유도할 수 있습니다. Chrome 팀이 수천 개의 온라인 양식을 분석한 결과, autofill을 사용할 경우 이탈율이 평균 75% 감소하는 것으로 나타났습니다. 긍정적인 결제 경험에 기여하는 요인은 다양하지만, 이 데이터에 따르면 autofill 기능이 유용한 역할을 할 수 있음을 나타냅니다.
Autofill은 특히 전자상거래 결제 과정에서 유용합니다. Shopify의 분석에 따르면, 게스트 결제에서 Autofill을 사용하는 경우, 그렇지 않은 경우보다 결제 전환율이 45% 더 높은 것으로 나타났습니다.
양식의 브라우저 자동 완성을 측정하는 방법을 알아보세요.
AI 기반 솔루션으로 더욱 강력해진 Chrome DevTools
콘솔 인사이트를 통해 Chrome DevTools에 Gemini를 도입하여 AI 기반 디버깅으로 더욱 효율적인 문제 해결이 가능해졌다는 것을 기억하실 것입니다. Google I/O 2024 이후, 이 기능은 전 세계적으로 사용할 수 있게 되었습니다.
또한 AI 지원 패널을 출시하여 Gemini를 활용해 스타일링, 네트워크 요청, 소스, 성능과 같은 페이지의 기술적 세부 정보를 이해할 수 있도록 돕습니다.
Performance 패널도 올해 크게 개선되었습니다. 실시간으로 Core Web Vitals를 모니터링하고 주석을 추가할 수 있는 기능이 포함되었으며, Lighthouse의 performance insights 기능이 Performance 패널에 통합되었습니다.
AI 지원 향상, Performance 패널 개선, 스크롤 배지와 같은 다양한 품질 개선 업데이트 덕분에 Chrome DevTools는 그 어느 때보다도 유용해졌습니다. 더불어 새로운 Gemini 2.0 모델을 통한 성능 향상과 같은 더 많은 개선사항들이 2025년에 출시될 예정입니다.
Chrome DevTools에서 스타일링을 위해 AI 지원 패널을 사용하는 5가지 방법을 살펴보세요.
Baseline 2024: 크로스 브라우저 웹 기능의 새 시대
Baseline 2024는 그라디언트 보간(gradient interpolation)부터 등록된 커스텀 속성까지 총 39개의 새로운 크로스 브라우저 웹 기능을 도입했습니다. Baseline에 포함된 기능은 최소 30개월간 호환성을 유지하므로, 브라우저 간 호환성 문제를 걱정할 필요가 없습니다. 하지만 새로운 기능을 사용할지 여부를 고민 중이라면, Akamai의 RUM Archive Insights에서 Baseline 버전별 기능과 전 세계 사용자 점유율을 확인해보세요.
올해 가장 주목할 만한 Baseline 발표는 모든 웹 기능과 브라우저 간 지원 수준을 보여주는 웹 플랫폼 상태 대시보드입니다. 더욱 흥미로운 점은 웹 플랫폼 상태 대시보드를 구동하는 데이터가 공개되어 있어 여러분이 직접 사용하고 자신의 도구에 통합할 수 있다는 것입니다. Baseline 배너가 이러한 좋은 예시입니다.
최신 크로스 브라우저 웹 개발 도구를 포함하여 2024 Baseline 진행 상황에 대해 자세히 알아보세요.
주요 브라우저들이 Interop 2024를 통해 더 많은 기능을 Baseline으로 추가
더 많은 기능을 Baseline에 포함하기 위해 우리는 올해도 Interop 2024 파트너들과 협력해왔습니다. 올해의 목표 기능은 popover, CSS nesting, font-size-adjust, relative color syntax 등입니다.
Interop은 실험적 브라우저와 안정적 브라우저 릴리스에 대한 점수도 제공합니다. 현재 안정적 브라우저의 전체 Interop 점수는 87이며, Chrome Stable의 점수는 연말 기준 98에 도달했습니다. 브라우저의 진행 상황은 Interop 대시보드에서 확인할 수 있습니다. 우리는 이미 Interop 2025를 준비하고 있으며, 이에 대한 발표는 내년 2월에 예정되어 있습니다.
함께 만들어가는 웹의 미래
2024년의 발전은 흥미롭지만, 우리는 앞으로의 미래가 더욱 밝을 것임을 확신합니다. 이는 모두 개발자 커뮤니티 여러분의 열정, 피드백, 그리고 혁신 덕분입니다.
BrazilJS 컨퍼런스, DevFest Paris, Google I/O 2024, 그리고 최초로 개최된 Web AI Summit과 같은 세계 각지의 이벤트를 통해 우리는 한 가지를 확실히 깨달았습니다. 여러분 모두가 우리만큼이나 웹의 가능성과 잠재력을 믿고 있다는 점입니다.
여러분은 그 어느 때보다도 더 대담한 아이디어를 가지고 있습니다. 그리고 우리는 여러분의 아이디어를 실현할 수 있도록 최선을 다할 것입니다. X, YouTube, LinkedIn에서 최신 소식을 확인하며 계속 소통해 주세요. 웹의 새로운 가능성을 함께 상상하고 실현해 나갑시다.
