[Node.js] sharp 로 이미지 리사이징 해서 multer로 업로드 하기

 

 

 

회사에서 만든 커뮤니티의 이미지 업로드 스펙을 계속해서 변경해왔다.

최초 개발은 외주로 진행했는데 대부분의 스펙을 기존 리뷰 페이지의 스펙을 가지고 와서 개발을 했다.

그런데 사용자 경험 상 이슈가 다양하게 발생하여 현재 커뮤니티 이미지 업로드 문제에 오래 매달리고 있는데, 현재 진행하는 이미지 리사이징 프로젝트에 대해서 기록하려고 한다.

 

 

---

 

최초 개발 

1MB 제한으로 4개까지 업로드 할 수 있도록 제한 / 1개씩 개별 선택

▶ 최초 개발 시 서버 용량과 로딩 속도에 대한 이슈로 1MB 제한을 걸어두었다.

▶ 모바일에서 바로 업로드 할 경우 이미지 업로드 시 하단의 크기 선택을 이용해 사용자가 직접 크기를 줄이지 않는 이상 1MB 이내로 커뮤니티 이미지 업로드 불가

▶ 이미지 용량이 생각보다 커서 1MB 제한은 사용자의 불편을 초래한다고 생각했다.

 

 

1차 수정

3MB 제한으로 4개까지 업로드 할 수 있도록 제한 / 1개씩 개별 선택

▶ 모바일 고화질 이미지는 기본적으로 3MB는 거뜬히 넘어가나 로딩 속도 이슈로 인해 크게 업로드 용량을 수정하지는 못했다.

▶ 서비스를 개발하신 외주 담당자님께 요청하여 nginx 설정 파일을 수정했음 

 

 

 

2차 수정

5MB 제한으로 4개까지 업로드 할 수 있도록 제한 / 1개씩 개별 선택

▶ 여전히 3MB인 경우 사용자가 업로드 할 때 매우 불편함을 인지해 로딩 속도를 감수하고 5MB까지 업로드 용량 수정

▶ 이 때는 외주 개발 기간이 끝나 스스로 nginx 파일 용량 수정함

[Ubuntu] VSCode로 nginx 파일 용량 늘리러 가보자

 

 

3차 수정

5MB 제한으로 4개까지 업로드 할 수 있도록 제한 / 드래그해서 여러개 한 번에 선택

▶ 기존 코드에서 multiple 선택이 될 수 있도록 코드를 수정했다.

▶ input file 에서 multiple 적용 시 변경되는 업로드 코드를 전반적으로 수정하면서 DB까지 업로드 하는 코드를 수정해보았다. 

▶ 업로드 하는 사용자의 사용 경험이 매우 좋아졌다는 피드백을 받았다. 🤗❣

▶ multiple로 input에 속성을 주었을 때 파일 선택 창에서 드래그 했을 때 갯수 제한을 만드는 방법은 없다고 하여 확인 버튼을 눌렀을 때 여러가지 제약을 만들었다.

(파일 선택 후 확인 - 총 filelength 확인해서 4개 이상이면 return false, 파일 2개 선택 후 3개 추가 선택하면 미리보기 부분 array 확인해서 return false 등)

 

 

4차 수정 (현재 진행 중)

5MB 제한으로 4개까지 업로드 되나 업로드 시 리사이징 될 수 있도록 / 드래그해서 여러개 한 번에 선택

▶ 처음에는 클라이언트(브라우저)에서 리사이징 되는 방향을 생각

▶ AWS EC2 서버를 쓰는데 비용이 발생하는 것을 원치 않음

▶ 그러나 multer로 정보를 넘겨야 하는 부분에서 canvas 로 이미지 리사이징 하는 구조를 적용하기 어렵다고 느껴짐

▶ EC2 node에 multer+sharp 적용하는 것이 기존 코드에서 수정 공수가 별로 들지 않는다고 생각

▶ 그러나 sharp 패키지를 설치하는 것이 두려움 (내 로컬이 아닌 곳에 한 번도 설치해 본 적 없음...)

▶ 여러가지 정보를 찾아 본 결과 클라이언트에서 리사이징 하는 것 보다 서버에서 리사이징 하는 것이 간단하고(sharp 이용 시), 현재 서버에 크레딧을 거의 사용하지 않고 있으며, 현재 브라우저 내 로딩 속도 이슈가 너무 커서 더 이상 브라우저에는 부담을 주지 않으려고 서버로 결정 

▶ 어차피 결정권자는 나고...