사파리 테크 프리뷰 216 업데이트 향상된 성능

Safari Technology Preview란?

Safari Technology Preview는 웹 개발자와 기술 애호가들을 위한 실험적인 Safari 브라우저입니다. macOS에서 실행되며, Apple이 Safari 브라우저의 차세대 기능을 공식 릴리스 전에 테스트할 수 있도록 제공합니다.

주요 기능 및 목적

• 최신 HTML, CSS, JavaScript API 및 엔진이 적용된 실험적 기능 체험
• Web Inspector, WebGPU, WebAssembly, 성능 최적화 기능 미리 사용 가능
• 웹앱의 차세대 렌더링 결과 및 동작 테스트에 최적화
• 개발자 피드백을 수집해 Safari 정식 버전에 반영하는 목적

Safari Technology Preview는 일반 Safari와 동시에 설치 및 병행 사용이 가능해, 기존 환경을 해치지 않으며 실험용 브라우저로 적합합니다.

지원 운영체제:

Safari Technology Preview 최신 릴리스 정보

Safari Technology Preview 216 버전이 2024년 6월 기준으로 공개되었습니다.

업데이트된 기술 및 수정 사항

이번 216 릴리스에서는 다음과 같은 기술 분야에서 개선이 이루어졌습니다:

• 접근성 개선
• CSS와 양식 기능 향상
• WebAnimations와 SVG 처리 개선
• Web API 개선 및 Web Inspector 디버깅 도구 강화
• 미디어 및 서비스 워커 관련 버그 수정
• 렌더링 및 URL 관련 문제 해결

이 개선 사항은 Safari의 정식 릴리스에 앞서 새로운 웹 경험을 테스트하려는 사용자에게 반가운 소식이며, 실시간 버그 피드백에도 기여할 수 있습니다.

업데이트 방법:

Safari Technology Preview 설치 방법

Safari Technology Preview 설치는 매우 간단하지만, 개발자 옵션을 활성화해야 사용할 수 있습니다.

macOS 버전에 맞는 Safari Technology Preview 다운로드 및 설치

1. 'Safari > 설정' 진입
2. [개발자용] 메뉴 보기 활성화
3. 메뉴 막대에 ‘개발자용’ 항목이 표시되면, 하단의 'Safari Technology Preview 받기' 클릭
4. 또는 Apple 공식 Safari Technology Preview 웹사이트에서 macOS 버전에 맞는 설치 파일 다운로드
5. 일반 Safari와는 별도 앱으로 설치되며, 아이콘 및 환경이 분리됨

Safari Technology Preview는 자동 업데이트를 지원하고, 각각의 빌드에는 릴리스 노트가 포함되어 변경사항 확인이 용이합니다.

Xcode 시뮬레이터에서 웹 디버깅 활성화

Safari Technology Preview는 iOS WebView 디버깅을 위한 필수 도구입니다. 특히 최신 iOS, React Native, Swift 등 다양한 스택과 함께 활용됩니다.

시뮬레이터에서 웹뷰 실행 후 Develop > 디바이스 선택

1. Xcode 실행 후 WKWebView 포함 앱을 시뮬레이터에서 실행
2. Safari Technology Preview 실행 후 메뉴 상단의 'Develop' 선택
3. 접속 가능한 시뮬레이터 기기 목록 확인
4. 디버깅할 URL 선택 시 개발자 도구(Elements, Console, Network 등) 자동 연결

최근 iOS 16.x 이상에서는 localhost 디버깅 이슈가 있어 정상 작동하지 않을 수 있다는 점을 유의해야 합니다. isInspectable 속성 활성화도 필수입니다.

Safari 개발자 도구 활용법

Safari Technology Preview는 모바일 웹 디버깅과 구조 분석에 효과적입니다. 콘솔, 온클릭 추적, DOM 탐색 도구 등이 핵심입니다.

요소 선택 도구 및 콘솔 분석 기능

• 개발자 도구 상단의 조준 아이콘(요소 선택 도구) 클릭
• 시뮬레이터 혹은 실제 기기에서 요소 클릭 시 해당 HTML 코드 자동 하이라이팅
• 특정 버튼 클릭 이벤트의 함수명 추적: "onclick" 속성 확인
• 콘솔 탭에서 직접 함수 실행 및 디버깅 가능

이 모든 과정은 크롬 DevTools와 유사한 인터페이스를 제공하므로, 웹 개발자라면 큰 학습 곡선 없이 적응 가능합니다.

관련 기술 스택 활용 예:

Safari Technology Preview는 단순한 브라우저가 아니라, 현업 개발자의 디버깅과 최적화 루틴을 포함한 필수 도구로 자리 잡고 있습니다.