X(구 트위터) 타임라인을 홈페이지에 임베드하는 방법 | 표시되지 않는 원인과 해결법 (2026)

참고: 이 글의 검증 내용과 스크린샷은 2026년 8월 기준입니다.

X 임베드가 표시되지 않는 7가지 원인

“트위터 임베드 안 보임” 같은 검색이 끊이지 않는 데에는 분명한 이유가 있습니다. 원인은 크게 다음 7가지로 나뉩니다. 먼저 내 증상이 어디에 해당하는지 확인해 보시기 바랍니다.

1. 옛 twitter.com URL을 쓰고 있음 — 2023년 X로 리브랜딩되면서 URL이 x.com으로 바뀌었고, 오래된 임베드 코드나 캐시된 코드는 그대로 깨진 채 남아 있습니다.
2. widget.js가 로드되지 않음 — 임베드 코드를 타임라인으로 변환해 주는 공식 스크립트는 CMS나 최신 프레임워크와 충돌해 로드에 실패하는 경우가 잦습니다.
3. 비로그인 방문자 표시 제한 — 2023년 이후 로그인하지 않은 상태의 열람이 단계적으로 제한되면서, 사이트 방문자에게 임베드 타임라인이 보이지 않는 사례가 많아졌습니다.
4. 타임라인 임베드 자체가 망가짐 — 지금의 publish.x.com은 프로필을 입력해도 “Posts by [내 계정]”이라는 텍스트 링크만 생성합니다(아래 검증 파트에서 실제 화면을 보여드립니다).
5. X API 유료화 — API v2 전환으로 무료 사용량이 크게 줄면서, 무료로 피드를 가져오던 외부 서비스 상당수가 중단됐습니다.
6. 계정이 비공개로 전환됨 — 임베드한 계정이 보호 계정으로 바뀌면 오류 메시지도 없이 임베드가 빈 공간이 됩니다.
7. 편집기에서만 나타나는 제한 — Squarespace는 편집 화면에서 스크립트를 비활성화하고, Webflow의 Designer는 임베드를 아예 렌더링하지 않습니다. 두 경우 모두 게시된 페이지에서는 정상적으로 표시됩니다. 고장으로 착각하기 가장 쉬운 사례입니다.

공식 도구 publish.x.com을 직접 검증한 결과

publish.x.com을 열면 “What would you like to embed?”라고 묻고, 게시물 URL·프로필 URL·핸들(@사용자명)·해시태그 네 가지를 입력할 수 있게 되어 있습니다. 네 가지를 전부 시험해 봤습니다. 결과는 다음과 같습니다.

단일 게시물 임베드 — 이것은 작동합니다

SpaceX의 게시물 URL을 입력하니 “Embedded Video”와 “Embedded Post” 두 가지 표시 형식이 제시됐고, 본문·이미지· 반응 수까지 담긴 깔끔한 카드가 미리보기로 나타났습니다. 코드를 사이트에 붙여넣자 그대로 정상 표시됐습니다. 게시물 한 개를 글 안에 인용하는 용도라면 공식 도구로 충분합니다.

프로필 URL(타임라인) — 깨져 있습니다

다음으로 https://x.com/SpaceX를 입력하고 “Embedded Timeline”을 선택했습니다. 그런데 미리보기에 나타난 것은 피드가 아니라 “Posts by SpaceX”라는 텍스트뿐이었습니다. 더 심각한 문제는 생성된 링크가 https://s.com/SpaceX라는 점입니다. x.com도 아닌, 존재하지 않는 URL입니다. 코드를 사이트에 붙여넣어도 결과는 같았습니다. 타임라인은 전혀 표시되지 않고 깨진 링크만 남습니다.

핸들(@XDevelopers) — 같은 증상

X가 입력 예시로 직접 제시하는 @XDevelopers로도 시험해 봤지만 결과는 같았습니다. “Posts by XDevelopers”라는 텍스트와 https://s.com/XDevelopers라는 깨진 링크만 생성됩니다.

