오늘은 Chrome과 Astro의 View Transitions API 여정에 대해 자세히 알려드리겠습니다. 여기에는 Astro 커뮤니티가 API를 일찍 수용하고 실험하여 더 큰 커뮤니티에 가능성을 보여주는 방법이 포함됩니다. 또한 Astro 3.0에서 뷰 전환을 위한 새로운 기본 지원에 관해 자세히 알려드리겠습니다.
배경
상태 전환이라고 하는 페이지의 여러 상태 간에 원활하게 전환하는 것은 항상 웹에서 원활한 애니메이션 환경을 구축하는 데 있어 복잡한 측면이었습니다. CSS 전환, CSS 애니메이션, Web Animation API와 같은 도구를 사용할 수 있음에도 상태 전환을 만드는 것은 여전히 어려운 작업이었습니다. 한 가지 문제는 전송되는 요소의 상호작용을 처리하는 것으로, 이로 인해 전환이 더 복잡해질 수 있습니다.
또한 보조 기기의 읽기 위치와 포커스를 유지하기는 어렵습니다. 또한 스크롤 위치 차이를 처리하면 상태 전환이 번거로운 프로세스가 됩니다. 이러한 모든 요소는 웹페이지의 다양한 요소 간에 원활한 전환을 구현하는 복잡성을 증가시킵니다.
View Transitions API가 이러한 문제에 대한 브라우저의 솔루션으로 등장했습니다. 이 새로운 API를 사용하면 한 번의 단계로 DOM을 더 쉽게 변경하면서 두 상태 간에 애니메이션 전환을 만들 수 있습니다.
Chrome 111에서 View Transitions API가 출시되면서 JavaScript 기반 웹 애플리케이션뿐만 아니라 모든 웹사이트의 전환을 지원하기 위한 보다 광범위한 비전이 시작되었습니다. 향후 개선사항도 준비 중입니다. Chrome에서는 향후 문서 전반의 전환, 컴포저 기반 애니메이션, 범위 지정된 전환, 중첩된 전환 그룹과 같은 흥미로운 추가 기능을 모색할 수 있습니다.
뷰 전환을 사용한 초기 탐색
Chrome의 View Transitions API 여정은 단독으로 진행되지 않았습니다. 개발자, 프레임워크 작성자, CSS 작업 그룹의 의견과 협업은 지난 몇 년 동안 이 기능을 형성하는 데 중요한 역할을 했습니다.
초기에는 개발자 실험이 중요한 역할을 했습니다. 초기 버전의 API는 CSS 애니메이션을 지원하지 않았으며 전환은 몇 가지 제한적인 사전 설정으로 제한되었습니다. 초기 의견을 통해 개발자는 전환을 완전히 맞춤설정하고 표현력 있게 만들기를 원한다는 점이 분명해졌습니다. 이러한 협업을 통해 API는 적절한 기본값, 확장성, 맞춤설정의 균형을 갖추도록 설계되었습니다.
Astro는 뷰 전환을 조기에 활용한 프레임워크 중 하나였습니다. 이 도움말의 나머지 부분은 Astro팀의 관점에서 작성되었으며 뷰 전환을 찾아서 채택하고 웹 개발 환경에 전면적으로 도입한 경험을 공유합니다.
Astro에서 조회 전환에 집중하는 이유
Astro는 뷰 전환과 같은 기능을 오랫동안 찾고 있었습니다. Astro는 페이지 로드 성능을 높이기 위해 UI 구성요소를 서버에서 가벼운 HTML로 렌더링하는 JavaScript 웹 프레임워크입니다. Astro는 최대한 많은 작업을 클라이언트 기기 외부로 이동시킵니다. Astro 웹사이트는 네이티브 브라우저 페이지 탐색을 사용합니다. 다른 웹 프레임워크는 대신 JavaScript 클라이언트 측 라우팅으로 브라우저 탐색을 도용할 수 있습니다.
이러한 절충으로 인해 Astro팀은 다음과 같은 문제를 해결해야 했습니다. Astro가 클라이언트 측 라우팅을 채택하지 않고도 페이지 전환을 애니메이션 처리하고 페이지 전반에서 앱과 같은 UI 지속성을 제공하려면 어떻게 해야 할까요?
뷰 전환이 그 해답이었습니다. 뷰 전환을 사용하면 Astro는 JavaScript가 많은 SPA 웹 프레임워크에서 제공하는 것과 동일한 라우팅 기능을 제공할 수 있지만 클라이언트 측 라우팅의 성능 및 복잡성 오버헤드는 없습니다. 다른 프레임워크는 뷰 전환을 선택적 구현 세부정보로 접근했지만 Astro에서는 훨씬 더 큰 의미를 가졌습니다.
Astro팀이 다음으로 답해야 할 질문은 '어떻게?'였습니다. 팀은 Turbo, Swup, Livewire와 같은 프로젝트에서 아이디어를 얻고 Astro 내에서 유사한 접근 방식의 프로토타입을 제작하기도 했습니다.
가장 초기의 시도 중 하나는 모든 새 HTML 페이지를 현재 HTML과 자동으로 비교한 다음 JavaScript를 사용하여 모든 요소를 한 번에 교체하려는 전체 페이지 '스마트 전환'이었습니다. 영리한 방법이지만 오류가 발생하기 쉽습니다.
// 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와 정렬하면 예상치 못한 이점으로 네이티브 뷰 전환 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 지원에 추가적인 공백이 있는지 알려주시면 감사하겠습니다. 뷰 전환 WICG GitHub 저장소에 의견을 남겨 논의에 참여해 주세요.
이미 혁신적인 데모와 애플리케이션을 보고 많은 영감을 얻었으며 앞으로 더 많은 것을 기대하고 있습니다. 뷰 전환을 사용하면 웹의 미래를 만들어 나가실 수 있습니다. Astro에서 뷰 전환을 사용해 보고, 작업물을 공유하고, 함께 이 여정을 이어가세요.