Safari 개발자 기능 재발견하기

♪ 부드러운 힙합 연주곡 ♪ ♪ 안녕하세요, 저는 Patrick이에요 WebKit 개발자 경험 팀의 엔지니어죠 오늘 Safari에서 웹 개발자들을 위한 기능을 소개하게 되어 기뻐요 Safari는 여러분과 같은 웹 개발자나 웹 디자이너에게 다양한 도구를 제공하여 웹 페이지, 웹 앱 JavaScript로 작성한 앱과 웹 뷰 및 확장 프로그램 등을 검사하게 해 주죠 이러한 도구들은 iOS, iPadOS, tvOS와 호환되며 Mac과 페어링된 xrOS에서도 사용할 수 있어요 오늘은 Safari에서 여러분에게 제공되는 개발자 도구의 범위에 관해 알아볼 예정이며 처음에는 간단하게 도구를 살펴보면서 macOS의 웹 페이지 검사를 도와드릴게요 그다음에는 Safari는 물론 iOS, iPadOS와 xrOS 시뮬레이터에서 반응성 높은 레이아웃을 미리 보는 방법을 살펴보도록 하죠 이후에는 Mac 이외의 기기에서 콘텐츠를 디버깅하는 방법을 살펴볼 텐데 예를 들면 iPhone이나 Mac과 함께 xrOS를 실행하는 기기가 있어요 그다음에는 WebDriver를 사용하여 크로스 브라우저와 크로스 플랫폼에서 자동화된 테스트를 수행하는 방법을 살펴볼게요 그리고 마지막으로 새롭게 설계된 Feature Flags 설정을 통해 미래의 웹 플랫폼 기능을 알아보는 방법을 살펴보죠 이런 주제들을 다루기 전에 Safari에서 개발자 기능을 사용한 적이 없다면 활성화해야 해요 Safari의 설정에 웹 개발자를 위한 기능을 보여 주는 옵션이 있죠 활성화하려면 메뉴 바에서 Safari를 선택하고 Settings를 선택하세요 Settings 창에서 Advanced 탭을 클릭하세요 여기를 보면 Show features for web developers 체크박스가 있죠 기능을 활성화하세요 이제 웹 개발자용 기능을 활성화했으니 오픈 웹 페이지를 검사하기 위해 Safari에서 사용할 수 있는 도구들을 살펴보죠 제가 작업 중인 웹 페이지인데 딱 맞는 배경 색을 설정하려고 노력 중이에요 모든 것이 하나로 어우러지게 하려면 우주 비행사 헬멧의 색깔을 가져오면 될 것 같아요 Web Inspector를 사용하여 색깔을 선택하여 이 페이지의 배경 색으로 사용할 수 있는지 볼게요 Web Inspector를 빠르게 열어서 현재 작업 중인 페이지를 검사하는 두 가지 방법이 있어요 첫 번째는 Develop 메뉴 안에 있는데 올해는 생각을 달리하여 핵심 도구들을 쉽게 찾을 수 있도록 하여 웹 콘텐츠의 개발과 디자인을 도우려고 했죠 메뉴의 여러 항목으로 Web Inspector를 탭이나 태스크로 열 수 있어요 제가 원하는 건 Web Inspector를 여는 거고 특정 탭으로 이동하는 게 아니므로 여기서 Show Web Inspector를 선택할게요 근데 Web Inspector를 여는 편리한 방법이 또 있어서 그것도 보여드리죠 웹 페이지에서 아무 곳이나 컨트롤 클릭한 뒤 컨텍스트 메뉴에서 Inspect Element를 선택하면 Web Inspector가 나타날 뿐만 아니라 요소를 선택하여 스타일 등 다른 정보를 상세 정보 사이드바에 보여 줄게요 Web Inspector가 나타나 있을 때도 Inspect Element 항목을 사용할 수 있죠 같은 방식으로 다른 요소를 선택하거나 요소 선택 도구를 사용하여 호버 중인 요소의 정보를 볼 수 있으며 선택자, 여백 등의 레이아웃 정보 형태의 윤곽과 손쉬운 사용 역할이 그 대상이죠 요소 선택 모드에서 클릭하면 해당 요소가 Web Inspector에서 선택돼요 지금은 Web Inspector가 열려 있으니 제 페이지의 배경 그라데이션을 살펴보고 싶군요 이 우주 비행사가 배경과 잘 어울리도록 헬멧 바이저의 색깔을 샘플링하고 싶어요 그라데이션을 편집하려면 미리보기 스와치를 클릭하세요 Styles 사이드바의 그라데이션 옆에 있죠 여러분이 편집하고 싶은 그라데이션 부분을 선택하고 컬러 피커를 이용하여 우주 비행사의 바이저와 같은 화면의 색깔을 가져오세요

