드래그 앤드 드롭

드래그 앤드 드롭(Drag-and-drop, 끌어서 놓기)은 컴퓨터 그래픽 사용자 인터페이스 환경에서 시각적인 객체를 클릭하면서 다른 위치나 다른 가상 객체로 드래그하는 행위이다. 수많은 종류의 동작을 일으킬 수 있으며, 두 추상적 대상 사이에 다양한 종류의 연결을 만들 수 있다.

기능 동작에 한하여 모든 소프트웨어에 드래그 앤드 드롭을 사용할 수 있는 것은 아니지만 가끔은 사용자가 작업 수행을 하는 데 빠르고 쉽게 배울 수 있는 기술로 쓰일 수 있다. 그러나 드래그 앤드 드롭 기능으로의 행동 유도성이 부족하므로 항목을 드래그할 수 있는 여부가 늘 확실한 것은 아니다.

 동작 

드래그 앤 드롭의 기본 순서는 다음과 같다.
 포인터를 객체로 이동한다.
 마우스 또는 기타 포인팅 장치의 버튼을 누른 상태로 유지하여 객체를 "잡는다".
 포인터를 원하는 위치로 이동하여 객체를 "드래그"한다.
 버튼을 놓아 객체를 "드롭"한다.

드래그는 버튼을 누르지 않은 상태로 동일한 포인팅 장치를 이동하는 것보다 더 많은 물리적 노력이 필요하다. 이 때문에 사용자는 드래그하는 동안 빠르고 정확하게 움직일 수 없다 (피츠의 법칙 참조). 그러나 드래그 앤 드롭 작업은 두 피연산자(드래그할 객체 및 드롭 위치)를 단일 작업으로 신중하게 묶는 장점이 있다.
(그래픽 디자인에서와 같이) 확장된 드래그 앤 드롭은 마우스를 사용하는 손에 스트레스를 줄 수 있다.

동일한 버튼이 항목을 선택하고 드래그할 때 디자인 문제가 발생한다. 부정확한 움직임으로 인해 객체를 선택하려는 시도가 드래그 동작으로 등록될 수 있다.

또 다른 문제는 드롭 대상이 다른 객체 아래에 숨겨져 있을 수 있다는 것이다. 사용자는 드래그를 중지하고 소스와 대상을 모두 보이게 한 다음 다시 시작해야 한다. 클래식 Mac OS에서는 화면 상단의 메뉴 모음이 보편적인 "드래그 취소" 대상으로 사용되었다. 이 문제는 Mac OS X에서 Exposé의 도입으로 해결되었다.

 Mac OS에서 
당시 클릭 앤 드래그라고 불리던 드래그 앤 드롭은 오리지널 매킨토시에서 파일을 조작하는 데 사용되었다 (예를 들어 디스크 간에 파일을 복사하거나 폴더 간에 복사하는 경우). 시스템 7은 문서 아이콘을 응용 프로그램 아이콘 위에 드롭하여 응용 프로그램에서 문서를 여는 기능을 추가했다.

애플은 시스템 7.5에 "매킨토시 드래그 앤 드롭"을 추가하여 "클릭 앤 드래그"를 문서 내에서 텍스트 콘텐츠를 복사하거나 이동하는 것과 같은 일반적인 클립보드 작업으로 확장했다. 콘텐츠는 파일 시스템으로 드래그하여 "클리핑 파일"을 생성할 수도 있었고, 이 파일은 저장하고 재사용할 수 있었다. 파일은 응용 프로그램 창에 드롭할 수도 있었는데, 예를 들어 문서를 이메일에 첨부하거나 워드 프로세서 문서에 이미지를 추가하는 데 사용되었다.

역사상 대부분의 기간 동안 Mac OS는 버튼이 마우스 상단 표면의 대부분을 차지하는 단일 버튼 마우스를 사용했다. 이는 드래그하는 동안 버튼을 누르고 있는 것에 대한 인체공학적 우려를 완화할 수 있다.

 OS/2에서 
OS/2의 Workplace Shell은 보조 마우스 버튼으로 드래그 앤 드롭을 광범위하게 사용하며, 기본 버튼은 선택 및 클릭에 사용한다.
이러한 사용은 다른 고급 Common User Access 기능과 마찬가지로 네이티브 OS/2 응용 프로그램을 플랫폼 독립적 포트와 구별했다.

 웹 디자인에서 
 HTML에서 

HTML5 작업 초안 사양에는 드래그 앤 드롭 지원이 포함되어 있다. HTML5는 다음과 같은 다양한 종류의 드래그 앤 드롭 기능을 지원한다.
 텍스트 및 HTML 코드 드래그 앤 드롭
 HTML 요소 드래그 앤 드롭
 파일 드래그 앤 드롭
필요한 작업에 따라 위 유형 중 하나를 사용할 수 있다. HTML 요소가 현재 위치를 이동하기 위해 드래그될 때, 해당 ID는 대상 상위 요소로 전송된다. 따라서 텍스트를 전송하며 첫 번째 그룹으로 간주될 수 있다.

