공간 컴퓨팅을 위한 Safari

♪ 부드러운 기계 힙합 음악 ♪ ♪ 안녕하세요, 여러분! 세션에 오신 것을 환영합니다 저는 Safari 팀 엔지니어 Etienne Segonzac입니다 저는 저희 팀메이트 Tim Horton과 함께 할 건데요 저희는 공간 컴퓨팅을 위한 새로운 Safari를 여러분께 소개드릴 겁니다 웹을 신규 플랫폼으로 가져가는 것은 매년 일어나는 일은 아니죠 그래서 이 세션은 저희에게 의미가 큽니다 가능한 최고의 브라우저 구축을 위해 심혈을 기울였죠 이 새로운 기기에서 웹이 빛이 날 정도입니다 먼저 작동 중인 Safari를 함께 살펴보는 것으로 시작하죠 고마워요, Etienne! 시작해 봅시다! xrOX에서 Safari를 처음 열면 친숙함이 느껴지실 텐데요 iPad와 Mac에서 익숙하게 봤던 것과 같죠 그 유사성은 피상적인 것 그 이상입니다 정말 그 아래에 동일한 WebKit 엔진을 가진 Safari니까요 이 플랫폼에 대해 사려깊게 몇 가지가 추가되긴 했습니다 웹사이트 전체가 비할 데 없이 아름답죠 이런 웹 표준에 대한 광범위한 지원 덕분에요 웹 브라우징은 간편합니다 링크를 따라가면 페이지에 도달해 터치 가능하고 아니면 링크를 보고 손가락으로 탭하면 되니까요 링크를 바라볼 때 Safari는 거기에 부드러운 하이라이트를 줍니다 여러분이 확신을 갖고 탐색할 수 있도록 말이죠 Safari를 사용하면서 이 플랫폼의 힘을 최대한 활용할 수 있는 방법을 빨리 찾게 되실 겁니다 예를 들어 탭 개요는 확장 디스플레이에 맞게 디자인이 완전히 새로워져서 탭 스위칭을 그 어느 때보다 즐겁게 만들어 주거든요

