Safari 및 WebKit의 새로운 기능

안녕하세요, Saron Yitbarek입니다 Safari 및 WebKit 팀의 웹 기술 에반젤리스트죠 Apple은 작년 WWDC부터 새로운 웹 기술을 제공하는 데 총력을 기울였습니다 여러분이 요청한 기술도 좋아할 만한 기술도 있습니다 Apple은 여러분과 웹을 중시하며 여러분이 웹 디자이너와 개발자로서 더 쉽게 아이디어를 실현하도록 돕고자 합니다 Apple의 목표는 간단한데 신뢰할 수 있고 호환되며 개인정보 보호를 우선시하는 경험을 만들 수 있도록 하는 거죠 그래서 오늘은 올해 Safari에 도입되는 새로운 웹 기술을 소개하겠습니다 이 릴리즈에는 유용한 기능이 많습니다 상호운용성을 개선하고 최신 기능들의 간극을 해소하고자 많은 시간과 주의를 기울였습니다 이 세션에서는 제가 좋아하는 기능들을 안내하고 관련 간극을 해소한 영역들을 보여 드리겠습니다 제가 다룰 기능은 네 가지 카테고리로 나뉩니다 애니메이션에서는 스크롤 기반 애니메이션과 문서 간 보기 전환 사용 방법을 설명합니다 레이아웃에서 중점은 앵커 위치 지정이라는 강력한 세계입니다 시각 효과에서는 새로운 모형 함수인 background-clip과 text-wrap: pretty를 다룹니다 이러한 CSS 후에는 미디어에서 SVG 아이콘 지원, 이미지, 그리고 기존 미디어 형식의 개선 사항을 살펴봅니다 애니메이션부터 시작하겠습니다 애니메이션으로 여러분이 만드는 온라인 경험을 향상할 수 있습니다 페이지에 흥미로움과 재치를 더할 수 있죠 무슨 뜻인지 예를 들어 보겠습니다 온라인 교육 회사의 웹사이트를 다시 디자인한다고 해 보겠습니다 일명 A-School of Code입니다 실용적이면서도 재미가 있었으면 좋겠는데요 최신 기능을 사용하면 CSS만으로 충분히 가능합니다 제가 만든 최종 사이트가 어떤 모습인지 보여 드리죠 전문 기술을 가르치는 온라인 학교의 사이트입니다 이 멋진 그리드에 교육 주제 목록이 표시됩니다 제 훌륭한 학생들을 고용한 회사들의 이름이 보입니다 수업과 커리큘럼을 극찬하는 졸업생들의 후기도 있고요 마지막으로 두 프로그램의 자세한 내용을 확인할 수 있는 옵션이 있습니다 이 사이트를 돋보이게 하는 몇 가지 요소가 있습니다 시선을 사로잡는 것 중 하나는 바로 애니메이션입니다 이제 Safari 19에서 사용 가능한 스크롤 기반 애니메이션인데요 CSS 애니메이션은 Apple이 2007년 WebKit에서 처음 소개한 이래 웹의 일부였습니다 이 애니메이션을 사용자 행동에 연결하려면 JavaScript가 필요했죠 JavaScript는 웹에서 많은 역할을 하는 강력한 언어지만 하지만 가급적 사용하지 않는 편이 사용자의 입장에서 성능과 배터리 수명에 유리합니다 스크롤 기반 애니메이션에서는 JavaScript 없이 CSS로 스크롤에 애니메이션을 연결할 수 있습니다 작동 방식을 설명드리죠 스크롤 기반 애니메이션을 이해하려면 먼저 핵심 개념인 타임라인을 알아야 합니다 웹의 기본 타임라인은 시간 기반입니다 즉 시간이 지남에 따라 애니메이션이 재생됩니다

초가 증가하면서 진행 막대의 애니메이션도 함께 움직이죠 스크롤 기반 애니메이션에는 새 타임라인 두 개가 있습니다 첫 번째는 스크롤 타임라인입니다 제 웹사이트에서는 scroll() 타임라인을 사용해 페이지 하단에 진행 막대를 만들었는데요 이것은 인위적으로 만든 예이고 실제로는 이런 진행 막대가 필요하지 않겠죠 이미 스크롤바가 있으니까요 하지만 이 진행 막대로 스크롤 기반 애니메이션의 작동을 쉽게 볼 수 있으니 빌드 방법을 볼까요 막대 작업을 시작하기 전에 고려할 중요한 점이 있습니다 바로 접근성입니다 스크롤 기반 애니메이션은 웹사이트에 모션을 넣는데 적은 모션을 원하는 사용자도 있죠 이는 접근성 설정에서 표시하게 됩니다 모션 불편감을 유발하지 않게 이 설정 내용을 존중하고자 합니다 모션 불편감은 흔하며 복합적인 요인 때문에 발생합니다 경험, 유전, 피로, 경우에 따라 전정 장애처럼요 증상은 메스꺼움, 어지러움, 두통 기타 신체적 불편감 등입니다