구글의 웹 기반 이메일 응용 프로그램인 Gmail은 최신 구글 크롬 브라우저와 애플의 사파리 (5.x)에서 영상 및 첨부 파일의 드래그 앤 드롭을 지원한다. 구글 이미지는 사용자가 브라우저에 이미지 파일을 드래그 앤 드롭하여 역 이미지 검색을 수행할 수 있도록 허용한다.

 웹사이트 빌더에서 
드래그 앤 드롭 웹사이트 빌더 (DIY 웹사이트 빌더라고도 함)는 웹 개발 경험이나 코딩 언어 지식 없이도 사용자가 다양한 요소를 페이지에 "드래그"하고 "드롭"하는 것만으로 웹사이트를 만들고 사용자 정의할 수 있는 시각적 인터페이스를 제공한다. 노코드 개발 플랫폼은 초기 시각 편집기의 기능을 훨씬 뛰어넘어 발전했다. 인공지능의 출현으로 웹사이트 구축이 더욱 빨라졌다.

2025년 5월 기준 2,100만 개 이상의 웹사이트가 드래그 앤 드롭 웹사이트 빌더를 사용하여 구축되었다. 시장 선두 주자는 다음과 같다.

순위웹사이트 빌더웹사이트 수시장 점유율1. Wix.com7.0M33%2. Squarespace5.2M25%3. GoDaddy4.1M19%4. Weebly0.7M  3%

 터치스크린에서 
터치스크린 인터페이스에는 드래그 앤 드롭 또는 더 정확하게는 길게 누른 다음 드래그하는 기능이 포함된다. 예를 들어 아이폰 또는 안드로이드 홈 화면에서 볼 수 있다.

iOS 11은 아이패드에서 사용자가 앱 내 또는 앱 간에 항목을 터치(다른 손가락으로 탭하여 더 많은 항목을 드래그)할 수 있는 드래그 앤 드롭 기능을 구현한다. 아이폰에서는 이 기능이 사용자가 드래그를 시작한 동일한 앱 내에서만 사용할 수 있다.

 최종 사용자 프로그래밍에서 

드래그 앤 드롭은 많은 최종 사용자 개발 시스템에서 중요한 프로그램 구성 접근 방식으로 간주된다. 보다 전통적인 텍스트 기반 프로그래밍 언어와 달리, 많은 최종 사용자 프로그래밍 언어는 최종 사용자가 드래그 앤 드롭 인터페이스를 통해 조작하는 타일 또는 아이콘과 같은 시각적 구성 요소를 기반으로 한다. 아이들을 위한 프로그래밍 환경인 AgentSheets는 드래그 앤 드롭 블록 프로그래밍의 현대적 개념을 도입하여 4가지 핵심 기능을 제공했다. 1) 최종 사용자가 조합 가능한 블록, 2) 최종 사용자가 편집 가능한 블록, 3) 트리 구조를 나타내기 위해 블록을 중첩할 수 있음, 4) 구문을 정의하기 위해 블록이 기하학적으로 배열됨. 드래그 앤 드롭은 블렌더와 같은 그래픽 도구의 많은 셰이더 편집 프로그램에도 포함되어 있다. 드래그 앤 드롭은 언리얼 엔진, GameMaker Studio, Construct 2 및 확장 기능을 포함한 일부 비디오 게임 엔진인 유니티에서도 사용된다.

 예시 

일반적인 예는 가상 데스크톱 환경에서 파일을 삭제하기 위해 아이콘을 특별한 휴지통 아이콘으로 드래그하는 것이다.

추가 예시는 다음과 같다.
 데이터 파일을 프로그램 아이콘 또는 창으로 드래그하여 보거나 처리하는 것. 예를 들어, 텍스트 파일을 나타내는 아이콘을 마이크로소프트 워드 창으로 드롭하는 것은 "이 문서를 워드에서 새 문서로 열기"를 의미한다.
 파일을 새 위치/디렉토리/폴더로 이동하거나 복사하는 것.
 처리할 객체 목록에 객체를 추가하는 것.
 그래픽 사용자 인터페이스에서 위젯을 재정렬하여 레이아웃을 사용자 정의하는 것.
 속성을 명령이 적용될 객체로 드래그하는 것.
 예를 들어, 색상을 그래픽 객체로 드래그하여 색상을 변경하는 것.
 도구를 캔버스 위치로 드래그하여 해당 위치에 도구를 적용하는 것.
 한 위치 또는 단어에서 다른 위치 또는 문서로 하이퍼링크를 만드는 것.
 대부분의 워드 프로세서는 선택한 텍스트를 한 지점에서 다른 지점으로 드래그할 수 있도록 허용한다.
 셰이더 및 재료 설계를 위해 블렌더에서와 같이 일련의 코드 블록을 드래그하는 것.

 각주 

 같이 보기 
 마우스 제스처
 마우스 클릭

분류:사용자 인터페이스