Image Reveal Wipe (이미지 리빌 와이프)
다른 이름 Mask reveal, Clip-path reveal, SVG mask effect, Scroll Image Reveal, Clip-path Reveal on Scroll
덮개가 줄어들거나 마스크 가장자리가 넓어지면서 이미지가 드러납니다.
쓰는 곳
스크롤로 드러나는 에디토리얼 이미지
변형
- directional wipe
- circle mask
- curtain cover
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 이미지 리빌 와이프(Image Reveal Wipe)를 넣어 줘. 마스크 리빌(mask reveal), 클립 패스 리빌(clip-path reveal)이라고도 불러.
이미지가 스크롤로 화면에 들어오면 덮개가 한쪽에서 걷히며 스크롤에 맞춰 부드럽게 이미지를 드러내게 해 줘. 화면을 벗어나기 한참 전에 완전히 보이도록.
레이아웃이 튀지 않게 이미지 자리를 미리 잡아 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 이미지를 처음부터 다 보여 줘.비슷한 모션
A
Clip Reveal (클립 리빌)
다른 이름 Image Reveal, Mask Reveal, Clip-path Reveal, Wipe Reveal
clip-path나 마스크가 가장자리나 한 점에서 넓어지며 이미지나 텍스트를 차츰 드러냅니다.
쓰는 곳
이미지, 헤드라인 등장
[적용할 곳]에 클립 리빌(Clip Reveal) 등장 효과를 넣어 줘. 마스크 리빌(mask reveal), 와이프 리빌(wipe reveal), 이미지 리빌(image reveal)이라고도 불러.
잘라 내는 경계선이 왼쪽에서 오른쪽으로 쓸고 지나가며, 내용은 가만히 있는 채로 차츰 드러나게 해 줘. 매끄럽게, 시작과 끝은 부드럽게.
아무것도 밀리지 않게 처음부터 요소 자리를 잡아 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 전부 드러난 상태로 보여 줘.A
마우스를 올려 보세요
SVG Mask Reveal (SVG 마스크 리빌)
다른 이름 SVG Mask Effect, Clip-path Reveal, Spotlight Mask
마스크 도형이 쓸고 지나가거나 포인터를 따라가며 아래 콘텐츠를 드러냅니다.
쓰는 곳
이미지·콘텐츠 드러내기
[적용할 곳]에 SVG 마스크 리빌(SVG Mask Reveal) 호버 효과를 넣어 줘. 클립 패스 리빌(clip-path reveal), 스포트라이트 마스크(spotlight mask)라고도 불러.
포인터를 올린 동안 원형 마스크가 가운데서 커지며 아래 콘텐츠를 드러내고, 포인터가 벗어나면 다시 닫히게 해 줘. 부드럽고 꽤 빠르게.
아무것도 밀리지 않게 두 레이어를 정확히 같은 크기로 두고, 키보드 포커스와 탭에도 같은 효과를 보여 줘.A
B
끌어 보세요
Before-After Slider (비포 애프터 슬라이더)
다른 이름 Image comparison slider, Compare slider
드래그할 수 있는 구분선을 사이에 두고 한쪽에는 한 이미지, 다른 쪽에는 다른 이미지가 보입니다.
쓰는 곳
사진 보정, 제품 비교
[적용할 곳]에 비포 애프터 슬라이더(Before-After Slider)를 넣어 줘. 이미지 비교 슬라이더(image comparison slider), 컴페어 슬라이더(compare slider)라고도 불러.
두 이미지를 겹쳐 두고, 세로 구분선을 드래그하면 한쪽은 더 많이, 다른 쪽은 덜 보이게 해 줘. 구분선은 지연 없이 포인터를 바로 따라오게.
구분선은 가운데에서 시작하고, 터치와 방향키로도 움직일 수 있게 해 줘.A
B
클릭해 보세요
Curtain / Panel Wipe (커튼 / 패널 와이프)
다른 이름 Page wipe, Curtain reveal, Stripe transition, Staggered panels
단색 패널이 화면을 쓸고 지나가며 이전 페이지를 덮은 뒤, 물러나면서 새 페이지를 드러냅니다.
쓰는 곳
포트폴리오·에이전시 사이트의 페이지 이동
[적용할 곳]에 커튼 / 패널 와이프(Curtain / Panel Wipe) 페이지 전환을 넣어 줘. 페이지 와이프(page wipe), 스태거드 패널(staggered panels)이라고도 불러.
단색 패널이 하나씩 차례로 쓸고 들어와 이전 페이지를 덮고, 완전히 덮인 동안 페이지를 바꾼 뒤, 패널이 계속 화면 밖으로 빠져나가며 새 페이지를 드러내게 해 줘. 과감하고 매끄럽게.
패널이 이전 페이지를 다 덮기 전에는 새 페이지를 절대 보여 주지 말고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 단순한 페이드로 바꿔 줘.Image & Media의 다른 모션
Ken Burns Effect (켄 번스 효과)
다른 이름 Slow pan and zoom, Ken Burns, Kenburns
정지 이미지가 틀 안에서 천천히 확대되며 움직입니다.
쓰는 곳
히어로 슬라이드쇼, 배경
[적용할 곳]에 켄 번스 효과(Ken Burns Effect)를 넣어 줘. 슬로 팬 앤 줌(slow pan and zoom)이라고도 불러.
이미지마다 보이는 동안 아주 천천히 한 방향으로만 확대되며 흘러가다가, 다른 방향으로 움직이는 다음 이미지로 크로스페이드되게 해 줘. 차분하고 끊김 없이.
어느 순간에도 이미지가 틀 전체를 덮어 가장자리가 보이지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 이미지를 멈춰 둬.A
B
C
클릭해 보세요
Lightbox Zoom (라이트박스 줌)
다른 이름 Image zoom overlay, Medium-style zoom
썸네일이 제자리에서 커지며 어두워진 배경 위 가운데에 크게 펼쳐집니다.
쓰는 곳
이미지 갤러리, 아티클
[적용할 곳]에 라이트박스 줌(Lightbox Zoom)을 넣어 줘. 이미지 줌 오버레이(image zoom overlay), 미디엄 스타일 줌(Medium-style zoom)이라고도 불러.
썸네일을 클릭하면 제자리에서 부드럽게 커져 가운데 큰 화면이 되고 뒤쪽 페이지는 어둡게 물러나게 해 줘. 닫으면 같은 자리로 다시 줄어들게.
Esc 키나 배경 클릭으로 닫히게 하고, 열려 있는 동안 포커스를 큰 화면 안으로 옮기고, 닫은 뒤에는 썸네일로 돌려 줘.ABCDEFGH
ABCDEFGH
포인터를 움직여 보세요
Magnifier Lens (돋보기)
다른 이름 Lens, Loupe, Lens (Magnifier), Hover zoom lens
둥근 렌즈가 포인터를 따라다니며 이미지 일부를 확대해 보여 줍니다.
쓰는 곳
제품 상세 이미지
[적용할 곳]에 돋보기(Magnifier Lens)를 넣어 줘. 렌즈(lens), 루페(loupe)라고도 불러.
둥근 렌즈가 지연 없이 포인터 바로 아래에 놓이고, 그 아래 이미지 부분을 확대해 보여 주게 해 줘.
확대된 화면은 포인터 아래 정확한 지점과 어긋나지 않게 맞추고, 터치 기기에서는 손가락으로 이미지를 누르고 있는 동안 렌즈를 보여 줘.