개발자가 웹사이트와 웹 앱에 추가하는 다양한 유형의 모션은 의도치 않게 모션 불편감을 유발할 수 있습니다 대형 객체 크기 조정, 확대/축소 시차 효과처럼 서로 다른 속도로 움직이는 객체 3차원 효과를 시뮬레이션하는 기술 주변 모션처럼요 주변 모션은 정해진 사용자 초점 영역 밖의 지속적인 움직임입니다 이 목록 외에도 많지만 고려할 사항으로는 좋은 시작점입니다 사이트에는 이런 효과가 있나요? 제 경우에는 애니메이션이 꽤 간단한 진행 막대인데 비교적 안전하고 작으며 웹에서 흔한 움직임입니다 그래서 이 애니메이션에서는 모션 불편감 유발을 걱정할 필요가 없을 겁니다 하지만 페이지에 움직임을 추가할 때마다 사용자의 다양한 필요에 미칠 영향을 고려하면 좋습니다 스크롤바로 가 보죠 CSS로 시작하겠습니다 꼬리말에 Pseudo 요소로 스크롤바를 추가하려고 합니다 왼쪽 하단 모서리에서 시작되며 스크롤할 때 하단에 머무르도록 스타일을 적용합니다

다음으로 익숙한 CSS를 사용해 키프레임으로 애니메이션을 만듭니다 이에 따라 브라우저는 진행 막대를 확장시켜 X축에서 증가시킵니다 결과적으로 진행 막대가 왼쪽에서 오른쪽으로 커지는 효과가 생기죠 이렇게 스크롤 기반 애니메이션의 기초를 다졌고 이 기초를 완성하려면 한 가지 작업이 더 필요합니다 바로 진행 막대에 추가하는 겁니다 여기서 하면 되고요 이제 스크롤 부분입니다 스크롤할 때만 진행 막대가 왼쪽에서 오른쪽으로 커져야 하죠 이를 위해 진행 막대에 새 애니메이션 타임라인이 필요합니다 animation-timeline:scroll();를 CSS에 추가해 기본 타임라인을 대체합니다 이때 명심할 점은 animation-timeline은 애니메이션 속성 뒤에 와야 한다는 것입니다 이렇게 CSS 몇 줄로 애니메이션을 스크롤 타임라인에 연결하고 진행 막대를 만들었습니다 JavaScript가 필요 없죠 더 실질적인 예를 들어 볼까요 스크롤뿐만 아니라 페이지에 요소가 나타나는 시점에 기반한 애니메이션이 있으면 합니다 이 예를 보겠습니다 블록이 회전해 그리드를 구성하는데요 스크롤하면 발생하지만 또 다른 요소도 작용합니다 애니메이션은 파란색 상자 안에서만 일어나죠 블록이 뷰포트에 들어왔을 때에 한해 하단에서 시작되며 화면 중간을 넘어 파란색 상자의 상단에 도달하면 회전이 멈춥니다 뷰포트를 고려하려면 다른 종류의 타임라인이 필요합니다 바로 보기 타임라인입니다 코드를 통해 작동 방식을 살펴볼까요

html로 시작하겠습니다 여기 주제 목록과 CSS에서 사용할 몇몇 클래스가 있습니다 다음으로 웹사이트의 테마에 맞게 목록을 노란색 상자로 바꾸는 기본 CSS 스타일을 추가합니다 이제 기초가 생겼으니 스크롤 기반 애니메이션을 시작할 수 있습니다 첫 번째 부분은 스크롤에 연결할 애니메이션을 확인하는 것입니다 제 웹사이트에서는 세 가지 애니메이션이 동시에 발생하며 이들 애니메이션을 각 블록에 적용해야 합니다 첫 번째는 왼쪽에서 상자를 올려 조합하는 것입니다 두 번째는 중앙에서 상자를 올려 조합하는 것입니다 세 번째는 오른쪽에서 블록을 올리는 것입니다

지금까지의 코드는 아직 새로운 것이 아닙니다 기존의 CSS 애니메이션이죠

이제 스크롤 기반 애니메이션의 스크롤 기반 부분을 도입하겠습니다 하지만 먼저 이 애니메이션의 접근성을 생각해 봐야 합니다 앞서 언급한 일반적인 트리거에서 회전이 그 중 하나였습니다 하지만 방향 감각을 떨어뜨릴 수 있는 환경적 효과 쪽에 더 중점을 두고 있었죠 이 경우에는 요소가 소수이고 또 비교적 작은 애니메이션이라 접근성을 해칠 것 같지 않습니다 그러니 코드로 돌아가겠습니다 다음으로 CSS에 애니메이션 코드를 추가합니다 왼쪽 상자에 왼쪽 애니메이션을 적용합니다 중간에 중앙 애니메이션 오른쪽에 오른쪽 애니메이션입니다 요소들이 전후에 애니메이션 스타일을 유지해야 하므로 animation-fill-mode: both도 추가합니다 이제 마침내 코드의 스크롤 기반 부분에 도달했습니다 정상 작동을 위해 코드 두 줄이 필요한데요 첫 번째는 새 보기 타임라인입니다 여기에 추가하고요 두 번째는 애니메이션 범위입니다 애니메이션 범위는 타임라인을 기반으로 애니메이션을 시작하고 끝낼 위치를 브라우저에 알려 줍니다 보기 타임라인을 선택했으므로 범위는 뷰포트에서 요소가 있는 위치를 반영합니다 기본값은 0~100%입니다 이 경우 애니메이션 시작점이 0%로 설정됩니다 요소가 뷰포트에 처음 들어오는 순간이죠 그리고 요소가 뷰포트를 완전히 벗어나는 100%에서 애니메이션이 끝납니다 이러한 기본값을 사용했을 때 애니메이션이 어떨지 확인하겠습니다 제가 원하는 바와 꽤 비슷하지만 완전히 맞지는 않습니다 스크롤 기반 애니메이션을 사용할 때 특히 정보를 표시하는 이러한 웹사이트에서는 사용자 경험을 기억해야 합니다 애니메이션은 재미있고 사이트를 돋보이게 할 수 있지만 동시에 정보를 읽을 수 있어야 합니다 애니메이션이 기능을 방해해서는 안 됩니다 이 경우에는 애니메이션 지속 시간에 유의해야 합니다 100% 지속되어서는 안 되는데 블록이 계속 움직여 내용을 읽기 어려워지기 때문입니다

