ATLASDESIGN REFERENCE GALLERY
ATLAS GALLERY / 2026.10

제스처·상호작용

각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.

드래그 앤 드롭 Drag and Drop

대상을 잡아 이동하고 특정 위치에 놓는 방식.

제스처·상호작용에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

스와이프 제스처 Swipe Gesture

손가락을 밀어 화면·항목을 이동하거나 동작 실행.

제스처·상호작용에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

길게 누르기 Long Press

손가락을 일정 시간 유지해 추가 동작 호출.

제스처·상호작용에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

두 번 탭 Double Tap

화면 요소를 빠르게 두 번 터치하는 제스처.

제스처·상호작용에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

핀치 확대·축소 Pinch to Zoom

두 손가락 간 거리를 바꿔 화면을 확대·축소.

제스처·상호작용에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

당겨서 새로고침 Pull to Refresh

목록을 아래로 당겨 새 데이터를 요청.

제스처·상호작용에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

밀어서 닫기 Swipe to Dismiss

알림·카드·패널을 밀어 제거.

제스처·상호작용에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

스와이프 액션 Swipe Actions

목록 항목을 밀어 삭제·보관 등 동작 노출.

제스처·상호작용에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

재정렬 목록 Reorderable List

드래그로 항목 순서를 변경.

제스처·상호작용에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

드래그 정렬 Sort by Dragging

끌어 놓기 방식으로 순서를 지정.

제스처·상호작용에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

키보드 단축키 Keyboard Shortcut

키 조합으로 명령을 빠르게 실행.

제스처·상호작용에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

문맥 동작 Contextual Actions

현재 선택한 대상과 관련된 명령만 표시.

제스처·상호작용에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

호버 시 노출 Hover Reveal

마우스 오버 때 숨겨진 보조 액션을 표시.

제스처·상호작용에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

실행 취소·다시 실행 Undo / Redo

이전 변경을 되돌리거나 재적용.

제스처·상호작용에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

확인 패턴 Confirmation Pattern

위험한 명령 실행 전에 재확인하는 흐름.

제스처·상호작용에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

디바운스 Debounce

연속 입력 뒤 일정 시간 지나 마지막 작업만 처리하는 전략.

디자인 구현이 실제 브라우저에서 빠르고 일관되게 작동하도록 구조를 정한다.

프레임워크 이름과 렌더링 전략은 별개다. 측정 조건 없이 성능 우위를 단정하지 않는다.

참고 문서

스로틀 Throttle

짧은 시간에 반복되는 작업의 최대 실행 빈도를 제한하는 처리.

디자인 구현이 실제 브라우저에서 빠르고 일관되게 작동하도록 구조를 정한다.

프레임워크 이름과 렌더링 전략은 별개다. 측정 조건 없이 성능 우위를 단정하지 않는다.

참고 문서

Gestures & Interaction

Open an entry for its visual reference, comparisons and source-language text.

Drag and Drop 드래그 앤 드롭

An interaction in which an item is grabbed, moved, and released at a destination.

Specifying gestures and interactions.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

Swipe Gesture 스와이프 제스처

A finger-sliding gesture that moves content or triggers an action.

Specifying gestures and interactions.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

Long Press 길게 누르기

Holding a touch for a period of time to invoke an additional action.

Specifying gestures and interactions.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

Double Tap 두 번 탭

Touching an element twice in quick succession.

Specifying gestures and interactions.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

Pinch to Zoom 핀치 확대·축소

Changing the distance between two fingers to zoom in or out.

Specifying gestures and interactions.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

Pull to Refresh 당겨서 새로고침

Pulling a list downward to request fresh data.

Specifying gestures and interactions.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

Swipe to Dismiss 밀어서 닫기

Swiping a notification, card, or panel away to dismiss it.

Specifying gestures and interactions.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

Swipe Actions 스와이프 액션

Swiping a list item to expose actions such as Delete or Archive.

Specifying gestures and interactions.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

Reorderable List 재정렬 목록

A list whose item order can be changed by dragging.

Specifying gestures and interactions.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

Sort by Dragging 드래그 정렬

Specifying an order through drag-and-drop interactions.

Specifying gestures and interactions.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

Keyboard Shortcut 키보드 단축키

A key combination that executes a command quickly.

Specifying gestures and interactions.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

Contextual Actions 문맥 동작

Commands relevant to the currently selected object or context.

Specifying gestures and interactions.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

Hover Reveal 호버 시 노출

Revealing otherwise hidden secondary actions when the pointer hovers.

Specifying gestures and interactions.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

Undo / Redo 실행 취소·다시 실행

Reversing a previous change or reapplying a reversed change.

Specifying gestures and interactions.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

Confirmation Pattern 확인 패턴

A flow that reconfirms intent before executing a risky command.

Specifying gestures and interactions.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

Debounce 디바운스

Waiting for a pause in repeated input, then processing only the final action.

Structuring a design so it runs quickly and consistently in actual browsers.

Framework names and rendering strategies are separate concepts. Do not claim performance superiority without specifying measurement conditions.

Reference

Throttle 스로틀

Limiting how frequently an action can run during rapid repeated input.

Structuring a design so it runs quickly and consistently in actual browsers.

Framework names and rendering strategies are separate concepts. Do not claim performance superiority without specifying measurement conditions.

Reference