끌어서 놓기

Drag and drop
이미지를 웹 브라우저 아이콘으로 끌어다 놓으면 웹 브라우저에서 이미지가 열린다.

컴퓨터 그래픽 사용자 인터페이스에서 끌어서 놓기는 사용자가 가상 개체를 "그래빙"하여 다른 위치 또는 다른 가상 개체로 끌어서 선택하는 포인팅 장치 제스처다.일반적으로, 그것은 많은 종류의 행동을 호출하거나, 두 추상적인 객체들 사이에 다양한 형태의 연관성을 창조하는데 사용될 수 있다.

기능으로서 드래그 앤 드롭 지원은, 때로는 빠르고 배우기 쉬운 기술이지만, 모든 소프트웨어에서 발견되는 것은 아니다.그러나 사용자가 항목을 끌어다 놓을 수 있거나 끌어서 놓기에 의해 수행되는 명령이 무엇이기에 사용적합성이 저하될 수 있는지 항상 명확하게 알 수는 없다.[1]

행동들

드래그 앤 드롭에 관련된 기본 순서는 다음과 같다.

  • 포인터를 개체로 이동
  • 마우스 또는 다른 포인팅 장치의 버튼을 누른 상태로 개체를 "그래브"하십시오.
  • 포인터를 이 위치로 이동하여 개체를 원하는 위치로 "끌기"
  • 단추를 풀어 오브젝트 "드롭"

끌기는 버튼을 누르지 않고 동일한 포인팅 장치를 이동하는 것보다 더 많은 신체적인 노력이 필요하다.이 때문에 사용자는 끌면서 그만큼 빠르고 정확하게 움직일 수 없다(Fitts의 법칙 참조).그러나 드래그 앤 드롭 연산은 두 피연산자(끌어올 개체와 드롭 위치)를 하나의 동작으로 생각나게 결합할 수 있는 장점이 있다.[2]드래그 앤 드롭을 연장하면(그래픽 디자인에서와 같이) 자극적인 손에 스트레스를 줄 수 있다.

동일한 버튼이 항목을 선택하고 끌면 설계 문제가 나타난다.부정확한 움직임은 끌기 동작으로 등록할 물체를 선택하려는 시도를 유발할 수 있다.

낙하 대상이 다른 물체 밑에 숨어 있을 수 있다는 점도 문제다.사용자는 끌기를 중지하고 소스와 대상을 모두 표시한 후 다시 시작해야 한다.클래식한 Mac OS에서 화면 상단 메뉴 모음은 범용 "드래그 취소" 대상 역할을 했다.이 문제는 Exposé의 소개로 Mac OS X에서 다루어졌다.

Mac OS에서

드래그 앤 드롭(drag and drop)[4]은 당시 원본 Macintosh에서 파일을 조작하는 데 사용되었다(예: 디스크나 폴더 간에 파일을 복사하는[3] 것).시스템 7은 문서 아이콘을 응용프로그램의 아이콘 위에 떨어뜨려 응용프로그램에서 문서를 여는 기능을 추가했다.

시스템 7.5에서는 드래그 앤 드롭을 문서 내의 텍스트 콘텐츠를 복사하거나 이동하는 것과 같은 일반적인 클립보드 작업으로 확장했다.콘텐츠는 파일 시스템에 끌어다 저장 및 재사용할 수 있는 "클립 파일"을 만들 수도 있다.

대부분의 역사 동안 Mac OS는 버튼이 마우스 상단 표면의 많은 부분을 덮는 단 하나의 버튼 마우스를 사용해 왔다.이렇게 하면 끌 때 버튼을 계속 누르고 있을 때의 인체공학적 우려가 완화될 수 있다.

OS/2에서

OS/2의 Workplace Shell은 2차 마우스 버튼으로 드래그 앤 드롭을 광범위하게 사용하므로 기본 마우스 버튼을 선택하고 클릭할 수 있다.다른 고급 Common User Access의 그것과 같은 용도는 플랫폼 독립적 포트와 구별되는 기본 OS/2 애플리케이션을 특징으로 한다.

HTML에서

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

  • 텍스트 및 HTML 코드 끌어서 놓기
  • HTML 요소 끌어서 놓기
  • 파일 끌어서 놓기

필요한 동작에 근거해, 위의 타입 중 하나를 사용할 수 있다.HTML 요소가 현재 위치를 이동하기 위해 드래그될 때, HTML 요소의 ID가 대상 상위 요소로 전송되므로 텍스트를 전송하고 첫 번째 그룹으로 간주할 수 있다는 점에 유의하십시오.

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

터치 스크린에서

터치 스크린 인터페이스에는 끌어서 놓기, 또는 더 정확히 말하면 길게 누른 다음 끌기(예: 아이폰 또는 안드로이드 홈 스크린)도 포함된다.

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

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

드래그 앤 드롭은 많은 최종 사용자 개발 시스템에서 중요한 프로그램 구성 접근방식으로 간주된다.보다 전통적인 텍스트 기반 프로그래밍 언어와 대조적으로, 많은 최종 사용자 프로그래밍 언어는 최종 사용자가 끌어서 놓기 인터페이스를 통해 조작하는 타일이나 아이콘과 같은 시각적 구성요소를 기반으로 한다.키즈용 프로그래밍 [8]환경인 AgentSheets는 1) 최종 사용자가 합성할 수 있는 블록, 2) 블록은 최종 사용자 편집 가능 블록, 3) 블록은 나무 구조를 나타내기 위해 중첩될 수 있음 4) 블록을 기하학적으로 배열하여 구문을 정의한다.드래그 앤 드롭은 블렌더와 같은 그래픽 도구를 위한 셰이더 편집 프로그램에도 많이 등장한다.[9]드래그 앤 드롭은 또한 언리얼 엔진, 게임메이커 스튜디오, Construct 2 그리고 확장성을 갖춘 유니티와 같은 일부 비디오 게임 엔진에 특징지어진다.

예

일반적인 예는 가상 데스크톱의 아이콘을 특수 휴지통 아이콘으로 끌어 파일을 삭제하는 것이다.

그 밖의 예는 다음과 같다.

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

참고 항목

참조

  1. ^ Jakob Nielsen, "Top-10 애플리케이션-설계 실수", http://www.useit.com/alertbox/application-mistakes.html(2008년 2월 19일).
  2. ^ Buxton, W. (1986). "Chunking and Phrasing and the Design of Human-Computer Dialogues". Proceedings of the IFIP World Computer Congress. pp. 475–480. Archived from the original on 7 June 2004.
  3. ^ "Disk Swapper's Elbow". folklore.org.
  4. ^ "The Grand Unified Model (2): The Finder". folklore.org.
  5. ^ "HTML5 W3C Working Draft". w3.org.
  6. ^ "iPad Drag and Drop, Multitasking, and Split View in iOS 11: Everything you need to know!". iMore. Retrieved 10 October 2017.
  7. ^ Vincent, James (7 June 2017). "The iPhone is also getting drag and drop with iOS 11". The Verge. Retrieved 23 June 2017.
  8. ^ "Moving Beyond Syntax: Lessons from 20 Years of Blocks Programing in AgentSheets" (PDF). Journal of Visual Languages and Sentient Systems. Archived from the original (PDF) on 28 April 2019. Retrieved 29 November 2018.
  9. ^ "Render – Blender Reference Manual". blender.org. Archived from the original on 23 March 2015. Retrieved 24 January 2014.