대신 눈길을 끄는 짧은 애니메이션이어야 하고 사용자가 내용을 읽을 수 있도록 블록의 위치가 적절해야 합니다 페이지의 중간쯤이면 괜찮을 것 같군요 재미가 있으면서 사용자가 내용을 읽기에 시간이 충분할 것으로 보입니다 그래서 범위를 0%와 50%로 변경합니다 이렇게 하면 요소가 페이지 중간에 도달했을 때 애니메이션이 끝나도록 모션 시간이 제한됩니다 그리고 다시 위로 스크롤하면 애니메이션이 역방향으로 표시되어 상자가 50% 지점에서 떨어지고 0% 지점에서 완전히 없어집니다 0% 지점의 정확한 위치 등 범위를 세세하게 제어할 수도 있죠 옵션과 작동 방식을 보려면 다양한 값을 확인하고 자유롭게 실험해 보세요 이처럼 새 타임라인은 강력하며 애니메이션과 결합했을 때 사용자에게 놀라운 경험을 선사할 수 있습니다 이렇게 WebKit의 Safari용 스크롤 기반 애니메이션을 살펴보았습니다 다음은 전체 페이지를 차지하는 애니메이션입니다 지난 12월 Safari 18.2에 릴리즈된 문서 간 보기 전환이죠 앞서 Safari 18.0에서 도입된 보기 전환의 확장 기능입니다 문서 간 보기 전환을 통해 페이지 간의 원활한 전환을 구현할 수 있습니다 원래는 이랬던 것을

이 크로스페이드처럼 매끄럽게 만들 수 있습니다 JavaScript 없이요 CSS 한 줄만 있으면 이 효과를 낼 수 있습니다 전환이 없는 이 탐색 항목을 클릭하면 브라우저가 페이지를 다시 칠합니다 지우고 새 페이지를 로드하는 거죠 전환의 좋은 점은 페이지 변경 전후에 스냅샷을 찍고 둘 간에 전환을 생성하므로 자연스럽고 매끄러운 경험이 가능하다는 것입니다 마음에 드네요 작동 방식은 이러합니다 CSS 파일에서 @view-transition at-rule을 추가하고 navigation 속성을 auto로 설정하면 됩니다 이게 전부입니다 하지만 릴리즈하기 전에 할 일이 하나 더 있습니다 페이지에 움직임을 추가하는 것이므로 접근성 문제가 없는지 생각해 봐야 합니다 크로스페이드는 애니메이션이지만 상당히 교묘하며 실제로 모션 감소가 필요한 사용자에게 안전한 애니메이션에 속합니다 이렇게 릴리즈 준비가 끝났고요 이번에는 기본 크로스페이드 대신 슬라이드를 만든다고 가정해 보죠 탐색에서 항목을 클릭했을 때 슬라이드로 현재 페이지가 나가고 새 페이지가 들어오는 겁니다 무슨 말인지 보여 드리겠습니다 하지만 모션에 민감하시다면 약간 불편하실 수 있습니다 끝나면 알려 드리겠습니다

슬라이드 효과를 만들고 있으며 지금 느낌이 마음에 듭니다 크로스페이드에서 더 발전했죠 하지만 먼저 사용자에게 미치는 영향을 생각해야 합니다 이제 애니메이션이 끝났습니다

이 슬라이드 효과 애니메이션이 모션 불편감을 유발할 수 있을까요? 애니메이션으로서는 꽤 큰 편입니다 단어나 요소 하나가 움직이는 것이 아니라 두 페이지 전체가 이동하니까요 이 애니메이션이 안전한지 확실하지 않고 향상 사항일 뿐 사용자 경험의 핵심이 아니므로 모션 감소 미디어 쿼리에 넣는 것이 좋습니다 지금 하겠습니다

이 미디어 쿼리는 모션 감소가 선호될 때만 슬라이드 전환을 실행하도록 브라우저에 알려 줍니다 이제 슬라이드 효과 코드를 작성해야 합니다 CSS 애니메이션을 사용해 두 페이지의 동작을 설명하는 키프레임을 생성합니다 슬라이드로 한 페이지가 나가고 다른 페이지가 들어와야 합니다

다음으로 이러한 애니메이션을 사용하려면 대상이 필요합니다 기본값으로 navigation: auto가 페이지의 모든 내용을 전환했는데 저는 페이지의 모든 내용이 전환되기를 원치 않습니다 탐색 막대는 그대로 있어야 하죠 그리고 추가로 꼬리말도 그대로 두고 싶습니다 그래서 전환할 내용을 id로 래핑하겠습니다 페이지별로 하나씩요 이것은 “school-info”라고 합니다

이제 나중에 사용할 view-transition-name을 선언해야 합니다 보기 전환을 구현하면 많은 Pseudo 요소도 생기는데 그중 두 가지를 사용하겠습니다

view-transition-old와 view-transition-new입니다 view-transition-old는 전환 전 사이트의 스냅샷을 나타내고 view-transition-new는 전환 후의 스냅샷을 나타냅니다 둘을 사용하려면 인수를 전달해야 합니다 여기서 “main-body” view-transition-name을 사용하고 둘 다에 전달합니다 이것이 전환할 페이지의 부분을 포함하기 때문이죠 그런 다음 키프레임의 이름에 animation-name을 설정합니다 이게 전부입니다 어떤 모습인지 보겠습니다 모션에 민감하시다면 잠시 다른 곳을 보시기 바랍니다

