Bottom Sheet Slide-Up (바텀 시트 슬라이드 업)
다른 이름 Bottom drawer, Sheet
패널이 아래 가장자리에서 밀려 올라오며, 끌어서 정해진 높이에 맞출 수 있는 경우가 많습니다.
쓰는 곳
모바일 액션, 공유 메뉴, 필터
변형
- modal sheet
- standard (non-modal) sheet
- drag with snap points
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 바텀 시트 슬라이드 업(Bottom Sheet Slide-Up)을 넣어 줘. 바텀 드로어(bottom drawer), 시트(sheet)라고도 불러.
뒤쪽 페이지가 어두워지는 동안 패널이 아래 가장자리에서 밀려 올라오고, 튕김 없이 부드럽게 감속하며 자리를 잡게 해 줘.
시트가 열릴 때마다 한 번 재생하고, 닫을 때는 다시 아래로 내려가게 하고, 열려 있는 동안 키보드 포커스가 시트 안에 머물게 해 줘.비슷한 모션
A
Drawer Slide (드로어 슬라이드)
다른 이름 Off-canvas, Side sheet, Slide-over, Navigation drawer
사이드 패널이 왼쪽, 오른쪽, 위쪽 가장자리에서 밀려 들어오며 콘텐츠를 밀어내거나 덮습니다.
쓰는 곳
모바일 내비게이션, 설정 패널, 장바구니
[적용할 곳]에 드로어 슬라이드(Drawer Slide)를 넣어 줘. 오프캔버스(off-canvas), 사이드 시트(side sheet)라고도 불러.
뒤쪽 페이지가 어두워지는 동안 패널이 옆 가장자리에서 콘텐츠 위로 빠르게 밀려 들어오며 부드럽게 감속하고, 닫을 때는 같은 방식으로 빠져나가게 해 줘.
열린 드로어 안에 키보드 포커스를 가두고, Escape 키나 어두운 영역 클릭으로 닫히게 하고, 닫으면 드로어를 연 버튼으로 포커스를 돌려줘.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
Toast Slide-In (토스트 슬라이드 인)
다른 이름 Snackbar, Toast notification, Toast stack
짧은 메시지가 화면 가장자리에서 미끄러지거나 서서히 나타나 잠시 머문 뒤 사라지고, 쌓인 토스트는 자리를 내주며 옮겨 갑니다.
쓰는 곳
저장 완료 알림, 오류, 실행 취소 안내
[적용할 곳]에 토스트 슬라이드 인(Toast Slide-In)을 넣어 줘. 스낵바(snackbar), 토스트 알림(toast notification)이라고도 불러.
각 메시지가 화면 가장자리에서 위로 미끄러지며 서서히 나타나고 부드럽게 감속하게 해 줘. 새 토스트가 오면 이미 떠 있는 것들이 부드럽게 옮겨 가며 자리를 내주게.
포커스를 뺏지 않고 스크린 리더에 메시지를 알리고, 읽을 수 있을 만큼 충분히 띄워 두고, 마우스를 올리거나 포커스가 가면 자동 닫힘을 멈춰 줘.끌어 보세요
Pull to Refresh (당겨서 새로고침)
다른 이름 Swipe to refresh
목록을 아래로 당기면 스피너가 나타나고, 손을 떼면 콘텐츠를 다시 불러옵니다.
쓰는 곳
피드, 받은편지함
[적용할 곳]에 당겨서 새로고침(Pull to Refresh) 인터랙션을 넣어 줘. 스와이프 투 리프레시(swipe to refresh)라고도 불러.
목록을 맨 위에서 아래로 당기면 약간의 저항감을 주며 손가락을 따라오고, 당기는 만큼 도는 스피너가 드러나게 해 줘. 손을 떼면 콘텐츠를 다시 불러오는 동안 스피너가 계속 돌다가, 끝나면 목록이 부드럽게 다시 올라가게.
목록이 이미 맨 위까지 스크롤된 상태에서만 시작하고, 키보드와 스크린 리더 사용자를 위해 일반 새로고침 버튼도 함께 둬.Component & Layout의 다른 모션
A
B
C
Carousel Crossfade (캐러셀 크로스페이드)
다른 이름 Fade slideshow, Carousel fade
슬라이드가 옆으로 밀리지 않고 제자리에서 서로 스며들듯 바뀝니다.
쓰는 곳
히어로 슬라이드쇼, 고객 후기
[적용할 곳]에 캐러셀 크로스페이드(Carousel Crossfade)를 넣어 줘. 페이드 슬라이드쇼(fade slideshow), 캐러셀 페이드(carousel fade)라고도 불러.
슬라이드는 제자리에 있고 이전 것이 사라지는 동시에 다음 것이 나타나며 천천히 스며들듯 바뀌고, 다음 전환 전까지 몇 초간 머물게 해 줘.
첫 슬라이드로 끊김 없이 돌아가게 하고, 마우스를 올리거나 포커스가 가면 멈추고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 자동으로 넘기지 마.A
B
C
클릭해 보세요
Carousel Slide (캐러셀 슬라이드)
다른 이름 Slider, Swipe carousel, Scroll-snap carousel
슬라이드가 보이는 영역을 가로로 지나가며 한 장씩 제자리에 딱 맞춰집니다.
쓰는 곳
히어로 배너, 상품 갤러리
[적용할 곳]에 캐러셀 슬라이드(Carousel Slide)를 넣어 줘. 슬라이더(slider), 스와이프 캐러셀(swipe carousel)이라고도 불러.
한 단계마다 줄이 옆으로 밀려 다음 슬라이드가 가운데에 딱 맞춰지게 해 줘. 부드럽게 감속하고, 양옆 가장자리에 이웃 슬라이드가 살짝 보이고, 위치 점도 함께 따라가게.
한 번에 한 장씩 넘기고, 버튼과 방향키뿐 아니라 터치 스와이프도 지원하고, 컨트롤에는 스크린 리더용 라벨을 달아 줘.BC
A
A
클릭해 보세요
Container Transform (컨테이너 트랜스폼)
다른 이름 Card expand to detail, Expandable card, Morph card to page
카드가 전체 상세 화면으로 커지며, 보이는 컨테이너 하나가 모양을 바꾸면서 새 내용을 드러냅니다.
쓰는 곳
목록 카드에서 상세로, FAB에서 시트로
[적용할 곳]에 컨테이너 트랜스폼(Container Transform) 전환을 넣어 줘. 카드에서 상세로 펼치기(card expand to detail), 확장 카드(expandable card)라고도 불러.
카드를 열면 같은 컨테이너가 전체 상세 화면까지 부드럽게 커지고, 기존 내용은 빠르게 사라지고 거의 다 커졌을 때 새 내용이 나타나게 해 줘. 닫을 때는 거꾸로 재생해.
서로 다른 두 상자를 크로스페이드하지 말고 하나로 이어진 컨테이너로 보여 주고, 열리면 포커스를 상세 화면으로 옮겨 줘.