링크를 공유했을 때 나타나는 미리보기 카드, 제대로 설정되어 있나요? 동적 오픈그래프(Dynamic OG)는 페이지마다 다른 썸네일과 제목을 실시간으로 생성해 주는 기술입니다. 정적 이미지 하나로 모든 링크를 대응하던 방식에서 벗어나, 콘텐츠 맥락에 맞는 미리보기를 자동 생성하면 소셜 추천 유입(Referred Traffic)이 최대 3배까지 증가한다는 결과가 보고되고 있습니다. 이 글은 홈페이지 제작을 기획 중인 마케팅 담당자와 경영자를 위해, Dynamic OG의 개념부터 실무 적용 구조, 플랫폼별 주의사항까지 단계별로 안내합니다.
카카오톡 단체 채팅방에 블로그 링크를 올렸는데, 썸네일이 회사 로고만 덩그러니 나타난 경험이 있으신가요? 링크드인에 제품 소개 페이지를 공유했더니 이미지가 아예 뜨지 않았던 경우는요?
이런 상황은 단순히 '보기 불편한 문제'가 아닙니다. 미리보기 카드의 시각적 완성도는 클릭 여부를 결정하는 핵심 변수입니다. 텍스트 링크만 있는 경우와 콘텐츠에 최적화된 썸네일이 있는 경우를 비교하면, 후자의 클릭률이 압도적으로 높습니다.
홈페이지를 새로 제작하거나 리뉴얼할 때, 이 부분을 설계 단계에서 반영하지 않으면 오픈 이후에 고치기가 상당히 까다로워집니다. 지금부터 그 구조를 짚어보겠습니다.
오픈그래프(OG)는 웹페이지 링크를 카카오톡, 링크드인, 페이스북 등에 공유했을 때 나타나는 미리보기 카드를 만들어주는 웹 표준 규약입니다. HTML의 <head> 영역에 og:title, og:image, og:description 같은 태그를 삽입하면, 각 플랫폼의 크롤러가 이 정보를 읽어 미리보기 카드를 구성합니다.
쉽게 말하면, 링크를 공유했을 때 보이는 제목·이미지·설명 세트가 바로 OG 태그로 만들어지는 것입니다.
| 구분 | 정적 OG (Static OG) | 동적 OG (Dynamic OG) |
|---|---|---|
| 이미지 | 모든 페이지에 동일한 이미지 | 페이지별로 실시간 생성 |
| 설정 방식 | HTML에 이미지 URL 고정 입력 | API가 파라미터를 받아 이미지 자동 생성 |
| 관리 부담 | 낮음 | 초기 개발 필요, 이후 자동화 |
| 클릭률 효과 | 낮음 | 최대 3배 향상 가능 |
Dynamic OG는 사용자가 공유하는 특정 페이지의 콘텐츠(기사 제목, 상품 이미지, 수강 후기, 개인 프로필 등)에 맞춰 실시간으로 고유한 썸네일 이미지를 자동 생성해주는 기술입니다.
예를 들어 온라인 강의 플랫폼에서 수강평 페이지를 공유하면, 그 수강평의 본문과 평점이 반영된 썸네일이 자동으로 만들어집니다. 기업 로고 하나로 모든 링크를 대응하던 방식과 비교하면 정보 전달력이 완전히 다릅니다.
과거에는 Puppeteer 같은 헤드리스 브라우저로 화면을 캡처해서 이미지를 만들었습니다. 속도가 느리고 서버 비용도 높았습니다.
2026년 현재는 Vercel의 Satori 엔진과 next/og 라이브러리를 활용해 HTML/CSS를 엣지 서버에서 초고속으로 PNG 이미지로 변환하는 방식이 표준입니다. 응답 속도를 200ms 이하로 유지할 수 있어, 소셜 크롤러가 타임아웃 없이 이미지를 수집할 수 있습니다.
Dynamic OG를 도입할 때 가장 많이 실수하는 부분이 바로 플랫폼별 규격 차이를 무시하는 것입니다.
encodeURIComponent 처리 필요og:title, og:image 등)를 그대로 사용링크드인의 7일 캐싱은 특히 주의가 필요합니다. 이벤트 페이지나 한정 기간 프로모션 링크를 공유할 때 구버전 이미지가 노출되면 신뢰도에 직접 영향을 줍니다.
Next.js 환경 기준으로, 각 페이지의 파라미터를 읽어 실시간으로 썸네일을 반환하는 API 라우트를 만듭니다.
import { ImageResponse } from 'next/og';
export const runtime = 'edge';
export async function GET(request: Request) {
const { searchParams } = new URL(request.url);
const title = searchParams.get('title') || '기본 타이틀';
const author = searchParams.get('author') || '작성자';
return new ImageResponse((
<div style={{ display: 'flex', flexDirection: 'column', width: '100%', height: '100%', padding: '40px', backgroundColor: '#111', color: '#fff', justifyContent: 'space-between' }}>
<h1 style={{ fontSize: '60px', fontWeight: 'bold' }}>{title}</h1>
<p style={{ fontSize: '24px', color: '#ccc' }}>by {author}</p>
</div>
), { width: 1200, height: 630 });
}runtime = 'edge'로 지정하면 엣지 서버에서 초고속으로 이미지를 생성합니다. 일반 서버리스 함수보다 응답 속도가 훨씬 빠릅니다.
SSR(서버 사이드 렌더링) 페이지에서 위 API 경로를 og:image 값으로 지정합니다.
export async function generateMetadata({ params }) {
const post = await getPost(params.id);
const ogImageUrl = `https://yoursite.com/api/og?title=${encodeURIComponent(post.title)}&author=${encodeURIComponent(post.author)}`;
return {
title: post.title,
openGraph: {
title: post.title,
description: post.summary,
images: [{ url: ogImageUrl, width: 1200, height: 630 }],
},
};
}중요한 트레이드오프: React, Vite 같은 CSR(클라이언트 사이드 렌더링) 환경에서는 소셜 크롤러가 자바스크립트 실행 전에 메타 태그를 수집하기 때문에 Dynamic OG가 작동하지 않습니다. 이 경우 AWS CloudFront Functions 또는 Cloudflare Workers 같은 엣지 레이어에서 크롤러 봇 요청을 감지해 메타 태그가 완성된 HTML을 별도로 서빙하는 '동적 렌더링(Dynamic Rendering)' 구조가 필요합니다. 홈페이지 제작 기획 단계에서 이 부분을 개발사와 반드시 확인해야 합니다.
콘텐츠가 변경될 때마다 플랫폼이 새 이미지를 수집하도록 og:image URL 끝에 수정 타임스탬프를 붙입니다.
https://yoursite.com/api/og?title=제목&v=1718000000v 파라미터 값이 바뀌면 플랫폼 크롤러는 새로운 이미지로 인식해 캐시를 갱신합니다. 링크드인의 7일 캐싱 문제를 우회하는 가장 실용적인 방법입니다.
기존에는 수강평 상세 페이지를 카카오톡이나 슬랙에 공유해도 기업 슬로건만 노출되어, 어떤 강의의 어떤 수강평인지 전혀 알 수 없었습니다.
인프랩 개발팀이 수강평 본문과 평점을 실시간으로 렌더링하는 Dynamic OG 시스템을 구축한 이후, 미리보기 카드만으로도 콘텐츠 성격을 직관적으로 파악할 수 있게 되었습니다. 소셜 채널과 커뮤니티를 통한 추천 유입 지표가 개선된 대표적인 사례입니다.
모빌리티 브랜드 더스윙은 멤버십 요금제 개편 시, CSR 환경의 한계를 CloudFront Functions로 우회했습니다. 고객이 가입한 요금제 종류(Basic, Essential 등)에 맞춰 실시간으로 변화하는 맞춤형 썸네일을 제공해, 앱 외부 공유를 통한 신규 가입 추천 효과를 높였습니다.
두 사례 모두 홈페이지 또는 서비스 제작 단계에서 Dynamic OG를 설계에 포함했기 때문에 가능한 결과였습니다.
Dynamic OG 도입 여부를 홈페이지 제작 전에 확인해야 할 항목을 정리했습니다.
Q1. Dynamic OG는 어떤 사이트에 도입하면 효과가 클까요?
페이지 유형이 다양하고 소셜 공유가 자주 발생하는 사이트일수록 효과가 큽니다. 블로그, 이커머스 상품 페이지, 강의 플랫폼, 채용 공고 페이지, 이벤트 랜딩 페이지 등이 대표적입니다. 모든 페이지가 동일한 콘텐츠 구조를 가진 브로셔형 사이트라면 상대적으로 효과가 제한적입니다.
Q2. WordPress나 그누보드 같은 CMS 환경에서도 구현 가능한가요?
가능하지만 구현 방식이 다릅니다. Next.js처럼 엣지 런타임 기반 이미지 생성을 직접 지원하지 않으므로, 별도의 이미지 생성 서비스(Cloudinary, 자체 API 서버 등)를 연동하거나 플러그인을 활용해야 합니다. 다만 CSR 제약과 유사하게, PHP 기반 CMS는 서버에서 HTML을 완성해 보내는 구조라 SSR에 가까워 기본 OG 태그 적용은 비교적 수월합니다.
Q3. 카카오톡에서 이미지를 수정했는데 여전히 구버전이 보입니다. 어떻게 해야 하나요?
카카오 디벨로퍼스 공유 디버거(developers.kakao.com/tool/debugger/sharing)에 접속해 해당 URL을 입력하고 '캐시 초기화'를 실행하세요. 이후 카카오톡에서 링크를 다시 붙여넣으면 갱신된 이미지가 반영됩니다.
Q4. Dynamic OG 이미지에 브랜드 로고와 색상을 일관되게 적용할 수 있나요?
네, 가능합니다. API에서 이미지를 생성할 때 배경색, 폰트, 로고 위치 등을 템플릿으로 고정하고, 제목이나 설명 같은 가변 요소만 파라미터로 받으면 됩니다. 브랜드 가이드라인을 코드에 반영해두면 어떤 페이지를 공유해도 일관된 브랜드 이미지가 유지됩니다.
Q5. 홈페이지 제작 비용에 Dynamic OG 구현이 포함되나요?
에이전시마다 다릅니다. 일반적인 홈페이지 제작 견적에는 기본 OG 태그 설정만 포함되는 경우가 많고, Dynamic OG API 구축은 별도 개발 항목으로 분리되기도 합니다. 기획 단계에서 명확히 요청 사항에 포함시키고, 렌더링 방식(SSR/CSR)과 함께 개발사와 협의하는 것이 중요합니다.
og:title, og:image 등의 메타 태그로 구성됨next/og가 이를 활용함?v=타임스탬프)를 추가해 브라우저나 플랫폼이 캐싱된 구버전 대신 새 파일을 강제로 불러오게 하는 기법next/og 라이브러리의 핵심 기술로, 엣지 환경에서 초고속 이미지 생성을 가능하게 함Dynamic OG는 화려한 기술이 아닙니다. 이미 공유되고 있는 링크에서 클릭을 더 받기 위한, 가장 현실적이고 효과가 검증된 방법입니다.
핵심 요점을 정리하면 이렇습니다.
홈페이지를 새로 제작하거나 리뉴얼할 계획이 있다면, 기획 단계에서 Dynamic OG 구현 여부를 개발 명세에 포함시키는 것이 중요합니다. 오픈 이후에 추가하려면 렌더링 구조 전체를 손봐야 하는 경우가 생깁니다.
에이달(ADALL)은 홈페이지 기획 단계부터 OG 구조 설계, SSR/CSR 렌더링 방식 선택, 엣지 기반 Dynamic OG 구현까지 함께 고민합니다. 단순히 보기 좋은 사이트가 아니라, 공유될 때도 성과를 내는 홈페이지를 만들고 싶다면 편하게 문의해 주세요.
📞 02-2664-8631 | ✉️ master@adall.co.kr
현재 홈페이지의 OG 구조가 궁금하시거나, 새 홈페이지 제작을 검토 중이시라면 무료 컨설팅을 통해 현황을 먼저 파악해보실 수 있습니다.
무료 컨설팅 받아보고 싶다면?
무료 컨설팅 신청하기