Icon Morph (아이콘 모프)
다른 이름 Hamburger to X, Menu Icon Morph, Line-to-Close Icon
햄버거 메뉴 같은 아이콘이 막대의 회전과 이동으로 다른 아이콘(X)으로 바뀝니다.
쓰는 곳
메뉴 열기·닫기 버튼
변형
- hamburger to X
- hamburger to arrow
- play to pause
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 아이콘 모프(Icon Morph)를 넣어 줘. 햄버거 투 엑스(hamburger to X), 메뉴 아이콘 모프(menu icon morph)라고도 불러.
누를 때마다 위아래 막대가 먼저 가운데로 모인 다음 회전해 X가 되고 가운데 막대는 사라지며, 다시 누르면 반대로 돌아가게 해 줘. 빠르고 경쾌하게.
접근성 레이블과 펼침 상태가 함께 바뀌는 진짜 토글 버튼으로 만들고, 주변이 밀리지 않게 아이콘 크기는 고정해 줘.비슷한 모션
Shape Morph (셰이프 모프)
다른 이름 Path Morphing, SVG Morph, MorphSVG, Shape Tweening
한 벡터 도형이 다른 도형으로 부드럽게 바뀝니다.
쓰는 곳
아이콘 상태 전환, 히어로 그래픽
[적용할 곳]에 셰이프 모프(Shape Morph)를 넣어 줘. 패스 모핑(path morphing), SVG 모프(SVG morph)라고도 불러.
오각형이 오므라들며 별이 되는 것처럼 한 도형이 다른 도형으로 부드럽게 바뀌고, 각 점이 고르고 여유 있는 속도로 제자리로 미끄러지게 해 줘.
깜빡임 없이 깔끔하게 바뀌도록 두 도형의 점 개수와 대응을 맞추고, 반복하지 말고 상태가 바뀔 때마다 한 번씩 재생해 줘.클릭해 보세요
Copy-to-Clipboard Feedback (클립보드 복사 피드백)
다른 이름 Copied state, Copy icon to checkmark
복사 아이콘이 체크 표시로 바뀌고, 라벨이 잠시 「복사됨」으로 바뀝니다.
쓰는 곳
코드 블록, 공유 링크
[적용할 곳]에 클립보드 복사 피드백(Copy-to-Clipboard Feedback) 애니메이션을 넣어 줘. 복사됨 상태(copied state), 복사 아이콘에서 체크 표시로(copy icon to checkmark)라고도 불러.
복사 버튼을 누르면 복사 아이콘이 빠르게 작아지며 사라지고 체크 표시가 그려지면서 라벨이 「복사됨」으로 바뀌고, 잠시 뒤 모두 부드럽게 원래대로 돌아오게 해 줘.
바뀌는 동안 버튼 크기를 그대로 두어 아무것도 밀리지 않게 하고, 복사된 상태를 스크린 리더에 알려 줘.••••••ABCDEF
클릭해 보세요
Password Reveal Toggle (비밀번호 보기 토글)
다른 이름 Show/hide password, Eye icon toggle
비밀번호를 보이거나 숨길 때 눈 아이콘이 뜬 눈과 사선이 그어진 눈으로 바뀝니다.
쓰는 곳
로그인·회원가입 폼
[적용할 곳]에 비밀번호 보기 토글(Password Reveal Toggle)을 넣어 줘. 비밀번호 보이기/숨기기(show/hide password), 눈 아이콘 토글(eye icon toggle)이라고도 불러.
눈을 누르면 사선이 빠르게 지워지면서 가려진 점들이 실제 글자로 크로스페이드되고, 다시 누르면 사선이 다시 그어지며 글자가 가려지게 해 줘. 부드럽고 빠르게, 튕김 없이.
글자가 튀지 않게 입력란 너비를 고정하고, 토글은 비밀번호가 보이는지 레이블로 알려 주는 진짜 버튼으로 만들어 줘.SVG & Shape의 다른 모션
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)를 켜 두었으면 다 그려진 선을 보여 줘.Motion Path (모션 패스)
다른 이름 Animate Along Path, Offset Path Animation
요소가 직접 정한 곡선 경로를 따라 이동하며, 경로에 맞춰 방향을 돌릴 수도 있습니다.
쓰는 곳
경로 위를 움직이는 비행기·점, 장식용 이동 요소
[적용할 곳]에 모션 패스(Motion Path) 애니메이션을 넣어 줘. 애니메이트 얼롱 패스(animate along path)라고도 불러.
작은 요소가 직접 정한 곡선 경로를 따라 느리고 일정한 속도로 이동하면서, 나아가는 방향을 바라보도록 돌게 해 줘.
반복이 튀지 않게 닫힌 경로를 쓰고, 경로는 고정 크기가 아니라 컨테이너 크기에 맞춰 늘고 줄게 해 줘.A
Orbiting Circles (오비팅 서클)
다른 이름 Orbit Animation, Orbit, Orbiting icons
작은 원이나 아이콘이 원형 궤도를 따라 중심 주위를 돕니다.
쓰는 곳
연동 서비스 다이어그램
[적용할 곳]에 오비팅 서클(Orbiting Circles)을 넣어 줘. 오빗 애니메이션(orbit animation), 오비팅 아이콘(orbiting icons)이라고도 불러.
작은 원들이 가운데 요소 주위를 원형 고리를 따라 느리고 일정하게 돌고, 바깥 고리는 반대 방향으로 더 느리게 돌게 해 줘.
반복은 끊김 없이, 도는 항목은 항상 똑바로 서 있게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 회전을 멈춰 줘.