Skeleton Shimmer (스켈레톤 시머)
다른 이름 Skeleton wave, Shimmer effect, placeholder-wave
회색 자리 표시 도형 위로 밝은 빛줄기가 지나갑니다.
쓰는 곳
콘텐츠 로딩 자리 표시
변형
- wave / shimmer
- text lines
- avatar + card
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 스켈레톤 시머(Skeleton Shimmer)를 넣어 줘. 스켈레톤 웨이브(skeleton wave), 시머 효과(shimmer effect)라고도 불러.
부드러운 빛의 띠가 회색 자리 표시 도형 위를 왼쪽에서 오른쪽으로 지나가고, 다음 번 전에 잠깐 쉬게 해 줘. 매끄럽고 느긋하게.
도형은 실제 레이아웃에 맞춰서 콘텐츠가 로드될 때 아무것도 튀지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 정지된 자리 표시만 보여 줘.비슷한 모션
Pulse Placeholder (펄스 플레이스홀더)
다른 이름 Skeleton pulse, placeholder-glow
회색 자리 표시 블록이 은은하게 밝아졌다 어두워지며 로딩 중임을 알려 줍니다.
쓰는 곳
스켈레톤 화면
[적용할 곳]에 펄스 플레이스홀더(Pulse Placeholder)를 넣어 줘. 스켈레톤 펄스(skeleton pulse)라고도 불러.
곧 나올 콘텐츠 모양의 회색 블록들이 다 함께 천천히 밝아졌다 돌아오게 해 줘. 부드럽고 일정한 리듬으로.
자리 표시 블록은 실제 레이아웃에 맞춰서 콘텐츠가 들어올 때 아무것도 튀지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 가만히 두어 줘.A
마우스를 올려 보세요
Shine Sweep (샤인 스윕)
다른 이름 Sheen, Shiny Button, Shine on Hover, Glint, Shimmer, Shimmer Button
포인터를 올리면 대각선 빛줄기가 요소의 한쪽에서 다른 쪽으로 훑고 지나갑니다.
쓰는 곳
버튼, 카드, 배지
[적용할 곳]에 샤인 스윕(Shine Sweep) 호버 효과를 넣어 줘. sheen, 샤이니 버튼(shiny button), 샤인 온 호버(shine on hover), 글린트(glint), 시머(shimmer), 시머 버튼(shimmer button)이라고도 불러.
포인터가 올라가 있는 동안 부드러운 대각선 빛줄기가 요소를 왼쪽에서 오른쪽으로 훑고, 짧게 쉬었다가 다시 반복되게 해 줘.
빛줄기는 요소 안쪽에서만 보이게 잘라 주고, 포인터가 벗어나면 멈추고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 재생하지 마.ABC DEFGH
Shimmer Text (시머 텍스트)
다른 이름 Animated Shiny Text, Metallic Shimmer Text, Gradient Text Shimmer
밝은 하이라이트가 글자 위를 반복해서 훑고 지나갑니다.
쓰는 곳
배지, 공지 필
[적용할 곳]에 시머 텍스트(Shimmer Text) 효과를 넣어 줘. 애니메이티드 샤이니 텍스트(animated shiny text), 메탈릭 시머 텍스트(metallic shimmer text)라고도 불러.
빛의 띠가 글자 위를 왼쪽에서 오른쪽으로 부드럽게 훑고, 잠깐 쉬었다가 다시 반복되게 해 줘.
하이라이트 아래에서도 글자가 잘 읽히게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 있게 해 줘.Indeterminate Linear Progress (무한 프로그레스 바)
다른 이름 Indeterminate progress bar, Buffer bar
걸리는 시간을 알 수 없을 때 막대 조각이 트랙을 따라 계속 지나갑니다.
쓰는 곳
페이지 상단이나 카드 로딩
[적용할 곳]에 무한 프로그레스 바(Indeterminate Linear Progress)를 넣어 줘. 인디터미닛 프로그레스 바(indeterminate progress bar)라고도 불러.
작업이 얼마나 걸릴지 모르는 동안 짧은 조각이 트랙의 한쪽 끝에서 다른 쪽 끝으로 빠르고 부드럽게 계속 지나가게 해 줘.
조각이 트랙 안으로 완전히 들어왔다가 완전히 빠져나가게 해서 반복 이음매가 보이지 않게 하고, 스크린 리더에는 처리 중인 프로그레스 바로 표시해 줘.Loading & Progress의 다른 모션
Top Loading Bar (탑 로딩 바)
다른 이름 Page progress bar, NProgress
페이지 이동 중 상단의 얇은 막대가 조금씩 나아가다가 로딩이 끝나면 끝까지 채워집니다.
쓰는 곳
SPA 라우트 로딩
[적용할 곳]에 탑 로딩 바(Top Loading Bar)를 넣어 줘. 페이지 프로그레스 바(page progress bar)라고도 불러.
상단 가장자리의 얇은 막대가 페이지를 불러오는 동안 처음엔 빠르게 튀어 나갔다가 점점 느려지고, 로딩이 끝나면 끝까지 달려간 뒤 사라지게 해 줘.
로딩이 실제로 끝나기 전에는 절대 끝에 닿지 않게 하고, 페이지 콘텐츠를 가리거나 밀어내지 않게 해 줘.Typing Indicator (타이핑 인디케이터)
다른 이름 Typing dots, Chat is typing
말풍선 안의 점 세 개가 차례로 깜빡이거나 떠올라, 상대나 AI가 입력 중임을 보여 줍니다.
쓰는 곳
채팅, AI 어시스턴트
[적용할 곳]에 타이핑 인디케이터(Typing Indicator)를 넣어 줘. 타이핑 닷(typing dots)이라고도 불러.
상대가 입력하는 동안 작은 채팅 말풍선 안의 점들이 하나씩 차례로 떠오르며 밝아지게 해 줘. 부드럽고 잔잔한 리듬으로.
루프는 끊김 없이 이어지게 하고, 메시지가 도착하면 바로 말풍선을 없애고, 스크린 리더에는 점 대신 짧은 상태 문구를 전해 줘.Bar Loader (Equalizer) (바 로더)
다른 이름 Bars loader, Audio bars
세로 막대들이 서로 엇갈리게 늘었다 줄었다 하며 오디오 이퀄라이저처럼 움직입니다.
쓰는 곳
로딩 중 또는 재생 중 표시
[적용할 곳]에 바 로더(Bar Loader (Equalizer)) 로딩 애니메이션을 넣어 줘. bars loader, 오디오 바(audio bars)라고도 불러.
세로 막대 몇 개가 오디오 이퀄라이저처럼 서로 엇갈리게 늘었다 줄었다 하게 해 줘. 경쾌하지만 고른 박자로.
반복이 끊김 없이 이어지게 하고, 스크린 리더용 상태 라벨을 달고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임을 멈춰 줘.