제가 원하는 색에 비해 너무 밝군요 좋은 생각이 아니었나 봐요 이전이 더 나아 보였죠 command-Z를 눌러 작업을 취소하고 일단은 색깔을 현재로 유지할게요 물론 Web Inspector를 통해 웹 페이지를 검사할 수 있는 여러 방법 중 하나예요 Web Inspector에서 어떤 도구를 사용할 수 있는지 더 알아보고 싶다면 다음 세션을 참고하세요 'Web Inspector의 새로운 기능'과 WWDC21의 'Web Inspector 개선 사항 살펴보기'죠 이제 여러분의 웹 페이지가 사용자 디스플레이에 맞춰 바뀌는 기능을 테스트하여 웹 페이지의 디자인을 높여 줄 다른 도구를 소개해드릴게요 Safari에는 Responsive Design Mode라는 도구가 있는데 이 기능은 Develop 메뉴로 접근할 수 있으며 Enter Responsive Design Mode 항목을 선택하면 돼요 이전에 Responsive Design Mode를 사용한 적이 있다면 여러분을 위해 기능을 수정하여 콘텐츠의 레이아웃이 어떤 화면 크기에도 맞춰질 수 있도록 했어요 여러분의 창이나 화면보다 큰 뷰포트를 시도해 볼 수도 있죠 뷰포트 측면의 핸들을 드래그하면 뷰포트의 크기가 달라져도 모든 페이지를 계속 보여 주며 텍스트나 이미지 같은 요소를 다시 정렬하여 새로운 뷰포트에 맞춰요 특정한 크기를 목표로 할 수도 있는데 뷰포트 위에 원하는 폭과 높이를 입력하는 거죠 폭과 높이 오른쪽에는 배율이 있는데 뷰포트가 렌더링되는 실제 크기의 비율이에요 여기서는 배율이 100%가 아닌데 뷰포트의 현재 높이가 800픽셀이고 전체 뷰포트를 보여 줄 만큼 창이 높지 않아서 Safari가 뷰포트 화면을 전체 크기의 78%로 줄였죠 Responsive Design Mode는 여러분이 직접 픽셀 비율을 조절하도록 하여 추가로 반응성을 테스트하게 해 주며 이미지 애셋이나 다른 양식을 다양한 디스플레이의 픽셀 비율에 맞춰 주죠 웹 디스플레이의 픽셀 비율에 반응하는 여러 가지 방법이 있는데 이미지 태그의 소스 집합도 있고 이미지가 있는 곳이라면 어디서나 사용할 수 있는 CSS 이미지 집합 함수도 있고 해상도 미디어 쿼리를 통해 디스플레이의 픽셀 비율에 맞게 테두리 크기 등 페이지 스타일의 모든 면을 수정할 수 있어요 하지만 때로는 테스트를 진행할 때 macOS의 페이지 반응성뿐만 아니라 iOS, iPadOS, xrOS도 테스트하고 싶을 수 있죠 올해에는 Safari에서 시뮬레이터로 바로 넘어가는 기능을 도입했어요 시뮬레이터는 실제 기기가 없어도 iOS, iPadOS, xrOS에서 웹 콘텐츠를 테스트할 수 있죠 iOS와 iPadOS 시뮬레이터는 Xcode에 포함돼 있고 해당 플랫폼에는 Safari가 포함돼 있어요 Xcode는 Mac App Store에서 무료로 다운받을 수 있죠 설치를 마치기 위해 Xcode를 한 번 실행하면 다음에 Safari를 실행할 때 시뮬레이터를 사용할 수 있어요 Open with Simulator를 클릭하면 설치된 시뮬레이터의 목록이 나오는데 현재 실행 중인 시뮬레이터는 빠른 접근을 위해 제일 위에 위치해 있죠 Xcode를 설치하지 않았거나 다른 기기를 위한 시뮬레이터를 추가하고 싶으면 메뉴의 링크를 클릭하여 문서를 통해 도움을 받을 수 있어요 그럼 시뮬레이터에서 현재 페이지를 열어 보죠 이 시뮬레이터는 이미 실행 중이었지만 시뮬레이터가 실행 중이지 않았다면 새로 실행될 거예요 제일 중요한 건 시뮬레이터와 macOS의 Safari가 페이지 레이아웃에서 어떻게 다른지 눈여겨보는 거죠 잘 보면 폭이 거의 비슷한데도 iOS Safari는 페이지를 로딩할 때 화면 크기가 더 큰 것으로 간주하는 듯해요 시뮬레이터가 좋은 또 다른 점은 사용자가 iOS에서 기대하는 동작인 부드러운 스크롤이나 더블 탭을 통한 확대를 테스트할 수 있어서 iPhone이 없어도 훌륭한 사용자 경험을 보장할 수 있다는 점이죠 또한, 시뮬레이터에서 웹 페이지를 열면 Develop 메뉴의 Web Inspector를 이용하여 시뮬레이터를 찾은 다음 시뮬레이터에서 웹 페이지를 선택하여 원하는 부분을 검사할 수 있어요 그럼 Web Inspector가 자체 창을 열어서 시뮬레이터에서 선택한 페이지를 검사하죠 iOS와 iPadOS에 추가하여 xrOS 시뮬레이터를 이용하여 해당 플랫폼의 웹 콘텐츠를 테스트할 수 있죠 시뮬레이터가 설치돼 있지 않다면 Open with Simulator에서 Add simulators를 선택하여 추가 방법을 알아보세요 시뮬레이터를 설치했으면 iOS 시뮬레이터와 같은 방식으로 사용할 수 있는데 Mac의 Safari를 이용하여 웹 콘텐츠도 검사할 수 있죠 Safari의 Develop 메뉴에서 시뮬레이터를 찾아 검사하고 싶은 콘텐츠를 선택하세요 macOS의 시뮬레이터만 검사할 수 있는 게 아니라 iOS, iPadOS, tvOS와 xrOS 기기를 Mac의 Safari에서 검사할 수 있어요 시뮬레이터와 달리 검사할 콘텐츠를 기기에서 활성화한 뒤에 Mac을 이용하여 검사할 수 있는데 기기를 옵트인하여 Safari나 다른 앱에서 검사할 수 있는 오픈 웹 페이지 목록을 제공하기 위함이죠 iOS와 iPadOS에서는 설정 앱에서 할 수 있어요 스크롤하여 Safari를 선택하고 아래로 내려가서 Advanced를 선택하세요 이제 Web Inspector를 토글 합니다 끝으로 케이블로 여러분의 기기와 Mac을 연결하세요 iPad에서 몇 가지 웹 콘텐츠를 열었는데 Safari 창과 함께 Home Screen 웹 앱도 열었죠 이제 Mac으로 돌아가서 이 콘텐츠를 검사할게요 Mac의 Develop 메뉴를 보면 여러분이 방금 연결한 기기가 이전에 시뮬레이터를 봤던 위치에 있을 거예요 시뮬레이터와 마찬가지로 검사할 수 있는 콘텐츠가 보이는데 Safari에서 열었던 웹 페이지를 포함하여 Home Screen 웹 앱은 물론 서비스 워커까지 있죠 앞에서 했던 것처럼 메뉴에서 검사할 수 있는 콘텐츠인 Home Screen 웹 앱을 선택할 수 있죠 그럼 이전처럼 Web Inspector가 나타나서 Mac을 통해 여러분 기기의 콘텐츠를 검사해요 근데 여러분의 기기와 Mac을 매번 케이블로 연결하여 검사하지 않아도 된다면 더 좋지 않을까요? 다시 Mac으로 가서 네트워크로 기기를 연결하는 방법을 살펴볼게요 Develop 메뉴를 보면 Connect via Network 항목이 있죠 이걸 선택하면 이제 여러분의 기기는 Mac과 동일한 네트워크에 연결만 되어 있으면 케이블로 연결할 필요가 없어요 해당 설정을 기기에서 활성화했으니 기기의 케이블을 뽑고 무선으로 검사할 수 있죠 그리고 올해 처음으로 macOS Sonoma가 설치된 Mac에서 xrOS 기기를 검사할 수 있어요 다만 iOS와 iPadOS에 비해 시작하는 게 어려울 수 있죠 유선 연결 없이 Mac에서 기기 검사를 허용하기 위해 해당 플랫폼과 네트워크로 페어링되는 걸 지원해요 제 동료의 기기와 페어링해 보죠 시작하려면 Settings를 열고 Apps에서 Safari를 선택하세요 아래로 스크롤하여 Advanced를 선택하고 Web Inspector를 활성화하세요 이제 기기를 Mac과 페어링해야 하죠 여러분의 Mac과 기기가 같은 네트워크에 연결돼 있어야 해요 그리고 Settings 앱에서 General을 선택하고 Remote Devices를 선택하세요 Remote Devices 화면이 보이지만 여러분의 기기는 macOS에서 페어링할 수 있죠 Mac에서 Safari의 Develop 메뉴를 열고 기기의 하위 메뉴에서 Use for Development를 선택하세요 기기에 6자리의 페어링 코드가 나타나며 Mac에는 창이 떠서 페어링 코드를 입력하라고 하죠 Mac에 코드를 입력하세요 코드를 입력하면 페어링이 완료돼요 자동으로 여러분의 Mac이 기기의 Remote Devices 목록에 나타나죠 기기가 페어링 됐으면 Safari를 열어서 Mac을 통해 웹 페이지와 다른 콘텐츠를 iOS 기기와 같은 방법으로 검사할 수 있어요 요소 선택 모드도 작동하죠 아까 했던 것처럼 macOS의 요소 선택 모드로 들어가서 웹 페이지에서 검사하고 싶은 노드를 본 뒤 손가락을 이용하여 선택하세요 xrOS를 위한 웹 콘텐츠를 디자인하고 개발하는 내용을 더 알고 싶다면 '공간 컴퓨팅을 위한 Safari를 만나다'를 참고하세요 웹 콘텐츠는 Safari와 웹 앱을 너머 확장돼요 웹 페이지와 JavaScript는 Apple 플랫폼의 100만 개가 넘는 앱에서 사용되며 올해 처음으로 해당 콘텐츠를 검사하는 기능이 새로운 버전으로 공개되죠 사용자 인터페이스의 일환으로 웹 콘텐츠를 사용하거나 JavaScript를 이용하여 앱 일부를 제어할 수도 있죠 이런 경우 API가 있는데 macOS 13.3 이후 버전과 iOS 및 iPadOS 16.4 이후 버전 그리고 xrOS에서 콘텐츠 검사를 활성화할 수 있어요 이 API는 WKWebView와 JSContext에서 사용할 수 있죠 콘텐츠의 검사를 활성화할 때 각 JSContext의 이름을 붙이면 Safari의 Develop 메뉴에서 다수의 JSContext를 구분할 수 있어요 앱에서 일부 콘텐츠에 대해 검사를 활성화했으면 Safari의 Develop 메뉴에서 검사할 수 있죠 기기에서 다른 콘텐츠를 검사했던 것과 같아요 이제 여러 기기에 걸쳐 콘텐츠 검사 및 디버깅이 가능하니 WebDriver를 이용하여 콘텐츠가 예상대로 작동하게 하는 방법을 논의해 보죠 웹이 발전하면서 웹 페이지를 계속 테스트하여 예상대로 작동하는 걸 보장하는 게 중요해요 WebDriver는 크로스 브라우저 API로 주요 브라우저와 플랫폼의 웹 콘텐츠의 테스트를 자동화하고 특정 브라우저의 코드를 요구하지 않죠 HTTP 요청을 받아들이는 로컬 웹 서버를 호스팅하여 다양한 테스트 환경으로부터 자동화 명령을 받아들일 수 있고 여러분이 사용할 수 있는 다양한 명령을 통해 웹 페이지에서 자동화 테스트를 실행할 수 있어요 요소를 찾거나 요소의 손쉬운 사용 역학을 가져오거나 JavaScript를 실행하거나 스크린샷을 찍을 수도 있죠 대개는 서드 파티 라이브러리를 이용하여 WebDriver를 이용하게 될 거예요 많이 쓰는 라이브러리는 Selenium인데 Python, Java, PHP JavaScript 등에 API를 제공하죠 Python 스크립트의 예가 있는데 Selenium을 통해 Safari를 자동화할 수 있어요 Safari를 위한 기본 옵션이 있는 드라이버를 생성하죠 그다음에는 webkit.org의 Web Inspector 문서를 살펴볼게요 사이트에 가면 검색 영역에 'device'를 입력하세요 마무리를 위해 Device Settings 링크를 찾을 수 있다고 표명할 거예요 모두 마치면 자동화 세션을 끝내서 Safari가 열었던 창을 청소할 수 있도록 하세요 이제 스크립트를 실행하죠 새로운 창이 생성되는데 주황색의 제목 바를 통해 이 창이 자동화됐음을 보여 줘요 테스트가 진행하는 상호작용에는 사용자가 하는 것처럼 타이핑도 포함되죠 믿지 못할 수도 있지만 속도를 늦춰 어떤 일이 벌어지는지 보여 드린 거예요 원래 속도로 하면 테스트가 시작하자마자 끝나죠 지금까지 WebDriver와 Safari로 뭘 할 수 있는지 간략하게 알아봤어요 iOS와 iPadOS 시뮬레이터는 물론 iPhone 또는 iPad 기기에서 테스트를 실행할 수 있죠 지금까지 현재 제공된 기능을 살펴봤으니 웹 플랫폼의 미래를 탐구하는 방법을 알아볼게요 웹은 계속 발전하고 있죠 잠재적인 미래의 도구와 기술을 살펴보는 건 짜릿한 일이에요 웹 브라우저에 적용하기 전에 기능을 실험해 보는 건 더욱 짜릿하죠 Safari의 Feature Flags 설정으로 이런 기능을 활성화할 수 있는데 Develop 메뉴를 열어서 Feature Flags를 선택하면 돼요 Feature Flags는 원래 Safari에서 Experimental Features 기능이었죠 Feature Flags는 주제별로 정리돼 있으며 애니메이션, CSS, JavaScript 미디어 등으로 구분하여 기능을 찾는 게 쉽죠 기능을 검색할 수도 있어요 예를 들어 '색상'을 검색하여 관련 기능을 모두 찾을 수도 있죠 기능을 활성화하는 것도 빨라요 체크박스를 선택하면 끝이죠 또한 활성화된 기능을 한눈에 알아볼 수 있는데 여기 CSS Masonry Layout이 활성화되었는데 굵은 글씨체로 강조되어 기본 상태가 아님을 보여 줘요