플랫폼이 다중 창을 지원함으로써 그 전에는 보지 못했던 멀티태스킹이 가능해집니다 웹사이트와 다른 앱들로 주변을 가득 채울 수 있죠 원하는 방식으로 정렬할 수도 있고요 전 특히 Mac Virtual Display로 이걸 사용할 때가 좋습니다 궁극적인 웹 개발 경험이죠 여러분이 가장 좋아하는 웹 영상을 풀 스크린으로 보면 완전한 몰입이 가능합니다 ♪ 부드러운 기계 힙합 음악 ♪ 안녕하세요 저는 Safari 팀 엔지니어 Kendall Bagley입니다 여러분이 아시는 바와 같이 웹을 이 플랫폼에 가져왔지만 여전히 기억해야 하는 우수 사례들이 있는데요 Etienne에게 그 이야기를 좀 들어보죠 고마워요, Tim 저는 탭 개요를 사랑합니다! 정말 놀라운 것은 이 모든 웹사이트가 독창적으로 작동한다는 거예요 반응형 디자인 덕에 여러분의 손바닥을 iPhone 위에 두기만 해도 전체 공간을 채우는 것으로 적응을 할 수가 있거든요 여러분이 웹사이트를 점진적으로 개선하기 위해 이미 사용 중인 테크닉이 이 플랫폼에 여전히 적용됩니다 CSS 뷰포트 유닛으로 레이아웃을 디자인하고 미디어, 컨테이너 쿼리에 맞게 창 크기 조정이 일어나야 하죠 그래픽에서 특히 UI 요소는 SVG를 선호합니다 창이 바로 가까이 있는 경우에도 가능한 최고의 렌더링을 보장할 겁니다 비트맵 에셋을 사용해야 한다면 devicePixelRatio와 반응형 이미지는 이미지 로딩과 캔버스 렌더링에 대한 권장 해상도를 반영할 겁니다 오늘 우리는 이 경험의 핵심이 되고 자연스러운 상호작용에 대해 알아볼 건데요 그 다음 웹사이트를 이 플랫폼에 최적화시키고 웹의 3D 콘텐츠에 대한 유니크한 기회를 탐색할 겁니다 직접, 간접 제스처에 대해 더 깊게 탐색해 보겠습니다 이 기기에서 우리의 주요 입력 모델은 눈과 손 제스처의 융합으로 주도되는데요 Tim의 데모에서 보셨다시피 이건 매우 자연스럽습니다 둘러 보고 손가락을 탭하거나 핀칭하기만 하면 됩니다 핀칭이 시작되면 HTML 타겟을 찾고 포인터다운 이벤트 배치를 위해 눈이 사용될 겁니다 제스처가 이루어지는 동안 포인터무브 이벤트는 여러분이 손 동작을 따라갈 수 있게 도와주고 포인터업은 릴리즈 시 처리될 겁니다 검지 손가락으로 도달해서 페이지를 직접 터치하는 방법도 있죠 손가락이 창을 가로지르면 포인터다운 이벤트는 손 위치만 기반으로 해서 처리될 것입니다 포인터무브 이벤트는 이전에 했던 움직임을 추적하고 포인터업은 손가락이 창을 가로지르는 것을 중단하면 처리될 것입니다 당연히 단순 상호작용을 위한 로우레벨 포인터 이벤트에 대해선 걱정할 필요가 없습니다 Safari는 여전히 클릭 이벤트를 트리거해 예상대로 작업을 스크롤하고 스크롤 스냅하거든요 미디어 쿼리에 관하여 이 1차 입력 모델은 터치스크린과 유사합니다 포인터는 거칠고 호버링을 지원하지 않죠 하지만 트랙패드나 키보드는 블루투스를 통해 연결 가능하다는 걸 기억하세요 페이지를 둘러보는 동안 호버 스타일이 왜 트리거되지 않는지 궁금하실 수 있는데요 그건 이 기기가 새로운 시각적 피드백 방식을 사용하기 때문입니다 사용자가 요소를 볼 때 그 위를 탭하기 전에 하이라이트가 될 겁니다 그래서 웹사이트나 Safari 둘 다 사용자가 어딜 보고 있는지 알 필요가 전혀 없죠 이 시스템은 상호작용 영역이라고 부르는 걸 기반으로 하죠 이건 접근 가능한 마크업과 CSS 스타일링을 기반으로 Safari의 WebKit 엔진에 의해 자동 생성됩니다 버튼, 링크, 메뉴나 일치하는 ARIA 역할을 갖춘 요소들은 자동으로 하이라이트될 겁니다 커스텀 스타일을 갖추고 있을 때에도 입력 필드와 형식 요소에 이건 동일하게 적용됩니다 하지만 무언가 상호작용적이라고 알리고 싶다면 다른 HTML 요소에 대해서는 cursor: pointer;를 사용하도록 하세요 어떻게 작동하는지 봅시다! 파일 목록 UI를 빌드하고 있는데요 목록 내 항목에 커스텀 요소를 넣으려 합니다 하이라이트 가능하도록 cursor: pointer;를 추가할게요 하지만 이 커스텀 요소는 내부에서 divs를 사용합니다 cursor 프로퍼티는 상속되어 아이콘과 라벨은 자체 영역을 가지고 개별적으로 하이라이트됩니다 이 내부 divs에 pointer-events: none;를 설정하면 깔끔해지는 데에 도움이 되죠 WebKit는 개별 하이트라이트가 필요 없다는 걸 알 겁니다 제 이벤트 핸들링 코드도 단순화되겠죠 저는 항상 동일한 이벤트 타겟을 가질테니까요 또한 CSS border-radius 프로퍼티를 사용하거나 요소의 모든 코너나 일부 코너에 반경을 추가해 CSS를 형성할 수도 있습니다 완벽한 원도 만들 수 있죠 허나 각 요소의 시각 스타일과 맞는지가 중요합니다 Tim, 우리가 작업 중이던 웹사이트 기억하나요? 우리가 거기서 상호작용 영역을 다듬을 수 있는지 궁금해요 그럼요, 어떤 모습일지 바로 살펴보죠!

여러분은 기기가 없이도 하이라이트 영역 디버깅을 위해 xrOS 시뮬레이터를 사용할 수 있습니다 창 주변에서 마우스 커서를 움직이면 어디를 보고 있는지 활성화되고 클릭은 탭을 자극하죠 시뮬레이터에서 Safari를 열어 웹사이트에서 하이라이트를 예쁘게 하기 위해 뭘 할 수 있는지 살펴봅시다 이 페이지를 보면서 가장 먼저 눈에 띈 건 내비게이션 바에 있는 버튼에 전혀 하이라이트가 없다는 거였어요! Etienne이 Safari는 요소가 상호작용적으로 여겨져야 하는지를 결정하기 위해 커서 CSS 프로퍼티를 사용한다고 언급한 걸 떠올리실 겁니다 저는 우연히 macOS Safari에서 이 버튼들에 대한 손 커서가 없다는 걸 발견했습니다 그래서 뭔가 문제가 있다고 직감했죠 하지만 Web Inspector에서 확인할 수도 있습니다 이에 대해 더 알아보고 싶으시다면 'Safari 개발자 기능 재발견' 세션을 참고하세요 Web Inspector를 사용해 잘못된 글로벌 커서 스타일을 발견했습니다 여길 제거하고 이 링크들이 기본 cursor: pointer 스타일로 연결되게 해주죠

