iOS 11 이후로 애플 카메라는 기본 포맷을 HEIC로 설정했는데, 이는 사진 품질을 저하시키지 않으면서 파일 크기를 크게 줄일 수 있다고 합니다. 设置-相机-格式에서 확인할 수 있듯이, '고효율’은 HEIC 포맷을, '호환성 최적’은 기존 JPEG 포맷을 의미합니다. HEIC 포맷에 대한 더 자세한 내용은 여기에서 볼 수 있습니다.
이로 인해 발생하는 문제는 현재 모든 웹 브라우저가 HEIC 포맷 이미지를 표시하지 못한다는 점입니다. 따라서 이 포맷의 이미지를 어떻게 변환할지가 중요한 문제가 되었습니다.
저는 종종 애플 사진 앱에서 이미지를 직접 드래그하거나 복사해 Craft에 붙여넣곤 합니다. 그런데 이 포맷 그대로 개인 블로그에 업로드하면 이미지가 표시되지 않아, PNG나 JPEG 같은 범용 포맷으로 변환해야 합니다. 여기서는 Sharp 라이브러리를 사용해 WebP로 변환했습니다(HEIC를 PNG로 변환하면 파일이 너무 커지기 때문입니다).
HEIC 포맷 파일을 처리하려면 이 도구를 전역으로 설치해야 합니다. 그렇지 않으면 다음과 같은 오류가 발생합니다:
1 2 3 4 5
(node:11469) UnhandledPromiseRejectionWarning: Error: source: bad seek to 807962 heif: Unsupported feature: Unsupported codec (4.3000)
(Use `node --trace-warnings ...` to show where the warning was created) (node:11469) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
HEIC 포맷 파일을 처리할 수 없다는 메시지입니다.
문제가 발생하면 가장 먼저 공식 저장소의 이슈에서 해결 방법을 찾아보았습니다. 비슷한 문제를 겪은 사람이 있었습니다:
sharp: Using cached /Users/x/.npm/_libvips/libvips-8.13.3-darwin-x64.tar.br sharp: Integrity check passed for darwin-x64 npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN test2@1.0.0 No description npm WARN test2@1.0.0 No repository field.
added 45 packages from 206 contributors and audited 45 packages in 4.5s
10 packages are looking for funding run `npm fund` for details
found 0 vulnerabilities
그래서 로그에 표시된 캐시 파일 rm -rf /Users/x/.npm/_libvips/ 디렉토리를 삭제하고 다시 실행해도 시스템 버전의 libvips를 사용하지 못했습니다:
sharp: Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.13.3/libvips-8.13.3-darwin-x64.tar.br sharp: Integrity check passed for darwin-x64 npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN test2@1.0.0 No description npm WARN test2@1.0.0 No repository field.
added 45 packages from 206 contributors and audited 45 packages in 10.727s
10 packages are looking for funding run `npm fund` for details
found 0 vulnerabilities
이제는 이 패키지를 디버깅하기로 결정했습니다.
먼저 로그에서 버전 판단과 관련된 것처럼 보이는 Using cached을 키워드로 node_modules/sharp 패키지에서 검색했습니다. sharp/install/libvips.js에서 다음 코드를 발견했습니다:
1
libvips.log(`Using cached ${tarPathCache}`);
계속 찾아보니, 이 함수 상단에 시스템 내장 libvips를 사용할지 아니면 HEIC를 지원하지 않는 자체 컴파일된 바이너리 패키지를 사용할지 결정하는 로직이 있었습니다:
저는 인생의 중요한 선택의 기로에 섰을 때, 누군가 최선의 방법을 알려주어 소중한 시간을 헛되이 보내지 않기를 바라곤 합니다. 그런 마음으로 저는 자주 블로그를 쓰며, 광활한 인터넷의 이 작은 구석에 제게는 단 한 번뿐인 인생 경험을 기록하여 도움이 필요한 분들에게 도움이 되기를 바랍니다.
저는 인생의 중요한 선택의 기로에 섰을 때, 누군가 최선의 방법을 알려주어 소중한 시간을 헛되이 보내지 않기를 바라곤 합니다. 그런 마음으로 저는 자주 블로그를 쓰며, 광활한 인터넷의 이 작은 구석에 제게는 단 한 번뿐인 인생 경험을 기록하여 도움이 필요한 분들에게 도움이 되기를 바랍니다.