좋습니다 클릭 시 페이지의 나머지가 전환되어도 탐색은 고정되어 있습니다

애니메이션이 끝났습니다 문서 간 보기 전환에 대해 제가 좋아하는 점은 이것이 향상 사항이라는 것입니다 필수가 아니고 웹사이트의 기능을 변경하지도 않죠 브라우저에서 지원되고 사용자가 원한다면 좋은 추가 사항이며 사용하지 않아도 문제없습니다 앱 또는 웹사이트에서 문서 간 보기 전환을 구현할 때 유의할 점은 전환하는 양쪽 페이지의 원점이 같아야 한다는 것입니다 example.com, example.com/cohorts 전환은 괜찮습니다 하지만 example.com과 다른 하위 도메인 간은 안 됩니다 이는 사용자의 안전과 개인정보 보호에 도움이 됩니다 악성 페이지에서 여러분의 웹사이트를 대상으로 한 애니메이션을 조작할 수 있어서는 안 되니까요 다음으로 레이아웃의 새로운 기능인 앵커 위치 지정을 볼까요 올해 가을 Safari에 도입되죠 특히 기존 팝오버 API를 기반으로 빌드할 때 앵커 위치 지정은 매우 쉽게 툴팁을 만들고 원하는 곳에 메뉴를 배치하며 뷰포트의 변경 사항에 맞게 반응하도록 할 수 있는 CSS 모듈입니다 같이 살펴보겠습니다 저는 사용자에게 원활한 탐색 경험을 제공하고 싶습니다 사용자가 로그인할 때 탐색에 프로필 사진이 표시되게 할 겁니다 사진을 클릭하면 메뉴가 나타나야 합니다 웹 앱에서 흔한 기능이죠 html로 빌드를 시작하겠습니다

프로필 사진이 있는 탐색 막대의 html은 이러합니다 여기 사진을 클릭했을 때 표시할 메뉴가 있고요 스타일을 추가해서 어떻게 보이는지 보겠습니다 페이지의 나머지 부분을 없애고요 진전이 있네요, 보기 좋은 탐색과 메뉴가 생겼습니다 물론 메뉴가 항상 표시되어서는 안 됩니다 프로필 아이콘을 클릭하면 메뉴가 팝업되고 다시 클릭하면 사라져야 합니다 그리고 클릭했을 때 왼쪽 모서리에 나타나는 것이 아니라 프로필 사진에 고정되도록 하고 싶습니다 이를 위해서는 앵커 위치 지정을 시작하기 전 팝오버 API를 사용해야 합니다 우선 팝오버할 요소에 팝오버 속성을 추가합니다 이 경우 프로필 메뉴죠 그리고 팝오버에 ID를 부여합니다 다음으로 클릭할 대상이 필요하니 이미지를 버튼으로 래핑합니다 이때 보조 기술 사용자가 이 버튼과 해당 메뉴에 접근할 수 있는지 확인해야 합니다 그래서 aria-haspopup 속성을 추가해 화면 읽기 기능에 이 버튼을 클릭하면 사용자에게 메뉴가 표시됨을 알립니다 마지막으로 팝오버 요소의 ID와 같은 값으로 설정된 `popovertarget` 속성을 추가해야 합니다 좋습니다 이제 프로필 사진을 클릭하면 팝오버가 나타나고 클릭하면 사라집니다 그런데 페이지의 왼쪽 모서리에 표시되네요 프로필 사진에 고정해 바로 아래에 정렬하고 싶습니다 여기서 앵커 위치 지정을 적용합니다

앵커 위치 지정을 사용하면 한 요소를 다른 요소에 고정하고 앵커 위치를 기준으로 해당 요소를 배치할 수 있습니다 작동 방식은 이러합니다 먼저 앵커를 결정하고 anchor-name 속성을 통해 이름을 지정합니다 여기서 앵커는 프로필 버튼입니다 버튼의 위치를 기준으로 메뉴를 배치하겠다는 의미죠 앵커의 이름은 “profile-button”이라고 합니다 anchor-name은 사용자가 정의한 임의의 문자열인데 대시 두 개로 시작해야 합니다 이제 메뉴로 가서 방금 이름을 지정한 앵커에 연결해야 합니다 앵커 위치 지정의 맥락에서 메뉴는 대상으로 알려져 있으며 저는 대상에 정보를 제공해야 합니다 먼저 position-anchor 속성을 앵커 이름 “—profile-button”에 설정하여 앵커에 연결하겠습니다 여기 “—profile-button”을 씁니다 마지막으로 배치 위치를 메뉴에 알려 주어야 합니다 방법은 두 가지입니다 첫 번째는 position-area입니다 이것이 무엇인지 살펴보죠

앵커는 정사각형 아홉 개로 구성된 그리드의 중앙에 있습니다 열은 왼쪽, 중앙, 오른쪽과 같이 세 개입니다 행은 상단, 중앙, 하단과 같이 세 개입니다 앵커의 오른쪽 상단 모서리에 대상을 배치하려면 position-area를 “top right”로 설정하면 됩니다 앵커를 기준으로 메뉴가 있어야 하는 위치를 설명하는 직관적인 방법이죠 프로필 사진 아래에 메뉴를 배치하려면 그리드의 하단 중앙에 해당하므로 bottom center라고 쓰면 됩니다

