티스토리 블로그 썸네일 최적화 이미지 사이즈

티스토리 블로그 썸네일 최적화 이미지 사이즈

 

티스토리 블로그는 썸네일 이미지가 원하는 모습으로 보여지지 않는 경우가 많습니다. 다양한 사이즈, 배치로 저장해봐도 이상하게 잘려있는 경우가 많더라고요. 모바일과 PC도 또 좀 다릅니다. 그래서 모바일, PC 모두에서 깔끔하게 보이는 최적의 이미지 사이즈와, 배치에 대해 실험해보았습니다. 

 

1. 깔끔하지 않은 티스토리 블로그 썸네일

보통 썸네일이라고 하면 작성자가 본문에 올린 이미지가 썸네일 이미지 크기로 적당히 줄어들거라 생각하는데, 티스토리 블로그의 경우는 그렇지 않습니다. 아래 이미지에 있는 청년월세특별지원 포스팅의 경우, 남성의 이마가 잘려있고, ETF와 예금 비교 포스팅은 위의 글씨가 잘려있는 등 알맞게 축소되지 않네요. 

 

들쑥날쑥한 티스토리 블로그 썸네일 이미지(사이즈:749*535)

그럼 모바일에서는 어떨까요?

모바일에서는 PC에서 보는 것과는 다르게 그래도 적당한 곳에서 잘려있습니다. 그렇다고 모바일 버전, PC 버전을 따로 만들 수는 없으니 양쪽 모두에서 제대로 보이는 이미지 크기와 배치로 만들어야겠습니다.

티스토리 블로그 모바일 썸네일(412*415)

 

2. 티스토리 블로그 썸네일 최적사이즈

2-1) 티스토리 블로그 썸네일 최적 사이즈 1200*675px(16:9)

최적사이즈의 이미지에 글씨를 꽉 채워 작성하고 포스팅을 완료해보았습니다.

티스토리 블로그 최적 이미지 사이즈 전체에 배치

 

위 이미지를 대표이미지로 지정하고 저장해보았을 때 어떤 모습으로 썸네일이 보일까요?

아래와 같이 딱 중간만 보이게 잘렸네요. 

 

2-2) 1200*675(16:9)에서 썸네일로 보이고 싶은 부분을 중간에 배치하기

최적 이미지 사이즈로 만들었을 때, 딱 중앙만 썸네일에 보이니, 썸네일로 보이고 싶은 부분을 1200*675(16:9) 사이즈 이미지에 중앙에 배치해보면 되겠네요.

티스토리 블로그 최적 이미지 사이즈 중앙에 배치

이번에는 성공했습니다! 하지만 위, 아래의 여백 사이즈가 조금 다르게 보이네요.

 

 

이번에는 중앙에서 살짝 아래로 배치해보았습니다.

티스토리 블로그 최적 이미지 사이즈 중앙 살짝 하단에 배치

 

바로 위의 것과 크게 차이가 없습니다. 이제는 운의 영역인가요? 아무튼 이정도로 만족합니다.

이번에는 모바일 화면에서 어떻게 보이는지 확인해보겠습니다. 작기는 하지만 제대로 보입니다.

썸네일 모바일 화면

3. 티스토리 블로그 썸네일 템플릿 가이드 정리

 

이제 티스토리 블로그 썸네일 이미지의 최적 사이즈와 배치에 대해 정리해보겠습니다.

3-1) 기본 크기

- 대표이미지 최적 사이즈 1200 × 675px (16:9) >  (예: 1200 × 675 외에도 1280×720, 1920×1080도 가능)
* JPG 또는 PNG 형식
* 500KB 이하 권장 (용량이 크면 표시되는 시간이 오래 걸림)

3-2) 안전 영역 (텍스트 배치 구역)

* 중앙부 70% 영역에 제목·키워드를 넣으세요.
* 좌우·상하는 모바일·PC 화면에서 잘릴 수 있으니 아래와 같이 **가장자리는 비워두는 게 안전**합니다.

3-3) 색상 팁

- 배경: 밝고 선명한 톤 (화이트, 파스텔, 단색 배경 추천)
- 텍스트: 대비가 잘 되는 컬러 (검정/짙은 네이비, 또는 흰색)
- 강조: 하나의 키워드는 포인트 색상(빨강·노랑 등) 사용

3-4) 폰트 스타일

- 제목: 굵은 고딕체 (예: Noto Sans Bold, Pretendard Bold)
- 부제/키워드: 가는 글씨 or 얇은 고딕체
- 텍스트 크기: 모바일에서 봐도 한눈에 들어올 정도로 크게 (최소 48pt 이상)

혹시 더 좋은 방법이 있다면 꼭 알려주세요!