드래그 앤드 드롭

1. 개요

드래그 앤 드롭은 포인터를 객체로 이동시킨 후 마우스 버튼을 눌러 객체를 잡고, 원하는 위치로 드래그하여 놓는 방식으로 작동하는 사용자 인터페이스 기술이다. 이 방식은 사용자가 객체를 한 번의 동작으로 선택하고 이동시킬 수 있게 하지만, 드래깅 시 물리적인 노력이 더 필요하고 드롭 대상이 가려질 수 있다는 단점이 있다. 매킨토시 OS, OS/2 등 다양한 운영체제에서 구현되었으며, HTML5에서도 지원된다. 터치스크린 환경에서는 길게 누른 후 드래그하는 방식으로 사용되며, 최종 사용자 프로그래밍 및 블렌더와 같은 그래픽 도구, 게임 엔진 등 다양한 분야에서 활용된다.

2. 작동 방식

드래그 앤 드롭은 다음과 같은 순서로 작동한다.

* 포인터를 객체 위로 이동한다.
* 마우스나 다른 포인팅 장치의 버튼을 눌러 객체를 "잡는다".
* 포인터를 원하는 위치로 이동하여 객체를 "드래그"한다.
* 버튼을 놓아 객체를 "드롭"한다.

2.1. 기본 동작

포인터를 객체로 이동한 다음, 마우스 또는 기타 포인팅 장치의 버튼을 눌러 객체를 "잡는다". 그 후 포인터를 원하는 위치로 이동하여 객체를 "드래그"하고, 버튼을 놓아 객체를 "드롭"한다.

드래그 앤 드롭 조작은 기본적으로 다음과 같이 수행한다.

1. 대상 물체 위에 포인터 (화살표)를 맞춘 상태에서 마우스 (또는 다른 포인팅 디바이스) 버튼을 누르고 그대로 떼지 않는다.
2. 버튼을 누른 채로 포인터를 이동 대상 위치까지 움직인다 (드래그).
3. 목적지에서 버튼을 뗀다 (드롭).

드래깅은 버튼을 누르지 않고 포인팅 장치를 움직이는 것보다 더 많은 노력이 필요하다. 이 때문에 사용자는 드래깅하는 동안 빠르고 정확하게 움직이기 어렵다(피츠의 법칙). 그러나 드래그 앤 드롭은 드래그할 객체와 드롭 위치, 두 가지를 하나의 작업으로 묶는 장점이 있다.

항목을 선택하고 드래그할 때 동일한 버튼을 사용하면 디자인 문제가 발생한다. 객체를 선택하려 할 때 부정확한 움직임이 드래깅으로 인식될 수 있다.

또 다른 문제는 드롭 대상이 다른 객체 아래에 가려질 수 있다는 것이다. 이 경우 사용자는 드래깅을 중지하고 소스와 대상을 모두 표시한 다음 다시 시작해야 한다. 클래식 Mac OS에서는 화면 상단의 메뉴 막대가 "드래그 취소" 대상으로 사용되었다. 이 문제는 Mac OS X에서 Exposé의 도입으로 해결되었다.

2.2. 고려 사항

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

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

또 다른 문제는 드롭 대상이 다른 객체 아래에 숨겨질 수 있다는 것이다. 사용자는 드래깅을 중지하고, 드래그할 객체와 드롭 대상을 모두 표시한 다음, 다시 드래그를 시작해야 하는 번거로움이 있을 수 있다.

3. 역사

드래그 앤 드롭은 당시 클릭 앤 드래그라고 불렸으며, 초기 매킨토시에서 파일을 조작하는 데 사용되었다(예: 디스크 또는 폴더 간에 복사).

Mac OS는 역사상 대부분 기간 동안 마우스 상단 표면의 큰 부분을 덮는 버튼이 있는 단일 버튼 마우스를 사용해 왔다. 이는 드래그하는 동안 버튼을 누르고 있어야 하는 인체 공학적 문제를 완화할 수 있다.

3.1. 매킨토시 OS

시스템 7은 문서 아이콘을 응용 프로그램 아이콘 위에 드롭하여 응용 프로그램에서 문서를 열 수 있는 기능을 추가했다.

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

3.2. OS/2

OS/2의 워크플레이스 셸은 보조 마우스 버튼을 사용하여 드래그 앤 드롭을 광범위하게 사용하며, 주 마우스 버튼은 선택 및 클릭에 사용한다.

4. HTML5에서의 지원

HTML5 작업 초안 사양에는 드래그 앤 드롭 지원이 포함되어 있다. HTML5는 다음과 같은 다양한 종류의 드래그 앤 드롭 기능을 지원한다.

* 텍스트 및 HTML 코드 드래그 앤 드롭
* HTML 요소 드래그 앤 드롭
* 파일 드래그 앤 드롭

필요한 작업에 따라 위 유형 중 하나를 사용할 수 있다. HTML 요소를 현재 위치를 옮기기 위해 드래그하면 해당 ID가 대상 부모 요소로 전송된다는 점에 유의해야 한다. 따라서 텍스트를 전송하며 첫 번째 그룹으로 간주할 수 있다.

지메일은 최신 구글 크롬 브라우저 및 애플의 사파리 (5.x)에서 이미지 및 첨부 파일의 드래그 앤 드롭을 지원한다. 구글 이미지에서는 사용자가 이미지 파일을 브라우저로 드래그 앤 드롭하여 역 이미지 검색을 수행할 수 있다.

5. 터치스크린 환경

터치스크린 인터페이스는 길게 누른 다음 드래그하는 방식으로 드래그 앤 드롭 기능을 제공한다. 예를 들어, 아이폰이나 안드로이드 홈 화면에서 사용할 수 있다.

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

6. 최종 사용자 프로그래밍

드래그 앤 드롭은 많은 최종 사용자 개발 시스템에서 중요한 프로그램 구성 방식으로 간주된다. 텍스트 기반의 보다 전통적인 프로그래밍 언어와는 대조적으로, 많은 최종 사용자 프로그래밍 언어는 최종 사용자가 드래그 앤 드롭 인터페이스를 통해 조작하는 타일 또는 아이콘과 같은 시각적 구성 요소를 기반으로 한다. 어린이용 프로그래밍 환경인 에이전트시트(AgentSheets)는 현대적인 드래그 앤 드롭 블록 프로그래밍 방식을 도입하여 다음과 같은 4가지 핵심 기능을 제공한다.

* 최종 사용자가 구성 가능한 블록
* 최종 사용자가 편집 가능한 블록
* 트리 구조를 나타내도록 중첩될 수 있는 블록
* 구문을 정의하기 위해 기하학적으로 배열된 블록

드래그 앤 드롭은 블렌더(Blender)와 같은 그래픽 도구의 많은 셰이더 편집 프로그램에서도 제공된다. 또한 언리얼 엔진(Unreal Engine), 게임메이커 스튜디오(GameMaker Studio), 컨스트럭트 2(Construct 2) 및 확장된 유니티(Unity)를 포함한 일부 비디오 게임 엔진에서도 제공된다.

7. 활용 예시

* 가상 데스크톱 환경에서 아이콘을 특정한 휴지통 아이콘으로 드래그하여 파일을 삭제하는 경우가 있습니다.

드래그 앤드 드롭의 추가적인 예시는 다음과 같습니다.