스크랩
모바일 웹도 네이티브 앱처럼: 페이지 전환 라이브러리 SSGOI
한눈에 보는 요약
모바일 웹앱을 쓰다 보면 유독 아쉬운 순간이 있습니다. 바로 페이지가 바뀌는 순간이죠. 네이티브 앱에서는 화면이 스르륵 밀려 들어오는데, 웹에서는 화면이 툭 끊기며 갈아치워지는 느낌을 받기 쉽습니다.
SSGOI는 바로 이 간극을 메우기 위해 만들어진 페이지 전환(page transition) 라이브러리입니다. 개발자가 자신의 모바일 웹앱에서 "네이티브 앱 같은 전환"을 원했고, 마땅한 해법이 없어 직접 만들었다고 합니다.
SSGOI의 핵심 포인트
- 프레임워크 중립적: 특정 웹 프레임워크에 묶이지 않고, 어떤 프레임워크와도 함께 사용할 수 있도록 설계되었습니다.
- 네이티브 앱다운 전환: 페이지 이동 시의 밀림·페이드 같은 전환 효과를 웹에서 자연스럽게 구현하는 데 초점을 맞췄습니다.
- 실서비스 검증: 만든 사람이 운영하는 회사 서비스에서 실제로 사용 중입니다. 데모용 토이 프로젝트가 아니라, 프로덕션 환경을 거친 라이브러리라는 뜻이죠.
- 모바일 UI 컴포넌트로 확장: SSGOI를 기반으로 모바일용 UI 컴포넌트 모음까지 함께 만들어 공개했습니다.
왜 "페이지 전환"이 중요한가
전환 애니메이션은 단순한 눈요기가 아닙니다. 사용자에게 "내가 어디에서 어디로 이동했는지" 를 알려주는 공간적 단서 역할을 합니다.
- 오른쪽에서 밀려 들어오면 → 더 깊은 화면으로 들어갔다는 신호
- 왼쪽으로 밀려 나가면 → 뒤로 돌아왔다는 신호
네이티브 앱이 "매끄럽다"고 느껴지는 이유의 상당 부분이 여기에 있습니다. 반대로 웹앱이 유독 "웹 같다"고 느껴지는 것도, 이 단서가 빠져 있기 때문인 경우가 많습니다. SSGOI는 라우팅 과정에 전환 레이어를 얹어 이 경험 격차를 줄이려는 시도입니다.
이런 분께 유용합니다
- 모바일 우선(mobile-first) 웹앱을 만들고 있는 분
- PWA나 웹뷰 기반 서비스를 운영하며 네이티브 느낌을 더하고 싶은 분
- 프레임워크를 갈아타더라도 전환 로직은 그대로 가져가고 싶은 분
더 알아보기
- 문서: ssgoi.dev
- 깃허브: github.com/meursyphus/ssgoi
- 모바일 UI 컴포넌트: library.comwit.io/ui
제작자가 직접 피드백을 환영한다고 밝혔으니, 모바일 웹의 전환 경험에 평소 아쉬움이 있었다면 직접 적용해 보고 의견을 남겨보는 것도 좋겠습니다.