기존에 사용하던 바코드 환경설정 V2에서 상세 요소조작이 어려웠다. 요소를 미세하게 움직이기 위해서는 정밀한 마우스의 움직임이 필요했다. 이것을 해결하기위해 확대, 축소 기능을 추가하여 요소들이 마우스의 정밀한 움직임이 없더라도 쉽게 맞출 수 있게 추가 하였다.
또한, 바코드를 출력하였을 때, 상품명, 옵션명을 보고 찾기에는 한계가 있었다. 이로 인해 바코드에 상품이미지를 추가하여 보다 쉽게 상품을 찾을 수 있도록 하였다.
템플릿을 관리화면을 분리하여 새로운 화면을 구성하였다. 또한 새로운 기능인 복제기능을 추가하여 기존 템플릿을 복사할 수 있는 기능을 추가하였다.
요구사항 분석
- 요소를 조정할 때 정밀하게 조정할 수 없어 확대기능이 필요함.
- 이전에 사용하던 템플릿을 복제하여 사용원하는 사용자가 있음.
- 바코드에 이미지를 출력하여 좀더 직관적인 바코드를 출력하고 싶음.
템플릿 복제
복제기능을 만드는 부분에 있어 기존에는 없던 기능이라 새롭게 구현하게 되었다.
처음에는 Restful한 API를 목적으로 설계했다만, CLONE 이라는 부분에 대해서는 특수 케이스라 URI 가 barcodePrintTemplates:clone/9 와 같이 :clone 이라는 네이밍을 넣어주었다.
기존에는 템플릿을 추가하는 API가 ASP로 작성이 되어있고, 주 기능이 모두 html, asp 로 작성되어 있고, 2주안에 모두 API로 마이그래이션 하여 끝낼 수 있다는 보장이 없었다. 그래서, 새로운 페이지를 만드는 과정에서 기존에 있는 코드를 사용하여 업무 작업도를 높였다. 따라서 등록, 수정에 대한 부분은 기존 ASP에서 사용하던 코드가 들어 있다.
기존 API에서는 템플릿 Create과정이 없기때문에, 템플릿을 Clone하는 부분이 Create 과정으로 들어가 있다. 복제도 일종의 CRUD 중 C의 역할을 한다고 보여 템플릿쪽의 Create 과정으로 작성하였다.
추후에 템플릿추가 API가 필요하여 제작한다고 하면, Clone 역할하는 기존 코드를 이주하는 부분이 생기는데, 이주하는 부분에 대해서는 크게 영향이 없다고 판단하여 Create 과정에 Clone을 작성하게 되었다.
미리보기 확대 축소
확대, 축소 기능을 제작할 당시에 좀더 쉽게 html 돔 요소들을 제어하고 싶었다.
그래서 panzoom 서드파티 라이브러리를 사용하여 확대, 축소 기능을 구현하였다.
Panzoom 을 사용하고, 확대, 축소를 하였을 때 요소의 틀어짐이 발생할 것으로 예상을 하고 적용시켰었다. 역시나, 좌표값이 틀어져 요소들이 밖으로 나가기 시작하였다. 그렇기에 scale값을 가져와 x, y등 틀어짐에 관련있는 값을 가져와 보정해주었다.
| |
이미지 바코드
상품 이미지 관련해서는 나름 동작하지만, 속도에 취약한 코드가 나와버렸다.
당연스럽게 로컬에서 불러오는 이미지가 매우 빠르기 때문에 1차적으로 로컬에 저장하는 방식을 생각하였다. 그래서 다음과 같은 방식을 도출을 하였고, 추후에 개선되어야 하는 동작으로 남아 있다.
기존 고객사는 2가지 유형의 이미지를 등록하여 사용하고 있다.
- 업로드하여 로컬서버에 사진이 저장되어 있는 상태
- 이미지 주소가 외부로 연결되어 이미지가 주소로 저장되어 있는 상태
위와 같이 2개의 유형으로 이미지가 구성이 되는데, 이때 문제되는 것은 2번, 외부로 연결되어있는 이미지일경우이다. 이때, 외부에서 이미지를 불러오는 과정이 오래 걸리는 부분이고 바코드 생성의 취약한 속도 이슈로 남아 있다.
