개요
Poster 스킨에서는 위 사진과 같이 썸네일들은 원본 이미지가 잘려서 나오게 됩니다. 다행히도 tistory에는 입맛대로 html과 css를 편집할 수 있는 스킨 편집 기능을 제공합니다. 이번 단편 기술서에서는 이 기능을 이용해 불편하게 짤리던 썸네일을 정사각형으로 리사이징 해보겠습니다.
1. 수정할 곳은 어디에?
먼저 본인의 티스토리 블로그에 접속한 뒤, 키보드에서 F12 키를 눌러 개발자 도구(DevTools) 를 엽니다. 개발자 도구는 웹페이지를 구성하는 HTML 코드 구조와 각 요소가 어떤 부분을 담당하는지 시각적으로 보여주는 기능입니다. 브라우저(Chrome, Edge...)마다 개발자 도구가 다르다는 점은 유의해야 합니다. 아무튼, 현재 썸네일을 수정하고 싶으니 썸네일을 구성하는 html 코드를 찾아봤습니다. 코드를 보아하니 썸네일 이미지는 서버로부터 가져오고 있으며 링크에는 'C264*200' 이라는 명령어가 포함되어 있습니다. 마침 썸네일 사이즈도 264*200이라고 하니 이 명령어를 손 보면 정사각형 썸네일을 얻을 수 있어 보입니다.
2. 썸네일 이미지 사이즈 변경하기
C264*200을 R264*264(글 마지막에 설명 써놨습니다.)로 수정하니 변화가 생기긴 했습니다. 안타깝게도 아직은 좌, 우가 짤려있습니다. 개발자 모드에서 다시 확인했을 때 썸네일 이미지는 성공적으로 264*264가 되어 있었으니 문제는 다른 부분에 있습니다.
3. Content 사이즈 변경하기
이번에는 Rendered Size가 눈에 띕니다. 마찬가지로 개발자 모드에서 확인할 수 있었는데, 195*148이라는 크기를 가지고 있습니다. 이 녀석이 문제의 원인으로 의심됩니다. 마찬가지로 이미지를 가져오던 링크에서 관련 명령어를 찾아봤으나 의심되는 것은 없었고, css 파일에서 관련된 것을 찾을 수 있었습니다.
css 파일까지 수정하니 원하던 대로 썸네일이 정사각형으로 보이기 시작했습니다.
정리
먼저 요약입니다. Tistory의 Poster 스킨에서 썸네일을 정사각형으로 만드는 덴 두 가지 조치가 필요합니다.
1. html 293번 째 줄의 "C264*200"을 "R264*264*로 변경
2. CSS의 1035번째 줄의 195px를 148px로 변경, 1036번째 줄은 삭제
다음으로 가벼운 개념 정리입니다. C264*200의 C는 Crop의 맨 앞 글자를 따온 것이며 이미지의 일정 부분을 자를 때 사용하는 용어입니다. 만약 C264*264로 명령어를 수정했다면 원본 사이즈 비율이 1:1이 아닌 이상 썸네일도 정사각형으로 나오지 않게 됩니다. 원본 이미지가 세로가 길다면 세로가 잘려 나오고, 가로가 길다면 가로가 잘려 나옵니다. 한 마디로 C는 리사이징을 하지 않기 때문에 정사각형을 보장할 수 없다 말할 수 있습니다. 반면, R 264*264는 원본 이미지 비율이 어떻든 1:1 비율로 리사이징하기 때문에 썸네일도 원본 그대로 나오게 됩니다. 물론 비율이 달라진 탓에 어느 정도 뭉개지긴 합니다.