링크 썸네일 크기, 어떻게 정할까?

링크를 공유할 일이 정말 많은데요. 미디엄처럼 관심 있는 글을 발견하면 친구에게 추천하고 싶을 때, 설문조사 참여를 부탁할 때, 혹은 재밌는 이벤트 정보를 알려주고 싶을 때 링크를 보내게 되죠. 그런데 이 링크들 중 어떤 것이 가장 먼저 눈에 띄게 될까요? 바로 ‘썸네일’입니다. 썸네일은 그냥 이미지가 아닙니다. 이게 얼마나 재미있는 내용인지, 참여해보면 좋을지, 클릭해서 봐야 할지의 첫 인상을 주죠.

썸네일을 결정하려고 하면 제일 먼저 고민하게 되는 게 ‘크기’에요. 하지만 생각보다, 적당한 크기가 뭐길래, 너무 작아도 안 되고, 너무 커도 안 된다는 건지 확실하게 모르는 경우가 많아요.

그런데, 여기서 더 까다로운 문제가 있어요. 각각의 플랫폼마다 보여주는 썸네일의 크기나 형태가 다르답니다. 예를 들면, 카카오톡에서 적당하게 보이는 썸네일이 미디엄에서나 노션에서는 어떻게 보일지 몰라요. 어떤 곳에서는 가로로 긴 썸네일이 잘 어울리고, 어떤 곳에서는 세로로 긴 것이 더 잘 보이기도 하죠.

다양한 플랫폼에서 썸네일 이미지 크기가 어떻게 되는지 함께 알아봅시다.

카카오톡: 카카오톡은 썸네일을 800px x 400px 크기로 보여주네요. 만약 다른 크기의 이미지를 업로드하면, 카카오톡이 자동으로 이 크기에 맞춰서 보여준답니다. 노션: 노션의 경우, 세로 크기는 106px로 고정이에요. 하지만 가로 크기는 사용하는 스크린 크기나 페이지 설정에 따라 달라져요. 최소 222px에서 최대 405px까지 바뀌기도 한답니다. 미디엄: 미디엄에서는 간편하게 썸네일을 160px x 167px로 고정해서 보여주네요. 트위터: 트위터는 좀 특이해요. 썸네일 크기를 두 가지로 나눠서 보여줍니다. 작은 이미지는 129px x 129px로, 그리고 큰 이미지는 512px x 268px로 보여진답니다.

썸네일의 크기가 이렇게 다양하다보니, 정확한 크기에 맞지 않는 이미지를 어떻게 적절하게 맞출 수 있을지 궁금하죠? 여기서 CSS의 object-fit 속성이 해답을 제시합니다. object-fit: cover 값을 사용하면, 이미지는 지정된 요소의 크기에 딱 맞게 변형되지만, 그 과정에서 이미지의 원래 비율은 그대로 유지됩니다.

가로로 긴 이미지를 생각해봅시다. 중앙을 중심으로 사진의 양 끝이 잘려나가게 되죠, 그래서 이미지 전체를 볼 수 없을 때가 있어요. 그렇다면 세로로 길 때는 어떨까요? 상단과 하단 부분이 잘려나가며, 중앙 부분만 강조되게 보이게 됩니다. 물론, 이미지의 일부가 잘려나가기도 하지만, 썸네일 전체 공간을 꽉 채워 보는 이에게 깔끔하게 보일 거에요. 이런 특징들을 잘 이해하고 활용한다면, 여러 플랫폼에서도 원하는 부분을 보여줄 수 있는 썸네일을 디자인할 수 있어요.

다양한 플랫폼에서는 가로 길이가 더 긴 이미지가 잘리는 영역이 작아요. 카카오톡 같은 경우 상단부터 이미지를 보여주기 때문에 중앙 아래의 중요한 부분이 잘릴 수 있습니다. 그렇기에 여러 플랫폼에서 완벽하게 보여지길 원하는 이미지 영역의 종횡비를 잘 선택하는 것이 중요해요. 아래 예시 이미지는 종횡비가 가장 큰 노션케이스와 가장 작은 미디엄의 미리보기 비율, 그리고 카카오톡의 상단 정렬을 고려하여 제작되었습니다. 이렇게 세 플랫폼의 중앙영역은 어떤 플랫폼에서도 보여질 수 있게 됩니다.

결론적으로는 크기는 중요하지 않고 비율이 중요했습니다. 설명이 조금 길었지만 샘플이미지(아래 링크에서 첨부해두었습니다)에 대고 만드시면쉽게 활용하실 수 있을 거에요. 샘플 이미지는 아래 링크 이미지를 사용하시면 됩니다.

https://linkcast.cc/to/WAxa57pgnCM7WjGcwc3s

지금까지 사람들이 클릭하고 싶은 미리보기를 만들 수 있도록 돕고 있는 링크캐스트였습니다.