티스토리 반응형 웹스킨 이미지 최적화 플러그인과 EXIF

📷

반응형 스킨^[각주:1]

반응형 스킨의 인기가 높아짐에 따라서 티스토리에서는 '반응형 웹스킨 최적화 플러그인'을 출시했었다. 본 플러그인의 목적은 모바일 환경에서의 데이터 소비를 줄여주는데있다.

보통 글을 쓰게되면, PC버전의 출력 환경에 레이아웃을 맞춰 고해상도의 이미지를 업로드 한다. 하지만 모바일 환경에서는 그런 고해상도의 이미지 파일이 필요가 없다. 화질이 아무리 좋아도, 컴퓨터 모니터보다 적어도 5배는 더 작은 휴대폰 화면에서 그 조그마한 픽셀과 디테일이 모두 구별할 수 있을리가 없다.

불필요하게 크기가 큰 이미지 파일들은 모바일 환경에서는 성능적으로 단점이 더 크기 때문에 모바일 환경을 위해 해상도나 화질이 조금 더 낮은 이미지 파일을 제공할 필요가 있다. 이를 편리하게 구별하여 나타내기 위해 img요소에는 srcset 이라는 속성을 만들어 놓았다.

srcset 속성에다 저해상도로 변환된 그림 파일들의 크기에 대한 정보와 그림을 정해놓으면 브라우저가 본문 폭을 보고 알아서 거기에 맞는 적합한 해상도의 파일을 선택하여 출력하는데 사용할 수 있게 만든 속성이다.

<img src="clock-demo-thumb-200.png"
      alt="Clock"
      srcset="clock-demo-thumb-200.png 200w,
          clock-demo-thumb-400.png 400w"
      sizes="(max-width: 600px) 200px, 50vw">

mozilla.org에 적힌 예시

티스토리에서는 이를 위해서 '반응형 웹스킨 이미지 최적화' 플러그인을 만들어 놓았다. 해당 플러그인을 사용하면, 블로그에 알아서 srcset 태그를 추가시켜준다. 저해상도 이미지는 서버에서 알아서 만들어 주는듯 하다.

정말 장점밖에 없는 플러그인 같아 보이지만, 한 가지 문제아닌 문제점이 있었다.

EXIF Orientation태그 인식

 

이미지 변환이 너무 세세히 되는게 문제다... 정확히는 저해상도 이미지를 변환할 때 EXIF 태그 중 카메라의 회전 정보를 담당하는 EXIF의 Orientation 항목(태그)를 고려해서 이미지를 변환하는 것이 문제 아닌 문제.

여기서 EXIF의 Orientation 태그는 카메라가 피사체를 찍었을 때, 카메라의 방향에 따라 피사체가 어떻게 보이는지를 보정해줄 때 카메라가 어떤 방향으로 찍혔는지에 관해 파악할 때 사용되는 태그다. 사용 예시를 생각해 보면 휴대폰 카메라로 밖 풍경을 찍어본다고 하자, 그리고 휴대폰을 시계방향으로 180도 돌려서 다시 찍어본다고 하자.

빛을 입력받는 카메라 센서에는 분명 첫 번째 찍은 사진과 두 번째 찍은 사진의 빛과 색상에 관한 정보가 180도의 차이를 보이면서 입력되었을 것이다. 하지만, 휴대폰에 있는 사진 갤러리로 두 파일을 본다면?

 

당연하게도(?) 둘 다 똑같이 차이 없는것 처럼 보인다.

요약된 사진

출처: https://www.impulseadventure.com/photo/exif-orientation.html

이를 가능하게 하는 이유는 바로 휴대폰에 내장된 가속도 센서가 카메라 회전 정도를 사진 파일의 EXIF의 Orientation태그에 값을 기록을 해 놓았기 때문이다. 카메라를 거꾸로 들었다면 카메라가 거꾸로 촬영됐다는 값을 넣는 그런식이다. 이를 이용하면 센서 데이터를 임의로 회전시켜 저장할 필요가 없다.

왼쪽의 쿨러 사진을 metapicz.com이라는 온라인 EXIF 확인 사이트에서 본 사진

Orientation 태그에 적힌 Rotate 90 CW는 휴대폰을 정면에서 90도 시계방향으로 돌려서 찍었다는 말이다.

 

