프런트엔드 개발자로서 이미지 게시 및 표시와 관련된 프로젝트를 수행했거나 현재 작업하고 있을 가능성이 높습니다. 아직 안 했다면 곧 그렇게 될 것입니다. 그래서 최근 프로젝트 작업을 마친 후 사용자가 제공한 이미지를 표시하는 데 문제가 발생했습니다.

모든 것이 어떻게 풀어졌는가
가장 큰 문제는 크기를 처리하는 방법이었고, 이미지의 높이 대 너비는 더욱 그렇습니다. 이미지를 개체 맞춤으로 설정: 표지는 이미지 컨테이너를 채우는 데 완벽한 솔루션처럼 보였습니다. 그러나 이로 인해 다른 문제가 발생했습니다. 사용자는 다양한 크기의 이미지를 업로드했습니다. 일부는 크기를 조정하고 다른 일부는 동일한 컨테이너에 자르기 시작했습니다. 이러한 불일치의 결과로 UI가 그다지 매력적이지 않게 되었습니다. 특히 사용자의 프로필 사진이 눈에 잘 띄지 않는 방식으로 잘렸을 때 더욱 그렇습니다.

솔루션
나는 더 나은 해결책을 찾기로 결정했습니다. 소셜 미디어 플랫폼이 이미지 업로드를 처리하는 방식을 에뮬레이트하면서 사용자가 업로드하기 전에 이미지를 자르고 미리 볼 수 있는 기능을 제공하는 것이 좋다고 생각했습니다. 약간의 조사 끝에 마침내 React-image-crop 패키지를 찾았습니다. 이 패키지는 사용자에게 실시간으로 이미지를 자르는 기능을 제공하여 문제의 일부를 해결합니다.

자르기 기능을 테스트하던 중 제가 작업 중인 이미지의 크기가 9.5MB인 것을 확인했습니다. 그때 문득 생각났습니다. 업로드하기 전에 클라이언트 측에서 이미지를 압축하면 어떨까요? 백엔드에서 이 문제도 처리하더라도 한 단계 더 일찍 이미지를 최적화할 수 있으면 대역폭이 절약되고 업로드 시간이 향상됩니다.

이로 인해 또 다른 편리한 패키지인 browser-image-compression이 생겼습니다. 이것을 React-image-crop과 병합하면 이제 즉시 이미지를 자르고 압축할 수 있으며 큰 효과를 얻을 수 있습니다.

절충점
이 솔루션에는 몇 가지 장단점이 있습니다. 우선, 프로젝트에 두 개의 패키지를 더 추가해야 합니다. 또한 30KB 미만으로 들어오는 이미지는 실제로 압축 오버헤드로 인해 더 커지게 됩니다.

또한 사용자가 클릭하여 이미지를 선택하거나 드래그 앤 드롭할 수 있도록 Shadcn UI 구성 요소와 React-dropzone 패키지를 사용하여 스타일을 지정했습니다.

Next.js 이미지 구성 요소 사용
더 나은 성능을 위해 이 솔루션을 이미지를 자동으로 최적화하는 Next.js 이미지 구성 요소와 결합할 수 있습니다. Next.js 이미지 구성 요소는 적절한 크기의 이미지를 제공하여 로딩 시간과 전반적인 성능을 향상시키는 데 도움이 됩니다. 자르기 및 압축을 Next.js 이미지 최적화 기능과 통합하면 사용자에게 더욱 부드럽고 효율적인 경험을 제공할 수 있습니다.

데모 및 소스 코드
여기에서 라이브 데모를 시도해 볼 수도 있습니다.

여기에는 소스 코드 GitHub 저장소도 있습니다. 유익하셨다면 별표 부탁드립니다! 프로젝트에 이 솔루션을 사용하는 것을 고려하고 계시다면 알려주세요.