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

Svelte.js > Article(s)

---

Article(s)

• 로딩 스피너와 페이드, 그러나 여전히 어색한 움직임
• 앱처럼 만들고 싶은데, 웹은 웹일 뿐인가요?
  • 기존 코드는 건드리지 말라고요? 그래도 애니메이션은 필요해요!
  • Link도 쓰고 싶고, 애니메이션도 넣고 싶어요
• 스벨트(Svelte)와 CSS로 만드는 자연스러운 페이지 전환
  • 기존 라우팅은 그대로, 애니메이션만 더하기
  • 레이아웃 하나로 시작하는 전환 효과
  • CSS absolute로 구현하는 겹침 효과
• 0.2초의 예술, 핀터레스트 전환 효과 구현기
  • 백 번의 관찰이 만든 한 번의 움직임
  • “앱 같다”라는 말이 최고의 칭찬이 되는 순간
• 웹 애니메이션, 이제 당연한 선택이 될 미래

---

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

웹을 사용하다 보면 페이지가 단번에 전환되어, 사용자가 마치 순간이동을 하듯 느끼는 경우가 많습니다. 이는 모바일 앱과 달리 웹에서는 화면 전환에 대한 시각적 흐름을 자연스럽게 이어주기 어렵기 때문입니다. 그래서 많은 프론트엔드 개발자들은 “어떻게 하면 웹에서도 쉽고 간단하게, 그리고 마치 네이티브 앱처럼 부드러운 페이지 전환을 구현할 수 있을까?”를 고민하게 됩니다. 이번 글에서는 이러한 고민에서 출발한 오픈소스 라이브러리 ‘SSGOI’를 소개하고, 이를 통해 핀터레스트의 대표적인 전환 효과를 구현한 경험을 공유하고자 합니다.

웹을 사용하다 보면 페이지가 단번에 전환되어, 사용자가 마치 순간이동을 하듯 느끼는 경우가 많습니다. 이는 모바일 앱과 달리 웹에서는 화면 전환에 대한 시각적 흐름을 자연스럽게 이어주기 어렵기 때문입니다. 모바일 앱에서는 보통 화면을 밀거나, 페이드하는 등 스택 구조를 활용하여, 떠나는 화면과 들어오는 화면을 겹쳐 보여줍니다. 이때 사용자는 전환 과정을 직관적으로 따라갈 수 있어, 한 화면에서 다음 화면으로 ‘연결되어 있다’라는 느낌을 받습니다.

반면, 웹 환경에서는 링크 클릭과 함께 바로 다른 페이지로 넘어가는 것이 흔합니다. 페이지가 완전히 교체되는 방식이라, 사용자 시점에서는 어떤 경로를 거쳐 이동했는지 시각적으로 파악하기 힘듭니다. 순간적으로 모든 요소가 사라지고 새 요소가 나타나기 때문에, 이전·다음 화면의 연속성이 분명히 드러나지 않는 것이죠. 이렇게 전환 과정에서 발생하는 단절감은 사용자가 겪는 불편이나 낯섦을 키우게 만듭니다.

---

로딩 스피너와 페이드, 그러나 여전히 어색한 움직임

사실 웹에서도 화면 전환 애니메이션을 시도할 수는 있습니다. 예컨대 자바스크립트로 페이드아웃이나 슬라이드 효과를 구현해 볼 수 있고, 페이지 로딩 전후에 스피너를 보여주는 식으로도 전환감을 부여할 수 있습니다.

그러나 이러한 방식만으로는 모바일 앱 수준의 ‘자연스러운 연결감’을 얻기엔 한계가 있습니다. 화면 요소가 이전·다음 단계에서 어떻게 변화해 가는지를 세밀하게 보여줄 수 없다면, 결과적으로 사용자는 여전히 갑작스러운 전환으로 느끼게 됩니다. 그래서 많은 프론트엔드 개발자들은 “어떻게 하면 웹에서도 쉽고 간단하게, 그리고 마치 네이티브 앱처럼 부드러운 페이지 전환을 구현할 수 있을까?”를 고민하게 됩니다.

이번 글에서는 이러한 고민에서 출발한 오픈소스 라이브러리 ‘SSGOI’를 소개하고, 이를 통해 핀터레스트의 대표적인 전환 효과를 구현한 경험을 공유하고자 합니다. 핀터레스트 앱에서는 이미지 리스트에서 특정 이미지를 선택하면, 해당 이미지가 자연스럽게 확대되면서 상세 페이지로 전환되는데요.

