[Image Upload]이미지 리사이징(Resizing) with pica lib

개요

#1. 필요 기능

• 프로필 및 상품 이미지 업로드
• 다운로드 시 리사이징을 적용해 속도 향상 및 화면 잘림 방지

---

#2. 업로드 방식 논의

#2-1. 서버 경유 방식

• 서버가 이미지를 받아 S3에 업로드
• 다운로드 시 서버에서 리사이징 처리

#2-2. S3 Presigned URL 방식

• 클라이언트가 직접 S3에 업로드
• 업로드 전 클라이언트에서 pica 라이브러리로 리사이징

#2-3. 향후 계획

• Presigned URL 방식 적용 가능 여부 검토 후 최종 업로드 방식 확정
• 최종 결정 대기 중

---

#3. 최종 결정

• S3 Presigned URL 방식으로 진행

[ 🔎 백엔드 의견 ]
#서버에 이미지를 다량 업로드 하게 될 경우 ec2 저장소 공간 부족 우려
#ec2 사양 업그레이드를 위한 추가 비용이 발생할 수 있으므로 S3를 연동해 처리
#더불어, 일정상 이미지 업로드 서비스를 직접 구현하기보다 S3를 활용하는 게 적절하다 판단

---

내용

#1 필요 기능

• 프로필 및 상품 이미지 업로드
• 다운로드 시 리사이징을 적용해 속도 향상 및 화면 잘림 방지

[ 1. 기능 요구사항 ]

• 단일/다중 업로드 (최대 12장)
• 이미지 업로드 전, preview 지원
• 최종 확인 버튼을 눌러 S3 업로드 진행

---

#2 업로드 방식 논의

• 진행에 대한 최종적인 결정은 백엔드 의견을 최대한 반영하여 진행

[ 1. 서버 경유 ]

• 서버에 파일 업로드용 디렉터리(temp) 준비
• 클라이언트에서 이미지 업로드를 진행하면 temp 디렉터리에 임시 저장
• 사용자가 “확인”과 같은 버튼을 눌러 최종 업로드를 결정하면, 서버는 temp 디렉터리에 저장된 파일을 S3에 업로드
• 클라이언트에서 S3에 업로드된 이미지를 요청 시, 서버는 이미지 리사이징을 수행하고 응답으로 내려줌

[ 2. S3 직접 업로드 ]

• 클라이언트에 업로드 되는 이미지를 임시 저장
• 사용자가 “확인”과 같은 버튼을 눌러 최종 업로드를 결정하면, 클라이언트는 S3 Presigned URL을 통해 직접 업로드
• 이때 업로드 되는 이미지에 리사이징을 수행하고 업로드
• 클라이언트에서 S3에 업로드된 이미지를 요청하면 그대로 S3는 그대로 내려줌 (URL 접근)

[ 3. 프론트 확인 필요 ]

• 서버 경유 방식에서 프론트는 백에서 제공하는 API만 호출하면 됨
• S3 직접 업로드 방식에서 프론트는 이미지 리사이징의 역할도 수행해야 함
• 이미지 리사이징에 필요한 적절한 라이브러리를 조사 및 검증해서 진행 가능한지 확인이 우선돼야 함

---

#3 라이브러리 조사 및 검증

[ 1. browser-image-compression ]

• npm 경로
• https://www.npmjs.com/package/browser-image-compression

• 장점:
  • 리사이징 + 압축 품질 조절 가능
  • API가 단순해서 빠르게 적용 가능
• 단점:
  • Vite/Webpack 환경에서 불필요한 의존성(Cordova 등) 문제 → 불안정
• 의견:
  • 실제 사용했을 때, Cordova 의존성 문제가 발생
  • Github issue에도 등록 됐으나 답글이 달리지 않은 상태라서 해당 라이브러리는 미사용 결정
  • https://github.com/Donaldcwl/browser-image-compression/issues/230

•  

[ 2. pica ]

• npm 경로
  • https://www.npmjs.com/package/pica

• 장점:
  • 순수 브라우저 환경 최적화 (Web Worker 지원)
  • 고품질 리사이징(특히 다운샘플링 품질이 좋음)
  • 의존성 가벼움, 안정적
• 단점:
  • 포맷 변환(WebP, AVIF 등)은 canvas.toBlob()에 의존 → 브라우저 지원에 따라 제한
• 결과:

---

#4 pica 라이브러리 진행

• pica 라이브러리로 진행하며 컴포넌트 구조는 크게 3가지로 구성
  • 이미지 리사이저 (imageResizer.js)
  • 이미지 업로더 커스텀 훅 (useImageUploader.js)
  • 이미지 업로더 컴포넌트 (ImageUploader.jsx)
• 이미지와 S3 Presigned URL이 1:1 관계
  • 사전에 압축 완료된 이미지 리스트로 서버로 전달해 S3 Presigned URL List 응답 받기
  • 이후 발급된 URL로 S3에 직접 업로드
  • 업로드 결과를 서버에 알림