기업 블로그 담당자 아니면 안보셔도 됩니다
블로그가 아니라 홈페이지처럼 보이게 해보려고 이것 저것 시도한 며칠이었습니다.
블로그 스킨도 다 만들고, 로고도 디자인해서 넣었고, 캐러셀도 돌아갑니다.
이제 첫 글에 어울리는 키비주얼만 올리면 끝입니다.
자신감 있게 2560px짜리 이미지를 준비했습니다.
요즘 4K 모니터 가로 폭이 그 정도니 이만하면 차고 넘친다고 생각했습니다.
도트 그레인이 들어간 핑크-옐로 그라데이션 이미지였습니다. 약간 거친 텍스처가 매력 포인트입니다.
업로드.
새로고침.
화면을 보고 잠시 멍해졌습니다.
도트가 떡이 되는 마법
원본의 도트는 분명히 미세한 필름 그레인 같은 질감이었습니다.
그런데 블로그에 올라간 이미지의 도트는 곰팡이처럼 뭉쳐 있었습니다. 도트 하나가 별 모양으로 보일 정도로 커져 있었습니다.
이상한 점은 메인 캐러셀에 들어간 같은 이미지는 그나마 봐줄 만하다는 겁니다.
상세 페이지에 들어간 이미지가 유독 처참했습니다.
같은 파일인데 왜 다르게 보일까.
티스토리 CDN의 자비심 없는 압축
크롬 개발자 도구로 이미지 URL을 확인 했더니 답이 나옵니다.
https://img1.daumcdn.net/thumb/R1600x0/?scode=mtistory2&fname=...
R1600x0
그가 범인입니다.
티스토리는 업로드한 이미지를 자기 CDN으로 통과시키면서 가로 1600px로 강제 리사이즈합니다.
2560px로 올렸든 4000px로 올렸든 1600px로 줄어듭니다. 그리고 줄이는 과정에서 JPEG 재압축이 한 번 더 들어갑니다.
일반 사진이면 별로 티가 안 납니다. 문제는 제 이미지에 깔린 도트 그레인입니다.
JPEG 압축은 본질적으로 사람 눈이 잘 못 알아보는 미세한 정보를 버려서 용량을 줄이는 방식입니다.
그런데 도트, 그레인, 노이즈 같은 고주파 패턴은 JPEG가 가장 못 다루는 영역입니다.
세밀한 점들이 압축 과정에서 큰 덩어리로 뭉쳐버립니다. 도트가 떡이 되고, 점이 곰팡이가 되는 이유입니다.
상세 페이지가 더 처참했던 이유도 있습니다.
티스토리가 상세페이지로 내려주는 건 1600px 이미지인데, 제 모니터 가로 해상도는 그보다 넓습니다.
작은 이미지를 확대하여 표시하니 압축되어 디테일이 무너진 부분이 같이 확대됩니다.
1차 시도: 리사이즈 해상도를 키워본다
CDN URL의 숫자를 바꿔보기로 합니다. 너무 단순한 생각이라서 이걸 시도해본 분이 있을지 모르겠네요.
저는 초보자니까 해도 된다고 생각합니다. 안 될 이유를 찾는건 전문가의 특권이고, 도전하는 건 초보의 특권이죠.
스킨 관리 페이지에서 skin.html 파일을 열어 상세 페이지 키비쥬얼 부분을 찾습니다.
저의 경우 아래와 같이 코드가 작성되어 있었습니다.
<img src="https://img1.daumcdn.net/thumb/R1600x0/?scode=mtistory2&fname=">
여기서 R1600x0을 R2560x0으로 바꿨습니다.
<img src="https://img1.daumcdn.net/thumb/R2560x0/?scode=mtistory2&fname=">
티스토리 CDN이 이 사이즈를 허용할지는 모릅니다. 안 되면 이미지가 깨져 나올 겁니다.
저장, 새로고침.
이미지는 나왔습니다. 성공입니다. CDN이 2560px까지 받아주는 모양입니다.
품질도 한 단계 좋아졌습니다. 압축을 한 번 덜 거친 셈이니 도트 덩어리들이 살짝 부드러워졌습니다.
그런데 만족스럽지 않았습니다. 여전히 원본의 그 미세한 그레인은 아니었습니다. 곰팡이가 점으로 줄어든 정도입니다.
크기를 키워봐야 JPEG라는 압축 방식 자체가 도트를 만나면 갓 태어난 새끼사슴 마냥 다리를 떨며 약한 모습을 보이는 본질적인 문제는 그대로였습니다.
2차 시도: 도트는 PNG로 잡는다
원인이 압축 방식 자체라면 답은 하나입니다. 압축 방식을 바꾸는 것.
PNG는 무손실 압축이라 도트 패턴이 그대로 살아남습니다.
티스토리가 이걸 다시 JPEG로 재변환할 가능성도 있긴 합니다만 적어도 시작점이 손실 없는 상태라 결과물이 한 단계 깨끗해질 겁니다.
같은 이미지를 PNG로 저장해서 다시 올렸습니다.
새로고침.
원본의 도트 그레인이 그대로 살아 있습니다.
메인이든 상세페이지든 똑같은 품질로 보입니다. 메인에서 상세페이지로 넘어갈 때 품질 저하 문제는 없습니다.
CDN이 응답할 때 실제 포맷을 PNG로 유지하는지, JPEG로 변환하는 지 확인하기 위해
크롬 개발자 도구 - Network 탭에서 확인했습니다.
페이지 새로 고침하면서 호출되는 이미지의 content-type은 png 입니다.
변환되지 않고 원본 그대로 출력되었습니다.
R2560x0까지 키워둔 코드와 PNG 원본이 합쳐져서 비로소 완성된 그림입니다.
그런데... 아직도 조금 불만이 생깁니다.
사실 제 모니터는 4K가 아닌 5K 해상도 모니터 입니다.
완성에 가까워지자 미세한 번짐, 도트의 뭉침이 오히려 눈에 더 잘 들어옵니다.
이것보다 더 잘할 수 있잖아?
그렇지 티스토리?
3차 시도: 여기서 도트 패턴을 포기한다
도트 패턴에 키치한 색상으로 알록달록 꾸며보려던 계획을 접고 일반적인 블로그처럼 이미지로 키비쥬얼과 썸네일을 구성하기로 했습니다.
제 마음에는 들지만... 블로그는 제 일기장인것도 맞지만...
그래도 결국 누군가 봐줘야 의미가 있으니까요.
도트 패턴을 포기했지만, 사실 일반 이미지를 넣었을때도 눈으로 확인 가능한 품질 열화가 있었습니다.
특히 상세페이지 키비쥬얼은 너무 심했죠.
코드 수정 + PNG 이미지 사용하면 이런 부분을 대부분 잡을 수 있습니다.
개인 블로그가 아닌 기업 블로그 운영하시는 분들은 충분히 참고하실만한 내용이고요,
개인 블로그 운영하시는 분들도 메인에서 예쁘게 나오던 이미지가 상세 페이지에서 뭉개진다면
어려운 수정이 아니니 한번쯤 고려해보실 수 있을것 같습니다.
끝.