Popover / Dropdown Open (팝오버 / 드롭다운 오픈)
다른 이름 Menu pop, Popover pop-in, Dropdown scale-fade
떠 있는 메뉴가 트리거가 있는 지점에서 커지며 서서히 나타납니다.
쓰는 곳
드롭다운 메뉴, 팝오버, 선택 목록
변형
- scale from trigger origin
- slide-fade from side
- cascading menu items
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 팝오버 / 드롭다운 오픈(Popover / Dropdown Open) 애니메이션을 넣어 줘. 메뉴 팝(menu pop), 드롭다운 스케일 페이드(dropdown scale-fade)라고도 불러.
메뉴가 트리거 옆 모서리에서 살짝 커지면서 서서히 나타나게 해 줘. 빠르고 깔끔하게 열리고, 닫힐 때는 조금 더 빠르게 사라지게.
트리거에 붙어 있게 하고, Escape 키나 바깥 클릭으로 닫히게 하고, 열린 상태를 트리거에서 스크린 리더에 알려 줘.비슷한 모션
A
Modal Scale-Fade In (모달 스케일 페이드 인)
다른 이름 Dialog open animation, Zoom-fade dialog
어두워진 페이지 위로 대화상자가 가운데에서 살짝 커지며 서서히 나타납니다.
쓰는 곳
확인 대화상자, 오버레이 속 폼
[적용할 곳]에 모달 스케일 페이드 인(Modal Scale-Fade In) 애니메이션을 넣어 줘. 대화상자 열기 애니메이션(dialog open animation), 줌 페이드 대화상자(zoom-fade dialog)라고도 불러.
뒤쪽 페이지가 어두워지는 동안 대화상자가 가운데에서 살짝 커지며 서서히 나타나게 해 줘. 빠르고 은은하게, 튕김 없이.
대화상자가 열릴 때마다 한 번 재생하고, 포커스를 대화상자로 옮겨 그 안에 머물게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 단순한 페이드만 써 줘.A
마우스를 올려 보세요
Tooltip Fade (툴팁 페이드)
다른 이름 Tooltip reveal
잠시 마우스를 올려 두면 작은 라벨이 요소 옆에 살짝 밀려 들어오며 서서히 나타납니다.
쓰는 곳
아이콘 설명, 잘린 텍스트
[적용할 곳]에 툴팁 페이드(Tooltip Fade)를 넣어 줘. 툴팁 리빌(tooltip reveal)이라고도 불러.
잠시 마우스를 올려 두면 라벨이 요소 옆으로 살짝 밀려 들어오며 서서히 나타나고, 포인터가 떠나면 지연 없이 바로 사라지게 해 줘.
키보드 포커스에도 보이게 하고, Escape 키로 닫히게 하고, 스크린 리더가 읽을 수 있게 요소와 연결해 줘.A
Zoom In (줌 인)
다른 이름 Scale In, Zoom In Up, Zoom In Down
요소가 작고 투명한 상태에서 원래 크기로 커지며 서서히 나타납니다.
쓰는 곳
모달, 이미지 라이트박스, 팝오버
[적용할 곳]에 줌 인(Zoom In) 등장 애니메이션을 넣어 줘. 스케일 인(scale in)이라고도 불러.
요소가 작고 투명한 상태에서 원래 크기로 커지며 서서히 나타나게 해 줘. 빠르고 부드럽게, 크기가 넘쳤다 돌아오는 느낌 없이.
주변 레이아웃에 영향을 주지 않게 중심에서 확대하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.- A
- B
- C
클릭해 보세요
Accordion Expand-Collapse (아코디언 펼치기 / 접기)
다른 이름 Collapse, Disclosure, Expandable section
헤더를 누를 때마다 콘텐츠 패널이 부드럽게 전체 높이까지 펼쳐지거나 0까지 접힙니다.
쓰는 곳
FAQ, 설정 그룹, 사이드바 트리
[적용할 곳]에 아코디언 펼치기 / 접기(Accordion Expand-Collapse) 효과를 넣어 줘. 콜랩스(collapse), 디스클로저(disclosure)라고도 불러.
헤더를 누르면 패널이 내용의 전체 높이까지 부드럽게 펼쳐지고, 다시 누르면 완전히 접히게 해 줘. 헤더의 화살표도 함께 돌아가고, 빠르고 부드럽게, 튕김 없이.
고정된 추정값이 아니라 내용의 실제 높이까지 애니메이션하고, 헤더는 펼침 상태를 알려 주는 진짜 버튼으로 만들고, 키보드로도 쓸 수 있게 해 줘.Component & Layout의 다른 모션
ACB
클릭해 보세요
Shared Layout Animation (셰어드 레이아웃 애니메이션)
다른 이름 layoutId, Shared element (in-page)
요소가 새 위치의 짝이 되는 요소로 이동하며 크기가 바뀌어, 하나의 요소처럼 보입니다.
쓰는 곳
선택 하이라이트, 썸네일에서 확대 보기로
[적용할 곳]에 셰어드 레이아웃 애니메이션(Shared Layout Animation)을 넣어 줘. 페이지 내 공유 요소(in-page shared element)라고도 불러.
선택이 바뀌면 요소가 이전 자리에서 새 자리로 부드럽게 이동하며 크기가 바뀌고 살포시 자리 잡게 해서, 두 개가 아니라 하나의 물체로 보이게 해 줘.
어느 순간에도 복사본은 하나만 보이게 하고, 움직이는 동안 주변 레이아웃이 튀지 않게 해 줘.ABC
클릭해 보세요
Tab Indicator Slide (탭 인디케이터 슬라이드)
다른 이름 Sliding underline, Active tab indicator, Segmented control pill
밑줄이나 알약 모양 배경이 이전 탭에서 새로 선택한 탭으로 미끄러지듯 이동합니다.
쓰는 곳
탭 바, 세그먼트 컨트롤
[적용할 곳]에 탭 인디케이터 슬라이드(Tab Indicator Slide)를 넣어 줘. 슬라이딩 언더라인(sliding underline), 액티브 탭 인디케이터(active tab indicator)라고도 불러.
새 탭을 선택하면 밑줄이 이전 탭에서 새 탭으로 빠르게, 부드럽게 감속하며 미끄러지고, 탭 너비가 다르면 새 탭 너비에 맞게 늘어나게 해 줘.
화살표 키로 이동할 수 있는 올바른 탭 시맨틱을 지키고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 미끄러지지 않고 바로 옮겨지게 해 줘.A
Toast Slide-In (토스트 슬라이드 인)
다른 이름 Snackbar, Toast notification, Toast stack
짧은 메시지가 화면 가장자리에서 미끄러지거나 서서히 나타나 잠시 머문 뒤 사라지고, 쌓인 토스트는 자리를 내주며 옮겨 갑니다.
쓰는 곳
저장 완료 알림, 오류, 실행 취소 안내
[적용할 곳]에 토스트 슬라이드 인(Toast Slide-In)을 넣어 줘. 스낵바(snackbar), 토스트 알림(toast notification)이라고도 불러.
각 메시지가 화면 가장자리에서 위로 미끄러지며 서서히 나타나고 부드럽게 감속하게 해 줘. 새 토스트가 오면 이미 떠 있는 것들이 부드럽게 옮겨 가며 자리를 내주게.
포커스를 뺏지 않고 스크린 리더에 메시지를 알리고, 읽을 수 있을 만큼 충분히 띄워 두고, 마우스를 올리거나 포커스가 가면 자동 닫힘을 멈춰 줘.