Container Transform (컨테이너 트랜스폼)
다른 이름 Card expand to detail, Expandable card, Morph card to page
카드가 전체 상세 화면으로 커지며, 보이는 컨테이너 하나가 모양을 바꾸면서 새 내용을 드러냅니다.
쓰는 곳
목록 카드에서 상세로, FAB에서 시트로
변형
- card to full screen
- FAB to sheet
- list item to detail
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 컨테이너 트랜스폼(Container Transform) 전환을 넣어 줘. 카드에서 상세로 펼치기(card expand to detail), 확장 카드(expandable card)라고도 불러.
카드를 열면 같은 컨테이너가 전체 상세 화면까지 부드럽게 커지고, 기존 내용은 빠르게 사라지고 거의 다 커졌을 때 새 내용이 나타나게 해 줘. 닫을 때는 거꾸로 재생해.
서로 다른 두 상자를 크로스페이드하지 말고 하나로 이어진 컨테이너로 보여 주고, 열리면 포커스를 상세 화면으로 옮겨 줘.비슷한 모션
BC
A
클릭해 보세요
Shared Element Transition (셰어드 엘리먼트 트랜지션)
다른 이름 Hero transition, View Transition shared element, view-transition-name morph
썸네일 같은 짝이 되는 요소가 다음 페이지로 넘어가며 위치와 크기가 자연스럽게 바뀝니다.
쓰는 곳
썸네일에서 상세 페이지로
[적용할 곳]에 셰어드 엘리먼트 트랜지션(Shared Element Transition)을 넣어 줘. 히어로 트랜지션(hero transition), view-transition-name morph라고도 불러.
다음 페이지로 넘어갈 때 썸네일 같은 짝이 되는 요소가 새 페이지의 자기 자리로 부드럽게 이동하며 커지고, 나머지 콘텐츠는 크로스페이드되게 해 줘. 돌아올 때는 다시 작아지게.
두 페이지의 짝이 되는 요소에 같은 식별자를 줘서 제대로 짝지어지게 하고, 브라우저가 변형을 지원하지 않으면 단순한 크로스페이드로 대신해 줘.A
B
C
클릭해 보세요
Lightbox Zoom (라이트박스 줌)
다른 이름 Image zoom overlay, Medium-style zoom
썸네일이 제자리에서 커지며 어두워진 배경 위 가운데에 크게 펼쳐집니다.
쓰는 곳
이미지 갤러리, 아티클
[적용할 곳]에 라이트박스 줌(Lightbox Zoom)을 넣어 줘. 이미지 줌 오버레이(image zoom overlay), 미디엄 스타일 줌(Medium-style zoom)이라고도 불러.
썸네일을 클릭하면 제자리에서 부드럽게 커져 가운데 큰 화면이 되고 뒤쪽 페이지는 어둡게 물러나게 해 줘. 닫으면 같은 자리로 다시 줄어들게.
Esc 키나 배경 클릭으로 닫히게 하고, 열려 있는 동안 포커스를 큰 화면 안으로 옮기고, 닫은 뒤에는 썸네일로 돌려 줘.ACB
클릭해 보세요
Shared Layout Animation (셰어드 레이아웃 애니메이션)
다른 이름 layoutId, Shared element (in-page)
요소가 새 위치의 짝이 되는 요소로 이동하며 크기가 바뀌어, 하나의 요소처럼 보입니다.
쓰는 곳
선택 하이라이트, 썸네일에서 확대 보기로
[적용할 곳]에 셰어드 레이아웃 애니메이션(Shared Layout Animation)을 넣어 줘. 페이지 내 공유 요소(in-page shared element)라고도 불러.
선택이 바뀌면 요소가 이전 자리에서 새 자리로 부드럽게 이동하며 크기가 바뀌고 살포시 자리 잡게 해서, 두 개가 아니라 하나의 물체로 보이게 해 줘.
어느 순간에도 복사본은 하나만 보이게 하고, 움직이는 동안 주변 레이아웃이 튀지 않게 해 줘.A
Modal Scale-Fade In (모달 스케일 페이드 인)
다른 이름 Dialog open animation, Zoom-fade dialog
어두워진 페이지 위로 대화상자가 가운데에서 살짝 커지며 서서히 나타납니다.
쓰는 곳
확인 대화상자, 오버레이 속 폼
[적용할 곳]에 모달 스케일 페이드 인(Modal Scale-Fade In) 애니메이션을 넣어 줘. 대화상자 열기 애니메이션(dialog open animation), 줌 페이드 대화상자(zoom-fade dialog)라고도 불러.
뒤쪽 페이지가 어두워지는 동안 대화상자가 가운데에서 살짝 커지며 서서히 나타나게 해 줘. 빠르고 은은하게, 튕김 없이.
대화상자가 열릴 때마다 한 번 재생하고, 포커스를 대화상자로 옮겨 그 안에 머물게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 단순한 페이드만 써 줘.Component & Layout의 다른 모션
- A
- B
- C
- D
끌어 보세요
Drag-to-Reorder List (드래그 순서 변경 리스트)
다른 이름 Reorder, Sortable list
항목을 끌면 나머지 항목이 비켜나듯 미끄러지며 새 순서로 자리 잡습니다.
쓰는 곳
칸반, 순서를 바꾸는 설정, 플레이리스트
[적용할 곳]에 드래그 순서 변경 리스트(Drag-to-Reorder List)를 넣어 줘. 정렬 가능한 리스트(sortable list)라고도 불러.
끄는 항목은 포인터를 바로 따라오며 살짝 떠오르고, 나머지 항목은 부드럽게 미끄러지며 비켜나게 해 줘. 놓으면 가장 가까운 자리에 빠르게 들어가게.
마우스뿐 아니라 터치도 지원하고, 키보드로 항목을 옮기는 방법도 넣어서 새 위치를 스크린 리더에 알려 줘.A
Drawer Slide (드로어 슬라이드)
다른 이름 Off-canvas, Side sheet, Slide-over, Navigation drawer
사이드 패널이 왼쪽, 오른쪽, 위쪽 가장자리에서 밀려 들어오며 콘텐츠를 밀어내거나 덮습니다.
쓰는 곳
모바일 내비게이션, 설정 패널, 장바구니
[적용할 곳]에 드로어 슬라이드(Drawer Slide)를 넣어 줘. 오프캔버스(off-canvas), 사이드 시트(side sheet)라고도 불러.
뒤쪽 페이지가 어두워지는 동안 패널이 옆 가장자리에서 콘텐츠 위로 빠르게 밀려 들어오며 부드럽게 감속하고, 닫을 때는 같은 방식으로 빠져나가게 해 줘.
열린 드로어 안에 키보드 포커스를 가두고, Escape 키나 어두운 영역 클릭으로 닫히게 하고, 닫으면 드로어를 연 버튼으로 포커스를 돌려줘.- 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)를 켜 두었으면 바로 새 레이아웃으로 바꿔 줘.