Chapter 5. 팀 프로젝트 4주차 WIL

 Weekly I Learned

스파르타 마지막 프로젝트의 4주 차가 끝이 났다. 
이번 주에 있던 트러블 슈팅을 정리해 보도록 하자!!

---

[ 🚨 트러블 슈팅 및 기술적 의사 결정 ]

1. WebP타입 변환 시 손실 및 무손실 이미지 크기 비교하기

2. 이미지 내부의 메타데이터가 삭제되는 위치 추적하기

3. ProcessServer 분리 및 이유

---

1. WebP타입 변환 시 손실 및 무손실 이미지 크기 비교하기

• WebP 변환 코드
  • 원본 이미지를 복사한 copyOriginlFile의 손실 압축 및 무손실 압축 크기 비교하기

//  원본 복사 이미지 WebP 파일로 변환
public File convertToWebp(File copyOriginalFile) {
  try {
    String uploadFileName = "uploadFileName.webp"; // MINIO에 업로드할 최종 파일 이름
    File outputFile = new File(copyOriginalFile.getParent(), uploadFileName);

    return ImmutableImage.loader()
            .fromFile(copyOriginalFile)
            // .output(WebpWriter.DEFAULT, outputFile); // 손실 압축
            // .output(WebpWriter.MAX_LOSSLESS_COMPRESSION, outputFile); // 무손실 압축
  } catch (Exception e) {
    throw new RuntimeException(e.getMessage());
  }
}

• 원본 이미지
  • 원본 : 162.7 KIB 

 

• 손실 및 무손실 압축 크기 비교
  • 무손실 압축 ( Lossless Compression ) : 99.4 KIB
    • 줄어든 크기 : 63.3 KiB / 줄어든 비율 : 38.96%
  • 손실 압축( Lossy Compression  ) : 11.7 KIB
    
    • 줄어든 크기 : 151.0 KiB / 줄어든 비율 : 92.9%

원본 이미지가 작고, 단순한 이미지 라서 그런지 상당히 많이 압축된 모습을 볼 수 있다.

---

2. 이미지 내부의 메타데이터가 삭제 되는 위치 추적하기

• 원본 이미지
  • 사용자의 민감한 정보인 카메라 데이터 및 GPS 정보가 들어가 있는 것을 볼 수 있다.

• WebP 변환 이미지
  • 카메라 기종과 GPS 데이터가 삭제된 것을 볼 수 있다

---

삭제된 메타 데이터 위치 추적하기❗❗

🤔 그렇다면 InputStream으로 다운 받고, 리사이징 후 WebP로 변환하는 과정 중 메타데이터가 삭제 됐다는 것인데 대체 어디서 삭제된 것일까..? 한 번 찾아보도록 하자!!

---

1. 데이터 타입을 InputStream으로 다운로드 받을 경우

