맨위로가기

드래그 앤드 드롭

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
목차

1. 개요

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

2. 작동 방식

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


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

2. 1. 기본 동작

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

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

1. 대상 물체 위에 포인터 (화살표)를 맞춘 상태에서 마우스 (또는 다른 포인팅 디바이스) 버튼을 누르고 그대로 떼지 않는다.

2. 버튼을 누른 채로 포인터를 이동 대상 위치까지 움직인다 ('''드래그''').

3. 목적지에서 버튼을 뗀다 ('''드롭''').

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

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

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

2. 2. 고려 사항

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

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

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

3. 역사

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

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

3. 1. 매킨토시 OS

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

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

3. 2. OS/2

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

4. HTML5에서의 지원

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


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


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

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

5. 터치스크린 환경

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

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

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

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


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


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

7. 활용 예시



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

예시
파일을 애플리케이션 아이콘이나 윈도우로 전달하는 경우
파일을 다른 폴더로 이동 또는 복사하는 경우
그래픽 사용자 인터페이스에서 위젯의 레이아웃을 사용자 정의하기 위해 위젯을 재배치하는 경우
색상을 그래픽 개체로 드래그하여 색상을 변경하는 경우
도구를 캔버스 위치로 드래그하여 해당 위치에 도구를 적용하는 경우
한 위치 또는 단어에서 다른 위치 또는 문서로의 하이퍼링크를 생성하는 경우
대부분의 워드 프로세서는 선택한 텍스트를 한 지점에서 다른 지점으로 드래그할 수 있습니다.
셰이더와 재료를 디자인하기 위해 블렌더와 같은 일련의 코드 블록을 드래그하는 경우
데이터 파일을 보기 또는 처리하기 위해 프로그램 아이콘 또는 창으로 드래그하는 경우. 예를 들어, 텍스트 파일을 나타내는 아이콘을 Microsoft Word 창에 드롭하면 "이 문서를 Word에서 새 문서로 엽니다"를 의미합니다.
처리할 개체 목록에 개체를 추가하는 경우
명령을 적용할 개체로 속성을 드래그하는 경우



문자열의 특정 범위를 반전 표시한다[12]。

참조

[1] 문서 Top-10 Application-Design Mistakes http://www.useit.com[...] 2008-02-19
[2] 간행물 Chunking and Phrasing and the Design of Human-Computer Dialogues http://www.billbuxto[...]
[3] 웹사이트 Disk Swapper's Elbow http://www.folklore.[...] folklore.org
[4] 웹사이트 The Grand Unified Model (2): The Finder http://www.folklore.[...] folklore.org
[5] 웹사이트 HTML5 W3C Working Draft http://www.w3.org/TR[...] w3.org
[6] 뉴스 iPad Drag and Drop, Multitasking, and Split View in iOS 11: Everything you need to know! https://www.imore.co[...] 2017-10-10
[7] 웹사이트 The iPhone is also getting drag and drop with iOS 11 https://www.theverge[...] 2017-06-23
[8] 웹사이트 Moving Beyond Syntax: Lessons from 20 Years of Blocks Programing in AgentSheets https://sgd.cs.color[...] 2018-11-29
[9] 웹사이트 Render – Blender Reference Manual http://wiki.blender.[...] 2014-01-24
[10] 문서 Disk Swapper's Elbow http://www.folklore.[...] Folklore.org 1984-01
[11] 문서 The Grand Unified Model (2) - The Finder http://www.folklore.[...] Folklore.org 1983-01
[12] 문서 通常は単にドラッグと呼ぶが、行っている操作はドラッグ・アンド・ドロップである。
[13] 웹인용 보관된 사본 http://www.useit.com[...] 2011-02-16


본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.

문의하기 : help@durumis.com