⚡ TL;DR

• Velog 썸네일 비율: 1.91: 1
• Image Ratio Padder 바로가기

✂️ Velog 썸네일 잘림 현상

Velog에 글을 작성하고 썸네일을 업로드하면 종종 잘려 보이는 경험이 다들 있을 것이다.
예를 들어 이런 원본 이미지를 그냥 업로드하면 다음과 같이 잘린다.

업로드한 이미지의 비율과 velog 썸네일 비율이 맞지 않아 강제로 확대되며 잘리게 되어 이런 현상이 나타난다. 나는 평소에 그냥 인터넷 짤들을 가져다가 썸네일로 업로드하는 편이라 이런 일이 잦았고 너무 거슬렸다...😑 그래서 일단 velog 썸네일 크기가 어떻게 되는지 알아봤다.

개발자 도구(F12)를 열고 이미지를 보니 768×400, 대략 1.92:1 비율임을 확인할 수 있었다. (몇달 전에 확인했을 때에는 1.91xx:1이었는데 조금 바뀐 듯 싶다.) 일반적으로 많이 사용하는 1.91:1 비율로 간주해도 무방할 것이다.

아무튼 인터넷에서 이미지 크기/비율 조절을 찾아봤지만 모두 이미지 자체 사이즈를 건드려서 내가 원하는 기능이 없었다. 그렇다고 매번 빈 캔버스를 1.91:1 비율로 준비하고 거기에 이미지를 불러와서 썸네일을 따로 만드는 작업을 하기는 귀찮았다. 그래서 그냥 내가 만들기로 했다.

🖼️ Image Ratio Padder

그렇게 만들게 된 Image Ratio Padder는 원본 크기를 유지하면서 입력된 비율에 맞게 나머지 부분을 지정한 색상으로 채워주는 웹 애플리케이션이다.

이제 비율이 맞지 않는 이미지도 나머지 부분을 채워서 원하는 비율로 만들 수 있다!
Image Ratio Padder로 수정한 이미지를 다시 velog 썸네일로 업로드하면 잘리지 않고 잘 보이는 것을 확인할 수 있다. 😎