이 블로그도 슬슬 운영한지 3년이 다 되어갑니다. 3년간 누적된 번역도 글 1300개를 넘었습니다. 이 정도면 개인이 운영하는것 치곤 제법 많은 글이 쌓였다고 생각하는데요.
아무튼 그래서 오늘은 블로그를 만들며 여기저기 손봤던 부분에 대한 간단한 내용에 대해 써보려고 합니다.
티스토리 썸네일 용량 줄이기
우선 최근에 가장 저를 골머리 앓게 만드는 부분은 로딩속도였습니다. 5G 무제한 요금제를 쓰고 있어서 간과하고 있었던 부분이었지만, 모든 사람이 다 빠르고 쾌적한 무제한 인터넷 환경을 가지고 있는 것은 아닙니다. 그래서 블로그 메인 페이지를 열었을 때 데이터가 얼마나 소모되는지 좀 보고싶었지요.
이 때 초기 페이지 데이터량은 13~14MB에 달했습니다. 생각보다 많더라고요. 그래도 보니까 줄일 수 있는 부분이 제법 되네요. 그래서 웹폰트 개수를 줄이고, 필요없는 로딩을 시키는 부분을 조금 지워버렸습니다.
하지만 이런 조치는 새발의 피에 불과합니다. 어차피 로딩되는 데이터의 대부분을 차지하는 이미지 데이터가 여전히 11MB를 차지하고 있었기 때문입니다. 아니 아무리 그래도 메인 화면에서는 커다랗게 표시되는 타이틀 배너를 제외하면 기껏해야 썸네일 몇개만 나오고 마는데 왜 이렇게 이미지 용량을 크게 차지하지? 하고 궁금해서 좀 자세히 알아보니 맙소사. 카테고리 목록의 썸네일을 원본 사이즈 그대로 가지고 오고 있었던겁니다.
블로그에 표시되는 썸네일은 가로 100px 정도인데, 실제로 가져오는 이미지 데이터는 가로 600~1200짜리 원본 파일을 가져오고 있었던거지요. 어차피 보여지는 이미지가 100px이면, 가져오는 이미지도 100px이어야 데이터 소모량이 적습니다. 그러니까 가져오는 이미지를 100px 정도로 만들기로 했습니다.
여러가지 시행착오가 있었지만 티스토리 치환자를 손보는 방법으로 해결했습니다. 일단 기본적인 부분에서 큰 참고가 되었던 글은 여기 → https://blogpack.tistory.com/167
상기 블로그에 나와있는 방법을 사용해 메인 배너 썸네일 사이즈를 줄이는데 성공. 하지만 글 목록은 여전히 원본 이미지를 로딩하고 있었습니다.
자세히 보니 Odyssey 스킨은 글 목록에서 리스트 기능을 지원하기 때문에 이라는 치환자를 사용합니다. 이 치환자는 위 블로그에서 사용된 방식이 아니라, 치환자 앞에 https://img1.daumcdn.net/thumb/R100x0/?scode=mtistory2&fname=를 붙여주는 방식으로 해결 할 수 있었습니다. 하여튼 복잡하다니까요.
도대체 왜 티스토리는 글 목록 썸네일을 로딩하는데 원본 이미지를 통채로 가져오게 했을까요. 알 수가 없는 부분이지요.
아무튼간에. 요약하자면 여러 가지 시도 끝에 블로그 썸네일 용량을 줄일 수 있었다는 점입니다. 결과적으로 11~13MB에 달했던 초기 사이트 로딩 데이터량을 3~5MB로 다이어트 시키는데 성공. 로딩 속도에 큰 차이를 주지는 않겠지만 그래도 데이터를 적게 사용하면 좋잖아요.
그거 말고도 바뀐게 좀 있어요
우선은 맨 위의 메뉴. 원래는 '캐릭터로 찾기'와 '이벤트로 찾기'라고 적혀있었는데, 그 글씨가 길어서 가로 길이가 짧은 폰에서는 글씨가 옆으로 잘리는 현상이 있었습니다. 아니 저도 작은 폰 좋아해서 갤럭시 S10e랑 갤럭시 S21을 쓰는데, 거기에 맞춰놨으니 어지간한 메이저 폰에서는 큰 문제 없이 레이아웃이 보일거라 생각했습니다. 아이폰 12 미니가 나오기 전까지는 말이죠.
가장 간단한 해결책은 오른쪽 위의 메뉴를 띄우는 버튼. 저기에 있는 로코를 지우고 메뉴 버튼 크기를 줄이는 것이었습니다. 그런데 사람이 어떻게 로코를 지워요? 차라리 스킨을 불편하게 놔두고 말지!
그래서 그냥 '캐릭터'랑 '이벤트'로 짧게 변경시켰습니다. 뭐...... 단어에서 '찾기'라는 뉘앙스가 사라진게 좀 아쉽긴 한데 그런 뉘앙스를 남기는것보다 로코가 남는게 낫지 않겠어요?
바뀐게 더 있어요 라고 적어놓고 정작 지금 당장 생각나는건 저것 뿐이네요. 그 외에도 사실 블로그 메인 이미지 컬러를 한 방에 바꿀 수 있도록 CSS를 세팅해놨다던가, '검색하기'를 누르면 나오는 검색창에 이미지 컬러를 넣었다던가, 메인 폰트를 NEXON Lv1 Gothic 으로 바꿨다던가 뭐 이런저런것들이 있습니다. 아무튼 앞으로도 취미 활동의 일환 삼아서 스킨을 시도때도없이 뜯어 고칠 생각이니 그냥 그러려니 해 주세요.
앞으로도 밀리시타 번역하는 블로그는 계속 돌아갈테니 많은 관심 부탁드립니다 :D