이런 부드러운 전환 효과를 웹에서도 완벽하게 구현할 수 있었습니다. 구체적인 사례를 통해 웹에서 네이티브 앱 수준의 사용자 경험을 어떻게 구현할 수 있는지 그 과정을 살펴보겠습니다.

---

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

SPA 구조는 페이지 전환 애니메이션을 구현하기 위한 기본 전제입니다. 페이지 전환 시 화면을 스택처럼 쌓아 전환 효과를 부여해야 하는데, 이는 전통적인 멀티 페이지 방식으로는 불가능하기 때문입니다. 하지만 Next.js나 React Router 같은 현대적인 웹 프레임워크는 a 태그나 Link 컴포넌트를 통한 네이티브한 페이지 이동 방식을 지원하고 있어, 이러한 기본 동작과 애니메이션을 함께 구현하는 것이 새로운 과제가 되었습니다.

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

페이지 전환 애니메이션을 도입하려면 여러 가지 기술적인 고민이 필요합니다. 우선 화면을 렌더링하는 방식 자체를 수정해야 합니다. 기존처럼 한 페이지가 완전히 사라지고 새 페이지가 나타나는 것이 아니라, 마치 모바일 앱처럼 화면들을 스택으로 쌓아 관리해야 하기 때문입니다. 이를 위해서는 라우팅 시스템도 수정이 필요한데, 단순히 URL을 변경하는 것을 넘어 화면 전환 API를 통해 애니메이션과 함께 페이지를 전환해야 합니다.

이러한 구조적 변경은 특히 기존 프로젝트에 도입할 때 큰 어려움이 됩니다. 화면 렌더링 방식부터 라우팅 시스템까지 광범위한 수정이 필요하고, SSR(Server Side Rendering)을 사용할 때는 서버와 클라이언트 간의 상태 관리나, 하이드레이션 과정에서도 추가적인 고려 사항이 생깁니다.

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

이러한 문제의식 속에서 ‘SSGOI’는 SPA 구조를 기반으로 하되, 기존 웹 프레임워크의 네이티브한 라우팅 방식과 자연스럽게 통합될 수 있는 방식을 모색했습니다. 라우팅과 애니메이션을 위한 별도의 레이어를 제공함으로써, 프레임워크의 기본 동작은 최대한 유지하면서도 부드러운 전환 효과를 구현할 수 있도록 했습니다.

SSGOI를 만들면서 얻은 가장 큰 교훈은 “프레임워크의 기본 동작을 존중하면서도, 애니메이션에 필요한 부분만 최소한으로 수정한다”라는 것이었습니다. 애니메이션이 사용자 경험을 풍부하게 만드는 것은 사실이지만, 그 구현 과정이 너무 복잡하면 실제 도입이 어려워지기 때문입니다. 따라서 도입 전략과 함께, 어떻게 기존 웹 프레임워크의 장점을 살리면서 모바일 앱 수준의 전환 효과를 구현할 수 있었는지가 관건이었습니다.

---

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

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

이번 프로젝트에서는 프레임워크의 기본 라우팅을 그대로 활용하면서도, 다양한 페이지 이동 애니메이션을 적용할 수 있는 방안을 고민했습니다. Link 컴포넌트나 a 태그를 통한 기본적인 라우팅은 유지하되, 전환 과정에서 부드러운 애니메이션을 더하는 것이 목표였습니다. 특히 모바일 앱에서처럼 화면이 겹치거나 슬라이드 되는 자연스러운 전환 효과를 웹에서도 구현하고자 했습니다.

이를 위해 다음과 같은 직관적인 설정 방식을 고안했습니다.

import { createTransitionConfig, transitions } from "ssgoi";

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

레이아웃 하나로 시작하는 전환 효과

이 문제를 해결하기 위해 가장 먼저 주목한 것은 Svelte의 트랜지션 API였습니다. Svelte는 컴포넌트가 생성되거나, 사라질 때 기본적인 애니메이션 효과를 매우 간단하게 부여할 수 있으며, 컴포넌트 단위뿐 아니라 페이지 전체에도 이를 활용할 수 있는 유연함이 있었습니다.

실제 구현은 다음과 같이 레이아웃에 SSGOI를 통합하는 것으로 시작됩니다.

