움직임에는 이름이 있습니다. “부드럽고 세련되게”보다 이름 한 단어가 AI 에게 훨씬 정확하게 전달됩니다. 데모로 움직임을 고르고, 이름이 든 요청 문장을 복사해 붙여 넣으세요.
Modal dialog
뒤를 막고 한가운데 창 하나에 집중시킨다
Drawer (Off-canvas)
화면 가장자리 밖에 숨어 있던 패널이 들어온다
Bottom sheet
아래 가장자리에서 판이 솟아 반쯤 덮는다
Accordion
제목 줄 아래로 본문이 열렸다 닫힌다
Dropdown menu
버튼 바로 밑에 고를 목록이 내려온다
Lightbox
썸네일이 제자리에서 어둠 위로 크게 펼쳐진다
Tabs
머리표를 고르면 같은 자리의 내용이 갈린다
Carousel
가로로 늘어선 판을 한 장씩 밀어 넘긴다
Toggle switch
동그란 손잡이가 옆으로 건너가며 켜진다
Segmented control
붙어 있는 칸 사이로 선택 표시가 미끄러진다
Filter chips
작은 알약을 눌러 조건을 켰다 끈다
Range slider
한 막대 위 두 손잡이 사이가 고른 구간이다
Stepper (+/-)
양옆 버튼으로 가운데 수를 하나씩 바꾼다
Pagination
쪽 번호를 골라 긴 목록을 나눠 본다
Before/after slider
손잡이를 끄는 만큼 보정 전과 후가 갈린다
Hamburger menu
가로줄 세 개 아이콘 뒤에 메뉴가 숨어 있다
Breadcrumbs
홈부터 지금 화면까지의 길을 한 줄로 잇는다
Mega menu
상단 메뉴 아래로 여러 단짜리 넓은 판이 열린다
Step indicator
점과 선으로 절차의 진행 칸을 채워 간다
Skeleton screen
내용이 올 자리를 빛이 지나가는 빈 틀로 채운다
Spinner
끊긴 고리가 제자리에서 돌며 기다리게 한다
Empty state
목록이 비었을 때 무엇을 하면 되는지 알려 준다
Floating label
입력란 안의 이름표가 테두리 위로 올라간다
Loading button
누른 버튼이 둥글게 줄어 돌다가 완료로 펴진다
Like button animation
하트가 튀며 차오르고 둘레로 알갱이가 터진다
Back-to-top button
내려가면 둥근 버튼이 생기고 누르면 꼭대기로
UI 컴포넌트 · Breadcrumbs
칩을 고르면 프롬프트에 덧붙습니다 — 묶음마다 하나씩, 다시 누르면 빠집니다.