드래그 UI를 선언형으로 만드는 새 방법
원제: Declarative Dragging
왜 중요한가
복잡한 드래그 UI 구현 비용을 대폭 낮춰 교육·수학 시각화·창작 도구 분야 개발 접근성을 높일 수 있다.
Joshua Horowitz, Andrew Blinn, Jeffrey Heer 연구팀이 UIST 2026에서 Best Paper Award를 수상한 '선언형 드래그(Declarative Dragging)' 기술을 공개했다. 개발자가 드래그 시 도달할 미래 상태만 명시하면, 시스템이 이를 추론해 자동으로 드래그 인터랙션을 합성하는 방식이다.
드래그 앤 드롭 UI를 구현하려면 보통 좌표 계산, 애니메이션, 피드백 처리 등 복잡한 코드가 뒤따른다. 연구팀은 이 문제를 뒤집어, 개발자가 '어떤 상태로 가야 하는가'만 선언하면 나머지는 엔진이 처리하는 'D2(Declarative Dragging)' 시스템을 제안했다.
핵심 원리는 모델 주도(model-driven) 방식이다. 인터페이스 작성자가 드래그 가능한 요소에 대해 '미래 모델 상태'를 지정하면, 엔진이 해당 상태들을 투기적으로 렌더링(speculative rendering)하여 각 렌더링에서 요소의 위치를 추출하고, 이 가능한 세계들을 결합해 부드러운 드래그 인터랙션을 자동 생성한다.
이를 구현한 라이브러리 'Dragology'는 SVG 기반 웹 인터페이스용으로 제작됐으며, 대수식 편집기, 베지어 곡선 조작, 브레이드 다이어그램, 카드 더미 등 다양한 데모를 제공한다. 단순 드래그 행동들을 조합(composable)할 수 있고, 플로팅·스냅·트랜지션 같은 기능을 모디파이어로 추가할 수 있다.
프로젝트의 출발점은 2022년 Andrew Blinn이 수학 게임 프로토타입에서 겪은 불편이었다. 메뉴 선택 방식의 한계를 느끼고 모델 주도 드래깅 개념을 화이트보드에 스케치했지만, 구현의 어려움에 2년간 보류했다. 이후 Josh Horowitz가 트리 간 순서 보존 맵을 시각화하려다 이 아이디어를 떠올려 Dragology 라이브러리로 구체화했다. 연구팀은 특히 같은 시스템을 여러 관점에서 동시에 보여주는 병렬 표현 인터페이스에 Dragology가 적합하다고 밝혔다.