프론트엔드
마우스 드래그로 범위 지정과 리사이징 및 이동 구현하기
두줄요약
매월 반복되던 기획전 마크업 작업을 줄이기 위해 드래그 기반 제작툴을 구축했습니다.\n영역 지정, 리사이징, 이동과 마크업 자동 완성으로 작업 효율을 높였습니다.
문제 상황
- 매월 100건 이상 발생하는 기획전 마크업을 건별 하드코딩으로 처리하는 비효율
- 통이미지 기반 링크 영역 지정, 반복 작업으로 인한 낮은 작업 효율과 리소스 낭비
해결 방법
- 마우스 드래그로 액션 영역 지정, 리사이징, 이동을 지원하는 기획전 제작툴 구축
- 박스 위치와 크기를 transform의 translate, scale로 관리하고, WebKitCSSMatrix로 기존 값 추출
- 영역별 액션 유형을 선택해 미리 정의된 마크업과 위치값을 조합하는 자동 완성 방식 적용
적용해볼 점
- 드래그 시작 위치와 박스 경계를 기준으로 리사이즈와 이동을 분기하는 인터랙션 설계
- 반복적인 마크업 작업을 도구화해 운영 효율을 높이는 접근