해시태그(#WhatsHappening) — 선택지 자체가 없습니다

#WhatsHappening을 입력하면 이번에는 “Embedded Timeline”이라는 선택지 자체가 나타나지 않습니다. 생성되는 것은 “Post #WhatsHappening”이라는 글쓰기 버튼뿐입니다. 즉, 공식 도구로 해시태그 피드를 임베드하는 방법은 존재하지 않습니다. 이벤트나 캠페인용 해시태그 월을 만들려면 공식 도구는 처음부터 선택지에서 제외됩니다.

확실한 방법: CollectSocials로 X 타임라인을 홈페이지에 임베드하기

공식 도구를 포기한 뒤 필자가 실제로 쓰고 있는 것이 CollectSocials입니다. API 키 발급도, 개발자 계정도 필요 없고 widget.js를 디버깅할 일도 없습니다. 과정은 다음 6단계입니다.

1. CollectSocials에 가입하고 Organize 대시보드에서 새 피드를 만듭니다
2. ‘Add Source’를 눌러 플랫폼 목록에서 X/Twitter를 선택합니다
3. ‘My Tweets’(내 타임라인)와 ‘Hashtag’(해시태그 수집) 중에서 가져오기 방식을 고릅니다 — My Tweets는 OAuth 2.0 계정 연결이 필요하고, 해시태그는 계정 연결이 필요 없습니다
4. Collect 페이지에서 게시물을 관리합니다(고정·제외·키워드 필터)
5. Design Studio에서 레이아웃과 디자인을 고릅니다
6. ‘Get Code’로 임베드 코드를 받아 사이트에 붙여넣습니다

1단계: 새 피드 만들기

가입하면 Organize 대시보드가 표시됩니다. ‘Create New Feed’를 클릭합니다. 피드는 여러 개 만들 수 있으므로, 회사 타임라인용과 캠페인 해시태그용을 나누어 운영하는 것도 가능합니다.

2단계: 소스로 X/Twitter 선택

‘Add Source’를 클릭하면 플랫폼 선택 화면이 열립니다. 여기서 X/Twitter를 고릅니다. YouTube·Google 리뷰·TikTok·Facebook· Instagram 등 다른 플랫폼도 지원하며, 여러 소스를 위젯 하나에 모아 소셜 월로 표시할 수도 있습니다.

3단계: 가져오기 방식 선택

먼저 가져오기 방식을 고릅니다. ‘My Tweets’(내 타임라인 가져오기) 또는 ‘Hashtag’(공개 해시태그 수집, 계정 연결 불필요) 중 하나입니다. ‘My Tweets’를 선택한 경우에는 ‘Connect X’를 눌러 OAuth 2.0으로 인증합니다. 비밀번호가 CollectSocials에 저장되는 일은 없으며, 연결은 X 설정 화면에서 언제든 해제할 수 있습니다. 해시태그 수집은 공식 도구에는 없는 기능입니다.

4단계: 게시물 관리하기

설정이 끝나면 게시물이 Collect 페이지로 들어옵니다. 임베드 피드 운영의 핵심이 바로 여기입니다. 보여주고 싶은 게시물은 고정해서 위에 올리고, 사이트에 내보내고 싶지 않은 게시물은 제외하고, 키워드 필터로 자동으로 걸러낼 수도 있습니다. 게시물 단위로 완전히 통제할 수 있습니다.

5단계: Design Studio에서 디자인 정하기

Design Studio에서는 Carousel(캐러셀)·Grid(그리드)·Masonry(메이슨리)· Timeline(타임라인) 같은 레이아웃 가운데 하나를 고르고, 색상·글꼴·카드 스타일을 내 사이트에 맞게 조정할 수 있습니다. X는 이미지보다 텍스트 중심의 플랫폼이므로, 글이 읽기 편한 Timeline이나 List가 특히 잘 어울립니다.

6단계: 미리보기 확인 후 임베드 코드 받기

‘Preview’로 데스크톱·태블릿·모바일 화면을 확인하고, 문제가 없으면 ‘Get Code’로 임베드 코드를 받습니다. 이제 이 코드를 사이트에 붙여넣기만 하면 됩니다. 플랫폼별 구체적인 순서는 다음 섹션에서 안내합니다.

X 연동 요금 안내

알아 두셔야 할 점은 X의 API 유료화입니다. 현재 X API는 계정 연결과 게시물 조회마다 비용이 발생하는 구조여서, 어떤 임베드 서비스든 X 연동은 상위 요금제 기능이 되기 쉽습니다. CollectSocials에서도 X 연동은 유료 요금제 기능이지만, 타임라인과 해시태그 수집 모두 무료 체험 기간에 가져오기 한도 내에서 사용해 볼 수 있습니다. 결제를 결정하기 전에 내 사이트에서 실제 표시를 확인할 수 있다는 뜻입니다. 한 가지 참고할 점이 있습니다. 체험 기간의 가져오기 한도는 하루 단위로 조금씩 쌓이는 방식이므로, 여러 X 소스를 동시에 시험하는 경우 해시태그 첫 수집이 다음 날로 밀릴 수 있습니다. 요금제 세부 내용은 요금 페이지(영어)에서 확인하실 수 있습니다.

피드는 일정 간격으로 자동 동기화되므로 수동 갱신 작업은 필요 없습니다. 다만 ‘실시간 스트리밍’은 아닙니다. 피드 설정에서 사전 승인(Pre-approve)을 켜 두면 이미 수집된 게시물을 언제 내보낼지는 Collect 페이지의 승인으로 직접 통제할 수 있지만, X 소스의 동기화 주기 자체가 짧아지지는 않습니다. 행사장 해시태그 월처럼 현장에서 운영하는 경우, 행사 중에 올라온 게시물은 다음 동기화 이후에 소셜 월에 반영된다는 점을 감안해 운영하시기 바랍니다.

동영상 튜토리얼(영어)

음성은 영어지만 화면 조작은 이 글의 스크린샷과 같은 순서이므로, 영상만 보셔도 단계를 따라갈 수 있습니다.

공식 임베드 vs CollectSocials 비교

플랫폼별 임베드 방법(워드프레스·Shopify·Webflow 등)

임베드 코드를 받았다면, 이제 사용 중인 서비스의 방식에 맞게 붙여넣기만 하면 됩니다. CollectSocials는 플랫폼을 선택하면 그 플랫폼에 맞는 형식의 코드를 발급합니다 — 스크립트를 쓸 수 없는 서비스에는 iframe 형식, Shopify에는 테마 레이아웃 깨짐을 막는 래퍼가 포함된 형식이 나가는 식입니다.

워드프레스(구텐베르크 편집기)

1. 피드를 표시할 페이지나 글을 엽니다
2. ‘+’로 블록을 추가하고 ‘사용자 정의 HTML’을 검색합니다
3. 사용자 정의 HTML 블록에 임베드 코드를 붙여넣습니다
4. 블록 도구 모음의 ‘미리보기’로 확인 후 게시합니다

플러그인 설치는 필요 없습니다.

Shopify(Online Store 2.0)

1. Shopify 관리자에서 ‘온라인 스토어 > 테마 > 사용자 지정’을 엽니다
2. 피드를 넣을 페이지에서 ‘섹션 추가’를 클릭합니다
3. ‘사용자 지정 Liquid’를 선택하고 Liquid 입력란에 임베드 코드를 붙여넣습니다
4. 섹션 위치를 조정하고 저장합니다

Shopify용으로는 테마의 flexbox 레이아웃에 위젯이 눌리지 않도록 페이지 너비 컨테이너로 감싼 형식의 코드가 발급됩니다. 코드 발급 화면에서 Shopify를 선택하기만 하면 이 차이는 자동으로 처리됩니다.

Webflow

1. Webflow Designer에서 프로젝트를 엽니다
2. Embed 요소(Components 안)를 피드를 넣을 위치로 드래그합니다
3. 코드 입력란에 임베드 코드를 붙여넣고 편집기를 닫습니다
4. 사이트를 게시하고 표시를 확인합니다

주의: Webflow의 Designer 안에서는 임베드가 렌더링되지 않습니다. 고장이 아니라, 게시된 페이지에서 비로소 표시되는 사양입니다.

Wix·Squarespace·기타 서비스

Wix와 Squarespace는 외부 <script> 태그를 제한하기 때문에, CollectSocials는 이 두 서비스용으로 iframe 형식의 임베드 코드를 발급합니다. Wix는 HTML 임베드 요소에, Squarespace는 코드 블록에 붙여넣기만 하면 됩니다. iframe 높이는 임베드한 피드에 맞춰 자동 조절됩니다.

Squarespace에서 ‘안 보인다’고 느껴진다면: Squarespace는 편집 화면에서 스크립트를 비활성화하므로, 편집 중에는 표시가 깨지거나 “Script Disabled”가 나타날 수 있습니다. 이는 편집 화면에만 해당하는 동작이며, 게시된 페이지에서는 정상적으로 표시됩니다. 게시 전에 고장으로 판단하지 않도록 주의하시기 바랍니다.

Notion이나 Google Sites처럼 스크립트를 아예 실행할 수 없는 서비스용으로는 URL만 지정하면 되는 iframe 형식도 준비되어 있습니다. 사용자 정의 HTML을 쓸 수 있는 서비스(HubSpot·정적 HTML 사이트 등)라면 기본 코드가 그대로 작동합니다.

X 해시태그 피드를 홈페이지에 임베드하려면

검증 파트에서 보여드렸듯이, 공식 도구는 해시태그 피드 임베드를 지원하지 않습니다. 생성되는 것은 글쓰기 버튼뿐입니다. X API 자체에는 해시태그 검색 기능이 있지만, 직접 구현하려면 개발 리소스와 API 비용이 필요합니다. 그래서 API 부분을 대신 처리하고 임베드 위젯까지 만들어 주는 서드파티 도구가 필요해집니다.

CollectSocials에서의 순서는 타임라인 임베드와 거의 같습니다. 3단계에서 ‘My Tweets’ 대신 ‘Hashtag’를 고르고 추적할 해시태그(예: #자사브랜드명)를 입력하면, 해당 해시태그의 공개 게시물이 수집됩니다. 계정 연결도 필요 없습니다. 해시태그 수집 역시 무료 체험 기간에 가져오기 한도 내에서 사용해 볼 수 있습니다(요금제 세부 내용은 요금 페이지(영어)).

해시태그 피드에서는 게시물 관리를 반드시 활성화하시기 바랍니다. 공개 해시태그에는 스팸이나 무관한 게시물, 때로는 부적절한 게시물도 흘러들어 옵니다. 피드 설정에서 사전 승인을 켜 두면 승인하기 전까지 게시물이 사이트에 일절 표시되지 않습니다. 여기에 키워드 필터를 조합해, 표시되기 전에 반드시 내용을 확인하는 운영을 권장합니다. 이벤트 활용법은 이벤트용 소셜 월 가이드(영어)에 정리되어 있습니다.

자주 묻는 질문

X(트위터) 임베드가 표시되지 않는 이유는 무엇인가요?

주요 원인은 (1) 옛 twitter.com URL을 쓴 오래된 임베드 코드, (2) widget.js 스크립트 로드 실패, (3) 비로그인 방문자 표시 제한, (4) 임베드한 계정의 비공개 전환, (5) Squarespace·Webflow의 편집 화면에만 해당하는 제한 — 이 다섯 가지입니다. “Posts by [내 계정]”이라는 텍스트만 표시된다면 공식 타임라인 임베드 자체가 깨진 경우이므로, 코드를 다시 발급받아도 해결되지 않습니다. 이 글의 CollectSocials를 쓰는 방법을 검토해 보시기 바랍니다.

무료로 X 타임라인을 임베드할 수 있나요?

공식 publish.x.com은 무료지만, 검증에서 확인했듯이 현재 제대로 작동하는 것은 단일 게시물 임베드뿐입니다. 타임라인이나 해시태그 피드를 안정적으로 표시하려면 서드파티 도구가 필요하고, X API 유료화의 영향으로 어느 도구든 X 연동은 기본적으로 유료 기능입니다. CollectSocials의 경우 타임라인과 해시태그 모두 무료 체험 기간에 가져오기 한도 내에서 사용해 볼 수 있으므로, 결제 전에 내 사이트에서 표시를 확인할 수 있습니다.

해시태그 피드도 임베드할 수 있나요?

공식 도구로는 불가능합니다. 해시태그를 입력해도 글쓰기 버튼만 생성됩니다. CollectSocials 같은 서드파티 도구라면 해시태그를 지정해 공개 게시물을 수집하고, 게시물 관리를 거쳐 사이트에 임베드할 수 있습니다.

워드프레스에 X 타임라인을 넣으려면 어떻게 하나요?

구텐베르크 편집기에서 ‘사용자 정의 HTML’ 블록을 추가하고 CollectSocials에서 받은 임베드 코드를 붙여넣기만 하면 됩니다. 전용 플러그인 설치는 필요 없습니다. 클래식 편집기라면 ‘텍스트’ 탭으로 전환한 뒤 코드를 붙여넣으시면 됩니다.

Wix나 Squarespace에서도 사용할 수 있나요?

사용할 수 있습니다. 이 두 서비스는 외부 스크립트를 제한하기 때문에 CollectSocials는 Wix·Squarespace용으로 iframe 형식 코드를 발급합니다. Wix의 HTML 임베드 요소나 Squarespace의 코드 블록에 붙여넣으시면 됩니다. 참고로 Squarespace 편집 화면에서는 스크립트가 비활성화되어 표시가 깨져 보일 수 있지만, 게시된 페이지에서는 정상적으로 표시됩니다.

참고 링크(영어)

• Timelines standard v1.1 to v2 migration guide — X Developer Platform
• Working with timelines — X Developer Platform
• X Publish — 공식 임베드 도구
• 이 글의 영어 원문