Safari 27용 WebKit의 새로운 기능

안녕하세요! 저는 Jen Simmons입니다! WebKit에 관한 최신 소식을 전해드리러 왔습니다. WebKit은 Safari를 구동하는 웹 브라우저 엔진입니다. WebKit과 Safari 팀은 올해 정말 바쁘게 지냈습니다. 저희가 작업해 온 내용과 웹사이트, 웹 앱, 웹 콘텐츠를 만드는 여러분에게 어떤 영향을 미치는지 기쁜 마음으로 공유하겠습니다. 이미 많은 새로운 웹 기술을 출시했습니다. CSS Grid Lanes를 포함해서 Navigation API, Largest Contentful Paint 등 훨씬 더 많습니다. Safari 27의 첫 번째 베타는 60개 이상의 새로운 기능을 제공합니다. Customizable Select, img sizes=auto 등을 포함하여 레이아웃을 위한 stretch 키워드 등 다양한 기능이 있습니다. 이 세션의 뒷부분에서는 가장 흥미로운 새 기능 다섯 가지를 살펴보겠습니다. CSS Grid Lanes가 무엇을 할 수 있는지 확인하고 Select UI를 커스터마이즈하는 방법을 배우고 Model Element가 웹에 무엇을 가져다 주는지 살펴보세요. 그리고 더 많은 것들이 있습니다!

