링크를 공유하면 서비스 소개가 보이도록: SNS 미리보기 이미지와 메타 정보 추가

링크만으로는 서비스가 잘 드러나지 않았다

이어짐은 가족의 인물과 관계를 기록하고 여러 족보를 관리하는 서비스다. 최근 변경 전에는 화면마다 공통으로 쓰는 헤더에 SNS 링크 미리보기용 정보가 없었다. 링크를 공유했을 때 서비스 이름과 소개 이미지를 일관되게 전달할 방법이 필요했다.

족보 이름이나 회원 정보가 공유 카드에 들어갈 가능성도 함께 고려했다. 특히 개인 족보 화면의 링크를 보냈을 때, 미리보기에는 그 화면의 정보 대신 서비스의 공통 소개만 나타나도록 구성했다.

공통 헤더에 공유 정보를 연결하다

서버는 화면을 만들 때 공통 헤더 템플릿을 사용한다. 이번 변경에서는 그 헤더에 공유 정보 템플릿을 포함했다. 템플릿에는 서비스 소개 문구와 이미지 주소를 넣고, Open Graph와 X 카드용 정보를 함께 정의했다. 따라서 각 화면이 공통 헤더를 거치면 같은 소개 정보를 내보낸다.

브라우저 탭에 표시되는 화면별 제목은 그대로 두었다. 링크 미리보기의 제목과 설명은 별도로 정한 공통 문구를 사용한다. 회원의 별명이나 개인 족보 제목을 공유 메타 정보에 넣지 않는 구조다.

이미지는 빌드할 때 만든다

공유 이미지는 기존 SVG 로고와 프로젝트에 포함된 한글 글꼴을 사용해 1200×630 크기의 PNG로 생성한다. 보라색과 분홍색 배경 위에 로고와 공통 소개 문구를 배치했다. 같은 로고 원본에서는 별도로 512×512 크기의 투명 배경 PNG도 만든다.

동작 흐름은 간단하다. 빌드가 이미지와 화면 템플릿을 준비하고, 서버가 완성된 이미지를 공개 자산으로 제공한다. 화면을 요청하면 공통 헤더가 공유 정보를 출력한다. 이미지 내용이 바뀌면 빌드가 이미지에서 계산한 버전을 주소에 붙여, 이전 이미지가 캐시에 남아 있을 때 새 주소를 사용할 수 있게 했다. 한글 렌더링에는 포함된 글꼴을 지정해 빌드 환경에 설치된 글꼴에만 의존하지 않도록 했다.

사용자는 어떻게 쓰나

별도 설정은 필요하지 않다. 사용자는 평소처럼 서비스 링크를 복사해 공유하면 된다. 링크를 읽는 서비스에는 공통 제목, 설명, 이미지 정보가 전달된다. 저장소의 검사는 로그인 전후 화면에서 이 정보가 같고 개인 화면 제목이나 회원 별명이 메타 정보에 들어가지 않는지 확인한다. 이미지의 크기와 주소 버전도 검사한다.

배포 기록에는 주요 화면과 공유 이미지가 외부 HTTPS 요청에 응답한 결과가 남아 있다. 다만 실제 SNS 앱에서 링크를 공유해 카드 표시나 캐시 갱신까지 확인한 기록은 없다. 따라서 모든 공유 앱에서 같은 모습으로 표시된다고 단정할 수는 없다.

바뀐 점

이제 링크 미리보기에 사용할 서비스 소개 정보와 PNG 이미지가 공통 화면에 준비돼 있다. 이미지는 빌드 과정에서 생성하고, 서버는 완성된 자산을 제공한다. 사용자는 링크만 공유하면 되며, 개인 족보 정보가 공유 메타 정보에 섞이지 않도록 공통 문구를 사용한다.