이미지 속성 검사 도구

개발 배경: 왜 이미지가 제멋대로 회전할까?

디자인 업체에서 받은 사진으로 퍼블리싱 작업을 하던 중 난관에 부딪혔다. PC 탐색기에서는 멀쩡하게 보이는 가로 사진이, 웹 브라우저나 모바일 환경에서만 세로로 눕거나 뒤집혀 보이는 현상이 생긴 것이다.

처음에는 단순한 CSS 문제라고 생각했지만, transform: rotate()로 강제로 돌리면 원본 비율이 깨지거나 레이아웃이 틀어지는 부작용이 있었다. 근본 원인을 파고들다가 EXIF Orientation이라는 개념을 알게 됐고, 이를 눈으로 직접 확인하고 검증할 수 있는 도구가 필요하다고 느껴 이 프로젝트를 시작했다.

문제 분석: 브라우저마다 다른 렌더링

가장 혼란스러웠던 점은 같은 이미지라도 환경에 따라 다르게 보인다는 것이었다.

예를 들어 스마트폰으로 찍은 사진을 <img> 태그로 불러오면 옆으로 누워 보이는데, 같은 파일을 브라우저 주소창에 직접 입력해 열면 정상적인 방향으로 보였다.

조사해 보니 브라우저가 EXIF 메타데이터를 처리하는 방식의 차이 때문이었다.

• Firefox — CSS image-orientation: from-image;를 지원해 EXIF 정보를 읽고 이미지를 자동으로 회전시켜 준다.
• Chrome / Safari — 이미지 파일을 직접 열 때는 EXIF를 반영하지만, 당시 작업 환경에서는 <img> 태그로 넣은 이미지의 EXIF 회전 값을 무시하고 원본 그대로 그리는 경우가 있었다.

📌 참고

지금은 Chrome 81, Safari 13.1부터 <img>에도 EXIF 방향이 기본으로 적용된다. 다만 Canvas로 이미지를 처리하거나 오래된 브라우저·웹뷰를 지원해야 한다면 여전히 같은 문제를 만날 수 있다.

해결 과정: EXIF 데이터 직접 파싱

결국 크로스 브라우징 문제를 해결하려면 브라우저의 기본 동작에 기댈 수 없었다. 그래서 JavaScript로 이미지의 바이너리 데이터를 직접 읽어 EXIF 태그를 파싱하고, Orientation 값에 따라 Canvas로 이미지를 다시 그리는 방식을 택했다.

1. FileReader로 이미지를 ArrayBuffer 형태로 읽는다.
2. DataView로 JPEG 마커(0xFFE1)를 찾아 EXIF 데이터를 추출한다.
3. 0x0112(Orientation) 태그 값을 찾아 회전 각도를 계산한다.
4. Canvas에 이미지를 그릴 때 계산한 각도만큼 rotate()와 scale()을 적용한다.

이렇게 해서 어떤 브라우저, 어떤 기기에서든 사용자가 의도한 방향대로 이미지를 보여 줄 수 있게 되었다.

결과물 및 배포

완성된 Image EXIF Inspector는 별도 서버 없이 브라우저에서만 동작하는 가벼운 도구다. 드래그 앤 드롭만으로 이미지에 숨겨진 메타데이터를 확인하고, 브라우저가 이를 어떻게 렌더링하는지 미리 볼 수 있어 퍼블리싱 작업에 큰 도움이 되고 있다.

• Tech Stack — HTML, CSS, Vanilla JavaScript