CampusDownWiki
누적 인용 16,205한국어KO 2,699EnglishEN 11,189日本語JA 774中文ZH 1,543
캠퍼스다운 홈 ↗
한국어

드래그 앤 드롭

⚙️ 공학·기술 작성 캠퍼스다운 위키 편집부 최종 수정
드래그 앤 드롭은 손가락으로 항목을 눌러 끌고 원하는 위치에 놓아 순서나 위치를 바꾸는 상호작용이에요.
목차
  1. 1. 모바일에서 어려운 이유
  2. 2. 끄는 동안의 피드백
  3. 3. 끌기 없는 대안
  4. 4. 자주 묻는 질문
  5. 5. 참고문헌

모바일에서 어려운 이유

데스크톱에서는 마우스로 끌면 되지만, 모바일에서는 같은 손가락 움직임이 스크롤과 겹쳐요. 그래서 iOS(Apple, n.d.)와 안드로이드(Android Developers, n.d.)는 항목을 길게 눌러 '들어 올린' 뒤에야 끌기가 시작되게 해요. 길게 누르기는 컨텍스트 메뉴와도 겹치니, 누른 뒤 바로 움직이면 끌기, 가만히 있으면 메뉴처럼 규칙을 정해요. 줄 세 개 모양의 끌기 손잡이는 노먼(1999)의 말처럼 끌 수 있다는 단서가 되고, 손잡이 영역은 파히와 동료들(2006)의 엄지 크기를 지켜요.

끄는 동안의 피드백

항목이 들어 올려지면 살짝 커지고 그림자가 생기며 짧은 햅틱 피드백이 와야 해요. 다른 항목은 비켜서며 놓일 자리를 보여줘요. 피츠(1954)의 법칙처럼 먼 곳까지 끌기는 어려우니, 화면 가장자리에 닿으면 목록이 자동으로 스크롤되게 해요. 손가락을 원래 자리나 화면 밖으로 가져가면 취소되게 하고, 놓은 뒤엔 결과를 잠깐 강조해요. 웹은 HTML 드래그 API의 터치 지원이 제한적이라(MDN, n.d.) 포인터 이벤트로 따로 구현하는 경우가 많아요.

끌기 없는 대안

손 떨림이 있거나 스위치·화면 읽기 프로그램을 쓰는 사람은 끌기가 어려워요. WCAG 2.2(W3C, 2023)의 2.5.7은 끌기 동작에 한 번 누르기 대안을 요구해요. '위로 이동', '아래로 이동' 버튼이나 '맨 위로 이동' 메뉴를 함께 두고, 화면 읽기 프로그램에는 '3번째에서 1번째로 이동했어요'처럼 결과를 알려요. 목록 항목을 옆으로 밀어 삭제하는 스와이프 액션과 끌기 방향이 겹치지 않게도 해요.

자주 묻는 질문

드래그를 시작하는 가장 좋은 방법은요?
길게 누르기나 끌기 손잡이를 쓰고, 스크롤·메뉴와 겹치지 않게 규칙을 분명히 해요.
끌기를 못 하는 사용자는 어떻게 하나요?
위·아래 이동 버튼이나 이동 메뉴 같은 한 번 누르기 대안을 함께 둬요.

출처 검토일: 2026-10-27

참고문헌

  1. Apple. (n.d.). Drag and drop. Human Interface Guidelines. 길게 눌러 들어 올리기, 놓을 위치 표시, 취소 동작을 다뤄, 모바일 드래그 흐름을 설계할 때 참고하면 도움이 돼요.
  2. MDN Web Docs. (n.d.). HTML Drag and Drop API. 웹 드래그 이벤트와 모바일 터치 지원의 한계를 설명해, 웹에서 터치 드래그를 따로 구현할 때 참고하면 도움이 돼요.
  3. Android Developers. (n.d.). Drag and drop. 드래그 그림자와 놓기 대상 강조 방법이라, 안드로이드에서 끄는 동안의 피드백을 만들 때 참고하면 도움이 돼요.
  4. Fitts, P. M. (1954). The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology, 47(6), 381–391. 거리가 멀고 목표가 작을수록 오래 걸린다는 법칙이라, 긴 목록 끝까지 끌기 어려운 이유와 자동 스크롤의 근거로 참고하면 도움이 돼요.
  5. Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of MobileHCI 2006 (pp. 203–210). ACM. 엄지 타깃 크기 연구라, 끌기 손잡이 아이콘의 터치 영역을 정할 때 참고하면 도움이 돼요.
  6. Norman, D. A. (1999). Affordance, conventions, and design. Interactions, 6(3), 38–43. 보이는 단서가 행동을 알려준다는 논의라, 줄 세 개 손잡이처럼 끌 수 있음을 보여주는 표시에 참고하면 도움이 돼요.
  7. World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 끌기 동작에 한 번 누르기 대안을 요구하는 2.5.7 기준이 있어, 위·아래 이동 버튼을 함께 둘 때 참고하면 도움이 돼요.

이 이론으로 쓴 레포트·자료

아직 이 이론만 따로 다룬 자료는 없지만, 캠퍼스다운 자료실에서 관련 레포트를 검색해 볼 수 있어요.

레포트 더 찾기 · '드래그 앤 드롭' 검색 결과 보기 →

같이 보면 좋은 이론

최신 아티클전체보기 ›

대학생 공부·과제에 바로 쓰는 새 정보 글

이 문서는 2026년 10월 27일에 마지막으로 수정되었습니다. 내용은 널리 알려진 원전과 교과서를 바탕으로 정리했으며, 레포트에 인용할 때는 아래 참고문헌의 원전을 직접 확인하세요.