그러면 이렇게 보입니다 원하는 모습과 근접한데 100% 맞지는 않네요 원하는 대로 하단에 있지만 메뉴 너비가 프로필 버튼보다 넓어 그리드에 맞지 않습니다 실제로는 메뉴 왼쪽이 프로필 사진 왼쪽과 정렬되어야 합니다 position-area: bottom span-right 값을 변경하겠습니다 그러면 메뉴가 중앙 그리드 시작점에서 시작되고 남는 부분이 오른쪽으로 튀어나옵니다

이렇게 메뉴와 프로필 사진이 보기 좋게 정렬되었습니다 이 화면 크기에서는 괜찮은데 다른 기기에서 뷰포트가 더 좁으면 어떻게 될까요? 확인하려면 Safari에서 반응형 디자인 모드로 들어가면 됩니다 Settings(설정) > Advanced(고급)에서 “Show features for web developers (웹 개발자를 위한 기능 보기)”를 선택합니다

그러면 “Develop(개발)” 옵션이 나타나는데 익숙한 것이 보입니다 개발자들이 요청했던 뷰포트 프리셋이 돌아왔습니다 이제 엄선된 여러 뷰포트 크기 중 선택할 수 있어 테스트 및 개발 속도가 빨라집니다 토글로 뷰포트 프리셋을 회전할 수 있어 좋습니다 세로 및 가로 모드를 클릭 한 번으로 쉽게 테스트할 수 있죠 메뉴가 JavaScript 없이도 뷰포트 너비 변경에 반응해야 하는데요 현재 메뉴는 왼쪽 정렬입니다 너비가 좁아지면 메뉴가 이동해 프로필 버튼 오른쪽과 정렬되도록 하려고 합니다 앵커 위치 지정의 매력은 바로 이런 상황을 쉽게 처리하도록 디자인되었다는 것입니다 “position try”라는 속성을 사용하는데 이름 그대로의 역할을 합니다 첫 번째 위치를 위한 공간이 없을 때 시도할 위치를 설정할 수 있죠 메뉴가 오른쪽이 아니라 왼쪽으로 튀어나와야 하기 때문에 position-try를 “bottom span-left”로 설정합니다 position-try에는 다른 값도 사용할 수 있습니다 원하는 메뉴 위치를 명시적으로 말하는 대신 position-area에 상대적인 값을 설정할 수 있습니다 그중 하나가 “flip-inline”입니다 flip-inline은 요소의 원래 위치에 관계없이 인라인 방향으로 뒤집습니다 flip-block을 통해 블록 방향으로 뒤집을 수도 있습니다 원하는 내용을 설명하기에 더 직관적인 방법입니다 작동하는 모습을 보겠습니다 반응 모드로 돌아가면 13인치 iPad에서 메뉴가 왼쪽으로 정렬되어 있습니다 하지만 방향을 바꾸면 position-try가 적용되고 메뉴는 오른쪽으로 정렬되어 원하는 대로 반응형 메뉴를 제공합니다

자랑스럽게도 저희 WebKit 팀 동료들이 position-area를 제안하고 표준 본문을 작업해 앵커 위치 지정을 이용하는 직관적인 방법을 완성했습니다 이제 앵커 위치 지정에 대한 또 다른 접근 방식을 보여 드리죠 anchor() 함수라는 꽤 강력한 도구입니다 anchor() 함수를 사용하면 요소를 그리드에 배치하는 대신 요소의 측면을 앵커의 측면에 맞춰 정렬합니다 사용하려면 먼저 위치를 absolute로 설정해야 합니다 다음으로 메뉴의 상단을 보겠습니다 메뉴 상단과 앵커 하단이 정렬되게 anchor(bottom)으로 설정합니다 이어서 메뉴의 왼쪽을 보겠습니다 값을 anchor(left)로 설정해 앵커 왼쪽과 정렬되도록 합니다