<script lang="ts">
  import { onNavigate } from '$app/navigation';
  import { Ssgoi } from 'ssgoi';
  import config from './transitionConfig';
</script>

<Ssgoi {onNavigate} {config}>
  <slot />
</Ssgoi>

그리고 각 페이지는 PageTransition 컴포넌트로 감싸줍니다.

<script lang="ts">
  import { PageTransition } from 'ssgoi';
</script>

<PageTransition>
  <h1>페이지 콘텐츠</h1>
  <p>이 내용이 부드럽게 전환됩니다.</p>
</PageTransition>

CSS absolute로 구현하는 겹침 효과

고민 끝에 떠오른 방법은 “CSS absolute를 동적으로 삽입하자”라는 것입니다. 떠나는 페이지와 진입하는 페이지가 동시에 같은 화면 위에 겹쳐 있어야 자연스러운 애니메이션이 가능하므로, 트랜지션이 진행되는 동안만 두 페이지를 모두 absolute 위치로 배치하는 방식입니다. 예를 들어, 첫 번째 페이지가 서서히 작아지면서 사라지고, 두 번째 페이지가 그 뒤에서 슬며시 등장하도록 만들 수 있습니다.

[data-page-transition] {
  position: absolute;
  width: 100%;
  /* 트랜지션 중에만 적용되는 스타일 */
}

이 과정에서 이벤트 순서와 CSS 속성 충돌이 발생하거나, 브라우저 호환 이슈가 생기는 등의 난관이 존재했습니다. 예컨대, 어떤 타이밍에 absolute로 전환할지, 페이지가 존재하는 상태에서 새 페이지를 어떻게 미리 로드할지 등을 세심하게 조율해야 했습니다.

이렇게 만들어진 SSGOI는 떠나는 화면과 새로 들어오는 화면 모두에 개성 있는 트랜지션 효과를 줄 수 있도록 설계되었습니다. 이미지가 확대하듯 움직이는 ‘히어로 트랜지션’이나 갤러리 목록에서 상세 뷰로 넘어가는 자연스러운 전환 등 다양한 효과를 구현할 수 있습니다. 이 과정에서 애니메이션 타이밍, easing 함수의 적용, transform 속성 활용 등 프론트엔드 애니메이션 기법 전반을 깊이 있게 탐구할 수 있었습니다.

---

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

SSGOI를 개발하면서 가장 도전적이고 흥미로웠던 작업은 ‘핀터레스트’의 페이지 전환 애니메이션을 구현하는 것이었습니다. 핀터레스트 앱에서는 이미지 그리드 화면에서 특정 이미지를 클릭하면, 해당 이미지가 부드럽게 확대되면서 화면 전체를 채우고, 나머지 컨텐츠들이 자연스럽게 페이드인 되며 상세 페이지로 전환됩니다. 이러한 전환은 사용자에게 마치 이미지가 살아 움직이는 듯한 느낌을 주며, 콘텐츠의 연속성을 완벽하게 보여줍니다.

핀터레스트 페이지 전환 애니메이션

백 번의 관찰이 만든 한 번의 움직임

핀터레스트 스타일의 전환 효과를 구현하는 과정은 단순한 기능 개발을 넘어선 심도 있는 UX 연구의 여정이었습니다. 실제 핀터레스트 앱의 화면 전환을 수백 번 반복해서 관찰하고, 화면을 녹화해 슬로우 모션으로 분석하는 과정을 거쳤습니다. 이를 통해 페이지 진입 시의 clip 효과가 어떻게 적용되는지, 나가는 페이지의 요소들이 어떤 방식으로 확장되며 페이드아웃 되는지 등 세밀한 동작의 특성을 파악할 수 있었습니다.

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

이렇게 구현된 페이지 전환은 단순한 시각적 효과 이상의 가치를 만들어냅니다. 예를 들어, 갤러리에서 상세 페이지로 넘어갈 때 이미지가 부드럽게 확장되는 움직임은 사용자의 시선을 자연스럽게 이끌면서, 동시에 브랜드의 세련됨을 전달합니다. 특히 이미지를 다루는 서비스에서 이러한 부드러운 전환은 콘텐츠의 가치를 한층 돋보이게 만듭니다.

이러한 관찰과 분석의 과정은 프론트엔드 개발자로서 큰 성장을 가져다주었습니다. 단순히 애니메이션을 넣는다는 차원을 넘어, 사용자의 시선 이동과 인지 흐름을 고려한 섬세한 전환 효과를 구현하는 방법을 배웠기 때문입니다. 이는 곧 모바일 앱 수준의 정교한 인터랙션을 웹에서 구현할 수 있는 기술적 역량으로 이어졌죠.

