Shared Element Transition (셰어드 엘리먼트 트랜지션)
다른 이름 Hero transition, View Transition shared element, view-transition-name morph
썸네일 같은 짝이 되는 요소가 다음 페이지로 넘어가며 위치와 크기가 자연스럽게 바뀝니다.
쓰는 곳
썸네일에서 상세 페이지로
변형
- same-document
- cross-document
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 셰어드 엘리먼트 트랜지션(Shared Element Transition)을 넣어 줘. 히어로 트랜지션(hero transition), view-transition-name morph라고도 불러.
다음 페이지로 넘어갈 때 썸네일 같은 짝이 되는 요소가 새 페이지의 자기 자리로 부드럽게 이동하며 커지고, 나머지 콘텐츠는 크로스페이드되게 해 줘. 돌아올 때는 다시 작아지게.
두 페이지의 짝이 되는 요소에 같은 식별자를 줘서 제대로 짝지어지게 하고, 브라우저가 변형을 지원하지 않으면 단순한 크로스페이드로 대신해 줘.비슷한 모션
BC
A
A
클릭해 보세요
Container Transform (컨테이너 트랜스폼)
다른 이름 Card expand to detail, Expandable card, Morph card to page
카드가 전체 상세 화면으로 커지며, 보이는 컨테이너 하나가 모양을 바꾸면서 새 내용을 드러냅니다.
쓰는 곳
목록 카드에서 상세로, FAB에서 시트로
[적용할 곳]에 컨테이너 트랜스폼(Container Transform) 전환을 넣어 줘. 카드에서 상세로 펼치기(card expand to detail), 확장 카드(expandable card)라고도 불러.
카드를 열면 같은 컨테이너가 전체 상세 화면까지 부드럽게 커지고, 기존 내용은 빠르게 사라지고 거의 다 커졌을 때 새 내용이 나타나게 해 줘. 닫을 때는 거꾸로 재생해.
서로 다른 두 상자를 크로스페이드하지 말고 하나로 이어진 컨테이너로 보여 주고, 열리면 포커스를 상세 화면으로 옮겨 줘.ACB
클릭해 보세요
Shared Layout Animation (셰어드 레이아웃 애니메이션)
다른 이름 layoutId, Shared element (in-page)
요소가 새 위치의 짝이 되는 요소로 이동하며 크기가 바뀌어, 하나의 요소처럼 보입니다.
쓰는 곳
선택 하이라이트, 썸네일에서 확대 보기로
[적용할 곳]에 셰어드 레이아웃 애니메이션(Shared Layout Animation)을 넣어 줘. 페이지 내 공유 요소(in-page shared element)라고도 불러.
선택이 바뀌면 요소가 이전 자리에서 새 자리로 부드럽게 이동하며 크기가 바뀌고 살포시 자리 잡게 해서, 두 개가 아니라 하나의 물체로 보이게 해 줘.
어느 순간에도 복사본은 하나만 보이게 하고, 움직이는 동안 주변 레이아웃이 튀지 않게 해 줘.A
B
C
클릭해 보세요
Lightbox Zoom (라이트박스 줌)
다른 이름 Image zoom overlay, Medium-style zoom
썸네일이 제자리에서 커지며 어두워진 배경 위 가운데에 크게 펼쳐집니다.
쓰는 곳
이미지 갤러리, 아티클
[적용할 곳]에 라이트박스 줌(Lightbox Zoom)을 넣어 줘. 이미지 줌 오버레이(image zoom overlay), 미디엄 스타일 줌(Medium-style zoom)이라고도 불러.
썸네일을 클릭하면 제자리에서 부드럽게 커져 가운데 큰 화면이 되고 뒤쪽 페이지는 어둡게 물러나게 해 줘. 닫으면 같은 자리로 다시 줄어들게.
Esc 키나 배경 클릭으로 닫히게 하고, 열려 있는 동안 포커스를 큰 화면 안으로 옮기고, 닫은 뒤에는 썸네일로 돌려 줘.- A
- B
- C
- D
- E
- F
클릭해 보세요
FLIP Layout Animation (FLIP 레이아웃 애니메이션)
다른 이름 Layout animation, First-Last-Invert-Play
레이아웃이 바뀌면 요소들이 새 위치와 크기로 부드럽게 미끄러져 갑니다.
쓰는 곳
필터링되는 그리드, 다시 배치되는 목록
[적용할 곳]에 FLIP 레이아웃 애니메이션(FLIP Layout Animation)을 넣어 줘. 레이아웃 애니메이션(layout animation), First-Last-Invert-Play라고도 불러.
레이아웃이 바뀌면 각 요소가 툭 튀지 않고 이전 위치에서 새 위치로 미끄러지듯 이동하게 해 줘. 처음엔 빠르게, 끝에서는 부드럽게 자리 잡도록.
매 프레임 레이아웃이 다시 계산되지 않게 transform만으로 애니메이션하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 새 레이아웃으로 바꿔 줘.Page Transition의 다른 모션
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
클릭해 보세요
Circular Reveal (서큘러 리빌)
다른 이름 Clip-path circle expand, Theme toggle reveal
클릭한 지점에서 퍼져 나가는 원 안으로 새 화면이 드러납니다.
쓰는 곳
다크/라이트 테마 전환, 페이지 전환
[적용할 곳]에 서큘러 리빌(Circular Reveal) 전환을 넣어 줘. 클립 패스 원 확장(clip-path circle expand), 테마 전환 리빌(theme toggle reveal)이라고도 불러.
누른 컨트롤에서 원이 바깥으로 커지며 그 안에 새 화면이 드러나 전체 영역을 덮게 해 줘. 부드럽고 일정하게, 시작과 끝은 완만하게.
원은 컨트롤을 누른 바로 그 자리에서 시작하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 원 없이 바로 바뀌게 해 줘.