업로드하면 사진이 옆으로 눕는 이유

휴대폰으로 제품을 촬영합니다. 기기를 옆으로 돌려 쥐고 셔터를 누릅니다. 화면에서는 똑바로 서 있습니다. 그런데 마켓플레이스 업로드 폼에 도착한 사진은 옆으로 누워 있습니다. 같은 파일인데 90도가 어긋난 채로요.

휴대폰이 고장 난 것이 아닙니다. 사진은 파일 안에서 실제로 옆으로 누워 있을 수 있고, 촬영한 그 순간부터 그랬습니다. 휴대폰은 그것과 상관없이 늘 똑바로 세워 보여 줍니다. 업로드 폼은 그러지 않았을 뿐입니다.

여러분의 파일은 둘 중 한 가지 상태에 있고, 어느 쪽인지 가리는 데는 확인 한 번이면 충분합니다.

카메라는 센서가 본 그대로 사진을 저장합니다

이미지 센서는 휴대폰에 단단히 고정된 직사각형입니다. 여러분이 몸을 돌려도 센서는 돌지 않습니다. 세로로 촬영해도 센서는 여전히 가로 프레임을 기록하고, 피사체는 그 안에 옆으로 누운 채 담깁니다.

많은 카메라는 수백만 개의 픽셀을 다시 쓰는 수고를 피하려고, 대신 "보여 주기 전에 90도 돌려라"라는 뜻의 작은 숫자 하나를 메타데이터에 적어 둡니다. 어떤 카메라는 저장할 때 픽셀 자체를 회전시키고 파일에는 이미 똑바르다고 표시합니다. 같은 장면을 찍어도 휴대폰마다 결과가 다른 이유가 이것입니다. JPEG에서 그 숫자가 Exif 태그 274, 즉 Orientation이며, 회전뿐 아니라 좌우가 뒤집힌 프레임까지 나타낼 수 있습니다.

어떤 프로그램은 플래그를 존중하고, 어떤 프로그램은 무시합니다

요즘 브라우저는 이 값을 제대로 읽습니다. CSS image-orientation 속성의 초깃값은 from-image이고, MDN은 이렇게 못 박아 둡니다. "이미지에 담긴 EXIF 정보를 사용해 이미지를 알맞게 회전시킨다." 2020년 4월부터 주요 브라우저 전반에서 이렇게 동작해 왔습니다.

브라우저가 아닌 것은 여전히 이 태그를 무시할 수 있습니다. 웹 표준은 태그를 존중하는 쪽으로 수렴했지만, 서버 쪽 디코더와 썸네일 생성기, 이미지 라이브러리 중 상당수는 그 수렴 이전에 작성됐고 태그를 아예 들여다보지 않습니다. 그렇게 하라고 강제하는 것도 없습니다.

그러니 질문은 "내 사진이 옆으로 누웠나"가 아니라 "그것을 표시한 쪽이 플래그를 읽었나"입니다. 갤러리 앱은 읽습니다. 마켓플레이스의 썸네일 생성기는 아닐 수 있습니다.

갤러리에서 돌리면 플래그만 바뀔 수도 있습니다

회전 버튼을 누르면 결과는 앱에 따라 달라집니다. 아주 다른 두 가지 일이 벌어질 수 있습니다.

• 앱이 방향 값만 바꾸고 픽셀 데이터는 손대지 않습니다. 즉시 끝나고, 손실도 없고, 플래그를 무시하는 쪽에는 아무 변화도 보이지 않습니다. 파일 안에서 사진은 여전히 옆으로 누워 있습니다.
• 앱이 다시 인코딩합니다. 픽셀을 디코딩해 돌린 다음, 플래그를 초기화한 새 파일로 씁니다. 회전이 픽셀에 박혀서 어디서든 그대로 살아남습니다. PNG나 무손실 WebP라면 치를 대가가 없고, JPEG라면 보통 재인코딩 한 세대만큼의 손실이 따릅니다. 한 번은 치를 값어치가 있지만 반복할 값어치는 없습니다.