올해 새로 Safari에 추가될 Masonry Layout이나 다른 CSS 기능들은 'CSS의 새로운 소식'에서 더 알아볼 수 있어요 창의 오른쪽을 보면 각 기능의 상태가 나타나 있죠 각 기능은 4개 중 1개의 상태로 분류되어 있어요 첫 번째 상태인 Stable은 Safari에 적용되어 기본적으로 활성화돼 있죠 이러한 기능들은 토글이 가능하여 해당 기능이 문제를 일으키는지 알아보거나 브라우저에 해당 기능을 적용하지 않아도 사이트가 기능이 없는 상황을 잘 처리하는지 확인할 수 있어요 Stable 상태의 기능들은 결국 토글 가능한 기능 목록에서 삭제될 거예요 다음으로 Testable 기능은 아직 본격적인 준비가 안 됐지만 초기 피드백을 받을 준비가 됐거나 적용 절차를 밟고 있는 기능이죠 완성되진 않았지만 테스트할 수 있는 기능으로 해당 기능이 바탕으로 하는 기준을 제공하여 웹 개발자들에게 맞는 스펙으로 맞춰 갈 거예요 이런 기능들은 기본적으로 비활성화돼 있죠 마지막으로 흔히 사용하는 상태는 Preview예요 이 상태는 개발자들이 테스트할 준비가 된 기능이죠 Testable 기능보다는 많이 완성됐지만 아직 버그가 있을 수 있어요 이런 기능들은 Safari에서 기본적으로 비활성화돼 있지만 Safari Technology Preview에서는 기본적으로 활성화돼 있죠 Safari Technology Preview는 대략 2주마다 출시되며 웹 플랫폼 기능의 최신 기능들이 Safari와 다양한 플랫폼에 적용되기 전에 미리 접근할 수 있는 기능이에요 개발자 기능을 위한 기능 상태도 있죠 개발이나 테스트 목적으로 이전 API를 다시 활성화하기 위해 WebKit의 동작을 조절할 수 있는 설정이에요 각 Feature Flag의 기본 설정이 여러분의 고객이 여러분의 콘텐츠를 경험하는 일반적인 방식이라는 걸 고려하세요 또한 Safari를 업데이트할 때 자동으로 Feature Flags가 기본값으로 초기화된다는 사실을 기억해야 하죠 지금까지 여러분과 같은 개발자들을 돕는 Safari의 도구와 기능을 살펴봤어요 오늘 내용은 빙산의 일각이죠 오늘 다루었던 주제에 더해서 Safari는 올해 콘텐츠를 디버깅할 도구와 새로운 기능 및 개선 사항을 제공할 예정이에요 또한 웹 개발자들을 위한 Safari 기능의 새로운 문서를 작성하여 그 어느 때보다 쉽게 어떤 도구를 어떻게 사용할 수 있는지 알 수 있죠 또한 webkit.org에서 Web Inspector 상세 문서를 통해 Web Inspector의 다양한 기능을 활용할 수 있어요 여러분의 의견도 기다릴게요 버그를 발견했거나 웹 개발자들을 위한 기능을 개선할 수 있는 의견이 있다면 Feedback Assistant의 피드백을 작성하고 피드백 주제를 Safari로 선택한 뒤 Details에서 Developer Tools를 선택하세요 오늘 Safari의 기능을 이용하여 여러 플랫폼에 걸쳐 여러분의 콘텐츠를 개발, 개선, 테스트할 수 있는 방법이 유용했기를 바라며 여러분이 개발할 웹 콘텐츠를 기대할게요 고마워요 ♪