[SEO] 웹페이지 프리뷰이미지(썸네일) 디자인가이드

메타데이터를 통해 웹페이지에 대한 정보로 등록되는 항목 중 이미지는 각종 소셜미디어나 인스턴트메신저 등을 통해서 웹페이지에 대해서 표시되는 주요 정보 중 하나입니다. 보통 open graph에서 제공되는 하나의 항목 중 하나로 취급됩니다. 다만 서비스 또는 클라이언트 별로 이 프리뷰 이미지를 표기하는 방식이 다르기 때문에 최대한 적응성이 높은 웹페이지 메타데이터 이미지를 디자인하는 방법에 대해서 알아 보고자 합니다. 메타데이터 상에서는 'image'라고 불리우지만 실질적으로 '프리뷰이미지', '썸네일이미지' 등의 이름으로 더욱 자주 불리기에 이하 글에서는 프리뷰이미지라고 부르도록 하겠습니다.

정사각형 또는 직사각형 선택

웹페이지 메타데이터는 표준화되어 있다고 보기가 애매하고, 서비스와 클라이언트 별로 표현 방식이 다릅니다. 그래서 페이스북과 같은 서비스는 직사각형을 기본 비율로 사용하는 반면 슬랙 등의 서비스는 정사각형을 기본 비율로 합니다. 여기서 작업자와 작업의 성격에 맞춰 어떠한 비율을 정할지에 대한 선택이 필요합니다.

개인적으로는 기본적으로 정사각형으로 정보를 표시하는 서비스가 많기 때문에 정사각형으로 디자인하는 것이 권장합니다. 그 이유는 정사각형의 이미지 비율을 정했을 때 직사각형과 정사각형 비율 모두에 대한 대응이 가능하기 때문입니다.

비율과 사이즈 선택에 있어서 도움이 되는 자료로서 Matt Turnbull이 리서치한 주요 서비스들의 프리뷰이미지 취급 사이즈 정리 자료를 동봉합니다.

 

Matt Turnbull (2018)

 

정사각형: 600x600

정사각형 사이즈의 경우 600 정도의 사이즈를 권장합니다. 레티나에 보다 적극적으로 대응하기 위해서는 1200 정도까지 사이즈를 늘릴 수 있는데, 개인적으로는 이미지 용량이 커지는 것이 염려되므로, 이 부분은 작업하시는 분의 판단에 맞게 진행하면 될 것 같습니다. 저는 600x600을 추천합니다.

페이스북과 카카오톡을 비롯 여러 매체에서 정사각형이 아닌 상하가 클리핑된 직사각형 이미지를 취하는 경우도 많은데, 이 부분 역시 작업하시는 분의 판단에 맞게 진행되어야 할 사항으로, 페이스북과 카카오톡에 최적의 적응도를 보이고자 한다면 직사각형 형태를 취하기를 바랍니다.

직사각형: 1200x600 or 600x300

직사각형의 경우 사이즈를 1200x600으로 설정한다고 합니다. 다만 위에서 밝힌 바와 마찬가지로 용량 이슈가 발생할 수 있기 때문에 600x300 정도의 타협도 개인적으로는 권장 드립니다.

컨텐츠는 상하 가운데 정렬로, 여백 많이

클라이언트, 서비스 별로 프리뷰이미지를 보여주는 비율이 다른데, 정사각형 또는 가로로 긴 비율이 대부분입니다. 정사각형으로 작업을 했을 경우 가로로 긴 비율로 보여주는 서비스에서도 상하 영역이 클리핑되는 현상을 경험하게 됩니다. 이러한 상황에 대비하기 위해 디자인 단계 에서부터 상하 부분은 최대한 여백으로 비워두고 가운데에 주요 컨텐츠들을 배치하여 다양한 서비스와 클라이언트에서 정상적으로 프리뷰이미지가 표시될 수 있도록 하는 것을 권장드립니다. 또한 경우에 따라 스케일업되어서 표시가 되는 상황도 있기 때문에 중간 정도의 스케일감으로 작업하시는 것을 권장드립니다.

 

 

특히 국내에서 서비스 점유율이 높은 페이스북과 카카오톡에서 정상적으로 표시되게 하기 위해서는 가운데 영역에 최대한 몰아서 작업한 후 테스트 과정을 진행해서 디자인 상의 최적화를 진행하시기를 권장드립니다. 위 그림처럼 여백을 넉넉히 준 상태로 컨텐츠 영역을 설정하여 작업을 진행하시는 것을 권장드립니다.

참고자료

The Best Open Graph Image Size (Stolen From Top Websites of 2018)

The Secret to Getting Large Facebook Link Thumbnail Image Sizes