앱이 어느 쪽을 택하는지는 버튼만 봐서는 알 수 없고, 같은 앱이라도 버전에 따라 달라져 왔습니다. 짐작하지 말고 결과물을 확인하세요.

더 나쁜 것은 픽셀은 돌려 놓고 예전 메타데이터를 그대로 복사하는 도구입니다. 플래그는 여전히 "돌려라"라고 말하는데 픽셀은 이미 돌아 있으니, 플래그를 존중하는 쪽에서는 사진이 두 번 돌아갑니다.

내 파일이 어느 상태인지 가려내는 방법

더 뚫어져라 본다고 판가름 나지 않습니다. 미리보기가 아닌 무언가를 확인해야만 알 수 있습니다.

• 모양과 숫자를 비교하세요. 세로로 보이는 사진인데 파일 속성에는 높이보다 너비가 크다고 나온다면, 픽셀은 가로이고 플래그가 일을 하고 있는 것입니다. 일부 뷰어는 이 숫자까지 보정하므로, 숫자가 어긋나면 확실한 증거이지만 맞아떨어진다고 해서 증명되는 것은 아닙니다.
• 플래그를 직접 읽으세요. 브라우저, 데스크톱 뷰어, 파일 탐색기 썸네일은 이제 거의 다 태그를 존중하므로 이들이 서로 일치한다고 해서 증명되는 것은 없습니다. 원본이 아니라 사본으로 작업하면서 Exif 뷰어로 열어 Orientation 값을 직접 확인하세요. 흔히 "Normal"로 표시되는 1 이외의 값이라면, 플래그가 일을 하고 있고 픽셀은 똑바르지 않다는 뜻입니다.

다른 무엇이 파일에 손대기 전에 방향부터 정리하세요

remover.bg는 PNG, JPEG, WebP를 25 MB까지 받아 배경이 지워진 새 파일을 돌려줍니다. 사진 편집기가 아니라 배경 제거 도구입니다. 회전은 휴대폰의 사진 편집기나 디자인 도구에서, 업로드하기 전에 끝내야 할 일입니다.

이 순서가 중요한 이유는 새 파일을 만드는 작업이기 때문입니다. PNG와 WebP 컨테이너에는 모두 Exif를 넣을 자리가 있습니다. 구글의 WebP 명세는 메타데이터를 "'EXIF' 또는 'XMP ' 청크"에 담도록 허용합니다. 하지만 회전에 쓴 편집기가 내보내는 파일에 그 정보를 실제로 써 넣는지는 그 편집기가 정하는 것이지 여러분이 정하는 것이 아닙니다. 회전을 픽셀에 박아 두면 잃어버릴 플래그 자체가 남지 않습니다. 이 형식은 변환 없이 WebP로 내보내기 메모에서 다룹니다.

이렇게 진행하면 됩니다.

1. 갤러리에서 회전 버튼을 누르는 대신, 편집기에서 회전해 사본으로 내보내세요.
2. 내보낸 사본에서 Orientation 값을 확인하세요.
3. 그 파일을 배경 제거에 업로드하세요.
4. 누끼를 단색이나 직접 준비한 사진 위에 올리고, 표면에 놓인 느낌이 필요하다면 그림자를 더하세요.

HTTP API로 대량 배경 제거 작업을 돌리는 팀이라면 파이프라인 앞단에서 방향부터 정규화해야 합니다. 옆으로 누운 원본 하나는 옆으로 누운 누끼 하나가 되고, 그 일이 천 번 반복됩니다. 방향은 아마존 상품 이미지 규정에서 다루는 배경 규칙 바깥에 있는 문제이지만, 다른 것을 아무리 잘 지켰어도 옆으로 누운 리스팅은 성의 없어 보입니다.

몸에 붙일 습관

미리보기가 아니라 파일을 믿으세요. 회전은 내보내기로 하고, 사본에서 Orientation을 한 번 읽으세요. 그러면 브라우저에서도, 썸네일 생성기에서도, 인쇄소의 작업 대기열에서도 사진이 똑바로 섭니다.