하지만 먼저, 웹 개발자로서 가장 흥미롭게 느끼실 것은 올해 저희 팀이 WebKit의 품질을 개선하는 데 쏟은 노력일 것입니다. 웹 개발자분들로부터 저희 브라우저 엔진의 문제를 우회해야 할 때 어렵다는 이야기를 자주 듣습니다. 더 나은 경험을 기대하시죠. 저희도 잘 알고 있습니다. 그래서 저희는 기존 웹 플랫폼 기능의 품질을 크게 개선하는 것을 목표로 삼았습니다. 올해는 완전히 새로운 기능을 구현하기보다 그 부분에 집중했습니다. 많은 새 기능을 도입하는 것보다요. 지금까지 이룬 성과를 돌아보면 몇 가지 명확한 주제가 떠오릅니다. 각 주제에서 짧은 이야기를 하나씩 나눠드리겠습니다. 첫 번째는 호환성입니다. 이 작업의 많은 부분은 사용자에게 직접적인 영향을 미치는 것들에 크게 집중하고 있습니다. 실제 사람들에게 실제 웹사이트가 잘 작동하도록 하는 것입니다. 여러분의 사용자는 저희의 고객이기도 합니다. 그래서 그들이 훌륭한 경험을 할 수 있기를 원합니다. 저희 팀은 특정 웹사이트에 대한 보고를 받았습니다. 사용자가 이모지를 입력할 때 완전히 다른 문자가 나타났습니다. 왜 그런 걸까요? 일반적으로 사용자가 키를 누르면 브라우저가 웹사이트에 유니코드 번호를 전송합니다. 이 A의 번호는 7비트 데이터를 사용합니다. 일부 웹사이트는 키보드 입력을 가로채서 JavaScript로 처리하려 합니다. 수십 년간 웹사이트들은 .fromCharCode 메서드를 사용해서 그 번호를 다시 문자로 변환해 왔습니다. .fromCharCode는 16비트 이하의 데이터를 처리할 수 있습니다. 오랫동안 유니코드가 성장해도 그것으로 충분했습니다. 하지만 그때 많은 이모지가 등장했습니다. 그리고 이 새로운 문자들에 더 큰 번호가 할당됐습니다. 이 문자는 17비트가 필요합니다. 아직도 .fromCharCode를 사용하는 웹사이트에서는 그 번호가 16비트로 잘립니다. 그 결과 완전히 다른 문자에 매핑됩니다. 그래서 어떻게 해야 할까요? 모든 웹사이트가 .fromCharCode 사용을 중단하도록 할까요? 그건 현실적이지 않습니다. 사용자들은 지금 당장 이모지를 입력하고 싶어 합니다! 그래서 저희 동료들이 영리한 해결책을 도입했습니다. 이제 사용자가 코드 포인트가 16비트를 초과하는 문자를 입력하면 WebKit은 그 번호를 웹사이트에 전혀 보내지 않습니다. 이모지가 텍스트로 바로 전달됩니다. 번호도 없고, 잘림도 없습니다. 이제 누구나 눈물을 참는 얼굴을 원하는 웹사이트에서 입력할 수 있습니다. 이것은 사용자를 직접 돕기 위해 저희가 이룬 많은 변경 중 하나입니다. 하지만 웹 개발자로서는 그냥 작업이 더 쉬워지기를 원하시겠죠. 저희 팀은 또한 WebKit의 기반을 여러 영역에서 재건하는 작업도 하고 있습니다. 때로는 기술 부채를 갚기 위해 처음부터 다시 시작해야 합니다. 이런 심층 작업이 반드시 표면적으로 보이지는 않지만 이러한 기반 위에 구축된 모든 것들을 더 안정적으로 만들어 줍니다. 한 가지 예를 들면, block-in-inline 레이아웃입니다. 블록 엘리먼트는 항상 인라인 엘리먼트 안에 중첩됩니다. 이런 레이아웃을 처리하는 코드는 20년 이상 된 것이었고 뒤엉키고 유지 관리하기 어려웠습니다. 그래서 새로운 아키텍처 방식으로 처음부터 다시 작성했습니다. 아마 눈치채지 못하셨을 수도 있지만 이 작업으로 많은 문제가 수정됐습니다. 저희 팀은 또한 특정 영역에서 상당한 발전을 이루기 위해 깊이 파고들고 있습니다. 미디어 및 동영상 재생, 스크롤링, SVG, 접근성, WebRTC 심지어 HTML 테이블까지요! 이 각각의 영역은 서로 다른 무언가가 필요했습니다. SVG를 예로 들어 보겠습니다. 실질적인 진전을 이루려면 웹 표준이 더 명확하고 상세해야 했습니다. 그런데 활성화된 SVG 워킹 그룹이 없었습니다. 그래서 저희 팀원들이 여정을 가속화한 방법이 바로 새로운 표준화 활동을 부활시키고 이끄는 것이었습니다. 예를 들어, 웹 개발자가 방사형 그라디언트로 SVG를 만들었는데 fx와 fy 속성으로 초점을 명시적으로 정의하지 않은 경우 어떻게 될까요? SVG 1에서는 fx와 fy의 초기값을 설명하는 사양 문서가 모호했고 브라우저마다 다르게 해석했습니다. 이제 SVG 2는 모든 모호함을 제거합니다. 초기값이 명확하게 정의됩니다. 그리고 저희는 Safari 27에서 WebKit을 업데이트하고 있습니다. 지금까지 SVG에 75개 이상의 개선을 이루었으며 분명 해야 할 작업이 더 있습니다. 저희 팀이 하고 있는 많은 개선들은 웹 표준에 더 잘 맞추기 위한 것입니다. 오랫동안 사용해 온 웹 기술의 상호 운용성을 강화하고 새로운 기능의 발전에 맞추기 위해서입니다. 새로운 것이 있습니다. CSS random 함수입니다. 이것을 사용해 랜덤 값을 생성할 수 있습니다. 이 코드로 width와 height에 랜덤 길이가 지정됩니다. 랜덤 값에 이름을 붙여 재사용할 수 있습니다. 하지만 원래 이름들은 인스턴스별로 범위가 지정됐습니다. box 클래스가 호출될 때마다 새로운 랜덤 값이 계산됐습니다. 저희는 Safari 26.2에서 random을 출시했습니다. 하지만 개발자들이 더 나은 방법이 있을 수 있다고 주장했습니다. CSS 워킹 그룹에서 논의한 후 이 이름들은 기본적으로 전역으로 재정의됐습니다. 이제 모든 박스가 동일한 랜덤 크기를 갖게 됩니다. 저희는 Safari 26.5에서 이름의 범위 지정을 업데이트했습니다. 아직 저희만이 유일하게 지원하고 있어서 더 나은 방향으로 개선할 시간이 있었습니다. Anchor Positioning 및 View Transitions와 같은 최근 기능 변경에 맞춰 업데이트하고 있습니다. 그리고 오래된 기능들도 강화하고 있습니다. 웹 표준에 더 잘 맞추기 위한 수백 건의 업데이트가 있습니다. 모든 브라우저에서 잘 작동하는 웹사이트를 더 쉽게 만들 수 있기를 바랍니다. 그리고 다섯 번째 개선 영역은 통합입니다. 많은 개선 사항들이 별도의 기능들이 올바르게 통합되도록 합니다. 2014년, WebKit은 HTML의 sizes 속성 지원을 출시하여 반응형 이미지를 가능하게 했습니다. 2018년에는 CSS min()과 max() 함수 지원을 출시했습니다. 그런데 막상 구현하고 보니 min()과 max() 지원이 sizes 안에서 빠져 있었습니다. 이 문제를 제기해 주신 개발자분들께 감사드립니다. 2020년에 clamp()가 등장했을 때도 마찬가지였습니다. 올해 저희는 되돌아가서 Safari 26.4에서 이 격차를 해소했습니다. 이런 종류의 문제들을 계속 찾아서 수정하고 싶습니다. 저희는 사람들이 저희 플랫폼에서 웹을 이용할 때 어떤 경험을 하는지 깊이 신경 씁니다. 브라우저 엔진은 방대하며 저희는 개발자들의 피드백과 기여에 의존합니다. 문제 지점을 파악하고 우선순위를 결정하는 데 도움을 주시기 바랍니다. App Store의 수백만 개 앱이 웹 기술을 활용합니다. WebKit과 JavaScriptCore에 내장된 기술이며 iOS, iPadOS용 앱을 포함하여 macOS, visionOS, 심지어 watchOS까지요! 저희는 웹을 소중히 여기며 저희의 노력이 여러분의 성공에 실질적인 차이를 만들어 내기를 진심으로 바랍니다. 이런 집중 덕분에 지난 가을 이후 1100개 이상의 기능 개선을 처리할 수 있었습니다. 수정 사항을 포함하여요. 저희에게 기록적인 수치입니다. 여러분의 프로젝트를 테스트해 보시기를 권장합니다. 최신 버전의 Safari Technology Preview나 Safari 베타에서요. 문제가 있으시면 이슈를 제출해 주세요. 해야 할 일이 더 있다는 것을 압니다. 품질 개선 노력의 몇 가지 사례만 소개했습니다. 모든 세부 내용은 Safari 릴리스 노트를 확인하세요. 품질 개선은 올해 저희 팀이 해온 작업의 큰 부분이지만 그게 전부는 아닙니다. 정말 흥미로운 새로운 기능들도 출시했습니다. 이 세션의 나머지 부분에서 몇 가지를 살펴보겠습니다.

