Blur-Up Placeholder (블러 업 플레이스홀더)
다른 이름 LQIP, Blur placeholder, Progressive image load
이미지의 작고 흐린 버전이 먼저 자리를 채우고, 원본 이미지가 로드되면 선명해집니다.
쓰는 곳
히어로 이미지, 갤러리
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 블러 업 플레이스홀더(Blur-Up Placeholder) 이미지 로딩 효과를 넣어 줘. LQIP, 블러 플레이스홀더(blur placeholder)라고도 불러.
이미지의 아주 작고 많이 흐린 버전이 바로 이미지 자리를 채우고, 원본 이미지가 로드되면 부드럽게 꽤 빠르게 선명해지게 해 줘.
이미지의 정확한 크기를 미리 확보해서 로드될 때 아무것도 밀리지 않게 하고, 흐린 가장자리가 틀 밖으로 번지지 않게 잘라 줘.비슷한 모션
ABCD
Blur In (블러 인)
다른 이름 Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
요소가 크게 흐려진 상태에서 점점 또렷해지며, 보통 미끄러지거나 서서히 나타나는 움직임과 함께합니다.
쓰는 곳
헤드라인, 히어로 텍스트 등장
[적용할 곳]에 블러 인(Blur In) 등장 애니메이션을 넣어 줘. 텍스트 포커스 인(text focus in), 포커스 인(focus in), 블러 텍스트 리빌(blur text reveal)이라고도 불러.
내용이 크게 흐리고 투명한 상태에서 시작해 제자리에서 점점 또렷해지게 해 줘. 부드럽고 약간 느리게, 위치는 움직이지 않게.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 처음부터 또렷하게 보여 줘.Skeleton Shimmer (스켈레톤 시머)
다른 이름 Skeleton wave, Shimmer effect, placeholder-wave
회색 자리 표시 도형 위로 밝은 빛줄기가 지나갑니다.
쓰는 곳
콘텐츠 로딩 자리 표시
[적용할 곳]에 스켈레톤 시머(Skeleton Shimmer)를 넣어 줘. 스켈레톤 웨이브(skeleton wave), 시머 효과(shimmer effect)라고도 불러.
부드러운 빛의 띠가 회색 자리 표시 도형 위를 왼쪽에서 오른쪽으로 지나가고, 다음 번 전에 잠깐 쉬게 해 줘. 매끄럽고 느긋하게.
도형은 실제 레이아웃에 맞춰서 콘텐츠가 로드될 때 아무것도 튀지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 정지된 자리 표시만 보여 줘.Pulse Placeholder (펄스 플레이스홀더)
다른 이름 Skeleton pulse, placeholder-glow
회색 자리 표시 블록이 은은하게 밝아졌다 어두워지며 로딩 중임을 알려 줍니다.
쓰는 곳
스켈레톤 화면
[적용할 곳]에 펄스 플레이스홀더(Pulse Placeholder)를 넣어 줘. 스켈레톤 펄스(skeleton pulse)라고도 불러.
곧 나올 콘텐츠 모양의 회색 블록들이 다 함께 천천히 밝아졌다 돌아오게 해 줘. 부드럽고 일정한 리듬으로.
자리 표시 블록은 실제 레이아웃에 맞춰서 콘텐츠가 들어올 때 아무것도 튀지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 가만히 두어 줘.ABCDEFGHIJKL
안에서 스크롤해 보세요
Progressive Blur (프로그레시브 블러)
다른 이름 Gradient blur edge
가장자리로 갈수록 흐림 강도가 점점 세져 콘텐츠가 부드럽게 사라집니다.
쓰는 곳
스크롤 컨테이너 가장자리, 헤더
[적용할 곳]에 프로그레시브 블러(Progressive Blur) 가장자리를 넣어 줘. 그라디언트 블러 엣지(gradient blur edge)라고도 불러.
가장자리로 스크롤되는 콘텐츠가 딱 잘리는 선 없이, 점점 더 흐리고 부드러워지게 매끄럽게 이어지게 해 줘.
블러는 너머에 콘텐츠가 더 남아 있는 가장자리에만 보여 주고, 흐린 영역이 클릭이나 스크롤을 막지 않게 해 줘.Loading & Progress의 다른 모션
Bouncing Dots (바운싱 닷)
다른 이름 Dots loader, Ellipsis loader, Three-dot loader
한 줄로 놓인 점들이 차례로 튀어 오르거나, 흐려지거나, 커졌다 작아집니다.
쓰는 곳
인라인 로딩, 채팅 대기
[적용할 곳]에 바운싱 닷(Bouncing Dots)을 넣어 줘. 닷 로더(dots loader), 쓰리 닷 로더(three-dot loader)라고도 불러.
점들이 가볍고 통통 튀는 리듬으로 하나씩 차례로 뛰어올랐다 내려앉고, 잠깐 쉰 뒤 다시 반복되게 해 줘.
루프는 끊김 없이 이어지게 하고, 스크린 리더용 상태 라벨을 달고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임을 멈춰 줘.Button Loading State (버튼 로딩 스테이트)
다른 이름 Spinner button, Loading button, Button spinner, Submit loading state
작업이 진행되는 동안 버튼의 라벨이 작은 스피너로 바뀌거나 스피너가 덧붙습니다.
쓰는 곳
폼 제출, 비동기 작업
[적용할 곳]에 버튼 로딩 스테이트(Button Loading State)를 넣어 줘. 스피너 버튼(spinner button), 로딩 버튼(loading button)이라고도 불러.
누르면 버튼이 살짝 눌리고, 라벨이 서서히 사라지면서 작업이 도는 동안 그 자리에 작은 스피너가 보이다가, 끝나면 라벨이 돌아오게 해 줘.
로딩 중에도 버튼 너비는 그대로 두고, 여러 번 눌리지 않게 막고, 처리 중 상태를 스크린 리더에 알려 줘.Circular Spinner (서큘러 스피너)
다른 이름 Spinner, Throbber, Circular indeterminate
고리나 호가 계속 돌면서 무언가를 불러오는 중임을 보여 줍니다.
쓰는 곳
버튼, 페이지 로딩
[적용할 곳]에 서큘러 스피너(Circular Spinner)를 넣어 줘. 스피너(spinner), 스로버(throbber)라고도 불러.
호가 흐린 고리를 따라 일정하게 돌면서 길어졌다 짧아졌다 하고, 부드럽게 끊김 없이 이어지게 해 줘.
회전은 끊김 없이 이어지게 하고, 스크린 리더용 로딩 라벨을 달고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 느리게 하거나 멈춰 줘.