웹에서도 앱처럼 부드러운 페이지 전환이 가능할까?

웹에서는 페이지 전환 시 사용자가 순간이동하는 듯한 경험이 잦습니다. 이는 모바일 앱의 시각적 흐름과 달리 웹에서는 화면 전환이 갑작스러워 사용자에게 연결성이 부족하게 느껴지기 때문입니다.

웹에서는 링크 클릭 시 즉시 다른 페이지로 넘어가게 되어, 이전과 다음 화면 간의 연속성이 명확하지 않아 단절감을 느끼게 합니다.

로딩 스피너와 페이드 등의 애니메이션을 사용해 전환감을 줄 수 있으나, 모바일처럼 자연스러운 연결감은 얻기 어렵습니다. 개발자들은 웹에서도 부드러운 페이지 전환을 구현하는 방법을 고민하고 있습니다.

이를 위한 오픈소스 라이브러리 ‘SSGOI’를 소개하며, 핀터레스트 전환 효과를 사례로 공유하고자 합니다. 핀터레스트는 이미지 선택 시 해당 이미지가 확대되며 상세 페이지로 부드럽게 전환되는 특징이 있습니다.

앱처럼 만들고 싶은데, 웹은 웹일 뿐인가요?

SPA 구조는 페이지 전환 애니메이션 구현의 기본입니다. 현대적인 웹 프레임워크(예: Next.js, React Router)는 네이티브한 페이지 이동 방식을 지원하므로 애니메이션과 기본 동작을 함께 구현하는 도전이 있습니다.

기존 코드는 건드리지 말라고요? 그래도 애니메이션은 필요해요!

애니메이션 도입을 위해 화면 렌더링 방식을 바꾸고 라우팅 시스템을 수정해야 합니다. URL 변경 이상의 복잡한 상태 관리와 하이드레이션 과정이 필요합니다.

Link도 쓰고 싶고, 애니메이션도 넣고 싶어요

‘SSGOI’는 SPA 구조에서 기존 웹 프레임워크의 라우팅과 애니메이션을 통합하여 부드러운 전환을 구현하도록 설계되었습니다.

스벨트(Svelte)와 CSS로 만드는 자연스러운 페이지 전환

기존 라우팅은 그대로, 애니메이션만 더하기

본 프로젝트에서 기본 라우팅을 유지하며 여러 페이지 이동 애니메이션을 적용합니다. Svelte의 트랜지션 API를 활용하여 페이지 전체에 애니메이션 효과를 부여합니다.

다음은 SSGOI 통합 방법입니다:

import { createTransitionConfig, transitions } from "ssgoi";const config = createTransitionConfig({  transitions: [    { from: "/home", to: "/about", transitions: transitions.fade() },    { from: "/blog", to: "/post/*", transitions: (context) => context.isMobile ? transitions.slideRight() : transitions.fade() },  ],  defaultTransition: transitions.fade(),});

CSS absolute로 구현하는 겹침 효과

페이지를 겹쳐 놓아 자연스러운 애니메이션을 만듭니다. CSS absolute 변환으로 페이지 전환 동안 두 페이지가 겹쳐있게 설정합니다.

[data-page-transition] {  position: absolute;  width: 100%;}

0.2초의 예술, 핀터레스트 전환 효과 구현기

핀터레스트의 전환 애니메이션은 UX 연구의 결과물로, 이미지 그리드에서 특정 이미지를 클릭하면 부드럽게 확대되며 상세 페이지로 전환됩니다.

“앱 같다”라는 말이 최고의 칭찬이 되는 순간

부드러운 전환은 콘텐츠의 가치를 높이고 브랜드의 신뢰를 구축하는 데 기여합니다. SSGOI를 통해 이러한 전환 효과를 쉽게 구현할 수 있습니다.

웹 애니메이션, 이제 당연한 선택이 될 미래

다양한 페이지 전환 애니메이션을 활용하여 사용자에게 신선한 시각적 경험을 제공합니다. SSGOI는 유기적인 연결 느낌을 주는 전환을 수용할 수 있도록 설계되었습니다.

크롬 브라우저의 ViewTransitionAPI와 같은 신기술은 웹 애니메이션의 발전을 이끌어내며, 사용자의 경험을 더욱 향상시킬 것입니다.

<참고>

https://ssgoi.dev