Tooltip Fade (툴팁 페이드)
다른 이름 Tooltip reveal
잠시 마우스를 올려 두면 작은 라벨이 요소 옆에 살짝 밀려 들어오며 서서히 나타납니다.
쓰는 곳
아이콘 설명, 잘린 텍스트
변형
- fade
- fade + slight slide
- instant-on after first tooltip
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 툴팁 페이드(Tooltip Fade)를 넣어 줘. 툴팁 리빌(tooltip reveal)이라고도 불러.
잠시 마우스를 올려 두면 라벨이 요소 옆으로 살짝 밀려 들어오며 서서히 나타나고, 포인터가 떠나면 지연 없이 바로 사라지게 해 줘.
키보드 포커스에도 보이게 하고, Escape 키로 닫히게 하고, 스크린 리더가 읽을 수 있게 요소와 연결해 줘.비슷한 모션
A
클릭해 보세요
Popover / Dropdown Open (팝오버 / 드롭다운 오픈)
다른 이름 Menu pop, Popover pop-in, Dropdown scale-fade
떠 있는 메뉴가 트리거가 있는 지점에서 커지며 서서히 나타납니다.
쓰는 곳
드롭다운 메뉴, 팝오버, 선택 목록
[적용할 곳]에 팝오버 / 드롭다운 오픈(Popover / Dropdown Open) 애니메이션을 넣어 줘. 메뉴 팝(menu pop), 드롭다운 스케일 페이드(dropdown scale-fade)라고도 불러.
메뉴가 트리거 옆 모서리에서 살짝 커지면서 서서히 나타나게 해 줘. 빠르고 깔끔하게 열리고, 닫힐 때는 조금 더 빠르게 사라지게.
트리거에 붙어 있게 하고, Escape 키나 바깥 클릭으로 닫히게 하고, 열린 상태를 트리거에서 스크린 리더에 알려 줘.A
마우스를 올려 보세요
Speech Bubble (말풍선)
다른 이름 Bubble
포인터를 올리면 요소 한쪽에 말풍선 꼬리 모양의 작은 삼각형이 나타납니다.
쓰는 곳
탭, 툴팁
[적용할 곳]에 말풍선(Speech Bubble) 호버 효과를 넣어 줘. 버블(bubble)이라고도 불러.
요소 한쪽 뒤에서 작은 삼각형 꼬리가 미끄러져 나와 말풍선 모양이 되고, 포인터가 벗어나면 다시 들어가게 해 줘. 빠르고 부드럽게.
꼬리는 요소와 같은 색으로 해서 하나의 모양으로 보이게 하고, 키보드 포커스에도 같은 효과를 보여 줘.A
Toast Slide-In (토스트 슬라이드 인)
다른 이름 Snackbar, Toast notification, Toast stack
짧은 메시지가 화면 가장자리에서 미끄러지거나 서서히 나타나 잠시 머문 뒤 사라지고, 쌓인 토스트는 자리를 내주며 옮겨 갑니다.
쓰는 곳
저장 완료 알림, 오류, 실행 취소 안내
[적용할 곳]에 토스트 슬라이드 인(Toast Slide-In)을 넣어 줘. 스낵바(snackbar), 토스트 알림(toast notification)이라고도 불러.
각 메시지가 화면 가장자리에서 위로 미끄러지며 서서히 나타나고 부드럽게 감속하게 해 줘. 새 토스트가 오면 이미 떠 있는 것들이 부드럽게 옮겨 가며 자리를 내주게.
포커스를 뺏지 않고 스크린 리더에 메시지를 알리고, 읽을 수 있을 만큼 충분히 띄워 두고, 마우스를 올리거나 포커스가 가면 자동 닫힘을 멈춰 줘.Component & Layout의 다른 모션
- A
- B
- C
클릭해 보세요
Accordion Expand-Collapse (아코디언 펼치기 / 접기)
다른 이름 Collapse, Disclosure, Expandable section
헤더를 누를 때마다 콘텐츠 패널이 부드럽게 전체 높이까지 펼쳐지거나 0까지 접힙니다.
쓰는 곳
FAQ, 설정 그룹, 사이드바 트리
[적용할 곳]에 아코디언 펼치기 / 접기(Accordion Expand-Collapse) 효과를 넣어 줘. 콜랩스(collapse), 디스클로저(disclosure)라고도 불러.
헤더를 누르면 패널이 내용의 전체 높이까지 부드럽게 펼쳐지고, 다시 누르면 완전히 접히게 해 줘. 헤더의 화살표도 함께 돌아가고, 빠르고 부드럽게, 튕김 없이.
고정된 추정값이 아니라 내용의 실제 높이까지 애니메이션하고, 헤더는 펼침 상태를 알려 주는 진짜 버튼으로 만들고, 키보드로도 쓸 수 있게 해 줘.A
Backdrop Scrim Fade (백드롭 스크림 페이드)
다른 이름 Overlay fade, Scrim
오버레이 뒤로 반투명한 어두운 막이 서서히 나타나 페이지를 어둡게 가립니다.
쓰는 곳
모달, 드로어, 시트 뒤
[적용할 곳]에 백드롭 스크림 페이드(Backdrop Scrim Fade)를 넣어 줘. 오버레이 페이드(overlay fade), 스크림(scrim)이라고도 불러.
오버레이가 열리면 뒤쪽 페이지 위로 반투명한 어두운 막이 부드럽게 나타나되 오버레이보다 조금 느리게 나타나고, 닫힐 때 다시 사라지게 해 줘.
라이트·다크 테마 모두에서 스크림은 어둡게 유지하고, 보이는 동안에는 뒤쪽 페이지가 스크롤되거나 클릭되지 않게 해 줘.A
Bottom Sheet Slide-Up (바텀 시트 슬라이드 업)
다른 이름 Bottom drawer, Sheet
패널이 아래 가장자리에서 밀려 올라오며, 끌어서 정해진 높이에 맞출 수 있는 경우가 많습니다.
쓰는 곳
모바일 액션, 공유 메뉴, 필터
[적용할 곳]에 바텀 시트 슬라이드 업(Bottom Sheet Slide-Up)을 넣어 줘. 바텀 드로어(bottom drawer), 시트(sheet)라고도 불러.
뒤쪽 페이지가 어두워지는 동안 패널이 아래 가장자리에서 밀려 올라오고, 튕김 없이 부드럽게 감속하며 자리를 잡게 해 줘.
시트가 열릴 때마다 한 번 재생하고, 닫을 때는 다시 아래로 내려가게 하고, 열려 있는 동안 키보드 포커스가 시트 안에 머물게 해 줘.