CSS Grid Lanes부터 시작합니다. Safari 26.4에서 출시됐습니다. 순수한 CSS로 고전적인 masonry 레이아웃을 만드는 데 사용하세요. JavaScript가 필요 없습니다. 여러분이 이전에는 생각해 보지 않았을 사용 사례들도 처리할 수 있습니다. 코드는 간단하며 트랙을 정의하는 CSS Grid의 모든 기능이 포함됩니다. 네, 반대 방향으로도 작동합니다!

gridlanes.webkit.org에서 Grid Lanes 필드 가이드를 확인하세요. 다양한 구성을 클릭해 보면서 작동 방식을 경험하고 다양한 데모를 탐색해 보세요. Safari Web Inspector를 사용해 레이아웃을 더 잘 이해하고 조정하세요. Order Numbers를 활성화해 항목의 순서를 확인하세요. 콘텐츠를 탭으로 이동하는 사용자의 경험을 세밀하게 조정하는 데 flowtolerance 조정에 매우 유용합니다. "Learn CSS Grid Lanes"를 시청하세요. Brandon이 이런 레이아웃을 만드는 방법을 자세히 안내해 줄 것입니다.

Customizable Select는 웹에 출시되는 또 다른 흥미로운 기능입니다. Safari 27은 엘리먼트를 변혁시킵니다. 완전히 커스텀 디자인을 구현하는 것이 그 어느 때보다 쉬워져 웹사이트나 웹 앱에 자동으로 뛰어난 접근성으로 맞출 수 있습니다! CSS에서 엘리먼트에 appearance: base-select를 적용하는 것부터 시작합니다. 즉시 컨트롤이 더 많은 CSS를 상속받기 시작합니다. 폰트 패밀리를 포함하여 텍스트 색상, 배경 색상까지요. 또한 새로운 ::picker 가상 엘리먼트에 appearance: base-select를 적용하세요. 사용자가 컨트롤을 탭했을 때 팝업되는 옵션 메뉴를 스타일링할 수 있게 됩니다. 다른 완전히 새로운 가상 엘리먼트들로 컨트롤의 특정 부분을 타겟할 수 있습니다. 예를 들어 ::checkmark와 ::picker-icon이 있습니다. 이제 안에 추가적인 HTML을 넣을 수 있습니다. 세부 사항을 설명하는 하위 텍스트나 각 옵션을 나타내는 이미지처럼요. 실제 HTML 폼 컨트롤 사용의 이점을 활용하면서 접근성과 견고함까지 갖출 수 있습니다. Grid나 Flexbox를 사용해 옵션을 레이아웃하거나 CSS의 어떤 것도 사용해 전통적인 드롭다운 메뉴와 완전히 다르게 만드세요. Tim의 세션 "Rediscover the HTML Select Element"에서 방법을 배우세요.