이런 방식 때문에 휴대폰 갤러리 앱에서 문제 없이 보이던 사진을 인터넷에 업로드 하면 EXIF Orientation태그를 읽지 않고 뿌려주는 웹브라우저에서는 뜬금없이 사진이 90도 돌아가 있는 기현상이 일어난다.^[각주:2]

티스토리의 문제 아닌 문제

다시 티스토리 예기로 돌아와서, 티스토리에서는 원본 파일을 저해상도 파일로 변환할 때, EXIF Orientation 태그를 참조해서 변환을 시도한다.

 

예를 들면 EXIF의 Orientation 태그에 90도 회전해서 찍었다는 값이 있다면, 티스토리 이미지 변환 서버에서는 이미지 파일을 이미지 파일 자체의 상태가 아닌 90도 회전 한 상태로 저장을 시도한다.

 

원본 파일과(좌)^[각주:3] 저해상도로 변환된 파일(우)^{[각주:4][각주:5]}

 

글을 처음부터 직접 써가면서 수정을 했다면 별 문제가 없었을 탠데, 생각없이 사진을 업로드 하다가 나중에 이 플러그인을 사용하는 사람에게는 약간의 충격을 줄 수있다. 이 플러그인으로 인해 의도했던 레이아웃이 깨진 글들을 볼 수 있다.

 

이런 것 처럼 이미지 배치와 설정이 무너진다... ^{[각주:6][각주:7]}

 

이를 어쩐다... 해결하기 위해서, 첫번째로 쓴 글 부터 하나씩 이미지의 Orientation 값을 모두 없애거나 아니면 자바스크립트로 이미지를 따로 처리하는 방법이 있긴 한데, 둘 다 귀찮다... 그냥 플러그인을 사용하지 않고 놔두는 방면으로 갈까...

 

사진의 EXIF를 무시하고 저해상도로 변환할 수 있는 옵션이 티스토리에 있으면 좋은데, 이미 이렇게 지원한 지 너무 오래되서 그럴 일은 없겠지... 참 이래저래 고생이다.

 

여담

 

저화질로 변경된 이미지 파일은 EXIF 태그가 모두 제거되어 있다. 어차피 이미지를 클릭하면 원본 이미지를 볼 수도 있으니 상관없긴 하다.

 

원본 이미지의 EXIF 정보(좌)와 변환된 이미지의 EXIF 정보(우)

윈도우는 8부터 Orientation 태그를 지원한다는 말이 있었다. 처음부터 윈도우8, 10에서 작업하지 말고 7에서 작업을 했다면 이런 문제들을 피할 수 있었을까...^[각주:8] Auto Rotate 프로그램을 사용했었더라면...

 

윈도우7에서 원본 사진을 기본 뷰어로 열었을 때 사진

원본 사진이 가로로 눕혀져 있는 것을 보아 Orientation 태그가 적용이 안된 것을 알 수 있다.

 

 

 

1. 반응형 스킨: 동일한 페이지에 기기의 종류에 따라 자동으로 레이아웃을 다르게 표시해주는 스킨(기기의 크기에 반응) [본문으로]
2. 최근에 업데이트된 브라우저에는 EXIF Orientation 태그를 읽어서 뿌려주는 기능이 있긴 하다. [본문으로]
3. 윈도우8 이상에서는 원본 파일을 저장해서 열어보면 90도 회전한 그림으로 보일 것이다. 즉 가로보다 세로가 긴 그림이 보인다. [본문으로]
4. 만약 본 블로그에 반응형 웹스킨 이미지 최적화 플러그인이 켜져 있으면 왼쪽 사진이 변환되어 왼쪽도 위 아래가 길쭉한 사진이 표시된다. [본문으로]
5. 19년 8월 14일 이후 반응형 플러그인을 켜서 글 상에서는 둘 다 세로로 찍은 것 처럼 보이는데, 왼쪽 그림을 눌려서 원본을 보면 브라우저 상에서 가로로 찍은 것 처럼 보일 것 이다. [본문으로]
6. 블로그 글 주소: tattler.tistory.com/180 [본문으로]
7. 19년 8월 14일 이후로 해당 글은 수정되어 이러한 현상이 나타나지 않는다. [본문으로]
8. 출처: www.howtogeek.com/254830/ [본문으로]