드래그 & 드롭은 새롭고 신선한 기능은 아니지만 사용자의 입장에서 봤을 때 직관적이고 편리한 기능이라는것은 틀림이 없습니다.
저희 프로젝트는 개개인의 일정을 관리하는 웹 서비스로서 일정을 리스트형태로 관리하는데, 드래그 & 드롭으로 리스트에 추가되어있는 일정의 정보를 쉽게 바꿔줄 수 있도록 하자는것이 주 목적이었습니다.
우선 Element의 위치를 실시간으로 이동시키기 위해 가장 효율적인 방법이 무엇인지 결정하게 위해 고려해야할점은 Element의 ‘위치’만을 변화시킬 때 어떤 방법이 가장 적은 변화로 목적을 달성할 수 있는지에 관한것이었습니다.
단순하게 생각하면 이동을 원하는 Element의 position을 absolute로 지정해두고 top과 left 속성을 마우스 위치로 변경해가며 이동시키면 가장 간단한 방법이 되겠지만 DOM의 top과 left가 변경될 시 DOM의 레이아웃이 변경되어 Reflow와 Repaint가 일어나기 때문에 reflow와 repaint를 변경시키지않으면서 DOM의 위치를 변경시킬 수 있는 transform 속성을 이용하기로 했습니다.
좌측은 top과 left를 변경해가며 측정한 성능모니터 결과이고 우측은 transform을 변경해가며 측정한 성능모니터 결과입니다. top과 left를 변경했을때는 초당 스타일 계산에 비례하여 초당 레이아웃 계산이 증가하는것을 볼 수 있습니다. 렌더링에 레이아웃 재계산이 수반된다는 의미입니다. 반면 transform만 변경했을때는 초당 레이아웃 계산이 증가하지 않는것을 볼 수 있습니다. element를 움직일때의 CPU 사용률도 유의미한 차이가 있는것을 볼 수 있습니다. 이처럼 저희는 간단한 변화로 조금이나마 렌더링 효율에 대한 더 나은 해결책을 제시해낼 수 있었습니다.
렌더링 효율에 대한 문제인식과 적절한 해결방안 제시가 긍정적인 효과를 이끌어냈다고 생각합니다.
저희는 최대한 사용자가 보기 편한 UI를 구성해보려고 했었고 드래그 & 드롭시에도 마우스의 위치에 따른 자연스러운 움직임을 원했으나 단순히 DOM을 마우스의 현재 위치로 이동시키는것 만으로는 부족한 부분이 있었습니다.
DOM의 위치를 마우스의 위치 그대로 이동시켰을 경우 사용자가 보게될 화면입니다. 대상을 선택했을 때 좌측상단 모서리를 기준으로 DOM의 위치가 결정되기 때문에 갑자기 선택한 일정이 순간이동되는것을 볼 수 있습니다.