작년에 저희는 visionOS의 Safari용으로 완전히 새로운 HTML 엘리먼트인 을 출시했습니다. Safari 27에서는 iOS, iPadOS, macOS로 확장됩니다. , , 와 함께 미디어 파일을 처리하는 엘리먼트 패밀리에 합류합니다. 이번엔 3D 모델을 HTML에 넣을 수 있습니다. 웹사이트에 모델을 추가하면 사용자가 제품을 확인하거나 공간에서 물체를 미리 보거나 멋진 경험을 할 수 있는 방법을 제공할 수 있습니다. 마크업은 예상대로 작동합니다. 간단하게 유지할 수 있습니다. 또는 다른 미디어 엘리먼트처럼 를 사용해서 다양한 형식의 여러 파일에 링크할 수 있습니다. 선택적으로 environmentmap과 같은 속성을 포함해서 모델에 커스텀 조명을 제공할 수 있습니다. 또는 stagemode를 사용해 기본 상호 작용 동작을 설정할 수 있습니다. JavaScript로 모델을 타겟해 다양한 가능성을 열어두거나 모델을 로 감싸서 iOS & iPadOS 사용자가 자신의 공간에서 제품을 볼 수 있게 하세요. 3D 모델 만들기 및 사용에 관한 더 많은 내용은 developer.apple.com에서 찾을 수 있습니다. 수년간의 문서, 동영상, 샘플 프로젝트가 있으며 가능한 것들을 깊이 파고들 수 있습니다. "Get started with HTML Model Element"를 시청해 더 자세히 알아보세요. Aleksei가 3D 모델을 어디서 구하는지 웹에 최적화하는 방법과 JavaScript에서 무엇을 할지 설명해 줄 것입니다.