네이티브 앱에서나 볼 수 있었던 부드러운 전환을 웹에서 구현함으로써, 사용자들은 “이 서비스는 디테일에 신경 쓴다”라는 인상을 받게 됩니다. 이는 단순한 기능적 만족을 넘어, 브랜드에 대한 신뢰로 이어질 수 있습니다. 실제로 이러한 섬세한 인터랙션은 서비스의 전문성과 완성도를 보여주는 중요한 요소입니다.

이제 SSGOI를 통해 이러한 고급 전환 효과를 쉽게 구현할 수 있게 되었습니다. 핀터레스트 스타일의 전환 효과는 라이브러리에 이미 구현되어 있어, 개발자들은 복잡한 구현 과정 없이도 전문적인 수준의 애니메이션을 적용할 수 있죠.

---

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

페이지 전환 애니메이션을 구현하는 방식은 매우 다양하며, 그만큼 창의적인 접근이 가능합니다. 예를 들어, 콘텐츠가 스크린에서 부드럽게 페이드아웃 된 뒤 다음 페이지가 슬라이드인으로 이어지는 방식을 시도해 볼 수도 있고, 화면의 특정 요소가 이동하면서 배경 컬러가 자연스럽게 변경되는 전환 효과를 만들어낼 수도 있습니다. 애니메이션 기법과 CSS 트랜지션, 자바스크립트 기능을 적절히 조합하면, 조금 더 색다르고 신선한 시각적 경험을 사용자에게 제공할 수 있습니다.

SSGOI 역시 다양한 아이디어를 수용할 수 있도록 설계되어 있습니다. 단순히 화면이 사라졌다 나타나는 수준을 넘어, 여러 요소가 서로 유기적으로 연결된 느낌을 주는 전환 방식을 적용할 수 있습니다. 이를 통해 웹페이지를 사용하는 순간이 단절된 화면 이동이 아니라, 하나의 이어진 플로우로 인식되도록 만들 수 있습니다. 사용자는 자연스러운 전환 안에서 서비스를 더욱 안정감 있게 체험하는 동시에, 브랜드의 고유한 감성을 시각적으로 느끼게 됩니다.

최근 크롬 브라우저가 지원하기 시작한 ViewTransitionAPI와 같은 신기술은 앞으로 웹 애니메이션 분야를 크게 발전시킬 수 있습니다. 기존에는 직접 스크립트나 CSS를 작성하여 구현해야 했던 전환 효과 중 일부를 브라우저 단에서 지원함으로써, 개발자에게 더욱 간소화된 코딩 환경을 제공하고 성능 면에서도 긍정적인 이점을 기대할 수 있죠. 개발 프로세스가 단순해지면, 그만큼 애니메이션의 완성도와 실험적인 시도가 동시에 확대되는 선순환이 이루어질 겁니다.

나아가 웹이 계속 진화하며 새로운 API가 속속 등장하는 만큼, 이들을 결합한 새로운 시도들이 계속해서 이어질 것입니다. 잦은 페이지 이동이 필요한 애플리케이션형 웹사이트, 감각적인 디자인 요소가 강조되는 프로모션 페이지 등에서, 더 완성도 높은 사용자 경험을 창출하는 전환이 연구되고 구현될 것으로 기대해 봅니다.

참고

SSGOI - Svelte Smooth Go Transition Library

A smooth page transition library for Svelte applications

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

---

웹을 사용하다 보면 페이지가 단번에 전환되어, 사용자가 마치 순간이동을 하듯 느끼는 경우가 많습니다. 이는 모바일 앱과 달리 웹에서는 화면 전환에 대한 시각적 흐름을 자연스럽게 이어주기 어렵기 때문입니다. 그래서 많은 프론트엔드 개발자들은 “어떻게 하면 웹에서도 쉽고 간단하게, 그리고 마치 네이티브 앱처럼 부드러운 페이지 전환을 구현할 수 있을까?”를 고민하게 됩니다. 이번 글에서는 이러한 고민에서 출발한 오픈소스 라이브러리 ‘SSGOI’를 소개하고, 이를 통해 핀터레스트의 대표적인 전환 효과를 구현한 경험을 공유하고자 합니다.