티스토리 본문 너비와 사진 첨부로 삽입되는 이미지의 상관관계

티스토리 에디터의 사진 첨부 기능으로 이미지를 삽입할때 영향을 주거나 받는, 연관하여 스킨 제작시에 제한 받을 수 있는 점들에 대하여 살펴봅니다. 스킨 제작분들 이외에도 블로그를 시작하기 전에 알아두면 차후 스킨 변경시 이미지로 인해 겪는 문제를 덜 수 있습니다.

티스토리 본문 너비 이해

티스토리의 본문 너비라고 지칭하면 대부분 글쓰기 가로폭을 떠올린다. 이는 TISTORY 관리 → 글설정 → 글쓰기 환경의 글쓰기 가록폭 에서 설정 할 수 있으며, 설정값에 따라 삽입되는 이미지 크기가 결정된다 라고 적혀 있다. 실제로 이와 관련된 부분에서 혼동되는 경우가 많아 이에 대해 자세히 알아보도록 한다.

글쓰기 가로폭과 스킨너비

글쓰기 가로폭을 원하는 값으로 설정하였다 하더라도 실제 스킨의 본문 너비가 변경되진 않는다. 이는 스타일시트 파일을 직접 수정하거나 스킨위자드를 지원하는 스킨이 본문 너비설정 부분을 포함하고 있어야 한다.

.article { width:/*@post-width*/550px/*@*/; }

위와 유사한 설정이 되어 있는 스킨이라면 스킨위자드에서 실제로 보여지는 부분의 너비를 수정할 수 있다.

글쓰기 가로폭과 스킨의 본문 너비를 일치시킨다면 쓰는데로 보여질 터이다. 실제로 많은 스킨들이 그러하지만 반응형 디자인이라면 유동적으로 스킨의 본문 너비를 변화시키기 위해서 이를 고정하지 않는 경우도 많다는 것에 유념해야 한다. 즉, 기기의 너비에 따라 본문의 너비가 퍼센트율(%)로 변화할 수 있다는 것이다. 이것은 본문에 삽입될 이미지나 엠베드 요소들(동영상이나 기타)이 본문 너비에 꽉차게 보여주길 원할때 문제가 될 수 있다.

글쓰기 가로폭과 이미지

티스토리 에디터로 삽입된 이미지는 이를 본문에 출력할때 실제 원본 크기가 아닌 사진 첨부 당시 설정되어 있던 글쓰기 가로폭의 크기로 사본을 저장해두고 이 사본을 본문에 출력한다. 이는 앞서 언급한 유동적인 본문의 너비를 가지는 스킨 디자인이나 이미지가 본문의 여백을 오버랩하는 디자인을 구상한다면 걸림돌이 될 수 있는 부분이다. 또한, 스킨 변경시에도 이전 스킨의 가로폭에 맞게 이미지들의 사본이 저장되어 있기 때문에 스킨 변경 후 의도와는 다른 이미지들의 크기에 당황스러울 수도 있다.

이를 보완하기 위해서는 처음부터 글을 작성할때 글쓰기 가로폭을 넉넉히 잡아주는 것이다. 큰 이미지를 적당히 줄이는 것은 이미지의 훼손이 적지만 작은 이미지를 본문의 크기에 맞게 늘이는 것은 이미지의 훼손이 크기때문에 앞으로의 스킨 변경을 고려해서 적당한 가로폭을 설정하도록 하자. 물론, 증가시킨 가로폭의 크기만큼 이미지의 사본이 저장되기에 트래픽증가와 좀 더 더딘 로딩이 있을 수 있다는 것에 주의하자.

티스토리 이미지 형식

스킨을 변경하거나 특정 목적에 의해 이전에 업로드한 이미지들의 크기를 일괄적으로 변경시키고 싶을 수도 있다. 스타일시트를 활용한다면 간편하지만 원본에 가까운 이미지가 아닐수록 이미지 훼손이 심할터이다. 티스토리는 이미지의 경로에 선언된 문자열로 다양한 이미지의 크기를 구할 수 있는 방법이 숨어있는데 이를 참고하여 스크립트를 작성할 수 있을 것이다.

형식) http://cfile[숫자].uf.tistory.com/[이미지크기]/[고유번호]
예제) https://t1.daumcdn.net/cfile/tistory/221DC14455E9E73018

[숫자]

숫자 부분은 랜덤하게 지정되는데, 티스토리 CDN 서버에 따라 임의로 지정되는 듯 싶다. 같은 블로그의 하나의 글 내부에서도 이미지에 대한 해당 숫자는 랜덤하게 붙게 되니 유의하도록 하자.

[이미지 크기]

이미지 크기를 지정하는 몇가지 키워드를 이용해서 추출하게 되는 이미지의 크기가 결정된다.

• original : 티스토리 에디터를 통해 업로드한 이미지의 원본 파일을 가리킨다.
• image : 사진 첨부시 설정되어 있던 글쓰기 가로폭의 크기에 맞춰진 사본 파일을 가리킨다.
• R200x0 : 가로폭을 지정해 이미지를 불러올 수 있는 형식으로 원본 이미지보다 큰 크기로는 조정이 안되며 가로의 크기를 적당히 수정해 유동적인 이미지 크기를 만들 수 있다.

• C480x270 : 원본 이미지 크기에 상관없이 지정된 크기로 이미지를 불러온다.

  480x270, 500x500, 720x680, 750x680, 750x1000, 760x400, 760x470, 760x480, 1280x530, 1280x720

[고유번호]

실질적인 이미지의 파일명과 같은 역할을 한다.

참고문헌 및 관련링크.

1. 티스토리 스킨 개발자를 위한 본문 내의 이미지 갤러리화 관련글