배민의 숨은 디테일

배달의 민족에서 특정 가게를 링크로 공유하면, 위와 같은 형태로 미리보기 이미지가 나타난다. 개인적으로 가장 소름 돋았던 배민의 숨은 디테일이었다.

웹 개발을 모르는 사람이라면 사이트 내용을 미리보기로 띄워주는 건가? 라고 생각할 수 있다. 하지만 실제 저 링크로 들어가 보면, 저 이미지와 텍스트들은 찾아볼 수가 없다. 이것은 페이스북이 만든 Open Graph라는 규약을 통해 실제 홈페이지에 있는 이미지, 텍스트와 별개로 URL을 공유하는 과정에서 미리보기를 제공하는 것이다. 대부분의 SNS, 채팅 서비스에서 제공하고 있다 (페이스북, 디스코드, 카카오톡, 슬랙, 트위터 등).

웹페이지를 기획/개발하다 보면 홈페이지의 기능이나 디자인, 사용자 경험에 신경 쓰느라 SEO나 Open graph는 놓치기 쉽다. 하지만 위의 배민 사례를 살펴보면, 그냥 지나갈 수도 있었던 음식점 공유 슬랙을 한 번 더 보게 만들어줄 만큼이나 강력한 도구라 생각한다. 그래서 이번 고초대졸닷컴 리뉴얼에 있어서 신경 썼던 부분 중 하나가 바로 OG 이미지였다. 카카오톡으로 우리 사이트의 공고가 많이 공유되기도 하고 블로그를 통해 공고를 올리기도 하기 때문이다.

배민의 아이디어를 본떠 팀의 디자이너분께 따로 쓸 수 있는 이미지를 요청했다. 현재는 공고를 카카오톡으로 공유하면 아래와 같이 미리보기 이미지와 문구가 노출된다.

하지만 카카오톡의 경우, 전체 CSR을 하는 경우 OG를 잡지 못하는 문제가 있었다. 처음 배포 당시에는 배포 기간을 맞추느라 페이지 구분 없이 모두 CSR 형태로 개발하였었고 위의 미리보기가 작동되지 않았다. 지금은 SSG와 CSR을 함께 사용하면서 OG가 정상적으로 작동하고 있다. 아직 기업 정보의 경우에는 SSG가 적용되지 않았지만, 아래와 같은 이미지를 넣어두었다.

디스콰이엇 메이커로그의 경우에는 메이커로그에 이미지가 있을 경우 해당 이미지를, 없을 경우 디폴트 이미지를 OG image로 넣고있는 것으로 보인다!

hhttps://assets.disquiet.io/images/new-og-image.jpg