visionOS 27에서 은 몰입형 웹사이트 환경으로 한 단계 더 나아갑니다. 사용자가 Safari에서 여러분의 웹사이트에 방문해 탭으로 몰입형 환경을 열고 여러분이 제공하는 모델 속으로 들어갈 수 있습니다. 몰입형 비디오 게임을 만들었다면 잠재 고객들에게 미리보기 방법을 제공할 수 있습니다. 공연 티켓을 판매하는 사이트라면 어느 플랫폼에서든 좌석에서 보이는 뷰를 보여줄 수 있고 visionOS에서는 공연장 전체를 경험할 수 있습니다. 모델을 조작하기 위한 새로운 Immersive API가 있습니다. Fullscreen API와 동일하게 작동합니다. 모든 것을 알아보려면 "Explore immersive website environments in visionOS"를 시청하세요. Jean이 어떻게 공연장을 만들었는지 보여줄 것입니다.

그리고 Web Extensions도 있습니다. 얼마 전까지만 해도 브라우저 확장 프로그램을 만드는 것은 각 브라우저마다 다른 코드와 다른 API를 사용하는 완전히 별개의 프로젝트를 만드는 것을 의미했습니다. 그래서 많은 확장 프로그램들이 한 브라우저에서만 작동했습니다. 2017년에 변화가 시작됐습니다. Mozilla가 Firefox 애드온 지원을 중단하고 크로스 호환 미래를 향해 나아가기로 했을 때입니다. 2020년에는 Safari 14에서 Safari Web Extensions 지원을 출시했습니다. 그리고 2021년에는 저희가 W3C WebExtensions 커뮤니티 그룹을 만드는 노력을 주도하여 이런 아이디어들을 공식 웹 표준으로 만들었습니다. 오늘날, 상호 운용 가능한 확장 프로그램의 미래라는 꿈이 현실이 되고 있습니다. 하나의 코드베이스로 확장 프로그램을 만들 수 있습니다. 하나의 스크립트 세트, 하나의 매니페스트로요. 모두 상호 운용 가능한 HTML, CSS, JavaScript입니다. 웹의 나머지 부분과 마찬가지로요. 각 브라우저의 사용자들에게 확장 프로그램을 패키징하고 배포하는 방법만 알면 됩니다. 하지만 Xcode를 사용하지 않거나 Mac이 없다면 어떻게 Safari 사용자들에게 확장 프로그램을 배포할 수 있을까요? 이제 Safari 웹 확장 패키저를 사용할 수 있습니다. App Store Connect를 사용해 확장 프로그램을 패키징하고 배포할 수 있습니다. 어떤 웹 브라우저에서든 어떤 운영 체제에서든요. 오늘날, Safari 사용자에게 도달하는 것이 그 어느 때보다 쉬워졌습니다. developer.apple.com에서 방법을 알려주는 문서를 읽을 수 있으며 "Create web extensions for Safari"를 시청하면 Kiara가 안내해 줄 것입니다. 처음부터 웹 확장 프로그램을 만드는 방법과 App Store Connect 사용 방법을요.

마지막으로 MapKit JS에 대해 간략히 말씀드리겠습니다. 이것은 사용할 수 있는 도구로 웹사이트나 웹 앱에 대화형 지도를 삽입할 수 있습니다. 사용자의 개인 정보를 보호하면서도 가능합니다. 모든 브라우저에서, 어떤 운영 체제에서도 작동합니다. developer.apple.com에서 모두 알아보세요.

저희 팀은 올해 많은 작업을 했습니다. WebKit은 개선으로 가득 차 있습니다. 이 노력들이 여러분의 작업을 더 만족스럽고, 더 성공적이며, 더 쉽게 만들어 주기를 진심으로 바랍니다. 그리고 어쩌면 더 재미있게도요! webkit.org 웹사이트를 확인하세요. 거기서 Safari의 모든 새로운 기능에 대해 릴리스마다 배울 수 있습니다. Safari 27에 무엇이 있는지 더 알아볼 수 있고 더 깊이 파고들기 위한 웹 기술에 관한 다른 WWDC 세션도 시청할 수 있습니다. 그리고 bugs.webkit.org에서 이슈를 제출하세요. 여러분의 의견을 듣고 싶고, 사람들이 사용하고 즐기는 웹 프로젝트 작업을 지원하기 위해 더 무엇을 할 수 있는지 알고 싶습니다. 시청해 주셔서 감사합니다!