1.배경

사내에서 이벤트 프로젝트를 진행할 때 기존에는 통 이미지를 받아서 버튼에 바로 가기 등 간단한 기능만 넣는 경우에서
페이지 내부에 동적인 이미지(gif)가 들어가는 경우가 거의 무조건이었고

디자이너 : 개발자님 gif 만들었는데 개발서버 이벤트 페이지에 적용해 주세요
개발자 : 넵 근데 이거 픽셀이 깨져 보이네요
디자이너 : 수정해서 다시 드릴게요

위와 같은 경우가 제일 많을 때는 한 프로젝트 당 20번 정도 발생했고
개발적으로 약간의 연타가 왔고 서로에게 시간 소모가 많다고 생각되어 다음 프로젝트는 어떻게 개선할 수 있을까 고민하였다.

2.해결 과정

디자이너님과 회의를 하였고 이벤트 페이지 환경에서 gif가 깨지는지만 알면 된다고 하셨고
미리 보기 툴을 만들기로 결정하였다.

기능 사항은
1. 이벤트 페이지 배경 이미지(통 이미지) 업로드 기능
2. gif를 5개 정도 업로드할 수 있는 기능
3. 원하는 위치로 드래그할 수 있는 기능
4. 이미지 사이즈 조절(기본값은 원본 사이즈)
정도로 구상했다.

드래그 기능은 react-spring와 react-use-gesture를 사용해서 구현했고
기능 구현은 크게 어렵지 않았다.

3.결과

해당 디자이너님으로부터 피드백을 받았는데 업무요청이 80% 정도 감소되었다고 하셨다!