아주 간단한 예였습니다 하지만 대신 메뉴와 사진을 이렇게 정렬하려면 어떻게 해야 할까요? 이때는 패딩을 고려해야 합니다 position-area를 사용하고 margin-left를 추가하거나 anchor 함수를 사용하고 calc() 함수를 추가할 수도 있죠 여기서는 anchor 함수를 calc 함수 및 em 단위와 결합합니다 그러면 메뉴가 슬라이드됩니다 대부분의 사용 사례에서는 위치 지정에 position-area가 유용하고 직관적인 방법이며 한 위치에서 다른 위치로 애니메이션화하거나 여러 앵커를 사용하는 등 더 복잡한 작업에서는 anchor() 함수를 사용하는 것이 좋습니다 어느 쪽이든 앵커 위치 지정을 통해 CSS만으로 상대적인 반응형 위치 지정을 쉽게 만들 수 있죠 마지막으로 CSS 기능의 경우 훌륭한 시각 효과를 만드는 새로운 방법을 살펴보겠습니다 첫 번째 방법은 테두리를 한 단계 더 발전시킵니다 Apple은 background-clip: text를 거의 15년 전 릴리즈했습니다 이를 통해 텍스트를 색상으로 채우는 대신 그라디언트 또는 배경 이미지로 채울 수 있습니다 이 노란색-주황색 그라디언트 로고처럼요 꽤 단순한 로고입니다 기본 글꼴로 된 단어이므로 이미지를 사용하는 대신 텍스트를 사용합니다 CSS로 스타일 지정이 가능하죠 이 로고는 h1 요소이며 h1의 스타일을 흰색으로 지정해서 흰색 텍스트로 시작합니다 텍스트에 그라디언트 효과를 추가하기 위해 background-image를 미묘한 노란색-주황색의 오른쪽 하단 방향 그라디언트로 설정하죠 텍스트 뒤 그라디언트가 생깁니다 다음은 background-clip 속성인데 text로 설정합니다 그러면 다시 흰색 텍스트가 됩니다 원하는 형태가 아니군요 해야 할 일이 하나 더 있습니다 h1 스타일을 재정의하고 로고 색상을 투명으로 만들어야 합니다 그래야 그라디언트 효과가 제대로 나타납니다 텍스트에는 그라디언트뿐 아니라 이미지도 사용할 수 있습니다 이런 가을 단풍 배경 이미지처럼요 background-clip: text로 텍스트에 새로운 시각적 기능이 도입되었고 이제 테두리에도 마찬가지입니다 그 방법을 보여 드리겠습니다 버튼에 두꺼운 흰색 테두리로 스타일이 지정되어 있는데 기본 버튼은 좀 다르게 하고 싶습니다 새 background-clip 값을 사용해 밝기를 추가하고 테두리에 그라디언트를 넣고 싶습니다 먼저 앞서 작업한 미묘한 노란색-주황색 그라디언트를 background-image로 추가하면 버튼 배경이 그라디언트가 됩니다 다음으로 border-area 값이 있는 새 background-clip을 추가합니다 검은색 배경과 흰색 테두리로 돌아왔습니다 텍스트에서와 동일한 문제가 발생하죠 테두리의 색상이 바뀌었지만 버튼 스타일의 흰색 테두리 뒤에 숨겨진 것입니다 그라디언트가 보이도록 테두리 색상을 투명으로 만들어야 합니다 여기에 추가하면 결과는… 흥미롭군요 그라디언트가 생겼지만 새로운 문제가 발생했습니다 그라디언트가 반복 형태네요 버튼의 너비는 채웠지만 테두리 안쪽까지만 올라가고 가장자리에서 그라디언트가 다시 시작됩니다 이 문제를 해결하려면 테두리의 바깥쪽 가장자리까지 배경을 확장해야 합니다 이를 위해서는 background-origin을 지정하고 border-box로 설정하면 됩니다 괜찮네요

배경 이미지를 선언할 필요가 없는 short-hand를 사용해도 됩니다 새 배경 클립, 테두리 영역 값으로 멋진 그라디언트가 완성되었죠 테두리만으로도 할 수 있는 작업이 많습니다 이미지를 선택하든 멋진 그라디언트를 선택하든 이런 진행률 원이나 이런 경고 표지판이나 이런 아름다운 이중 테두리 사진을 만들 수 있습니다 지금까지 background-clip: border-area였습니다 콘텐츠를 장식하고 눈에 띄는 웹사이트 및 웹 앱을 만들 수 있는 옵션이죠 해당 예의 데모와 background-clip에 대한 내용은 webkit.org의 게시물을 확인하세요 시각적 효과의 개선 사항은 테두리에 국한되지 않습니다 CSS로 만들 수 있는 매우 다양한 모형도 포함됩니다 다음으로 이제 Safari 18.4에서 지원되는 shape() 함수를 설명하겠습니다 모형은 앱 및 웹사이트에서 다양한 방식으로 사용되는데 저는 A School of Code 웹사이트에 사용합니다 추천사 섹션을 보면 곡선이 있는 이 화살표를 배경으로 후기가 있는 것이 멋집니다 페이지의 재미있는 미적 요소로 clip-path에 설정된 CSS 모형이죠 shape() 함수 전에는 path를 사용해야 했습니다 path 함수는 강력한 도구로서 다재다능해 다양한 점과 곡선을 사용해 각종 모형을 그릴 수 있습니다 하지만 뷰포트 너비가 변경되면 모형은 어떻게 될까요? 설명을 위해 이 세 화살표를 격리해 어떻게 반응하는지 보여 드리겠습니다 크기를 조정하면 뾰족한 화살 끝과 곡선이 잘립니다 뷰포트와 함께 조정되지 않죠 반응성을 향상해야 합니다 하지만 문제는 모형의 모든 선과 곡선이 뷰포트와 함께 변경되어서는 안 된다는 것입니다 일부만 바뀌어야 합니다 곡선은 모양을 유지하고 뾰족한 화살 끝은 각도를 유지하되 뷰포트에 따라 길이와 높이가 조정되어야 합니다 shape() 함수를 대신 사용하자 데모 윈도우의 크기가 작아질 때 모형의 너비도 작아져 원하는 대로 되었습니다 너비가 좁아져도 점의 각도와 곡선의 모양은 변동 없이 유지되는데요 이게 제가 shape() 함수를 좋아하는 이유입니다 세부적으로 제어가 가능하기 때문에 고정될 부분과 변경 사항에 반응할 부분을 선택할 수 있습니다 코드가 어떤 모습인지 보여 드리죠 코드를 보면 다양한 단위를 사용하고 있습니다 컨테이너 쿼리 높이와 백분율처럼요 shape()에는 모든 CSS 단위를 사용할 수 있기 때문입니다 calc 함수도 사용하고 있는데요 반응형 값을 만들고 다양한 단위를 사용할 수 있어 모형의 여러 부분을 선택적으로 제어할 수 있습니다 원하는 반응성을 정확히 구현할 수 있죠 shape() 함수 지원 덕분에 유연하고 반응성이 더 높은 모형을 만들 수 있습니다 하지만 작업이 쉬워진 것은 모형만이 아닙니다 텍스트도 크게 개선되었습니다 새 타이포그래피 기능으로 Safari 19에서 사용 가능한 text-wrap: pretty 등이 있습니다

