SNS 임베드 코드 생성기

SNS 임베드 코드 생성기 소개

X(트위터), 페이스북, 인스타그램, 스레드 게시물 주소를 붙여 넣으면 블로그나 웹페이지에 넣을 임베드 코드를 만들어 줍니다. 방식은 두 가지입니다. 「스크립트」 방식은 플랫폼의 공식 위젯 스크립트(widgets.js, sdk.js, embed.js)가 자리표시 태그를 실제 게시물로 바꿔 그리게 하고, 「iframe」 방식은 플랫폼의 임베드 전용 주소를 iframe으로 바로 띄웁니다. 스레드는 공개된 iframe 주소가 없어 스크립트 방식만 만듭니다.

두 방식은 보기엔 비슷하지만 내 페이지에 무엇을 허락하느냐가 다릅니다. 아래에서는 그 차이와, 임베드가 방문자 개인정보에 어떤 영향을 주는지, 그리고 이런 코드가 어디서 오는지(oEmbed)를 다룹니다.

스크립트 방식과 iframe 방식의 차이

스크립트 방식에서 <script src="https://platform.twitter.com/widgets.js">는 내 페이지 안에서 내 사이트와 같은 권한으로 실행됩니다. 그 스크립트는 원칙적으로 페이지의 DOM을 읽고 바꿀 수 있습니다. 대신 높이를 게시물 길이에 맞춰 자동으로 조절하고, 다크 테마나 언어 같은 옵션을 플랫폼이 공식 지원하는 방식으로 적용합니다.

iframe 방식은 게시물을 다른 출처(origin)의 창 안에 가둡니다. 플랫폼 코드가 내 페이지 DOM에 접근할 수 없고, 외부 스크립트를 한 줄도 넣지 않아도 됩니다. 단점은 높이입니다. iframe은 내용 길이를 모르기 때문에 이 도구는 X 600px, 인스타그램 800px(캡션 숨김 시 640px) 같은 추정값을 넣고, 게시물이 길면 잘리거나 짧으면 빈 공간이 남습니다. 높이 칸에서 직접 맞추세요.

보안 정책(CSP)을 엄격하게 운영하는 사이트라면 iframe 방식이 script-src를 넓히지 않아도 되어 관리가 쉽습니다. 반대로 게시물을 여러 개 넣는 긴 글이라면 스크립트는 한 번만 넣고(「스크립트 제외」 옵션) 자리표시 태그만 반복하는 편이 가볍습니다.

임베드와 제3자 쿠키

어느 방식이든 게시물은 플랫폼 서버에서 불러오므로, 방문자 브라우저는 x.com이나 facebook.com으로 요청을 보냅니다. 이때 그 방문자가 해당 플랫폼에 로그인해 있다면 제3자 쿠키가 함께 전송될 수 있고, 플랫폼은 「이 사람이 이 페이지를 봤다」는 사실을 알 수 있습니다. 게시물을 클릭하지 않아도 페이지를 여는 것만으로 요청이 나갑니다.

브라우저마다 대응이 다릅니다. WebKit(사파리) 문서는 지능형 추적 방지(ITP)가 기본적으로 모든 제3자 쿠키를 예외 없이 차단한다고 밝힙니다. 크롬은 제3자 쿠키를 단계적으로 없애려던 계획을 철회하고, 사용자가 설정에서 선택하도록 하는 방식을 유지하기로 2025년에 발표했습니다. 즉 같은 임베드라도 방문자의 브라우저에 따라 추적 여부가 달라집니다.

이 도구의 X 「추적 비활성화」 옵션은 스크립트 방식에서 data-dnt="true"를, iframe 방식에서 dnt=true 파라미터를 붙여 X에 개인화 목적으로 쓰지 말라고 요청합니다. 요청일 뿐 네트워크 요청 자체를 막지는 않습니다. 쿠키 동의 배너를 운영한다면 임베드도 동의 전에는 불러오지 않는 대상에 넣을지 검토하고, 가장 확실한 방법은 게시물 스크린숏과 원문 링크로 대체하는 것입니다.

임베드 코드는 어디서 오나: oEmbed

워드프레스 같은 CMS에 게시물 주소만 붙여 넣어도 임베드가 되는 것은 oEmbed라는 공개 형식 덕분입니다. 소비자(CMS)가 제공자(플랫폼)의 oEmbed 엔드포인트에 URL을 보내면 JSON으로 type, version(1.0), html, width, height 등을 돌려받습니다. type은 photo, video, link, rich 네 가지이고, 페이지 안의 <link rel="alternate" type="application/json+oembed">로 엔드포인트를 찾을 수 있습니다.

oEmbed 명세는 rich나 video 타입의 html을 표시할 때 다른 도메인에서 호스팅한 iframe 안에 넣으라고 권합니다. 제공자가 준 HTML을 그대로 내 페이지에 넣으면 XSS나 쿠키 접근 위험이 생기기 때문입니다. 이 도구의 iframe 방식이 바로 그 권고와 같은 구조입니다. 이 도구는 oEmbed API를 호출하지 않고 각 플랫폼의 공식 임베드 형식을 직접 조립하므로, 게시물이 삭제되었거나 비공개인지는 붙여 넣은 뒤 실제 페이지에서 확인해야 합니다.

게시물이 표시되지 않는 흔한 이유

• 게시물이 비공개 계정이거나 삭제되었음 — 스크립트 방식은 빈 인용문과 링크만 남습니다.
• 인스타그램 주소에 ?utm_source= 같은 쿼리가 붙음 — 이 도구는 쿼리와 해시를 떼고 끝에 /를 붙여 정규화합니다.
• 광고 차단기·추적 방지 확장 프로그램이 위젯 스크립트나 iframe 도메인을 차단함.
• 페이지의 CSP가 platform.twitter.com, connect.facebook.net, www.instagram.com 등을 허용하지 않음.
• 유튜브·틱톡·비메오 주소 — 이 도구가 지원하지 않는 플랫폼으로, 인식은 하지만 코드를 만들지 않습니다.

예시

사용 방법

1. 게시물 주소를 붙여 넣습니다. 플랫폼은 주소로 자동 인식됩니다.
2. 스크립트 또는 iframe 방식을 고르고, 테마·너비·정렬·캡션 숨김 같은 옵션을 정합니다.
3. 한 페이지에 여러 개를 넣는다면 두 번째부터는 스크립트 제외를 켭니다.
4. 코드를 복사해 HTML 편집 모드에 붙여 넣고, 실제 페이지에서 표시되는지 확인합니다.

자주 묻는 질문