[TIP] 스팀잇 썸네일 이미지 사이즈 정보 및 PSD파일 공유합니다.

 

안녕하세요, 오늘은 스팀잇 관련 팁을 하나 공유드릴까 합니다.
스팀잇 사용을 많이 하신분 보다는 초보분들에게 유용한 팁이 아닐까 합니다 :)

대부분 스티미언 분들은 아시겠지만 스팀잇에 이미지를 추가하게 되면 첫번째 이미지가 자연스럽게 내 블로그 포스팅의 썸네일 이미지로 들어가는 것을 아실 수 있을거에요.
(썸네일 이미지란 미리보기 기능을 하는, 아주 작은 사이즈의 이미지를 말합니다. 스팀잇에서는 블로그 포스팅마다 가장 왼쪽 사이드에 붙어있어요)

그런데 이 썸네일 이미지는 정해진 비율이 있고, 그 비율에 맞지 않는 부분은 그냥 모두 잘라버립니다. (실제로는 마스킹을 하는거지만 가능한 쉽게 표현하겠습니다) 

사진을 보시면 이렇게 말이죠.
 

 

이 비율은 블로그 페이지에서 보이는 제목의 상단 부분과 보상 내역의 하단 부분에 사진의 끝을 정렬시킨 것이라고 추측되는데요, 그 과정에서 이미지가 세로로 다소 길 경우 (예를 들어 4:3의 비율) 위아래가 크게 잘려 보이는 문제가 생깁니다.

 

 

그게 무슨 문제냐~그냥 쓰면 안됩니까?라고 하신다면 사실 큰 문제는 아니고..이런것에 민감한 직업적 성향이..-_-;; 발휘된거라고 보시면 될 듯 합니다. ㅎㅎ

크롬에서 HTML/CSS값으로도 체크를 해봤는데 130x88.86px의 크기를 130x77px로 마스킹 처리를 했는데, 아주 애매하게 비율이 조금씩 틀어집니다..으악 괴롭습니다. 정수로 떨어뜨려주거나 다른 비율로 깔끔하게 떨어지면 좋겠는데 말이에요..디자이너에게 .86픽셀이라니 너무 한것 아닙니까..ㅠㅠ
 

썸네일에 최적화된 이미지 사이즈 찾기

---

그래서 이 썸네일을 스크린샷을 저장해 크게 확장을 해봤습니다. 순수 노가다로요.
(약간 무식한 디자이너입니다 -_-;;)

대략적으로 가로:세로 비율을 계산해보니 16:9.2307이 나옵니다.
일단 이 숫자를 비례식에 넣어 풀어보려고 합니다.

몇몇 글을 보니 가로 800px가 최적화 사이즈라고 하네요. 800에서 세로값이 461.5가 나오네요..아 안됩니다. 정수가 필요해요..(사실 리사이즈하면 다 소수점이긴 한데 작업과정에서 소수점 나오는게 싫어서 정수에 가깝게 가보도록 하겠습니다.)

그래서 조금씩 조금씩 값을 올려서 세로값이 정수에 가깝도록 맞춰보고자 했습니다.
 

가로px	세로px
800	461.5
900	519.1875
920	530.725

 
오 920x530도 괜찮군요?
그래도 요즘 시대가 최소 FHD시대 아니겠습니까?
일단 1000px 내외까지 올려보겠습니다.

하면서 세우게 된 조건은 이렇습니다.

1. 16:9.2307의 비율을 가질 것
2. 최소 가로 1000px이 넘을 것
3. 모바일에서 용량 문제가 되지 않게 너무 크지도 않을 것

1000을 넘겨서 시도해봅니다.
 

가로px	세로px
1000	576.875
1028	593.0275
1034	596.48875
1038	598.79625
1040	599.95

 
...무식하죠?

그랬더니 1040px에서 거의 600에 가까운 값이 나옵니다.
바로 1040x600px의 이미지로 실험을 해봤습니다.

오...맞습니다! 거의 맞아요.

비례에 맞춰 이미지 사이즈를 조정했더니 얼추 맞는 것을 보실 수가 있습니다.
즉 1040x600px로 작업하시면 썸네일이 가장 잘보이는 상태로 나온다는 걸 알수가 있네요.

결론, 스팀잇의 썸네일 이미지는 1040x600px로 만들면 됩니다.

 
다만 첫이미지가 사진같은 거라 사이즈가 커야 할 경우에는 이 비례를 적용해 조금 더 세로로 길게 만들면 되는데요, 큰 사이즈에서 글자가 어디까지 잘리는지 테스트를 또 해야합니다. 근데 제가 다 해두었습니다. 이렇게요.
 

이 자료를 포토샵 파일로 공유드리겠습니다.

다운로드 링크 : https://we.tl/cES5aBlr2z

 
비율이 상관없는 첫번째 이미지는
steemit-thumb-normal.psd 를 쓰시면 되구요,

사진과 같이 세로가 긴 이미지는
steemit-thumb-photo.psd 를 쓰시면 됩니다.

아마도 스팀잇의 디자인 레이아웃이 바뀌기 전 까지는 유용하게 쓰실 수 있지 않을까 합니다.
도움이 됐다면 보팅과 팔로우 부탁드립니다. 저도 팔로우 하러 갈께요 :)
감사합니다. ^^