Shared Axis (셰어드 액시스)
다른 이름 Shared axis X/Y/Z
나가는 콘텐츠와 들어오는 콘텐츠가 X, Y, Z 축 중 하나를 따라 함께 움직이며 페이드되어 공간적 관계를 보여 줍니다.
쓰는 곳
단계 진행, 같은 계층 간 이동, 드릴다운
변형
- X axis
- Y axis
- Z axis
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 셰어드 액시스(Shared Axis) 페이지 전환을 넣어 줘. shared axis X/Y/Z라고도 불러.
앞으로 갈 때는 이전 콘텐츠가 한쪽으로 조금 밀려나며 빠르게 사라지고, 새 콘텐츠가 반대쪽에서 밀려 들어오며 바로 뒤이어 나타나게 해 줘. 뒤로 갈 때는 방향을 반대로.
방향만 느껴질 정도로 이동 거리를 짧게 하고, 축은 탐색 방식에 맞춰 줘. 같은 계층은 가로, 단계는 세로, 깊이 들어갈 때는 앞뒤 방향으로.비슷한 모션
A
B
클릭해 보세요
Slide Page Transition (슬라이드 페이지 트랜지션)
다른 이름 Push / pop, Directional slide, Slide-over route
새 페이지가 한쪽에서 밀려 들어오고 이전 페이지는 밀려 나가며, 방향은 탐색 깊이를 따릅니다.
쓰는 곳
모바일 앱 방식의 앞으로/뒤로 이동
[적용할 곳]에 슬라이드 페이지 트랜지션(Slide Page Transition)을 넣어 줘. 푸시 / 팝(push / pop), 방향성 슬라이드(directional slide)라고도 불러.
앞으로 갈 때는 새 페이지가 옆에서 밀고 들어오고 이전 페이지는 반대쪽으로 빠져나가게, 뒤로 갈 때는 둘 다 반대 방향으로 움직이게 해 줘. 부드럽게, 시작과 끝은 완만하게.
브라우저 뒤로 가기 버튼까지 포함해 방향을 탐색 깊이에 맞추고, 슬라이드하는 동안 페이지가 가로로 스크롤되지 않게 해 줘.A
B
클릭해 보세요
Zoom Page Transition (줌 페이지 트랜지션)
다른 이름 Scale transition, Zoom in / out
이전 페이지가 커지거나 작아지며 사라지는 동안 새 페이지가 크기를 바꾸며 제자리에 자리 잡습니다.
쓰는 곳
계층 안으로 들어가거나 빠져나오는 이동
[적용할 곳]에 줌 페이지 트랜지션(Zoom Page Transition)을 넣어 줘. 스케일 트랜지션(scale transition), 줌 인 / 아웃(zoom in / out)이라고도 불러.
안으로 들어갈 때는 이전 페이지가 살짝 커지며 사라지고 새 페이지가 조금 작은 크기에서 커지며 자리 잡게 하고, 돌아올 때는 반대로 줌 아웃되게 해 줘. 부드럽고 빠르게.
내용이 내내 읽힐 수 있게 크기 변화는 은은하게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 단순한 페이드로 바꿔 줘.A
B
클릭해 보세요
Crossfade Page Transition (크로스페이드 페이지 트랜지션)
다른 이름 Cross-dissolve, Fade transition, Root cross-fade, Cross-Document View Transition, MPA view transition, @view-transition navigation auto
이전 페이지가 서서히 사라지는 동안 새 페이지가 같은 자리에 서서히 나타납니다.
쓰는 곳
기본 라우트 전환
[적용할 곳]에 크로스페이드 페이지 트랜지션(Crossfade Page Transition)을 넣어 줘. 크로스 디졸브(cross-dissolve), 페이드 트랜지션(fade transition)이라고도 불러.
페이지를 이동하면 이전 페이지가 서서히 사라지는 동시에 새 페이지가 같은 자리에 서서히 나타나게 해 줘. 부드럽고 꽤 빠르게.
페이드 중에 아무것도 밀리지 않게 두 페이지를 같은 위치에 두고, 전환 뒤에는 새 페이지의 주 제목으로 포커스를 옮겨 줘.A
B
클릭해 보세요
Fade Through (페이드 스루)
다른 이름 Fade-through transition, Out-In Route Transition, Wait mode, mode="wait", mode="out-in"
나가는 콘텐츠가 완전히 사라진 뒤, 들어오는 콘텐츠가 살짝 커지며 서서히 나타납니다.
쓰는 곳
서로 관련 없는 화면 사이 전환
[적용할 곳]에 페이드 스루(Fade Through) 페이지 전환을 넣어 줘. 페이드 스루 트랜지션(fade-through transition), 아웃 인 라우트 트랜지션(out-in route transition)이라고도 불러.
먼저 나가는 콘텐츠가 빠르게 완전히 사라지고, 그다음 들어오는 콘텐츠가 살짝 커지면서 제자리에 서서히 나타나게 해 줘.
둘이 절대 겹치지 않게 하고, 커지는 동안 들어오는 콘텐츠의 레이아웃이 밀리지 않게 해 줘.Page Transition의 다른 모션
BC
A
클릭해 보세요
Shared Element Transition (셰어드 엘리먼트 트랜지션)
다른 이름 Hero transition, View Transition shared element, view-transition-name morph
썸네일 같은 짝이 되는 요소가 다음 페이지로 넘어가며 위치와 크기가 자연스럽게 바뀝니다.
쓰는 곳
썸네일에서 상세 페이지로
[적용할 곳]에 셰어드 엘리먼트 트랜지션(Shared Element Transition)을 넣어 줘. 히어로 트랜지션(hero transition), view-transition-name morph라고도 불러.
다음 페이지로 넘어갈 때 썸네일 같은 짝이 되는 요소가 새 페이지의 자기 자리로 부드럽게 이동하며 커지고, 나머지 콘텐츠는 크로스페이드되게 해 줘. 돌아올 때는 다시 작아지게.
두 페이지의 짝이 되는 요소에 같은 식별자를 줘서 제대로 짝지어지게 하고, 브라우저가 변형을 지원하지 않으면 단순한 크로스페이드로 대신해 줘.