Drawer Slide (드로어 슬라이드)
다른 이름 Off-canvas, Side sheet, Slide-over, Navigation drawer
사이드 패널이 왼쪽, 오른쪽, 위쪽 가장자리에서 밀려 들어오며 콘텐츠를 밀어내거나 덮습니다.
쓰는 곳
모바일 내비게이션, 설정 패널, 장바구니
변형
- overlay
- push content
- left / right / top edge
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 드로어 슬라이드(Drawer Slide)를 넣어 줘. 오프캔버스(off-canvas), 사이드 시트(side sheet)라고도 불러.
뒤쪽 페이지가 어두워지는 동안 패널이 옆 가장자리에서 콘텐츠 위로 빠르게 밀려 들어오며 부드럽게 감속하고, 닫을 때는 같은 방식으로 빠져나가게 해 줘.
열린 드로어 안에 키보드 포커스를 가두고, Escape 키나 어두운 영역 클릭으로 닫히게 하고, 닫으면 드로어를 연 버튼으로 포커스를 돌려줘.비슷한 모션
A
Bottom Sheet Slide-Up (바텀 시트 슬라이드 업)
다른 이름 Bottom drawer, Sheet
패널이 아래 가장자리에서 밀려 올라오며, 끌어서 정해진 높이에 맞출 수 있는 경우가 많습니다.
쓰는 곳
모바일 액션, 공유 메뉴, 필터
[적용할 곳]에 바텀 시트 슬라이드 업(Bottom Sheet Slide-Up)을 넣어 줘. 바텀 드로어(bottom drawer), 시트(sheet)라고도 불러.
뒤쪽 페이지가 어두워지는 동안 패널이 아래 가장자리에서 밀려 올라오고, 튕김 없이 부드럽게 감속하며 자리를 잡게 해 줘.
시트가 열릴 때마다 한 번 재생하고, 닫을 때는 다시 아래로 내려가게 하고, 열려 있는 동안 키보드 포커스가 시트 안에 머물게 해 줘.A
Slide In (슬라이드 인)
다른 이름 Slide In Up, Slide In Down, Slide In Left, Slide In Right
요소가 컨테이너 가장자리 바깥에서 제자리까지 페이드 없이 미끄러져 들어옵니다.
쓰는 곳
드로어, 사이드 패널, 배너
[적용할 곳]에 슬라이드 인(Slide In) 등장 애니메이션을 넣어 줘. slide in left, slide in right, slide in up, slide in down이라고도 불러.
요소가 컨테이너 가장자리 바깥에서 제자리까지 미끄러져 들어오고, 그동안 계속 완전히 불투명하게 해 줘. 빠르게, 튕김 없이 부드럽게 감속하게.
바깥에 있는 동안 이웃 요소와 겹치거나 스크롤바가 생기지 않게 컨테이너 가장자리에서 잘라 주고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 제자리에 바로 보여 줘.A
B
클릭해 보세요
Slide Page Transition (슬라이드 페이지 트랜지션)
다른 이름 Push / pop, Directional slide, Slide-over route
새 페이지가 한쪽에서 밀려 들어오고 이전 페이지는 밀려 나가며, 방향은 탐색 깊이를 따릅니다.
쓰는 곳
모바일 앱 방식의 앞으로/뒤로 이동
[적용할 곳]에 슬라이드 페이지 트랜지션(Slide Page Transition)을 넣어 줘. 푸시 / 팝(push / pop), 방향성 슬라이드(directional slide)라고도 불러.
앞으로 갈 때는 새 페이지가 옆에서 밀고 들어오고 이전 페이지는 반대쪽으로 빠져나가게, 뒤로 갈 때는 둘 다 반대 방향으로 움직이게 해 줘. 부드럽게, 시작과 끝은 완만하게.
브라우저 뒤로 가기 버튼까지 포함해 방향을 탐색 깊이에 맞추고, 슬라이드하는 동안 페이지가 가로로 스크롤되지 않게 해 줘.A
Backdrop Scrim Fade (백드롭 스크림 페이드)
다른 이름 Overlay fade, Scrim
오버레이 뒤로 반투명한 어두운 막이 서서히 나타나 페이지를 어둡게 가립니다.
쓰는 곳
모달, 드로어, 시트 뒤
[적용할 곳]에 백드롭 스크림 페이드(Backdrop Scrim Fade)를 넣어 줘. 오버레이 페이드(overlay fade), 스크림(scrim)이라고도 불러.
오버레이가 열리면 뒤쪽 페이지 위로 반투명한 어두운 막이 부드럽게 나타나되 오버레이보다 조금 느리게 나타나고, 닫힐 때 다시 사라지게 해 줘.
라이트·다크 테마 모두에서 스크림은 어둡게 유지하고, 보이는 동안에는 뒤쪽 페이지가 스크롤되거나 클릭되지 않게 해 줘.Component & Layout의 다른 모션
- 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)를 켜 두었으면 바로 새 레이아웃으로 바꿔 줘.- A
- B
- C
- D
클릭해 보세요
List Item Enter/Exit (리스트 아이템 등장 / 퇴장)
다른 이름 AnimatePresence, TransitionGroup, Animated list
항목이 추가되면 서서히 미끄러져 들어오고, 삭제되면 애니메이션으로 빠지며 이웃 항목이 빈틈을 메웁니다.
쓰는 곳
할 일 목록, 알림, 장바구니 항목
[적용할 곳]에 리스트 아이템 등장 / 퇴장(List Item Enter/Exit) 애니메이션을 넣어 줘. 애니메이티드 리스트(animated list)라고도 불러.
새 항목은 먼저 자기 자리를 벌린 다음 서서히 미끄러져 들어오고, 삭제되는 항목은 먼저 사라진 다음 접혀서 이웃 항목이 부드럽게 빈틈을 메우게 해 줘.
삭제되는 항목은 퇴장이 끝날 때까지 자리에 남겨서, 항목을 추가하거나 지울 때 목록이 튀지 않게 해 줘.- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
- M
- N
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
- M
- N
Marquee (마퀴)
다른 이름 Ticker, Infinite Scroll Text
콘텐츠 한 줄이 끊김 없이 옆으로 계속 흘러갑니다.
쓰는 곳
로고 월, 공지 띠, 키워드 배너, 뉴스 티커
[적용할 곳]에 마퀴(Marquee)를 넣어 줘. 가로로 끝없이 흐르는 띠로, 티커(ticker)라고도 불러.
내용이 오른쪽에서 왼쪽으로 느리고 일정한 속도로 흐르고, 이음매가 튀지 않게 끊김 없이 반복되게 해 줘.
마우스를 올리면 멈추고, 모션 줄이기(prefers-reduced-motion)를 켠 사용자에게는 움직이지 않게 해 줘.