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

간단 소개

올리브영은 마우스 드래그 기반의 기획전 제작 자동화 툴을 개발하여 마크업 작업 효율성을 향상시키고 리소스를 절감했습니다.

AI Summary

기획전 제작 자동화 툴 개발 배경
- 올리브영은 매월 100건 이상의 기획전을 제작하며, 기존에는 마크업 작업을 하드 코딩 방식으로 진행하여 비효율적인 리소스 소비가 발생했습니다.
- 이러한 문제점을 해결하기 위해 마우스 드래그를 이용한 영역 지정, 리사이징, 이동 기능 등을 포함한 기획전 마크업 자동화 툴을 개발하게 되었습니다.
마우스 이벤트 및 핵심 기능 구현
- 마우스 이벤트 객체의 다양한 위치 프로퍼티(screenX, screenY, clientX, clientY, pageX, pageY, offsetX, offsetY)를 활용하여 드래그 앤 드롭 기능을 구현했습니다.
- transform: translate와 scale 속성을 사용하여 박스의 위치와 크기를 유동적으로 변경하고, WebKitCSSMatrix를 활용하여 기존 박스의 크기와 위치값을 쉽게 계산했습니다.
기획전 제작 툴의 효과 및 결론
- 개발된 툴은 마우스 드래그를 통해 영역 지정, 리사이징, 이동 기능을 제공하며, 작업자는 링크 설정, 이미지 삽입 등의 액션 유형을 설정할 수 있습니다.
- 툴 도입 후 마크업 작업에 필요한 리소스가 절감되었고, 작업 속도와 효율성이 향상되었습니다. 올리브영은 지속적인 프로세스 개선을 통해 효율성을 높여가고 있습니다.