Drag (드래그)
다른 이름 Draggable, Drag constraints
드래그하면 요소가 포인터를 따라오며, 움직일 영역이나 축을 제한할 수 있습니다.
쓰는 곳
슬라이더, 정렬 가능한 카드
변형
- Drag
- Drag constraints
- Drag lock direction
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 드래그(Drag) 인터랙션을 넣어 줘. 드래거블(draggable), 드래그 제약(drag constraints)이라고도 불러.
드래그하는 동안 요소가 포인터를 바로 따라오고, 허용된 영역의 가장자리에서 멈추며, 놓으면 살짝 튕기면서 원래 자리로 돌아오게 해 줘.
마우스뿐 아니라 터치로도 아래 페이지가 스크롤되지 않고 동작하게 하고, 키보드로 옮기는 방법도 마련해 줘.비슷한 모션
- A
- B
- C
- D
끌어 보세요
Drag-to-Reorder List (드래그 순서 변경 리스트)
다른 이름 Reorder, Sortable list
항목을 끌면 나머지 항목이 비켜나듯 미끄러지며 새 순서로 자리 잡습니다.
쓰는 곳
칸반, 순서를 바꾸는 설정, 플레이리스트
[적용할 곳]에 드래그 순서 변경 리스트(Drag-to-Reorder List)를 넣어 줘. 정렬 가능한 리스트(sortable list)라고도 불러.
끄는 항목은 포인터를 바로 따라오며 살짝 떠오르고, 나머지 항목은 부드럽게 미끄러지며 비켜나게 해 줘. 놓으면 가장 가까운 자리에 빠르게 들어가게.
마우스뿐 아니라 터치도 지원하고, 키보드로 항목을 옮기는 방법도 넣어서 새 위치를 스크린 리더에 알려 줘.끌어 보세요
Swipe to Delete (스와이프 삭제)
다른 이름 Swipe actions, Swipe to reveal
목록 행을 옆으로 밀면 삭제나 보관 같은 동작 버튼이 드러납니다.
쓰는 곳
메일 목록, 할 일 목록
[적용할 곳]에 스와이프 삭제(Swipe to Delete) 인터랙션을 넣어 줘. 스와이프 액션(swipe actions), 스와이프 투 리빌(swipe to reveal)이라고도 불러.
행을 옆으로 끌면 손가락을 그대로 따라 움직이며 뒤에 있는 보관·삭제 같은 동작 버튼이 드러나고, 버튼이 다 보이면 멈추게 해 줘. 손을 떼면 튕김 없이 부드럽게 제자리로 미끄러지게.
가로로 밀 때도 세로 스크롤이 되게 하고, 스와이프하지 않아도 키보드와 스크린 리더로 같은 동작을 할 수 있게 해 줘.끌어 보세요
Pull to Refresh (당겨서 새로고침)
다른 이름 Swipe to refresh
목록을 아래로 당기면 스피너가 나타나고, 손을 떼면 콘텐츠를 다시 불러옵니다.
쓰는 곳
피드, 받은편지함
[적용할 곳]에 당겨서 새로고침(Pull to Refresh) 인터랙션을 넣어 줘. 스와이프 투 리프레시(swipe to refresh)라고도 불러.
목록을 맨 위에서 아래로 당기면 약간의 저항감을 주며 손가락을 따라오고, 당기는 만큼 도는 스피너가 드러나게 해 줘. 손을 떼면 콘텐츠를 다시 불러오는 동안 스피너가 계속 돌다가, 끝나면 목록이 부드럽게 다시 올라가게.
목록이 이미 맨 위까지 스크롤된 상태에서만 시작하고, 키보드와 스크린 리더 사용자를 위해 일반 새로고침 버튼도 함께 둬.A
B
끌어 보세요
Before-After Slider (비포 애프터 슬라이더)
다른 이름 Image comparison slider, Compare slider
드래그할 수 있는 구분선을 사이에 두고 한쪽에는 한 이미지, 다른 쪽에는 다른 이미지가 보입니다.
쓰는 곳
사진 보정, 제품 비교
[적용할 곳]에 비포 애프터 슬라이더(Before-After Slider)를 넣어 줘. 이미지 비교 슬라이더(image comparison slider), 컴페어 슬라이더(compare slider)라고도 불러.
두 이미지를 겹쳐 두고, 세로 구분선을 드래그하면 한쪽은 더 많이, 다른 쪽은 덜 보이게 해 줘. 구분선은 지연 없이 포인터를 바로 따라오게.
구분선은 가운데에서 시작하고, 터치와 방향키로도 움직일 수 있게 해 줘.Micro-interaction의 다른 모션
ABC
Floating Label (플로팅 라벨)
다른 이름 Float label, Animated placeholder
입력란에 포커스가 가거나 값이 들어가면, 플레이스홀더 라벨이 위로 올라가며 작아집니다.
쓰는 곳
폼, 로그인 입력란
[적용할 곳]에 플로팅 라벨(Floating Label)을 넣어 줘. 플로트 라벨(float label), 애니메이티드 플레이스홀더(animated placeholder)라고도 불러.
입력란에 포커스가 가거나 값이 있으면, 안에 있던 라벨이 부드럽고 빠르게 위로 미끄러지며 작아져 입력란 위쪽 가장자리에 걸치고, 입력란이 비어 있고 포커스도 없을 때만 다시 내려오게 해 줘.
입력란과 연결된 진짜 라벨로 유지하고, 입력란 높이가 바뀌지 않게 해서 폼이 밀리지 않게 해 줘.클릭해 보세요
Like / Heart Burst (좋아요 / 하트 버스트)
다른 이름 Heart animation, Twitter heart, Favorite toggle
하트 아이콘을 클릭하면 색이 채워지며 작은 입자가 터지거나 두근거립니다.
쓰는 곳
좋아요·즐겨찾기 버튼
[적용할 곳]에 좋아요 / 하트 버스트(Like / Heart Burst) 애니메이션을 넣어 줘. 하트 애니메이션(heart animation), 즐겨찾기 토글(favorite toggle)이라고도 불러.
좋아요를 누르면 하트가 색으로 채워지며 통통 튀듯 커지고, 링과 작은 점들이 바깥으로 터졌다가 사라지게 해 줘. 전체적으로 빠르고 경쾌하게, 좋아요를 취소하면 하트만 조용히 비워지게.
눌림 상태를 가진 진짜 토글 버튼으로 만들고, 버스트는 켤 때만 재생해 줘.클릭해 보세요
Long Press (길게 누르기)
다른 이름 Press and hold, Touch and hold
항목을 잠시 누르고 있으면 추가 동작이나 진행 채움이 실행됩니다.
쓰는 곳
컨텍스트 메뉴, 길게 눌러 확인
[적용할 곳]에 길게 누르기(Long Press) 인터랙션을 넣어 줘. 프레스 앤 홀드(press and hold), 터치 앤 홀드(touch and hold)라고도 불러.
누르고 있는 동안 항목이 살짝 눌려 들어가고 진행 채움이 일정한 속도로 가로질러 차오르게 해 줘. 다 차면 톡 튀어 돌아오며 메뉴를 열고, 중간에 손을 떼면 취소되고 채움이 초기화되게.
키보드와 스크린 리더 사용자도 같은 동작에 닿을 수 있는 다른 방법을 주고, 길게 누를 때 텍스트가 선택되거나 브라우저 기본 컨텍스트 메뉴가 뜨지 않게 해 줘.