오늘은 View Transitions API를 통해 Chrome과 Astro의 여정을 자세히 공유하고자 합니다. 여기에는 Astro 커뮤니티가 어떻게 API를 초기에 수용하고 실험하여 더 광범위한 커뮤니티의 가능성을 보여줄 수 있는지가 포함됩니다. 또한 Astro 3.0에서 뷰 전환을 위한 새로운 기본 제공 지원에 관한 자세한 내용을 공유하게 되어 기쁩니다.
배경
페이지의 여러 상태 간 원활한 전환(상태 전환이라고 함)은 언제나 웹에서 매끄러운 애니메이션 환경을 구축하기 위한 복잡한 측면이었습니다. CSS 전환, CSS 애니메이션, Web Animation API와 같은 도구를 사용할 수 있음에도 불구하고 상태 전환을 만드는 것은 여전히 어려운 작업입니다. 문제점 중 하나는 나가는 요소에서의 상호작용을 처리하는 것이며, 이로 인해 전환이 더욱 복잡해질 수 있습니다.
또한 보조 기기를 위해 읽기 위치와 초점을 유지하는 것도 어렵습니다. 또한 스크롤 위치 차이를 처리하면 상태 전환이 번거로운 프로세스가 됩니다. 이러한 요소가 모두 웹페이지의 다양한 요소 간에 원활한 전환을 구현하는 데 있어 복잡성을 가중시킵니다.
View Transitions API가 이러한 문제에 대한 브라우저의 솔루션으로 떠올랐습니다. 이 새로운 API를 사용하면 두 상태 간에 애니메이션 전환을 만드는 동시에 단일 단계에서 DOM을 더 쉽게 변경할 수 있습니다.
Chrome 111에서 View Transitions API의 출시는 JavaScript 기반 웹 애플리케이션뿐만 아니라 모든 웹사이트에 대한 전환 지원에 대한 더 광범위한 비전의 시작이었습니다. 향후 개선사항도 제공될 예정입니다. Chrome은 향후 문서 간 전환, 컴포지터 기반 애니메이션, 범위가 지정된 전환, 중첩된 전환 그룹과 같은 흥미로운 추가 기능을 살펴볼 수 있습니다.
뷰 전환을 통한 초기 탐색 분석
View Transitions API를 이용한 Chrome의 여정은 혼자가 아니었습니다. 개발자, 프레임워크 작성자 및 CSS 실무 그룹의 피드백과 공동작업은 모두 수년에 걸쳐 이 기능을 형성하는 데 중요한 역할을 했습니다.
개발자 실험은 초기에 매우 중요한 역할을 했습니다. 초기 버전의 API는 CSS 애니메이션을 지원하지 않았으며 전환은 몇 가지 제한적인 사전 설정으로 제한되었습니다. 초기 피드백을 통해 개발자들은 완벽한 맞춤설정이 가능하고 표현력이 풍부한 전환을 원한다는 점이 명확해졌습니다. 이 같은 협력을 통해 API는 적절한 기본값, 확장성, 맞춤설정의 균형을 이루도록 설계될 수 있었습니다.
Astro는 이러한 프레임워크 중 하나이며 초기에 뷰 전환을 활용했습니다. 이 도움말의 나머지 부분은 Astro팀의 관점에서 작성되었으며, 뷰 전환을 찾아 채택하고 웹 개발 환경에서 전면 중앙에 배치한 경험을 공유합니다.
Astro가 뷰 전환에 투자해야 하는 이유
아스트로는 오랫동안 뷰 전환과 같은 기능을 찾고 있었습니다. Astro는 더 빠른 페이지 로드 성능을 위해 UI 구성요소를 경량 HTML로 서버 렌더링하는 JavaScript 웹 프레임워크입니다. Astro는 의도적으로 클라이언트 기기에서 최대한 많은 작업을 삭제합니다. Astro 웹사이트는 네이티브 브라우저 페이지 탐색을 사용하며, 이 경우 다른 웹 프레임워크가 JavaScript 클라이언트 측 라우팅으로 브라우저 탐색을 도용할 수 있습니다.
이러한 절충으로 인해 Astro팀은 어떻게 클라이언트 측 라우팅을 채택하지 않고 Astro가 페이지 전환에 애니메이션을 적용하고 여러 페이지에서 앱과 유사한 UI 지속성을 제공할 수 있을까요?
뷰 전환이 해답이었습니다. 뷰 전환을 통해 Astro는 JavaScript가 많은 SPA 웹 프레임워크에서 제공하는 것과 동일한 라우팅 기능을 제공할 수 있었지만 클라이언트 측 라우팅의 성능 및 복잡성 오버헤드는 없습니다. 다른 프레임워크에서는 선택적 구현 세부정보로 뷰 전환을 접근했지만, Astro에게는 훨씬 더 큰 문제가 있었습니다.
Astro팀은 '어떻게?'라는 질문에 대한 답을 얻었습니다. Turbo, Swup, Livewire와 같은 프로젝트에서 아이디어를 얻고 Astro 내부에서 몇 가지 유사한 접근 방식의 프로토타입을 제작하기도 했습니다.
초창기의 시도 중 하나는 HTML의 모든 새 페이지를 현재 HTML과 자동으로 비교한 다음 자바스크립트를 사용하여 한 번에 모든 요소를 대체하는 전체 페이지 '스마트 전환'이었습니다. 영리했지만 오류가 발생하기 쉬웠습니다.
// An early API design for enabling view transitions
// in Astro via top-level config. Never implemented.
export default defineConfig({
router: 'spa'
})
다행히 Astro 커뮤니티는 View Transitions API가 이미 강력하지만, 제품이 너무 복잡해지지 않았다는 사실을 보여주었습니다. 초기 데모를 확인한 후 Astro팀은 브라우저 API와 최대한 가깝게 일치시킬 수 있는 간단한 Astro API라는 아이디어에 매료되었습니다. 뷰 전환을 Astro 내부에 숨겨진 보이지 않는 구현 세부정보로 보는 대신 개발자에게 직접 노출될 수 있습니다. Astro를 웹 플랫폼에 직접 정렬하고 프런트엔드의 전반적인 복잡성을 줄입니다.
---
// Add a simple fade transition with 2 lines of code!
// 1. Import the <ViewTransitions> component
// 2. Add it to your common/base head component, or individual pages.
import { ViewTransitions } from 'astro:transitions';
---
<head>
<title>My View Transitions Demo</title>
<ViewTransitions />
</head>
<!-- ... -->
작업은 간단해졌습니다. 새로운 View Transitions API를 Astro로 가져오고 자동 대체 기능을 제공하여 가능한 한 많은 웹사이트와 브라우저에 이를 제공할 수 있게 되었습니다. Chrome을 제외한 대부분의 브라우저에서 아직 네이티브 뷰 전환을 완전히 지원하지 않았으므로 대체 지원이 필수입니다.
Astro 공식 지원 출시
Astro는 Astro 2.9에서 실험용 뷰 전환 지원을 출시했습니다. 반응은 즉시 긍정적이었습니다. 개발자들은 매우 다양한 사용 사례에 대한 놀라운 데모를 공유하기 시작했으며, 때로는 이 모든 것을 프로덕션에 제공하기도 했습니다.
Astro 3.0에서 지원을 마무리하고 모든 사용자를 위해 새로운 View Transitions API를 플래그 해제합니다. 이제 이러한 새 API를 실험적으로 또는 한꺼번에 채택할 수 있습니다.
<main transition:animate="slide">
<p>Slide animation as you navigate to and from the page!</p>
</main>
<aside transition:name="my-aside">
<p>Animate and morph the matching "my-aside" element across pages automatically!</p>
</aside>
Astro를 플랫폼 API와 일치시킬 때 얻을 수 있는 예상치 못한 이점은 네이티브 View Transitions API를 기반으로 새로운 기능을 빌드해 볼 수 있다는 점입니다. 예를 들어 새로운 Astro transition:persist 지시어를 사용하면 모든 요소가 전체 페이지 탐색에서 자체적으로 유지됩니다. 이는 영구 오디오 및 동영상 플레이어와 같이 수명이 긴 요소를 지원합니다. 이러한 요소는 과거에는 무거운 JavaScript SPA에서만 가능했습니다.
<video controls="" autoplay="" transition:persist>
<source src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4" type="video/mp4">
</video>
또한 Astro는 개발자에게 더 인체공학적인 뷰 전환을 자유롭게 제공합니다. 예를 들어, 팀은 정방향/뒤로 맞춤 애니메이션 및 동적 HTML용 애니메이션에 대한 지원을 이미 추가했습니다. 이 두 가지 기능은 하위 수준 API만으로는 수행하기 어려우나, Astro에서는 실질적으로 용이합니다.
이 기능은 현재 Astro에만 있지만, Astro 팀은 향후 브라우저 향상을 위해 사양 작성자 및 실무 그룹에 자신의 경험을 다시 제공하기를 희망합니다. 예를 들어 제안서를 면밀히 모니터링하여 CSS에서 애니메이션을 더 쉽게 공유할 수 있습니다.
다음 단계는 무엇인가요?
웹 뷰 전환의 미래는 밝습니다. Astro, Nuxt, HTMX에서 모두 어느 정도의 지원을 제공했으며 많은 조직이 관심을 보였습니다.
Chrome팀은 Astro의 기본적인 뷰 전환 지원에 매우 만족하고 있습니다. 이는 보다 유동적이고 동적인 사용자 환경을 가능하게 하는 웹 개발의 큰 진전입니다. 개발자 여러분, Astro 3.0의 뷰 전환을 자세히 알아보시기 바랍니다. 새 방문 페이지를 만들거나 기존 사이트를 업그레이드할 때 이러한 개선사항은 획기적인 변화를 가져옵니다. 뷰 전환은 SPA와 MPA로 가능했던 사항 사이의 간극을 메우는 데 도움이 되었습니다. Chrome은 여러분의 의견을 통해 SPA 또는 MPA 지원에 추가적인 격차가 있는지 알려 주시기 바랍니다. 자세한 내용은 View Transitions WICG GitHub 저장소에 댓글을 달아 주시기 바랍니다.
우리는 이미 관찰한 혁신적인 데모와 애플리케이션에서 영감을 얻었으며 더 많은 것을 기대하고 있습니다. 뷰 전환을 통한 여러분의 작업이 웹의 미래를 만들어가고 있습니다 Astro에서 뷰 전환을 사용해 보고 작업 내용을 공유하여 함께 이 여정을 계속해 봅시다.