Safari 26 베타 출시: WebGPU 드디어 추가!

Web GPU

WWDC25에서 발표된 Safari 26 베타가 공개되었습니다. 이번 업데이트는 67개의 새로운 기능과 107개의 개선사항을 포함하며, 웹 개발자들에게 많은 흥미로운 변화를 제공합니다.

버전 번호 변경: Safari 18에서 26으로

Safari의 버전 번호가 18.x에서 26.x로 크게 변경되었습니다. 이는 macOS, iOS, iPadOS, visionOS, watchOS 모든 플랫폼이 동일한 버전 번호(26)를 공유하는 새로운 체계에 맞춘 것입니다.

주요 새 기능

🎨 SVG 아이콘 지원

  • 파비콘을 포함한 모든 인터페이스 아이콘에서 SVG 파일 형식 지원
  • 무한 벡터 스케일링의 장점 활용
  • PNG 파일보다 작은 파일 크기로 더 나은 성능

📱 iOS/iPadOS 웹 앱 기본 동작 변경

  • 모든 웹사이트가 홈 화면에 추가될 때 기본적으로 웹 앱으로 열림
  • 사용자가 원할 경우 "웹 앱으로 열기" 기능을 끌 수 있음
  • 웹 앱 매니페스트 없이도 웹 앱 경험 제공

🌈 HDR 이미지 지원

  • 웹페이지에서 높은 동적 범위(HDR) 이미지 지원
  • Canvas에서도 HDR 이미지 사용 가능
  • 새로운 CSS dynamic-range-limit 속성으로 HDR/SDR 콘텐츠 혼합 제어

⚡ WebGPU 지원

  • GPU에서 프로그램을 실행할 수 있는 WebGPU JavaScript API 지원
  • WebGL보다 향상된 성능과 계산 셰이더 지원
  • Babylon.js, Three.js, Unity 등 주요 프레임워크와 호환

Three.js 생태계도 더욱 풍성해졌습니다:

  • React Three Fiber: React 개발자들을 위한 선언적 Three.js 래퍼. JSX로 3D 씬을 구성할 수 있어 React 개발자들에게 친숙한 문법 제공
  • Threlte: Svelte용 Three.js 라이브러리로, "svelte boom is coming 스붐온!" 🚀 Svelte의 반응성과 Three.js의 3D 파워가 만나 더욱 간결하고 성능 좋은 3D 웹 경험 구현 가능

이제 Safari 26의 WebGPU 지원으로 이러한 라이브러리들이 더욱 빠르고 부드러운 3D 렌더링을 제공할 수 있게 되었습니다.

🥽 visionOS 전용 기능

<model> 요소

  • 웹페이지에 3D 모델을 직접 임베드 가능
  • USDZ 파일 형식 지원
  • 사용자가 3D 공간에서 모델과 상호작용 가능
<model src="teapot.usdz" stagemode="orbit">
  <img src="fallback/teapot.jpg" alt="찻주전자">
</model>

몰입형 비디오 및 오디오

  • 공간 비디오, Apple Immersive Video 지원
  • 180°, 360°, 광시야각(Wide FOV) 비디오 지원
  • 새로운 Apple Projected Media Profile(APMP) 준수

🎯 CSS 앵커 포지셔닝

  • 한 요소를 다른 요소에 고정하는 새로운 레이아웃 메커니즘
  • 직관적인 position-area 구문 제공
  • 팝오버, 툴팁, 메뉴 생성에 유용
.anchor-element {
  anchor-name: --profile-button;
}

.popup {
  position-anchor: --profile-button;
  position-area: bottom span-right;
}

📜 스크롤 기반 애니메이션

  • 스크롤 진행도에 따른 CSS 애니메이션
  • 뷰포트 진입/이탈에 따른 애니메이션 제어
  • animation-timeline: view() 속성 사용

🔒 디지털 자격증명 API

  • W3C Digital Credentials API 지원
  • Apple Wallet의 신분증(운전면허증 등)을 안전하게 웹사이트에서 요청 가능
  • 높은 신뢰도가 필요한 온라인 서비스에 활용

개발자 도구 개선

SwiftUI용 WebKit API

  • Swift 및 SwiftUI용으로 설계된 새로운 WebKit API
  • WebView 및 WebPage 타입 제공
  • Apple 플랫폼 앱에 웹 콘텐츠 통합 용이

Web Inspector 향상

  • Service Worker 자동 검사 및 일시정지 기능
  • Worker 관련 메모리 및 성능 문제 디버깅 개선
  • 비동기 코드 디버깅 경험 향상

CSS 추가 기능

  • text-wrap: pretty: 텍스트 줄바꿈 개선으로 더 균등한 여백 제공
  • contrast-color() 함수: 배경색에 대해 최적의 대비를 제공하는 색상 자동 선택
  • progress() 함수: 두 값 사이의 진행률을 계산하는 수학 함수
  • margin-trim: block inline: 양방향 여백 트리밍 지원

JavaScript 및 Web API

  • Trusted Types API: XSS 공격 방지를 위한 입력 검증
  • URL Pattern Standard: 정규표현식을 사용한 효율적인 URL 매칭
  • WebAuthn Signal API: 패스키 관리 개선
  • File System WritableStream API: 사용자 파일 시스템에 직접 쓰기

미디어 및 WebRTC

  • MediaRecorder에서 ALAC 및 PCM 오디오 지원
  • WebCodecs API에 AudioEncoder 및 AudioDecoder 추가
  • WebRTC 다중 업데이트 및 스피커 선택 API 지원

개인정보 보호 강화

  • 알려진 핑거프린팅 스크립트의 기기 특성 접근 차단
  • 장기간 스크립트 저장소 설정 방지
  • 탐색 추적에 사용될 수 있는 상태 읽기 차단

Safari 26 베타는 웹 개발의 미래를 제시하는 중요한 업데이트입니다. 새로운 3D 모델 지원, HDR 이미지, WebGPU, 그리고 강화된 개인정보 보호 기능까지, 웹 경험의 새로운 가능성을 열어줍니다.

macOS Tahoe 26, iOS 26, iPadOS 26, visionOS 26 베타를 설치하거나, macOS Sequoia/Sonoma에서 Safari 26 베타를 다운로드하여 이러한 새로운 기능들을 직접 체험해보세요.

참고: 이 글은 WebKit 블로그의 WWDC25 소식을 바탕으로 작성되었습니다.

오소리
오소리
꿀통을 찾아다니는 오소리입니다.
작성자 글 모아보기
©YozmBlog
koenjaesfr