Drag and drop, 1984 Macintosh, 직접 조작의 정점

한 줄로

객체를 마우스로 끌어다 놓는 동작입니다. 1984년 매킨토시에서 처음 본격 도입한 "직접 조작" UI의 정수입니다.

어디서 왔나

1981 Xerox Star에서 처음 기술적으로 구현됐지만, 대중화는 1984 매킨토시였습니다. 사용자가 화면의 아이콘을 마우스로 잡아서 끌어다 다른 위치에 놓는 동작입니다.

이게 GUI의 결정적 차이점이었습니다. 명령어 ("move file1 trash") 대신 직접 손으로 옮기는 듯한 경험입니다. "직접 조작(direct manipulation)"이라는 학술 용어가 이 패턴을 설명합니다.

사용처

파일 이동: 폴더에서 폴더로.

휴지통 버리기: 파일을 휴지통으로 드래그.

순서 변경: 리스트 항목 재정렬.

이미지 업로드: 브라우저에 파일 드래그.

Trello / Asana: 칸반 보드의 카드 이동.

HTML5 Drag and Drop API

2010년경 HTML5가 표준화했습니다. 모든 모던 브라우저에서 지원합니다.

<div draggable="true" ondragstart="...">드래그 가능</div> <div ondrop="..." ondragover="...">여기에 놓기</div>

다만 라이브러리(react-dnd, dnd-kit) 사용이 더 편합니다.

모바일에서

터치 디바이스의 long press + drag입니다. iOS는 2017년부터 iPad에서 드래그앤드롭을 시스템 차원으로 지원합니다.

접근성

키보드로 드래그를 흉내내려면 어떻게 할까요? "Space로 잡기, 화살표로 이동, Space로 놓기" 패턴이 권장됩니다. 라이브러리들이 자동 처리해 줍니다.

바이브 메이커가 챙길 한 가지

드래그앤드롭은 강력하지만 발견이 어렵습니다. 시각적 단서 (점선 테두리, 그림자) + 키보드 대안 제공이 필수입니다.

관련

Affordance · Tab bar · Tabs