Dev.to처럼 포스팅 제목을 이미지로 만들어서 링크 미리보기(Link Preview) 이미지에 넣어보자

Jusung Hwang

7 min readApr 13, 2021

최근에 페이스북에 어떤분이 dev.to에 포스팅한 한글로 된 글을 보면서 저런 건 어떻게 만드는 걸까? 관심이 생겨 알아보게 되었습니다.

최종 완성된 프로젝트 코드는 깃헙 리포지토리에 올려 두었습니다.

nabigraphics/render-link-preview-image-on-server-example

Render an link preview image on server. Contribute to nabigraphics/render-link-preview-image-on-server-example…

github.com

어떻게 포스팅 제목을 커버 이미지로 만들까?

보통은 직접 커버 이미지를 제작해서 사용하는 방법도 있지만 조금 더 생각해보니 SVG(Scalable Vector Graphics)의 방식을 잘 활용하면 어떻게 되지 않을까? 싶었습니다.

MDN 문서에는 SVG가 그래픽을 마크업하기 위한 W3C XML의 특수언어라고 되어있습니다.

그래서 SVG 파일을 브라우저 개발자 도구나 편집기로 열어보면 아래와 같이 코드로 되어있는 것을 확인 할 수 있습니다.

그렇다면 SVG 템플릿을 만들어 두고 타이틀 같은 것만 입력받을 수 있게 한다면 원하는 결과물을 보여줄 수 있지 않을까?

그리고 만들어진 커버 이미지를 API에 응답으로 보내주고 OpenGraph나 Twitter Cards(?) 태그에 이미지 주소를 API 주소로 해주면 우리가 원하는 결과를 얻을 수 있겠지…? 하고(????) 아래와 같은 구조로 정리를 했습니다.

-시작하기 전엔 몰랐습니다… svg가……..

개발 환경 구축

Node.js + babel (with typescript presets) 환경에 express를 사용하여 개발 환경을 구축하였습니다.

CLI

$ npm init -y
$ npm i -D @babel/cli @babel/core @babel/node @babel/preset-env @babel/preset-typescript babel-plugin-module-resolver nodemon prettier
$ npm i @types/express @types/node axios dotenv express

src/server.ts

Mock 데이터 추가

이번 글에서는 실제 DB에 접속하지 않고, 목데이터를 가져오는 식으로 적용했습니다.

커버 이미지 API 라우팅 추가

위에 정의한 목데이터를 활용하여 유저가 포스팅 ID로 요청하면 해당 포스팅 데이터를 가져오도록 했습니다.

SVG Template를 사용해 응답 데이터에 SVG 넣기

커버 이미지 라우터에 포스팅 데이터를 전달해 SVG를 만들어주는 템플릿 함수를 추가해 주었으며, 응답 헤더에 Content-Type을 image/svg+xml로 설정했습니다.

또한 SVG에서 image를 불러올 경우에 crossorigin 관련 이슈가 있어서 이를 서버에서 직접 이미지를 호출한 뒤 DataURI 형태로 변환해준 후 적용해 주었습니다.

SVG 이미지가 잘 나오는지 확인

실제로 접속해보면 정상적으로 SVG가 나오는 걸 확인 할 수 있습니다~! 🎉🎉🎉🎉🎉🎉🎉

그러나…

If you include svg image, The Open Graph Object Debugger will say it is not an image.

뒤늦게 알게 된 사실이지만 Open Graph나 Twitter Cards의 경우 SVG 포맷의 이미지를 지원하지 않는다고 합니다… (아… ㅠㅠㅠㅠ)

sharp 라이브러리 사용

울며 겨자 먹기로 어떻게든 미리보기 이미지는 보여주고 싶어서 알아보던 도중 예전에 gatsbyjs로 만들었던 프로젝트에서 sharp라는 이미지 프로세싱 라이브러리를 플러그인으로 사용했던 기억이 떠올랐습니다.

그렇게 기존에 만든 SVG 이미지를 sharp를 통해 png로 변환하여 보여주는 기능을 추가해 주어 아래와 같이 구조가 되었습니다.

CLI — sharp 패키지 설치

$ npm i @types/sharp sharp

src/api/thumbnails.ts에 convertSvgToPng.ts 유틸 추가

// Sharp를 사용하여 png로 만든 후 응답const svgImage = await generateSvgWithPost(postData);
const convertedImage = await convertSvgToPng(svgImage);
res.setHeader("Content-Type", "image/png");
res.send(convertedImage);