좋습니다! 하이라이트가 생겼지만 배치가 좀 이상하네요 실제로 제 웹사이트에서도 실수가 나타났는데요 macOS에서도 실제로는 텍스트만 상호작용적입니다 버튼 자체를 클릭하려 하면 링크를 따라가지 않죠 우리는 웹사이트에서 실수를 찾아 고침으로써 이 플랫폼에서의 모양을 더 개선할 수 있습니다! 제게는 모두에게 좋은 것으로 보이는데요 텍스트만이 아니라 버튼 전체를 링크 일부로 만들겠습니다

작동하는지 보죠

훨씬 더 나아 보이네요! 이제 버튼 전체가 상호작용적이고 하이라이트로 전체 영역을 커버합니다 하지만 아주 가까이에서 보면 하이라이트 코너가 정렬되지 않은 게 보일 겁니다 Safari의 하이라이트 반경은 기본적으로 굉장히 작습니다 만약 상호작용 요소에 둥근 모서리가 있다면 그 점을 고려해야겠죠 한번 고쳐 봅시다

상호작용 요소에 동일한 border-radius를 추가하는 겁니다

완벽해요! 이제 우리가 원하는 대로 버튼이 하이라이트되네요 하나를 탭해보죠

iPad에 비하면 스코어가 빠르게 나타나네요 고쳐야 할 게 더 있는 것 같지만 우선 나중에 더 살펴보겠습니다 다시 Etienne에게 마이크를 넘겨 웹사이트에 만들 수 있는 최적화에 대해 알아볼게요 고마워요, Tim! 이 플랫폼을 위해 최적화할 때 몇 가지 염두에 두어야 하는 게 있습니다 우리가 과거 Retina 디스플레이를 도입했을 때 픽셀의 개념은 약간 추상적이 되어버렸습니다 웹 개발자와 디자이너로서 우리는 CSS 픽셀로 작업해서 사용자 에이전트가 하드웨어에 적응하게 하죠 디바이스 픽셀을 필요한 만큼 많이 사용해서요 현재 스크린의 개념은 약간 더 추상적이 되어버리고 있는데요 풀 스크린을 요청할 때 목표는 단일 요소에 초점을 맞는 것이죠 페이지 나머지는 흐릿해지고 이와 동시에 창은 기본 크기로 조정됩니다 이 기본 크기 또한 스크린 크기로 JavaScript에 다시 보고되죠 그래서 창과 스크린 크기가 풀 스크린 동안에도 맞춰질 것으로 예상하며 웹사이트는 계속 작동합니다 이 플랫폼에서 풀스크린 창 크기는 변할 수 있습니다 보고된 스크린 크기보다 훨씬 더 커질 수도 있죠 스크롤링과 애니메이션 관련해서는 항상 그랬던 것처럼 퍼포먼스가 중요합니다 특히 이 기기에서는 모든 애니메이션이 가능한 최고의 프레임 속도를 목표로 하죠 패시브 스크롤 이벤트 리스너는 여러분의 애니메이션이 스크롤링 간섭을 받는 것을 방지할 겁니다 requestAnimationFrame을 사용할 때에는 항상 각 프레임 사이의 실행 시간을 측정하세요 Web Inspector Timelines 또한 퍼포먼스 문제 식별에 도움이 될 겁니다 다음의 Web Inspector 관련 Tech Talk에서 더 알아보세요

requestAnimationFrame에 대해 말해 보자면 여기서 제 애니메이션은 약간 불안합니다 런타임은 우리가 animate()을 호출할 때의 빈도에 따라 달라집니다 이 빈도는 기기에 따라 더 높거나 낮아질 수 있죠 대신 제가 해야 하는 건 각 업데이트 사이의 시간을 측정하고 이걸 애니메이션 진행 속도를 계산하는 데에 사용하는 겁니다 상당히 간단하면서도 제 애니메이션이 requestAnimationFrame 주사율과는 별개로 만들어주죠 저는 스코어 애니메이션 문제라고 생각했는데요! 맞습니다 이미 그것도 고쳤죠 기기에서 어떻게 작동하는지 보죠