이 텍스트 본문을 보면 나쁘지는 않지만 내용을 읽기 힘들고 보기에 편하지 않습니다 첫 번째 문제는 문단 끝의 한 단어로 이루어진 짧은 줄입니다 시각적으로 거슬리고 문단 간의 공간이 실제보다 커 보이는 효과가 있습니다

두 번째 문제는 하이픈입니다 하이픈 사용 자체는 문제가 아니지만 가급적 없는 편이 낫죠 하이픈을 사용한 문장이 연속으로 세 개나 있으면 좋지 않습니다 세 번째 문제는 일명 래그입니다 문단의 줄이 만드는 전반적인 모양을 말하는데요 줄들의 길이가 거의 같으면 좋은 래그입니다 지금처럼 들쭉날쭉하고 시각적으로 눈에 띄면 나쁜 래그입니다

text-wrap: pretty의 효과는 미묘하지만 의도적입니다

한 단어로 된 줄과 하이픈 연결과

나쁜 래그를 없앴습니다

작동 방식은 이러합니다 text-wrap: pretty가 없을 때 브라우저의 역할은 끝까지 모든 공간을 사용해 모든 줄을 최대화하는 것입니다 하지만 text-wrap: pretty를 추가하면 브라우저에 다른 영역을 목표로 삼도록 알리는 것입니다 녹색 선 근처로 이것이 곧 이상적인 줄 길이에 해당하죠 다만 약간의 여유가 있습니다 보라색 선과 빨간색 선 사이의 영역인데요 이 안에 있으면 괜찮습니다 또한 마지막 줄이 너무 짧지 않도록 단어를 이동하고 단어를 다음 줄로 옮겨 하이픈 사용을 억제합니다 코드는 간단합니다 문단, 제목 등 원하는 요소에 text-wrap: pretty를 적용합니다 특히 마지막에 짧은 줄이 있거나 하이픈이 많거나 나쁜 래그가 있다면 사용해 텍스트가 받는 영향을 확인하세요 text-wrap: pretty의 좋은 점은 향상 사항이기도 하다는 것입니다 텍스트에 추가했을 때 브라우저가 지원한다면 더 보기 좋은 텍스트가 됩니다 사용자의 브라우저가 지원하지 않거나 마지막 줄만 조정하고 다른 작업은 하지 않더라도 사용자 경험은 개선됩니다 손해가 없죠

