오늘은 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에서 뷰 전환을 사용해 보고, 작업물을 공유하고, 함께 이 여정을 이어가세요.