Tab Indicator Slide (탭 인디케이터 슬라이드)
다른 이름 Sliding underline, Active tab indicator, Segmented control pill
밑줄이나 알약 모양 배경이 이전 탭에서 새로 선택한 탭으로 미끄러지듯 이동합니다.
쓰는 곳
탭 바, 세그먼트 컨트롤
변형
- underline
- pill background
- shared layout indicator
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 탭 인디케이터 슬라이드(Tab Indicator Slide)를 넣어 줘. 슬라이딩 언더라인(sliding underline), 액티브 탭 인디케이터(active tab indicator)라고도 불러.
새 탭을 선택하면 밑줄이 이전 탭에서 새 탭으로 빠르게, 부드럽게 감속하며 미끄러지고, 탭 너비가 다르면 새 탭 너비에 맞게 늘어나게 해 줘.
화살표 키로 이동할 수 있는 올바른 탭 시맨틱을 지키고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 미끄러지지 않고 바로 옮겨지게 해 줘.비슷한 모션
ACB
클릭해 보세요
Shared Layout Animation (셰어드 레이아웃 애니메이션)
다른 이름 layoutId, Shared element (in-page)
요소가 새 위치의 짝이 되는 요소로 이동하며 크기가 바뀌어, 하나의 요소처럼 보입니다.
쓰는 곳
선택 하이라이트, 썸네일에서 확대 보기로
[적용할 곳]에 셰어드 레이아웃 애니메이션(Shared Layout Animation)을 넣어 줘. 페이지 내 공유 요소(in-page shared element)라고도 불러.
선택이 바뀌면 요소가 이전 자리에서 새 자리로 부드럽게 이동하며 크기가 바뀌고 살포시 자리 잡게 해서, 두 개가 아니라 하나의 물체로 보이게 해 줘.
어느 순간에도 복사본은 하나만 보이게 하고, 움직이는 동안 주변 레이아웃이 튀지 않게 해 줘.ABCDEF
포인터를 움직여 보세요
Card Hover Effect (카드 호버 효과)
다른 이름 Sliding highlight card grid
강조 배경이 그리드 안의 카드 사이를 미끄러지듯 옮겨 다니며 마우스를 올린 카드를 따라갑니다.
쓰는 곳
카드 그리드, 기능 목록
[적용할 곳]에 카드 호버 효과(Card Hover Effect)를 넣어 줘. 슬라이딩 하이라이트 카드 그리드(sliding highlight card grid)라고도 불러.
마우스를 올린 카드 뒤에 부드러운 강조 배경이 나타나고, 포인터가 다른 카드로 옮겨 가면 그쪽으로 매끄럽게 미끄러져 가며, 포인터가 그리드를 벗어나면 서서히 사라지게 해 줘.
키보드 포커스로도 강조 배경이 똑같이 움직이게 하고, 카드 자체는 밀리지 않게 해 줘.클릭해 보세요
Toggle Switch (토글 스위치)
다른 이름 Switch, Switch Thumb Slide
둥근 손잡이가 트랙을 따라 미끄러지고, 꺼짐과 켜짐에 따라 트랙 색이 바뀝니다.
쓰는 곳
설정, 다크 모드
[적용할 곳]에 토글 스위치(Toggle Switch) 애니메이션을 넣어 줘. 스위치(switch)라고도 불러.
켜고 끌 때 둥근 손잡이가 트랙 반대쪽 끝까지 부드럽게 미끄러지고, 그와 함께 트랙 색이 바뀌게 해 줘. 빠르고 또렷하게, 튕김 없이.
키보드로도 작동하는 진짜 접근성 있는 스위치(checked 상태를 가진 role="switch")로 만들어 줘.ABC
마우스를 올려 보세요
Underline Reveal (언더라인 리빌)
다른 이름 Overline Reveal, Reveal
선이 아래나 위 가장자리에서 미끄러져 들어와 요소에 밑줄이나 윗줄을 긋습니다.
쓰는 곳
내비게이션 링크, 버튼
[적용할 곳]에 언더라인 리빌(Underline Reveal) 호버 효과를 넣어 줘. 오버라인 리빌(overline reveal), 리빌(reveal)이라고도 불러.
포인터가 요소 위에 있는 동안 전체 너비의 선이 아래 가장자리 바로 밑에서 위로 미끄러져 제자리에 오고, 벗어나면 다시 아래로 미끄러져 사라지게 해 줘. 빠르고 부드럽게.
선을 가장자리에서 잘라 서서히 나타나거나 늘어나는 대신 미끄러져 나오게 하고, 키보드 포커스에도 같은 효과를 보여 줘.Component & Layout의 다른 모션
A
Toast Slide-In (토스트 슬라이드 인)
다른 이름 Snackbar, Toast notification, Toast stack
짧은 메시지가 화면 가장자리에서 미끄러지거나 서서히 나타나 잠시 머문 뒤 사라지고, 쌓인 토스트는 자리를 내주며 옮겨 갑니다.
쓰는 곳
저장 완료 알림, 오류, 실행 취소 안내
[적용할 곳]에 토스트 슬라이드 인(Toast Slide-In)을 넣어 줘. 스낵바(snackbar), 토스트 알림(toast notification)이라고도 불러.
각 메시지가 화면 가장자리에서 위로 미끄러지며 서서히 나타나고 부드럽게 감속하게 해 줘. 새 토스트가 오면 이미 떠 있는 것들이 부드럽게 옮겨 가며 자리를 내주게.
포커스를 뺏지 않고 스크린 리더에 메시지를 알리고, 읽을 수 있을 만큼 충분히 띄워 두고, 마우스를 올리거나 포커스가 가면 자동 닫힘을 멈춰 줘.A
마우스를 올려 보세요
Tooltip Fade (툴팁 페이드)
다른 이름 Tooltip reveal
잠시 마우스를 올려 두면 작은 라벨이 요소 옆에 살짝 밀려 들어오며 서서히 나타납니다.
쓰는 곳
아이콘 설명, 잘린 텍스트
[적용할 곳]에 툴팁 페이드(Tooltip Fade)를 넣어 줘. 툴팁 리빌(tooltip reveal)이라고도 불러.
잠시 마우스를 올려 두면 라벨이 요소 옆으로 살짝 밀려 들어오며 서서히 나타나고, 포인터가 떠나면 지연 없이 바로 사라지게 해 줘.
키보드 포커스에도 보이게 하고, Escape 키로 닫히게 하고, 스크린 리더가 읽을 수 있게 요소와 연결해 줘.- A
- B
- C
클릭해 보세요
Accordion Expand-Collapse (아코디언 펼치기 / 접기)
다른 이름 Collapse, Disclosure, Expandable section
헤더를 누를 때마다 콘텐츠 패널이 부드럽게 전체 높이까지 펼쳐지거나 0까지 접힙니다.
쓰는 곳
FAQ, 설정 그룹, 사이드바 트리
[적용할 곳]에 아코디언 펼치기 / 접기(Accordion Expand-Collapse) 효과를 넣어 줘. 콜랩스(collapse), 디스클로저(disclosure)라고도 불러.
헤더를 누르면 패널이 내용의 전체 높이까지 부드럽게 펼쳐지고, 다시 누르면 완전히 접히게 해 줘. 헤더의 화살표도 함께 돌아가고, 빠르고 부드럽게, 튕김 없이.
고정된 추정값이 아니라 내용의 실제 높이까지 애니메이션하고, 헤더는 펼침 상태를 알려 주는 진짜 버튼으로 만들고, 키보드로도 쓸 수 있게 해 줘.