최근 Sogwaja 웹 앱을 개발하면서, 네이티브 앱처럼 부드러운 화면 전환 효과를 구현하고 싶었습니다. 이를 위해 ViewTransition API를 직접 사용해보고, 더 나은 대안을 찾아가는 과정을 정리해보겠습니다.
App-like 화면 전환
Sogwaja는 모바일 사용을 고려하여 모바일-퍼스트 전략으로 기획했습니다. 이후 간단하게 웹 앱을 구현하고 나니, 화면 간 전환이 매끄럽지 않았습니다. 저는 최대한 네이티브 앱 경험을 제공하고 싶었습니다.
이러한 문제를 해결하기 위해 여러 방법을 찾아보았고, React 19에서 새로 추가된
ViewTransition 컴포넌트를 발견했습니다.React.ViewTransition 훑어보기
기본 사용법
React의
ViewTransition 컴포넌트는 매우 간단하게 사용할 수 있습니다.import { ViewTransition } from "react";
<ViewTransition>
<div>...</div>
</ViewTransition>ViewTransition 컴포넌트는 enter, exit, default 등의 다양한 프로퍼티를 제공합니다. 뷰 트랜지션이 실행될 때, 인자로 넘겨준 클래스 네임을 자식 컴포넌트에 자동으로 추가해줍니다.View Transition Class
기본적으로
"default", "none", "auto" 값을 지원하며, 커스텀 클래스 네임도 적용할 수 있습니다.내부 동작 방식
<ViewTransition/> 컴포넌트는 해당 경계가 애니메이션에 참여해야 하는 시점에 가장 가까운 자식의 인라인 스타일에 view-transition-name 을 설정합니다. 그리고 내부적으로 startViewTransition 함수를 호출하여 트랜지션을 트리거합니다. 따라서, 개발자가 직접 호출할 필요는 없습니다.만약 이미 리액트 뷰 트랜지션이 진행중이라면, 다음 트랜지션을 시작하기 전에 해당 트랜지션이 완료되기를 기다립니다. 게다가 트랜지션이 완료되기를 기다리는 도중에 여러 업데이트가 발생하는 경우, 리액트는 이를 최적화합니다. (하나로 뭉쳐 배치합니다.)
Custom View Transition Class
View Transition API를 활용하여 커스텀 트랜지션을 정의할 수 있습니다.
/* 키프레임 정의 */
@keyframes move-out {
from {
transform: translateY(0%);
}
to {
transform: translateY(-100%);
}
}
@keyframes move-in {
from {
transform: translateY(100%);
}
to {
transform: translateY(0%);
}
}
/* 뷰 트랜지션 정의 */
::view-transition-old(.move) {
animation: 0.4s ease-in both move-out;
}
::view-transition-new(.move) {
animation: 0.4s ease-in both move-in;
}<ViewTransition default="move">
...
</ViewTransition>Transition Type으로 커스터마이징하기
addTransitionType 훅을 이용하면 다양한 트랜지션을 구현할 수 있습니다.<ViewTransition
default={{
"navigation-back": "slide-right",
"navigation-forward": "slide-left",
}}
>
...
</ViewTransition>;
// 트랜지션 트리거
startTransition(() => {
addTransitionType("navigation-" + navigationType);
});
이 기능을 활용하면 뒤로 가기나 앞으로 가기와 같이 더욱 자연스러운 사용자 경험을 제공할 수 있습니다.
접근성 준수하기
접근성을 고려하여
prefers-reduced-motion 미디어 쿼리를 활용할 수 있습니다. 기본 뷰 트랜지션 클래스를 사용하는 경우, JavaScript로 제어해야 합니다.const reducedMotion = window.matchMedia(
"(prefers-reduced-motion: reduce)",
).matches;
<ViewTransition default={reducedMotion ? "none" : "auto"}>...</ViewTransition>반면, 커스텀 트랜지션 클래스를 사용하면 클래스 네임을 알고 있기 때문에 CSS만으로도 제어가 가능합니다:
::view-transition-old(.slide) {
animation: slide-out 0.3s ease-in-out;
}
::view-transition-new(.slide) {
animation: slide-in 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(.slide),
::view-transition-new(.slide) {
animation: none !important;
}
}<ViewTransition default="slide">
...
</ViewTransition>예시: 카드 목록 재정렬
리스트 아이템에 개별적으로 트랜지션을 적용할 수도 있습니다:
recipes.map((recipe) => (
<ViewTransition key={recipe.id} default="auto">
<RecipeCard>...</RecipeCard>
</ViewTransition>
));예시: 부드러운 화면 전환
// app/foo/page.tsx
import Link from "next/link";
import { ViewTransition } from "react";
export default function FooPage() {
return (
<ViewTransition enter="slide-right" exit="slide-left">
<div>
FooPage
<div>
<Link href="/bar">➡️</Link>
</div>
</div>
</ViewTransition>
);
}
// app/foo/page.tsx
import Link from "next/link";
import { ViewTransition } from "react";
export default function BarPage() {
return (
<ViewTransition enter="slide-left" exit="slide-right">
<div>
BarPage
<div>
<Link href="/foo">⬅️</Link>
</div>
</div>
</ViewTransition>
);
}
/* app/globals.css */
@keyframes slide-in-left {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-out-left {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(-100%);
opacity: 0;
}
}
@keyframes slide-in-right {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-out-right {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(100%);
opacity: 0;
}
}
::view-transition-group(.slide-left) {
border: 1px solid red;
}
::view-transition-old(.slide-left) {
animation: slide-out-left 0.3s ease-in-out;
}
::view-transition-new(.slide-left) {
animation: slide-in-left 0.3s ease-in-out;
}
::view-transition-group(.slide-right) {
border: 1px solid blue;
}
::view-transition-old(.slide-right) {
animation: slide-out-right 0.3s ease-in-out;
}
::view-transition-new(.slide-right) {
animation: slide-in-right 0.3s ease-in-out;
}이렇게
enter , exit 애니메이션을 구분해서 정의해두면 더욱 자연스럽게 화면을 전환할 수 있습니다. (이해를 돕기 위해 border 스타일을 적용했습니다.)더 나은 대안, SSGOI
React.ViewTransition을 사용하면서도 몇 가지 아쉬운 점이 있었습니다. 한 화면의 트랜지션을 다양하게 구성할 수는 있지만, 이를 제어하기 위해서는 트랜지션을 트리거하는 위치에서 매번 트랜지션 타입을 지정해줘야 합니다. 단순히 forward 인지 backward 인지 판단하는 로직을 넣는 것 조차 상당히 번거롭습니다.
그리고 전환에 대한 정보를 트리거하는 측에서 알고 있어야 하는 점도 꽤나 신경이 쓰였습니다. 저는 페이지 간 전환 관계를 중앙집중식으로 관리하고 싶었습니다.
이런 고민 중에 SSGOI라는 라이브러리를 발견하게 되었습니다.
SSGOI는 화면 간 트랜지션을 한 곳에서 편리하게 관리할 수 있고, 크로스 브라우징 지원과 성능 최적화를 자동으로 처리해줍니다. 소소하지만 스프링 기반 애니메이션을 사용한다는 것도 독특합니다. 다만 접근성 제어는 JavaScript 차원에서 직접 처리해야 합니다.
SSGOI를 활용한 드릴 트랜지션
SSGOI를 적용한 결과, 훨씬 간편하게 부모-자식 관계를 나타내는 드릴 트랜지션을 구현할 수 있었습니다.
양 옆 여백과 로딩 UI 때문에 조금 어색하기는 하지만, 전환 효과는 잘 동작합니다. 😄
후기
알아두면 좋은 점
React.ViewTransition과 SSGOI 모두, DOM 요소의 변화를 감지하여 트랜지션을 실행합니다.React.ViewTransition의 경우, 컴포넌트가 감싸는 자식 요소의 DOM 변화(언마운트/마운트, 리렌더링 등)를 감지하여 트랜지션을 적용합니다.SSGOI의 경우, 라우트 전환 시 서로 다른
id를 가진 <SsgoiTransition/> 컴포넌트 간의 전환을 감지하여 트랜지션을 실행합니다.Next.js와의 통합
경험 상
<SsgoiTransition/> 가 언마운트 되고 마운트 되는 과정에서 트랜지션이 정상적으로 동작하는 것으로 보였습니다. 레이아웃에 트랜지션 컴포넌트를 넣었더니, 레이아웃이 공유되는 페이지 간에는 트랜지션이 정상적으로 동작하지 않았거든요. 그래서 레이아웃을 공유하지 않도록 라우트 그룹을 분리했습니다.이 과정에서 수 많은 변경사항이 생기니, 만약 트랜지션을 도입할 계획이 있다면 미리 URL 구조와 레이아웃을 포함한 라우트 구조를 검토하는 것이 좋을 것입니다.
최종 선택
처음에는
React.ViewTransition을 이용하여 제로 의존성으로 구현하고 싶었습니다. 하지만 위에서 언급한 대로, 여러모로 귀찮은 것들이 있었습니다. 반면 SSGOI를 활용하니 비교적 간편하게 원하는 효과를 구현할 수 있었습니다.마무리
얼핏 보면 사소하지만, 웹 앱에서 네이티브 앱과 유사한 사용자 경험을 제공하는 것은 쉽지 않다는 것을 느꼈습니다. 이러한 디테일을 챙기는 것이 FE 엔지니어로서의 중요한 덕목 중 하나겠죠. 모 회사에서 사용자 인터렉션만을 전담하는 팀이 있는 이유도 조금은 알게 되었습니다.
웹 앱에서 네이티브 앱과 같은 화면 전환을 구현하고 싶으시다면, 이 기술들을 활용하시길 권장드립니다. 😄