Pointer Highlight (포인터 하이라이트)
텍스트가 스크롤로 화면에 들어오면 포인터 화살표가 단어 둘레에 강조 상자를 그립니다.
쓰는 곳
헤드라인, 마케팅 문구
변형
- Pointer Highlight
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 포인터 하이라이트(Pointer Highlight) 효과를 넣어 줘.
텍스트가 스크롤로 화면에 들어오면 핵심 단어 둘레에 상자가 왼쪽에서 오른쪽으로 그려지고, 작은 포인터 화살표가 그 모서리를 따라 움직이게 해 줘. 부드럽고 일정하게, 누가 손으로 단어에 표시하는 것처럼.
처음 화면에 들어올 때 한 번만 텍스트를 밀어내지 않고 그리고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 완성된 상자를 바로 보여 줘.비슷한 모션
ABC DEFG HIJ KL
Text Highlighter (텍스트 하이라이터)
다른 이름 Highlight Marker, Marker Underline, Hero Highlight
형광펜 같은 색 띠가 문구 위로 그어지며 강조해 줍니다.
쓰는 곳
핵심 문구 강조
[적용할 곳]에 텍스트 하이라이터(Text Highlighter) 효과를 넣어 줘. 하이라이트 마커(highlight marker), 마커 밑줄(marker underline)이라고도 불러.
형광펜 같은 색 띠가 핵심 문구 뒤를 왼쪽에서 오른쪽으로 부드럽게 지나가서, 누군가 펜으로 칠하는 것처럼 보이게 해 줘.
문구가 스크롤로 화면에 들어올 때 한 번만 재생하고, 띠 위에서도 글자가 잘 읽히게 하고, 문구가 두 줄로 줄바꿈되어도 띠가 제대로 따라가게 해 줘.ABC DEF
마우스를 올려 보세요
Underline Draw (언더라인 드로우)
다른 이름 Animated Underline, Hover Underline Animation, Underline Stretch, Underline Grow, Underline Slide, Underline From Left
호버하면 링크 아래에 한쪽 끝이나 가운데에서 밑줄이 자라납니다.
쓰는 곳
내비게이션 링크, 본문 링크
[적용할 곳]에 언더라인 드로우(Underline Draw) 호버 효과를 넣어 줘. 애니메이션 밑줄(animated underline), 호버 밑줄 애니메이션(hover underline animation)이라고도 불러.
포인터가 링크 위에 있으면 텍스트 아래 밑줄이 왼쪽에서 오른쪽으로 부드럽게 늘어나고, 포인터가 떠나면 다시 줄어들게 해 줘. 빠르고 은은하게.
밑줄 때문에 주변 레이아웃이 밀리지 않게 하고, 키보드 포커스에서도 같은 효과를 보여 줘.Line Drawing (라인 드로잉)
다른 이름 Path Drawing, Stroke Dash Animation, Self-Drawing SVG, DrawSVG, Line Draw, SVG Path Draw, Stroke draw, Checkmark draw
대시 오프셋을 애니메이션해 SVG 선이 경로를 따라 그려지는 것처럼 보여 줍니다.
쓰는 곳
아이콘, 로고, 일러스트
[적용할 곳]에 라인 드로잉(Line Drawing) 애니메이션을 넣어 줘. 패스 드로잉(path drawing), 셀프 드로잉 SVG(self-drawing SVG)라고도 불러.
각 선이 경로를 따라 처음부터 끝까지 부드럽게 저절로 그려지는 것처럼 보이고, 체크 표시 같은 두 번째 선은 첫 번째 선 바로 뒤에 이어지게 해 줘.
반복하지 말고 화면에 들어올 때 한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 다 그려진 선을 보여 줘.Micro-interaction의 다른 모션
A
클릭해 보세요
Press (Button Tap Scale) (프레스)
다른 이름 Tap feedback, Active scale, Press state
누르는 동안 요소가 살짝 작아지고, 손을 떼면 탄력 있게 돌아옵니다.
쓰는 곳
버튼, 카드
[적용할 곳]에 프레스(Press (Button Tap Scale)) 효과를 넣어 줘. 탭 피드백(tap feedback), 프레스 상태(press state)라고도 불러.
누르는 동안 요소가 살짝 작아지고 약간 어두워졌다가, 손을 떼면 작게 튕기며 원래 크기로 돌아오게 해 줘. 빠르고 은은하게.
키보드로 누를 때와 터치할 때도 똑같이 반응하게 하고, 주변 레이아웃이 밀리지 않게 해 줘.끌어 보세요
Pull to Refresh (당겨서 새로고침)
다른 이름 Swipe to refresh
목록을 아래로 당기면 스피너가 나타나고, 손을 떼면 콘텐츠를 다시 불러옵니다.
쓰는 곳
피드, 받은편지함
[적용할 곳]에 당겨서 새로고침(Pull to Refresh) 인터랙션을 넣어 줘. 스와이프 투 리프레시(swipe to refresh)라고도 불러.
목록을 맨 위에서 아래로 당기면 약간의 저항감을 주며 손가락을 따라오고, 당기는 만큼 도는 스피너가 드러나게 해 줘. 손을 떼면 콘텐츠를 다시 불러오는 동안 스피너가 계속 돌다가, 끝나면 목록이 부드럽게 다시 올라가게.
목록이 이미 맨 위까지 스크롤된 상태에서만 시작하고, 키보드와 스크린 리더 사용자를 위해 일반 새로고침 버튼도 함께 둬.클릭해 보세요
Ripple (리플)
다른 이름 Material ripple, Touch ripple, Ripple Button, Ink ripple
클릭하거나 탭한 바로 그 지점에서 둥근 물결이 퍼지며 사라집니다.
쓰는 곳
버튼, 목록 항목
[적용할 곳]에 리플(Ripple) 효과를 넣어 줘. 머티리얼 리플(material ripple), 잉크 리플(ink ripple)이라고도 불러.
클릭하거나 탭할 때마다 누른 바로 그 지점에서 부드러운 원형 물결이 요소를 덮을 때까지 퍼지며 점점 옅어지게 해 줘. 빠르고 가볍게.
물결은 요소 모양대로 잘라 내고, 빠르게 연달아 누르면 각각 새 물결이 시작되게 하고, 키보드로 누를 때는 가운데에서 시작해 줘.