MINIO에서 이미지를 다운 받을 때, 데이터 타입을 InputStream으로 받고 있는 모습을 볼 수 있다. 혹시 이 과정에서 메타 데이터가 사라지는지 확인해 보도록 하자!

   @KafkaListener(topics = "image-upload-topic", groupId = "image-upload-group")
  public void listen(String message) {
    // 0. 확장자 추출
    String extension = extractExtensionFromMinio(message);
    // 1. 이미지 다운로드
    InputStream originalFile = downloadImage(message);
    // 2. 원본 이미지 복사
    File copyOriginalFile = copyOriginalImage(originalFile,extension);

    // 메타 데이터 확인을 위한 업로드 테스트
    uploadCopyFileTest(copyOriginalFile, extension);

 

• 원본 이미지 복사 후 메타데이터 확인하기
  • MINIO 스토리지에 CopyFile이 업로드된 모습을 볼 수 있다

• CopyFile 메타데이터 확인
  • 메타데이터가 남아 있는 모습을 봐서 InputStream 으로 다운받는 것은 메타 데이터가 삭제되는 것과 연관이 없는 듯하다.

---

2. 리사이즈 시 thumbnailator 라이브러리를 사용할 경우

이미지 리사이즈 시 thumbnailator 라이브러리를 사용하는 모습을 볼 수 있다. 혹시 이 과정에서 메타 데이터 가 사라지는지 확인해 보도록 하자!

  @KafkaListener(topics = "image-upload-topic", groupId = "image-upload-group")
  public void listen(String message) {
    // 0. 확장자 추출
    String extension = extractExtensionFromMinio(message);
    // 1. 이미지 다운로드
    InputStream originalFile = downloadImage(message);
    // 2. 원본 이미지 복사
    File copyOriginalFile = copyOriginalImage(originalFile,extension);
    // 3. 복사 이미지를 300x300 리사이징
    // TODO 나중에 width, height 값을 직접 받아서 처리하도록 수정
    File resizedFile = resizeImage(copyOriginalFile, 300, 300);

    // 메타 데이터 확인을 위한 업로드 테스트
    uploadResizeFileTest(resizedFile, extension);

• MINIO 스토리지에 ResizeFile이 업로드된 모습을 볼 수 있다

• ResizeFile 메타 데이터 확인
  • 메타 데이터가 삭제된 모습을 볼 수 있다.

• Thumbnailator의 기본 동작
  • Thumbnailator는 이미지 리사이징을 수행할 때 기본적으로 메타 데이터가 삭제됩니다.
  • 즉, 이미지의 크기를 조정하면서 EXIF 정보나 GPS 메타 데이터 등의 부가 정보를 제거할 수 있습니다.
  • 이 라이브러리는 주로 이미지의 픽셀 데이터에 집중하기 때문에 메타 데이터는 처리하지 않습니다.

---

3. WebP타입으로 변환할 경우

앞선 과정에서 이미지 리사이즈 시 메타 데이터가 사라지는 모습을 볼 수 있었다. 그렇다면 원본 이미지를 리사이즈를 하지 않고, WebP로 변환했을 경우는 어떻게 될까?

  @KafkaListener(topics = "image-upload-topic", groupId = "image-upload-group")
  public void listen(String message) {
    // 0. 확장자 추출
    String extension = extractExtensionFromMinio(message);
    // 1. 이미지 다운로드
    InputStream originalFile = downloadImage(message);
    // 2. 원본 이미지 복사
    File copyOriginalFile = copyOriginalImage(originalFile,extension);
    // 3. 복사 이미지 WebP로 변환
    File webpFile = convertToWebp(message, copyOriginalFile);
    
    // 메타 데이터 확인을 위한 업로드 테스트
    uploadWebFileTest(webpFile);

• MINIO 스토리지에 WebPFile이 업로드된 모습을 볼 수 있다

• WebPFile 메타 데이터 확인
  • 메타 데이터가 삭제된 모습을 볼 수 있다.

 

• WebP 포맷 특성
  • WebP` 포맷은 이미지 압축을 목표로 개발된 포맷입니다.
  • JPEG나 PNG와는 다르게 EXIF와 같은 `메타 데이터` 지원이 제한적입니다.
  • WebP 포맷은 이미지의 데이터 크기를 줄이기 위해 일부 `메타데이터`를 아예 저장하지 않을 수 있습니다.
  • 따라서, `WebP`로 변환할 때 원본 이미지에 포함된 `메타 데이터`는 자연스럽게 삭제될 가능성이 있습니다.
• •  

---

2. ProcessServer 분리 및 이유

• ProcessServer 분리 전
  • ProcessServer에서 리사이징과 WebP 변환이 모두 일어난다 

---

• ProcessServer 분리
  • convertServer(WebP 변환) / resizeSever(리사이징) 
    • 리사이즈의 경우 시간이 걸리는 작업이다
    • 작업량이 많아 부하 분산이 필요한 경우, resizeSever를 늘려 로드밸런싱을 통해 시스템의 성능과 부하 관리를 할 수 있다.

---