WWDC 2025 - Safari 및 WebKit의 주요 업데이트
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
iOS 개발자, 웹 개발자, 프론트엔드 엔지니어
- 난이도: 중간 (CSS 및 WebKit API 활용 기초 지식 필요)
핵심 요약
scroll()및view()타임라인 타입 도입 → JavaScript 의존성 감소 및 배터리 효율 향상- CSS 기반 애니메이션/레이아웃 →
background-clip: border-area지원,position-anchor속성 활용 - 접근성 최적화 →
prefers-reduced-motion쿼리 적용, 텍스트 흐름 개선
섹션별 세부 요약
1. 주요 기능 개요
- JavaScript 대체 기능
- 스크롤 기반 애니메이션에서 JavaScript 제거
- scroll() 타임라인: 스크롤 위치와 연동된 프로그레스 바 구현
- view() 타임라인: 뷰포트 진입 시 요소 애니메이션 트리거
- 접근성 강화
- prefers-reduced-motion 지원으로 애니메이션 제어
- 텍스트 흐름 개선: 고립된 단어 제거, 과도한 하이픈 방지
2. iOS 개발자 고려사항
- WKWebView 최적화
- JavaScript 브러드 크기 감소
- iOS 앱 내 웹 컴포넌트의 에너지 효율 향상
- 애니메이션 일관성
- 기기 회전 시 동일한 애니메이션 동작 보장
3. CSS 기반 레이아웃 혁신
- 포지셔닝 편의성
- position-anchor 속성으로 요소 고정
- position-area: 그리드 기반 위치 지정
- position-try: 대체 포지셔닝 전략 제공
- 예시 코드
```css
.profile-button { anchor-name: --profile-button; }
.profile-menu { position-anchor: --profile-button; }
```
4. 성능 및 디자인 개선
- 배경 처리
- background-clip: border-area로 테두리 기반 그라디언트 지원
- 이미지 기반 솔루션보다 메모리 효율 향상
- 3D 및 공간 콘텐츠
- 스테레오스코픽 3D 모델 렌더링, 공간 웹 기능 강화
5. Safari 19 추가 기능
- 미디어 지원 확장
- Ogg Opus, Ogg Vorbis, WebM 지원
- 총 15개 지원 미디어 포맷
- HDR 및 색상 품질
- 10-16비트 색 깊이 지원, P3 색공간, HEIC/AVIF 호환
결론
- 핵심 팁:
prefers-reduced-motion쿼리 사용으로 접근성 향상,scroll()/view()타임라인 적용 시 JavaScript 의존성 줄이기 - 실무 적용:
background-clip: border-area로 테두리 그라디언트 구현,position-anchor로 CSS 기반 포지셔닝 최적화 - 결론: Safari 19의 업데이트는 웹 기술의 성능, 접근성, 개발자 경험을 혁신적으로 개선하며, iOS 하이브리드 앱 개발에 강력한 지원 제공