이렇게 스타일과 관련된 CSS 기능을 여럿 살펴보았습니다 이제 미디어를 보겠습니다 소개할 첫 번째 미디어는 작지만 강력합니다 여러분의 피드백에 따라 올해 가을 Safari에 SVG 아이콘이 도입됩니다 SVG 아이콘은 파비콘 이상의 역할을 합니다 북마클릿, Safari 시작 페이지의 모든 곳, 사용자가 도크에 추가할 때 등에 볼 수 있습니다 최신 브라우저에서 SVG를 파비콘으로 사용하면 Safari가 맥락에 적합한 아이콘을 생성하죠 파일 크기도 일반적으로 파비콘에 사용되는 png보다 작습니다 또 다른 유형의 정적 미디어도 있는데요 오늘 WebKit 및 Safari에 HDR 이미지가 도입됩니다 HDR(높은 명암 대비)을 통해 웹에서 흔히 보는 일반적인 SDR 사진 및 비디오보다 더 풍부하고 생생한 미디어가 가능합니다 Safari 14.0부터 지난 5년 동안 HDR 비디오가 지원되었는데 이제 이미지도 지원되는 것입니다 HDR과 SDR의 차이점을 설명하기 위해 둘의 시뮬레이션을 보여 드리죠 왼쪽 이미지는 SDR(표준 명암 대비) 이미지이고 다양한 파일 형식일 수 있습니다 이 비디오에서는 HDR이 어떤 모습인지 보여 드릴 수 없어 차이점을 시뮬레이션한 오른쪽 이미지를 만들었습니다 시뮬레이션된 HDR에서 더 깊은 색조, 더 넓은 범위와 더 밝은 색상이 느껴집니다 실제 HDR 이미지로 차이점을 보면 정말 놀랍습니다 이러한 차이점에는 몇 가지 기술적 이유가 있습니다 그중 하나는 각 이미지가 보유한 데이터의 양입니다 SDR은 8비트, HDR은 10~16비트죠 추가 비트가 HDR에 표시할 이미지 데이터를 더 많이 제공합니다 SDR은 일반적으로 sRGB 색상 공간에 존재하고 HDR은 P3 등 더 넓고 풍부한 색상 공간을 사용합니다 그리고 파일 형식도 다릅니다 SDR은 JPEG를 포함해 다양한 형식으로 제공되고 HDR은 이러한 형식 외에 HEIC와 AVIF로도 제공됩니다 하지만 현실에서 HDR을 표현하려면 생각과 의도가 필요합니다 대부분의 온라인 미디어는 한동안 HDR이 아닐 가능성이 큽니다 그래서 HDR 및 SDR 이미지를 나란히 표시할 방법과 어떤 모습일지를 고려해야 합니다 HDR 이미지는 명암 범위 때문에 해당 SDR 이미지보다 훨씬 밝게 보입니다 파랑새가 특히 눈에 띄죠? 검색 결과 이미지나 갤러리의 맥락에서 이는 사용자의 주의를 흩뜨리고 나쁜 사용자 경험을 낳을 수 있죠 개발사로서 Apple은 여러분이 이러한 불일치를 더 효과적으로 제어할 수 있기를 바랍니다 이를 위한 CSS 속성으로 dynamic-range-limit이 있습니다 dynamic-range-limit의 기본값은 `no-limit`입니다 HDR 이미지 및 비디오를 있는 그대로 보이게 하죠 다른 이미지보다 훨씬 밝은 상태라도 말입니다 dynamic-range-limit: standard CSS를 사용해 HDR 이미지 또는 비디오를 SDR처럼 렌더링하라고 브라우저에 지시할 수도 있습니다 세 번째 옵션은 `dynamic-range-limit: constrained’입니다 품질이 더 나아 보이되 튀지는 않도록 HDR 이미지의 추가 명암 대비를 사용할 것을 브라우저에 요청합니다 SDR 및 HDR 콘텐츠를 혼합해 함께 보기 편안하도록 할 수 있죠 `constrained` 값은 Safari 19 1차 베타에서 아직 지원되지 않지만 소식을 기다려 주세요 HDR 이미지를 사용하지만 브라우저가 지원하지 않아도 괜찮습니다 브라우저에서 HDR 콘텐츠를 SDR 범위로 매핑하므로 대안이 필요 없습니다 최적의 이미지를 사용할 수 있으며 브라우저가 나머지를 처리해 줍니다 즉 이제 더 역동적인 사진과 비디오를 웹사이트와 웹 앱에 가져와 사용자에게 더 풍부하고 아름다운 시각 자료를 제공할 수 있습니다 오디오, 비디오 등 다른 종류의 미디어는 웹사이트와 웹 앱을 실현하는 데 도움이 될 수 있으며 Apple은 더 많은 미디어 형식을 지원하는 데 진전을 이루었습니다 지난 몇 년간 Apple은 다양한 코덱 및 컨테이너를 더 완전히 지원하고자 많은 조각을 채웠습니다 Apple은 웹에서 JPEG XL 및 HEIC를 최초 지원했으며 Safari 19에서는 지원 미디어 목록에 Ogg Opus와 Ogg Vorbis가 추가되었습니다 15가지 형식을 지원해 웹사이트 또는 웹 앱에 사용할 자료 면에서 더 많은 옵션을 선사합니다 Apple 업무의 일부는 복잡한 코덱 및 컨테이너의 조합이 웹에서 API로 작동하도록 하는 것이었죠 Safari 18.4에서는 MediaRecorder API에서 WebM 지원을 릴리즈해 간극을 해소했습니다 이 미디어 기록용 API를 사용하면 실시간 팟캐스트 비디오 녹화와 같은 기능을 웹 앱에 통합할 수 있습니다 이제 이러한 앱은 Safari 및 WKWebView에서 Opus 오디오 코덱 그리고 비디오에 VP8 또는 VP9를 사용해 WebM 파일을 생성 가능하죠 공간 웹의 미디어 지원도 확대하고자 노력했습니다 다른 웹 콘텐츠와 일치하도록 3D 모델을 입체적으로 렌더링하는 기능을 추가했고 사용자는 모델과 상호작용할 수 있습니다 웹 페이지에 Safari가 이해하는 몰입형 비디오를 포함하고 추가 도구 없이 올바르게 렌더링할 수 있습니다 자세한 내용은 공간 웹 세션을 확인하세요 3D 모델을 임베드하고 사용자에게 공간 미디어를 표시하며 웹사이트에 3차원 환경을 추가할 수 있는 새로운 기능을 미리 살펴보는 내용입니다 지금까지 작년에 Apple 미디어 지원 작업의 하이라이트였고요 이 세션에서는 CSS와 미디어에 집중했습니다 하지만 Apple의 다른 릴리즈 기능을 설명하는 세션도 있습니다 WebGPU의 개념, Wig Sil 셰이딩 언어의 개요, 최적의 기기 성능을 달성하는 방법을 설명하는 WebGPU 세션도 있고요 서비스 워커 없이 Declarative Web Push를 사용하는 방법과 이것이 더 효율적이고 투명한 이유, 그리고 원래 Web Push로 하위 호환성을 유지하는 방법을 다루는 세션도 있습니다 이외에도 다양합니다 작년 가을부터 각종 Safari 버전에 여러 새로운 기능이 릴리즈되었습니다 가장 요청이 많았던 기능들을 포함해서 말이죠 타이포그래피를 다듬고 전 세계 모든 언어를 지원할 수 있는 CSS 사용자의 개인정보를 보호할 수 있는 기능처럼요 webkit.org에서 릴리즈 노트를 참고하세요 Safari의 새로운 기능에 대한 문서에서도 최신 웹 기술을 확인할 수 있고요 웹 기술 관련 버그 리포트와 기능 요청은 WebKit 이슈 트래커인 bugs.webkit.org에서 제출하세요

Safari 인터페이스에 대한 문제나 iOS, iPadOS, macOS에 대한 내용은 feedbackassistant.apple.com에서 보고를 제출하세요 Safari에서 지원되는 사항에 대한 최신 정보를 자주 확인하세요 caniuse.com이 유용합니다 Safari Technology Preview를 다운로드해 예정된 내용을 살펴보세요 약 2주마다 업데이트되므로 WebKit의 최신 추가 사항을 확인할 수 있습니다 Apple은 훌륭한 웹 경험을 만들 수 있는 다양한 기능을 제공하고자 노력했습니다 이러한 릴리즈로 더 쉽고 흥미로운 빌드가 가능하기를 바랍니다 이러한 기능을 사용해 보고 의견을 들려 주세요 즐거운 코딩 되세요