Next.js 이미지 업로드 화면에서 EXIF 회전을 놓친 짧은 튜토리얼

휴대폰 사진만 옆으로 누웠다

관리자 업로드 화면에서 데스크톱 사진은 괜찮은데 아이폰 세로 사진만 가로로 보였다. CSS object-fit을 바꿔도 해결되지 않았다. 픽셀은 가로이고 카메라가 EXIF orientation 태그로 방향을 알리는 파일이 있기 때문이다.

원본 방향 확인

문제가 된 실제 파일로 먼저 태그를 확인했다. 화면 모양이나 확장자만 보고 판단하면 틀릴 수 있다.

identify -format '%[orientation]
' portrait-from-phone.jpg
exiftool -Orientation portrait-from-phone.jpg

서버에서 픽셀을 정규화

클라이언트 미리보기만 canvas로 돌렸더니 저장된 원본은 그대로여서 상세 페이지에서 다시 눕는 문제가 생겼다. 저장 직전 sharp의 rotate()로 EXIF를 적용했다.

import sharp from 'sharp';

const normalized = await sharp(await file.arrayBuffer())
  .rotate()
  .resize({ width: 1600, withoutEnlargement: true })
  .jpeg({ quality: 82 })
  .toBuffer();

await storage.put(`uploads/${crypto.randomUUID()}.jpg`, normalized);

올리기 전 확인할 것

• iOS와 Android 사진을 각각 테스트한다.
• 목록과 상세 화면의 방향이 같은지 본다.
• 큰 이미지를 불필요하게 확대하지 않는다.
• MIME 타입과 크기 제한도 별도로 검사한다.

이미지 오류는 CSS만의 문제가 아닐 수 있다. 픽셀과 메타데이터 중 어느 쪽을 기준으로 저장할지 정하는 것이 핵심이었다.