훨씬 더 나아보이고 속도와 관계없이 기기의 프레임 속도에 미래 대비적이고요 웹사이트에 있는 차 용품 모두 멋져 보이지만 아직 해야 할 수 있는 건 많습니다 여러분의 화면에서 어떻게 보일지 알고 싶다면 웹사이트가 훑어보기를 이용할 수 있게 조정하고 현실로 만드는 것은 굉장히 간단합니다 정확히 iOS의 AR 훑어보기처럼 USDZ 파일을 참조하여 이미지에 고정점을 추가하고 단순한 이미지를 마법과도 같은 훑어보기 이미지로 바꿀 수가 있습니다 놀랍죠! 어떤 게 딱 맞는지 알 수 있죠 Etienne, 어떤 차 용품을 선택하실래요? 저는 제 주방에 가장 잘 어울리는 것을 찾아봐야 할 것 같은데요 하지만 굉장히 인상적이네요 데모 탐색은 빠르고 정말 재밌었습니다 훑어보기는 모든 것들을 완전히 다른 차원으로 가져왔죠 그럼 웹사이트에 3D 콘텐츠를 통합하는 방법을 살펴봅시다 AR 훑어보기는 본래 iOS 12에 도입됐던 건데요 여러분에게 필요한 건 3D 모델 미리보기를 보여주기 위해 사용할 수 있는 특별 속성과 이미지 태그 그리고 USDZ 파일로 연결되는 링크입니다 이 정확한 설정은 xrOS에서 작동하여 사용자가 3D 물체를 그들이 있는 공간에 두기 쉽게 만들어줄 겁니다 고급 조명과 RealityKit의 렌더링을 충분히 이용하면서도 말이죠 더 알아보길 원하신다면 'USD 생태계 탐험하기' 세션을 시청하세요 이와 같은 방식으로 HTML 모델 요소는 잠재적인 W3C 표준으로 제안되고 있습니다 이걸 페이지 내부에 있는 AR 훑어보기로 생각하시거나 3D 물체의 이미지 태그처럼 생각하세요 이건 모든 기기에서 최고의 렌더링을 산출할 겁니다 완전 입체적인 뷰와 환경적 조명까지도요 완전 새로운 요소를 도입하는 건 큰 단계이기에 먼저 3D 물체의 소스와 사용자 상호작용을 가능 또는 불가능하게 하는 속성을 구체화하는 쉬운 방식부터 시작해 보겠습니다 JavaScript API는 약간 더 풍성한데요 카메라, 애니메이션 등에 접근할 수 있습니다 흥미롭지 않나요? 최신 Safari를 실행한다면 어떤 플랫폼에서든 모델 요소의 기능 플래그 작동이 가능합니다 훨씬 더 많은 걸 알고 싶으시다면 WebXR의 개발자 미리보기와 웹에서 완전 몰입형 씬을 구축하기 위한 W3C 표준을 확인하세요 WebXR은 WebGL을 기반으로 하며 많은 인기 WebGL 라이브러리는 이미 빌트인 지원이 가능합니다 3D 씬을 위한 코드가 있다면 WebXR 세션을 요청하여 완전 몰입형으로 만들 수 있죠 마우스나 트랙패드를 움직이는 것과 그렇게 다르지 않습니다 거의 말 그대로 씬 내부에 전송될 겁니다 시도해 보면 믿으실 수 있을 겁니다 xrOS에서는 Safari 고급 환경 설정에서 WebXR 기능 플래그를 찾으실 수 있을 겁니다 이건 시작에 불과합니다 몰입형 웹과 관련하여 탐색할 수 있는 것은 훨씬 더 많습니다 CSS와 같은 기술은 변화를 가져오고 포인터이벤트는 새 플랫폼에서 발전할 수밖에 없죠 이것이 바로 Apple이 W3C 웹 표준의 정의와 개발에 활발하게 참여하는 이유입니다 여러분에게도 정보를 제공할 수 있는 기회가 있죠 저희에게 여러분의 생각과 무엇을 기대하고 있는지 알려주세요 새로운 3D 경험을 실험하는 것부터 시작할 수 있습니다 상호작용 영역은 xrOS 시뮬레이터에서 검토하기가 더 쉬워질 거고요 버그를 발견하신다면 모든 플랫폼에서 피드백 지원을 이용하실 수 있습니다 HTML이나 JavaScript CSS와 관련된 것에 대해 WebKit 버그 트래커는 bugs.webkit.org에 있고요 CSS에 관해서는 올해 Safari에 생길 기능이 상당히 많으니 'CSS의 새로운 기능' 세션을 놓치지 마세요! 모두 함께해 주셔서 감사합니다! 몰입형 웹에서 봴 수 있길 바랄게요! ♪