안드로이드에서 사진 촬영 후 이미지 썸네일이 안생겨요 - 웹뷰 트러블 슈팅 기록

date

Dec 8, 2024

slug

android-webview-heic-image-thumbnail-issue

author

status

Public

tags

Android

summary

type

Post

thumbnail

category

updatedAt

Dec 21, 2024 07:32 PM

문제 상황

문제가 발생한 기능 📸

1. 이미지 촬영 버튼 클릭

2. 카메라 촬영

3. 파일 크기 체크

4. 이미지 압축

5. 썸네일 생성

6. 완료 버튼 클릭 시 이미지 업로드

문제를 파헤쳐보자

1. 디버깅을 위한 준비

2. 디버깅 결과 및 원인 분석

🤔 HEIC 포맷이란?

디버깅 코드

// 파일 정보 디버깅
const debugFileInfo = (file) => {
  console.group('📸 촬영된 이미지 정보');
  console.log('파일명:', file.name);
  console.log('타입:', file.type);
  console.log('크기:', `${(file.size / 1024 / 1024).toFixed(2)}MB`);
  console.log('확장자:', file.name.split('.').pop());
  console.groupEnd();
};

/* 
일반 촬영 시:
📸 촬영된 이미지 정보
  파일명: IMG_20240315_123456.jpg
  타입: image/jpeg
  크기: 2.34MB
  확장자: jpg

확대 촬영 시:
📸 촬영된 이미지 정보
  파일명: IMG_20240315_123456.heic
  타입: image/heic    👈 여기가 핵심!
  크기: 0.89MB
  확장자: heic
*/

웹뷰와 모바일 웹의 차이점

썸네일 생성에 실패하게 만드는 근본적인 원인

해결 방안

1. heic2any 라이브러리 도입

// HEIC → JPEG 변환 로직
const convertHeicToJpeg = async (file: File): Promise<File> => {
  if (file.type === 'image/heic') {
    const blob = await heic2any({
      blob: file,
      toType: 'image/jpeg',
      quality: 0.8
    });
    return new File([blob], file.name.replace('.heic', '.jpeg'), {
      type: 'image/jpeg'
    });
  }
  return file;
};

2. 사용자에게 안내사항 전달

• 카메라 앱 설정 열기

• '고급 사진 옵션' 메뉴로 이동

• '고효율 사진' 옵션을 찾아 비활성화

맺음말

• 단순히 "내 환경"에서 테스트하는 것을 넘어서야 한다
• 다양한 안드로이드/IOS 버전, 제조사별 기기 테스트가 필수

• 특히 최신 기기의 새로운 기능들 주시하자

• 각기 다른 설정과 사용 패턴 고려

• '확대 촬영'처럼 특정 상황에서 발생하는 문제도 놓치지 않기

• 예상치 못한 사용 케이스 발굴

• 문제가 발생했을 때 "안 됩니다"가 아닌 "이렇게 하면 됩니다” 가 되도록 하자

• 사용자가 선택할 수 있는 옵션을 빠르게 제공하자