마우스 드래그로 범위 지정과 리사이징 및 이동 구현하기

Context

올리브영의 기획전 콘텐츠 제작은 월 100건 이상 필요했으나 모든 마크업 작업을 건별로 직접 하드 코딩하는 방식으로 진행되었다. 이는 단순 반복적 업무로 인해 작업 효율이 매우 낮았고 불필요한 리소스 소비를 야기했다.

Technical Solution

• 마우스 드래그로 영역 범위 지정: mousedown 이벤트에서 시작 좌표(pageX, pageY)를 기록하고 mousemove 이벤트에서 현재 좌표와의 차이를 계산하여 Math.abs()로 가로/세로 길이 산출 후 transform: translate()와 scale()로 박스 렌더링
• 박스 리사이징 구현: WebKitCSSMatrix를 사용해 기존 transform 문자열에서 translate 값(matrix.e, matrix.f)과 scale 값(matrix.a, matrix.d) 추출, 박스의 4개 귀퉁이로부터 20px 내부를 Resizable area로 지정하여 드래그 위치에 따라 크기 계산
• 박스 이동 구현: 이미 생성된 박스 위의 드래그를 감지하여 classList.contains() 확인 후 마우스 이동 거리만큼 좌표값(left, top) 증가
• 위치값 기준점 선정: screenX/Y 대신 pageX/Y를 사용하여 웹 문서 전체 영역을 기준으로 좌표 계산
• 마우스 이벤트 정리: onmouseleave에서 onmousemove를 null로 초기화하여 화면 밖 드래그 시 이벤트 중단

Key Takeaway

UI 인터랙션 기반 생산성 도구 개발 시 mousedown/mousemove/mouseup의 3단계 이벤트 조합으로 드래그 상태를 관리하고, transform의 translate와 scale을 활용하면 Repaint/Reflow를 최소화하면서 동적 UI를 구현할 수 있다. 또한 WebKitCSSMatrix를 통해 계산된 transform 값을 역으로 추출하면 기존 엘리먼트의 상태에 기반한 연쇄 작업이 용이하다.