Coverflow (커버플로)
다른 이름 Cover flow carousel
가운데 항목은 정면을 보고, 양옆 항목은 원근감 있게 비스듬히 돌아가 있습니다.
쓰는 곳
앨범·미디어 캐러셀
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 커버플로(Coverflow) 캐러셀을 넣어 줘. 커버 플로 캐러셀(cover flow carousel)이라고도 불러.
가운데 항목은 정면을 보고 양옆 항목은 원근감 있게 비스듬히 돌아가 있게 해 줘. 옆으로 드래그하면 줄이 밀리고, 손을 떼면 가장 가까운 항목에 부드럽게 멈추게.
드래그 말고도 방향키와 스와이프를 지원하고, 터치 기기에서 페이지 세로 스크롤이 계속 되게 해 줘.비슷한 모션
ABCDEF
클릭해 보세요
3D Carousel (3D 캐러셀)
다른 이름 Rotating ring carousel
고리 모양으로 늘어선 패널이 3D 공간에서 세로축을 중심으로 회전합니다.
쓰는 곳
갤러리, 제품 쇼케이스
[적용할 곳]에 3D 캐러셀(3D Carousel)을 넣어 줘. 회전 링 캐러셀(rotating ring carousel)이라고도 불러.
패널을 원근감 있는 고리 모양으로 배치하고, 다음을 누를 때마다 고리 전체가 세로축을 중심으로 부드럽게 돌아 다음 패널이 앞으로 오게 해 줘.
컨트롤은 키보드로도 쓸 수 있게 하고, 현재 패널을 스크린 리더에 알려 주고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 단순한 페이드로 바꿔 줘.A
B
C
클릭해 보세요
Carousel Slide (캐러셀 슬라이드)
다른 이름 Slider, Swipe carousel, Scroll-snap carousel
슬라이드가 보이는 영역을 가로로 지나가며 한 장씩 제자리에 딱 맞춰집니다.
쓰는 곳
히어로 배너, 상품 갤러리
[적용할 곳]에 캐러셀 슬라이드(Carousel Slide)를 넣어 줘. 슬라이더(slider), 스와이프 캐러셀(swipe carousel)이라고도 불러.
한 단계마다 줄이 옆으로 밀려 다음 슬라이드가 가운데에 딱 맞춰지게 해 줘. 부드럽게 감속하고, 양옆 가장자리에 이웃 슬라이드가 살짝 보이고, 위치 점도 함께 따라가게.
한 번에 한 장씩 넘기고, 버튼과 방향키뿐 아니라 터치 스와이프도 지원하고, 컨트롤에는 스크린 리더용 라벨을 달아 줘.A
B
C
Carousel Crossfade (캐러셀 크로스페이드)
다른 이름 Fade slideshow, Carousel fade
슬라이드가 옆으로 밀리지 않고 제자리에서 서로 스며들듯 바뀝니다.
쓰는 곳
히어로 슬라이드쇼, 고객 후기
[적용할 곳]에 캐러셀 크로스페이드(Carousel Crossfade)를 넣어 줘. 페이드 슬라이드쇼(fade slideshow), 캐러셀 페이드(carousel fade)라고도 불러.
슬라이드는 제자리에 있고 이전 것이 사라지는 동시에 다음 것이 나타나며 천천히 스며들듯 바뀌고, 다음 전환 전까지 몇 초간 머물게 해 줘.
첫 슬라이드로 끊김 없이 돌아가게 하고, 마우스를 올리거나 포커스가 가면 멈추고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 자동으로 넘기지 마.3D & Depth의 다른 모션
ABCD
클릭해 보세요
Cube Rotate (큐브 로테이트)
다른 이름 3D cube, Cube transition
내용이 놓인 정육면체가 회전하며 다음 면을 보여 줍니다.
쓰는 곳
슬라이더 전환, 기능 전환기
[적용할 곳]에 큐브 로테이트(Cube Rotate) 전환을 넣어 줘. 3D 큐브(3D cube), 큐브 트랜지션(cube transition)이라고도 불러.
원근감 있는 정육면체의 옆면들에 내용을 배치하고, 다음을 누를 때마다 정육면체가 세로축을 중심으로 부드럽게 돌아 다음 면이 앞으로 오게 해 줘.
키보드와 스크린 리더는 앞면에만 닿게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 단순한 페이드로 바꿔 줘.A
포인터를 움직여 보세요
Glare / Holographic Card (글레어 / 홀로그래픽 카드)
다른 이름 Glare hover, Glare card, Magic card, Glare
밝은 하이라이트가 반사광처럼 포인터를 따라 카드 표면 위를 움직입니다.
쓰는 곳
프리미엄 카드, 수집용 카드
[적용할 곳]에 글레어 / 홀로그래픽 카드(Glare / Holographic Card) 효과를 넣어 줘. 글레어 카드(glare card), 글레어 호버(glare hover)라고도 불러.
은은하고 밝은 하이라이트가 반사되는 빛처럼 포인터를 따라 카드 표면을 움직이고, 카드는 포인터 쪽으로 살짝 기울게 해 줘. 포인터가 벗어나면 둘 다 사라지게. 부드럽고 은은하게.
클릭은 빛 레이어를 통과하게 하고, 그 아래 내용은 잘 읽히게 두고, 터치 기기에서는 빛 없이 카드를 보여 줘.