인스타그램 피드 위젯 비교 | 8개를 같은 페이지에 직접 설치해 봤습니다 (2026)

이 글은 English와 日本語로도 보실 수 있습니다.

비교 대상은 인스타그램 피드 위젯을 찾을 때 가장 자주 언급되는 여덟 개입니다. CollectSocials, Elfsight, Curator.io, Taggbox(Tagembed), EmbedSocial, Flockler, Juicer.io, Walls.io입니다. 웹사이트 삽입을 목적으로 만들어진 도구만 넣었고, 위젯 기능이 곁다리로 붙어 있는 소셜 관리 플랫폼은 제외했습니다.

인스타그램 위젯이 자꾸 끊기는 진짜 이유

한국에서 인스타그램 피드를 홈페이지나 쇼핑몰에 붙이려고 검색해 보시면, 검색 결과의 상당수가 위젯 추천이 아니라 토큰 발급과 갱신 방법입니다. 액세스 토큰을 직접 발급받는 방법을 설명하는 개발 블로그가 줄줄이 나오고, 인스타그램 API 연동을 대신 해 준다는 외주 서비스까지 검색됩니다. 어떤 빌더의 공식 FAQ에는 "인스타그램 연동이 자꾸 풀린다"는 질문에 대해, 이것은 인스타그램 API 정책 때문이라 사이트 운영자도 빌더 쪽도 손쓸 수 있는 부분이 없다는 취지의 답변이 올라와 있습니다.

이유는 단순합니다. 인스타그램의 액세스 토큰에는 유효 기간이 있고, 기간이 지나면 피드가 더 이상 갱신되지 않습니다. 직접 API를 붙이신 경우에는 토큰을 새로 발급받아 스크립트를 수정하는 작업을 주기적으로 반복하셔야 합니다. 만료 자체는 인스타그램 쪽 정책이라 어떤 도구도 없앨 수 없습니다.

다만 연결 방식에 따라 갱신 가능 여부가 다릅니다. 메타 문서에 따르면 인스타그램에 직접 로그인해서 만든 토큰은 사용자가 아무 조작을 하지 않아도 서버 쪽에서 갱신할 수 있는 엔드포인트가 있습니다. 반면 페이스북을 거쳐 연결한 토큰에는 그런 수단이 없어서 기간이 지나면 사람이 직접 다시 연결해야 합니다. 그래서 벤더에게 물어보실 것은 어느 방식으로 연결하는지, 그리고 갱신이 실패했을 때 어떻게 알려 주는지 두 가지입니다. 자동 갱신이 된다고만 하고 실패했을 때의 동작을 설명하지 못한다면, 결국 피드가 조용히 멈추는 것은 같습니다.

도구들이 실제로 갈리는 나머지 지점은 만료된 다음에 무슨 일이 벌어지는가입니다. 직접 붙인 연동이라면 토큰을 재발급받고 코드를 다시 배포하셔야 합니다. CollectSocials의 경우에는 대시보드에서 다시 연결하시면 되고, 피드 설정과 골라 두신 게시물, 수정해 두신 문구는 그대로 남습니다. 코드를 다시 건드리실 일은 없습니다. 그래서 아래에서 벤더에게 물어볼 질문을 정리할 때, 토큰 항목을 첫 번째로 넣었습니다.

이 글에서 다루는 나머지 항목은 이것과 성격이 다릅니다. 토큰은 시간이 지나면 누구에게나 찾아오는 문제지만, 아래 항목들은 도구를 고르는 순간 이미 결정되고 나중에 바꿀 수 없는 것들입니다.

위젯을 고를 때 실제로 봐야 하는 것

렌더링 방식. 대부분의 비교 글이 언급하지 않지만, 위젯이 내 페이지에서 어떻게 동작할지를 가장 크게 좌우하는 항목입니다. 외부 도메인 iframe은 닫힌 상자입니다. 내가 쓴 CSS가 안쪽에 닿지 않고, 안쪽 내용도 내 페이지에서 보이지 않으며, 사이트 글꼴을 물려받지 못합니다. 스크립트 삽입 방식은 내 페이지 안에 직접 그려지기 때문에 반대로 CSS 격리가 중요해집니다.

CSS 격리. 구매 전에 확인하시는 분이 거의 없는데, 문제가 터지고 나서야 알게 되는 항목입니다. 격리가 없으면 사이트 CSS가 위젯을 깨뜨리고, 위젯 CSS가 사이트로 새어 나옵니다. 브라우저가 정식으로 제공하는 격리 수단은 Shadow DOM이고, iframe도 격리는 되지만 높이 고정과 스크롤 문제, 그리고 사이트 글꼴을 물려받지 못한다는 대가가 따릅니다.

여러 플랫폼을 한 위젯에 담을 수 있는지. 인스타그램만 보여 주는 사이트는 많지 않습니다. 구글 리뷰나 페이스북 게시물, 유튜브 영상까지 같이 보여 주고 싶어지는 경우가 대부분인데, 이때 플랫폼마다 위젯을 따로 사서 따로 붙여야 하는 제품과 하나의 피드에 섞을 수 있는 제품은 운영 부담이 완전히 다릅니다.

게시물을 고르고 문구를 고칠 수 있는지. 올린 게시물이 전부 자동으로 흘러 들어오는 것은 큐레이션이 아닙니다. 어떤 게시물을 노출할지 직접 고를 수 있어야 하고, 인스타그램용으로 붙여 둔 해시태그 더미를 홈페이지에서는 걷어낼 수 있어야 합니다.

파일 수. 위젯이 화면에 무언가를 그리기 전에 몇 개의 파일을 받아 와야 하는지입니다. 피드에 무엇을 담느냐에 따라 달라지지 않는 값이라, 페이지 속도 점수보다 훨씬 안정적인 비교 기준입니다.

조회수 제한. 가장 늦게 발견되는 비용입니다. 보통은 페이지가 처음으로 잘 되는 달에 알게 됩니다. 아래에 따로 한 절을 두었습니다.

렌더링 방식과 파일 수

이 절에는 원래 페이지 속도 점수도 함께 실려 있었는데 내렸습니다. 이유를 말씀드리는 편이 점수 자체보다 도움이 될 것 같습니다. 여덟 개 중 둘은 외부 도메인 iframe 안에서 그려지고 나머지 여섯은 페이지에 스크립트를 넣습니다. iframe은 작업을 페이지 메인 스레드 밖으로 옮기기 때문에 페이지 속도 검사에서 구조적으로 유리하게 나옵니다. 둘을 같은 점수로 줄 세우면 어느 쪽이 iframe인지를 알게 될 뿐, 어느 쪽이 내 사이트에 더 나은지는 알 수 없습니다.

재현성 문제도 있습니다. 저희 위젯 하나만 놓고 레이아웃과 배치 위치를 바꿔 가며 다시 재 보니, 내용이 전혀 바뀌지 않은 같은 페이지의 점수가 크게 출렁였습니다. 피드 이미지 하나가 첫 화면에서 가장 큰 요소가 되는지 아닌지에 따라 갈렸습니다. 저희가 어떤 숫자를 적어 두더라도 여러분의 페이지에서는 재현되지 않을 것이고, 그렇다면 그 숫자는 신뢰하지 않으시는 편이 맞습니다.

그래서 지금은 움직이지 않는 것만 싣습니다. 어떻게 렌더링되는지, 파일을 몇 개 불러오는지, 스타일이 격리되는지입니다.

파일 수는 피드 내용에 따라 흔들리는 측정값이 아니라 설계 결정입니다. 스물두 개와 한 개의 차이는 화면에 무언가 그려지기 전에 왕복이 스물한 번 더 일어난다는 뜻이고, 회선이 빨라져도 그 간격은 좁혀지지 않습니다. 2026년 5월 관측이며 이번 갱신에서 다시 확인했습니다.

결제 전에 확인하셔야 할 기능 차이

가격이나 요금제와 달리, 아래 항목들은 제품이 그 기능을 가지고 있는지 아닌지의 문제라 나중에 요금제를 올려도 해결되지 않습니다. 특히 첫 줄은 구글 리뷰까지 함께 보여 주실 계획이라면 결제 전에 반드시 보셔야 합니다.

Curator.io와 Flockler는 구글 리뷰를 지원하지 않습니다. 두 제품 모두 다른 용도에서는 좋은 선택이지만, 인스타그램과 구글 리뷰를 한 페이지에 같이 올리려는 계획이시라면 이 두 제품은 애초에 후보에서 빠집니다. Taggbox는 체험을 시작하실 때 카드 등록을 요구합니다.

CSS 격리 테스트

호스트 페이지에 아래 CSS를 넣고 각 위젯이 버티는지 확인했습니다.

* { font-family: "Comic Sans MS", cursive !important; }
img { border: 5px solid red !important; border-radius: 0 !important; }
a { color: magenta !important; text-decoration: line-through !important; }
div { background-color: yellow !important; }

이 CSS를 넣어도 위젯이 평소대로 그려지면 격리가 되어 있는 것이고, 노란 배경에 Comic Sans 범벅이 되면 격리가 없는 것입니다.

여기서 가장 중요한 발견을 짚고 넘어가겠습니다. Flockler, Taggbox, Juicer.io, EmbedSocial 네 곳은 삽입 코드를 두 가지로 제공합니다. 자바스크립트 코드와 iframe 코드입니다. 네 곳 모두 iframe 코드 쪽은 완전히 격리됩니다. 그런데 기본으로 안내되는 코드는 앞의 세 곳에서 격리가 전혀 없습니다. 즉 같은 제품을 쓰면서도 어느 코드를 붙여넣었는지에 따라 결과가 완전히 달라집니다. 이 세 제품을 쓰신다면 반드시 iframe 코드를 쓰십시오.

EmbedSocial의 자바스크립트 코드는 나머지 셋보다는 낫습니다. 내용 자체는 iframe 안에서 그려지기 때문입니다. 다만 스크립트가 로딩되는 동안 embedsocial-hashtag 클래스를 가진 래퍼 div가 페이지 DOM에 노출되어 있어서, 그 시간 동안에는 사이트 CSS가 그 영역에 영향을 줍니다. EmbedSocial 쪽 스타일시트가 그 래퍼에 position: relative를 걸기도 하는데, 이건 작지만 바깥으로 새는 쪽의 사례입니다. 처음부터 깔끔한 격리를 원하신다면 iframe 코드를 직접 쓰시는 편이 낫습니다.

이전 판에서 틀렸던 부분을 바로잡습니다. 저는 예전에 Elfsight가 CSS 격리를 위해 iframe을 쓴다고 적었는데, 직접 테스트해 보니 사실이 아니었습니다. Elfsight는 페이지 DOM에 eapps-instagram-feed-container 같은 클래스명을 가진 평범한 요소로 그려지고, shadow root도 iframe도 없습니다. 테스트 CSS를 넣자 위젯 전체가 노란 배경에 Comic Sans로 바뀌었습니다. 이 항목을 굳이 짚는 이유는, Elfsight가 이 분야에서 가장 널리 쓰이는 제품 중 하나인데도 iframe을 쓴다는 서술이 여러 리뷰 사이트에 그대로 올라와 있기 때문입니다. 직접 확인하지 않고 옮겨 적힌 것으로 보입니다.

CollectSocials

이런 경우에 맞습니다: 디자인을 어느 정도 맞추고 싶고, 여러 플랫폼을 하나의 피드로 묶고 싶으며, 사이트 CSS와 충돌하지 않기를 바라는 경우.

제가 만든 제품이라 이 절은 테스트에서 확인된 사실만 적겠습니다. 여덟 개 중 유일하게 Shadow DOM을 쓰고, 그 안쪽에는 상속되는 속성을 전부 initial로 되돌리는 리셋이 함께 들어갑니다. 테스트 CSS를 넣었을 때 페이지의 나머지가 노랗게 변하는 동안 위젯만 정상으로 남았고, iframe을 쓰지 않고 이 결과를 낸 것은 이 제품뿐이었습니다.

불러오는 파일은 한 개이고 그 뒤로 추가로 붙는 것이 없습니다. 쿠키를 심지 않고 localStorage와 sessionStorage에도 아무것도 쓰지 않습니다. 이 세 가지는 피드에 무엇을 담든 어디에 배치하든 달라지지 않기 때문에, 저희가 문서로 적어 둘 수 있는 항목이기도 합니다. 쿠키를 심지 않는다는 점은 요즘 특히 의미가 있습니다. 위젯이 쿠키를 심는 순간 그 사이트의 동의 배너 범위에 들어가기 때문입니다.

게시물의 문구를 그 자리에서 고칠 수 있는 것도 이 비교에서는 이 제품 뿐이었습니다. 인스타그램용으로 붙여 둔 해시태그 더미를 홈페이지에서는 걷어내거나, 기간이 끝난 이벤트 문구를 지우거나, 웹사이트 방문자에게 맞게 문장을 다시 쓸 수 있습니다. 실제 인스타그램 게시물은 건드리지 않습니다. 나머지 제품들은 인스타그램에 올라간 문구를 그대로 노출합니다.

현재 지원하는 플랫폼은 인스타그램, X(트위터), 틱톡, 유튜브, 구글 리뷰, 핀터레스트, 비메오, 텀블러, RSS, 페이스북입니다. 이들을 하나의 위젯으로 합칠 수 있어서, 플랫폼마다 임베드를 따로 붙여 세로로 쌓는 대신 한 자리에서 정리됩니다. 레이아웃도 그리드 한 종류가 아니라 메이슨리, 캐러셀, 마퀴처럼 배치 성격이 다른 것들을 고르실 수 있어서, 피드를 페이지 어디에 넣느냐에 따라 맞추실 수 있습니다. 테마는 무료 요금제에서도 전부 열려 있습니다.

한계도 말씀드리겠습니다. 연결할 수 있는 소스 수에 요금제별 상한이 있어서, 계정을 많이 운영하신다면 가장 낮은 유료 요금제로는 부족합니다. SSO나 SAML을 지원하지 않고 별도의 데이터 처리 계약서도 제공하지 않기 때문에, 기업의 도입 심사 기준에 따라서는 후보에서 제외되실 수 있습니다. 링크드인은 아직 지원하지 않습니다. 그리고 파일을 하나만 불러온다는 것이 가볍다는 뜻은 아닙니다. 영상이 많은 피드는 사진 피드보다 비용이 크고, 이건 여덟 개 어느 제품이든 마찬가지입니다.

Elfsight

이런 경우에 맞습니다: 진입 비용이 가장 중요하고, 한 사이트에 인스타그램 하나만 올리면 되며, CSS 격리가 없다는 점을 감수할 수 있는 경우.

Elfsight는 인스타그램 전용 도구가 아니라 위젯 마켓플레이스입니다. 수백 종류의 웹사이트 위젯을 제공하고 인스타그램 피드는 그중 하나입니다. 이 구조가 강점이자 동시에 이 맥락에서의 한계입니다.

장점은 분명합니다. 진입 요금제가 이 중에서 가장 저렴하고 설치가 빠릅니다. 인스타그램을 연결하고 레이아웃을 고른 뒤 코드를 복사하면 끝입니다. 레이아웃은 그리드, 메이슨리, 리스트, 슬라이더, 캐러셀의 다섯 가지이고 색상 조합이 함께 제공되어 기본적인 디자인 요구는 충족됩니다. 무료 요금제도 있지만 위젯 하나에 월 조회수 한도가 매우 낮게 묶여 있고 Elfsight 브랜딩이 표시되기 때문에, 실사용 요금제라기보다 데모에 가깝습니다.

테스트에서 통념과 달랐던 부분이 여기입니다. Elfsight는 iframe을 쓰지 않습니다. DOM을 열어 보면 위젯이 eapps-instagram-feed-container 같은 클래스를 가진 평범한 요소로 페이지에 직접 들어가 있고, shadow root도 iframe 경계도 없습니다. 테스트 CSS를 넣자 위젯 전체가 노란 배경에 Comic Sans, 이미지마다 빨간 테두리가 되었습니다. 커스텀 CSS가 조금이라도 있는 사이트, 즉 사실상 거의 모든 사이트에서는 원인을 찾기 어려운 스타일 충돌이 생길 수 있습니다.

구조적으로는 파일 두 개를 불러오는 스크립트 삽입 방식이고, 문제가 되는 것은 파일 수보다 격리가 없다는 쪽입니다. 인스타그램과 구글 리뷰를 함께 쓰시려면 위젯을 각각 구매해서 각각 붙이셔야 하고 하나의 피드로 합쳐지지 않습니다. 여러 앱을 묶어 주는 번들 요금제가 있어서 비용 자체는 정리하실 수 있지만, 번들을 쓰셔도 피드가 하나로 합쳐지지는 않습니다. 삽입 코드가 여러 개가 되고 디자인도 따로 노는 문제는 그대로 남습니다. 조회수 상한도 눈여겨보셔야 합니다. 상한을 넘기면 위젯이 표시되지 않고, 완만하게 줄어드는 방식이 아닙니다.

Curator.io

이런 경우에 맞습니다: 개발자가 직접 얹어 쓰고, CSS 스코프를 스스로 관리할 수 있는 경우.

Curator.io는 이 분야에 오래 있었고 안정성과 깔끔한 코드로 평이 좋습니다. 15개 이상의 플랫폼을 지원하고, 무료 요금제가 비교적 넉넉하며, 커스텀 CSS와 API 접근을 제공해 개발자 친화적입니다.

파일 네 개를 불러오는 스크립트 삽입 방식이고, 이미지 처리는 이 중에서 스크립트 삽입 제품 가운데 가장 견실합니다. WebP로 적극적으로 압축해서 내려 주기 때문에 이미지가 많은 계정에서 실제로 차이가 납니다.

다만 CSS 격리 테스트에서는 문제가 드러났습니다. 위젯이 전역 DOM에 평범한 요소로 그려지고 Shadow DOM도 iframe도 없어서 테스트 CSS에 그대로 무너졌습니다. 여기에 더해 Curator.io는 자기 스타일시트에서 :root에 자체 CSS 변수를 선언합니다. 즉 새는 방향이 양쪽입니다. 사이트 CSS가 위젯을 깨뜨릴 뿐 아니라, 위젯 쪽 변수가 사이트에 영향을 줄 수도 있습니다.

연식이 드러나는 부분도 있습니다. 관리 화면이 기능적이지만 오래된 느낌이고, 레이아웃 선택지가 적으며, 테마를 손볼 수 있는 기능이 없습니다. 정리하면, 안정적인 수집 엔진 위에 직접 무언가를 만드시려는 개발자에게는 좋은 선택이고, 별도 작업 없이 격리된 위젯을 원하시는 경우에는 약한 선택입니다.

Taggbox (Tagembed)

이런 경우에 맞습니다: UGC 사용 허락 관리와 커머스 연계 기능이 반드시 필요하고, 22개 파일과 로딩 중 레이아웃 흔들림을 감수할 수 있는 경우.

Taggbox는 이 비교에서 기능이 가장 많고 동시에 가장 복잡합니다. 20개 이상의 플랫폼을 지원하고, AI 기반 검수, UGC 사용 허락 관리, 게시물에 상품을 태그해 구매로 연결하는 기능, 내장 분석까지 갖추고 있습니다. Taggbox와 Tagembed는 같은 회사이고 임베드 위젯은 Tagembed 쪽이 담당합니다.

구조 면에서는 확실한 이상치입니다. 자바스크립트 파일을 22개 불러옵니다. 다른 스크립트 삽입 제품들이 두 개에서 네 개, CollectSocials가 한 개인 것과 비교됩니다. 피드가 다 그려지기 전에 왕복이 스물한 번 더 일어난다는 뜻이고, 페이지 무게와 달리 피드에 무엇을 담는지와 무관합니다. 게시물을 네 개 보여 주든 마흔 개를 보여 주든 같은 22개입니다.

파일이 22개라는 것은 도착 시점이 22번으로 나뉜다는 뜻이기도 합니다. Taggbox는 그 자리를 미리 확보해 두지 않기 때문에 피드가 조립되는 동안 페이지가 눈에 띄게 밀립니다. 뒤에 나오는 Juicer.io와 원인은 다르지만 결과는 같습니다.

CSS 격리는 두 가지 코드가 제공되는데 차이가 큽니다. 기본 스크립트 코드는 격리가 전혀 없어 테스트 CSS에 완전히 무너졌고, iframe 코드는 완전히 격리되어 정상으로 남았습니다. Taggbox를 쓰신다면 iframe 코드를 쓰십시오. 기본 코드는 보호가 없습니다.

요금제 구성도 복잡한 편입니다. 디지털 마케터용과 이벤트 마케터용이 따로 나뉘어 있고, UGC 사용 허락 관리는 상위 요금제로 올라가야 열립니다. 소규모 사업자에게는 기능도 요금 구조도 과합니다. 반대로 UGC를 본격적으로 운영하는 중견 이상 브랜드라면 다른 제품이 따라오지 못하는 기능들이 있습니다.

EmbedSocial

이런 경우에 맞습니다: 리뷰 관리가 사업의 중심이고, iframe 방식의 완전한 격리를 원하는 경우.

EmbedSocial은 리뷰 수집에서 출발해 소셜 피드로 확장한 제품이라, 가장 강한 영역이 리뷰 쪽입니다. 구글 리뷰와 페이스북 리뷰를 포함해 여러 출처의 사회적 증거를 다루고, 미리 만들어진 템플릿이 많으며, AI가 리뷰 답변을 대신 써 주는 기능도 있습니다. 문장으로 원하는 레이아웃을 설명하면 AI가 위젯 디자인을 만들어 주는 기능도 있는데, 이 비교의 다른 제품에는 없는 기능입니다.

여덟 개 중 외부 도메인 iframe으로 그려지는 두 제품 가운데 하나이고, 그 선택 하나가 나머지 대부분을 결정합니다. 브라우저가 iframe 내부를 페이지 메인 스레드와 분리해 처리하기 때문에 위젯이 안에서 무엇을 하든 사이트 쪽은 거의 영향을 받지 않습니다. 페이지 속도 검사가 iframe 방식에 후하게 나오는 이유이자, 저희가 여덟 개를 하나의 점수로 줄 세우지 않게 된 이유이기도 합니다. 대신 iframe이 늘 치르는 대가가 있습니다. 사이트 글꼴을 물려받지 못하고 높이가 스크립트로 관리됩니다.

파일은 10개를 불러오고 여기에는 Tailwind CSS 번들 전체와 슬라이더 라이브러리가 포함됩니다. Taggbox 다음으로 많은 숫자지만, 그 실행이 사이트 페이지가 아니라 iframe 안에서 일어나기 때문에 비용이 떨어지는 지점이 다릅니다. 파일 수와 페이지 속도 점수가 서로 다른 이야기를 한다는 것을 가장 잘 보여 주는 사례입니다.

격리는 코드 종류에 따라 갈립니다. iframe 코드를 직접 쓰시면 양방향으로 완전히 격리되어 테스트 CSS가 전혀 영향을 주지 못했습니다. 자바스크립트 코드도 내부적으로는 iframe을 쓰지만, 스크립트가 로딩되는 동안 래퍼 요소가 페이지 DOM에 노출되어 그 시간 동안에는 사이트 CSS가 그 영역에 닿습니다.

많은 구매자에게 걸리는 지점은 제품 구성입니다. 소셜 피드와 리뷰가 서로 다른 상품으로 나뉘어 있고 각각 요금이 붙습니다. 인스타그램 피드와 구글 리뷰를 같이 쓰시려면 두 개를 구독하시거나 통합 상품으로 올라가셔야 합니다. 삽입 방식은 자바스크립트, iframe, URL, 워드프레스 숏코드, SPA/Ajax의 다섯 가지로 이 비교에서 가장 많습니다.

Flockler

이런 경우에 맞습니다: 웹사이트와 행사 스크린, 이메일, 디지털 사이니지를 하나의 구독으로 함께 운영하는 대행사나 대형 브랜드.

Flockler는 이 시장의 상위 가격대에 있고 무료 요금제가 없습니다. 대부분의 중소 규모 사업자에게는 애초에 검토 대상에 들어오지 않는 가격대입니다.

테스트 결과는 두 얼굴이었습니다. 구조만 보면 이 중에서 정돈된 축에 속합니다. 파일 두 개를 불러오고 원하시면 iframe 모드도 쓸 수 있습니다. 엔지니어링이 문제인 제품은 아닙니다.

문제는 격리 쪽입니다. 기본으로 안내되는 스크립트 코드에는 CSS 격리가 전혀 없어서 테스트 CSS에 완전히 무너졌습니다. 노란 배경, Comic Sans, 이미지마다 빨간 테두리까지 그대로였습니다. 반면 iframe 코드는 완전히 격리됩니다. Taggbox에서 본 것과 같은 구조입니다. 같은 제품, 두 가지 코드, 전혀 다른 결과입니다.

가격을 정당화해 주는 지점은 범위입니다. 웹사이트와 행사용 스크린, 이메일 임베드, 디지털 사이니지를 하나의 구독으로 덮습니다. 여러 고객사의 UGC를 여러 채널에 걸쳐 운영하는 대행사라면 실질적인 가치가 있습니다. 반대로 홈페이지에 인스타그램 피드 하나가 필요한 경우라면, 그리고 대부분이 그렇습니다만, 과한 지출입니다.

Juicer.io

이런 경우에 맞습니다: 예산이 가장 중요하고, 로딩 중 페이지가 밀리는 것을 감수할 수 있는 경우.

Juicer.io는 2014년부터 서비스해 왔고 인스타그램, 페이스북, 틱톡, 유튜브, 링크드인 등 15개 이상의 플랫폼을 지원합니다. 무료 요금제에 소셜 피드 두 개가 포함되어 진입 장벽이 낮은 편입니다.

테스트에서 재현 가능한 문제가 하나 분명하게 드러났습니다. 레이아웃 흔들림입니다. Juicer는 HTMX로 피드를 페이지에 밀어 넣는데 그 자리를 미리 확보해 두지 않습니다. 그래서 위젯이 도착하는 순간 페이지가 눈에 띄게 튀고, 방문자가 읽고 있던 내용이 물리적으로 아래로 밀립니다. 이건 측정값이 아니라 동작 방식이라, 어떤 피드를 쓰든 어떤 페이지에 넣든 자리를 확보하도록 고치기 전까지는 계속 발생합니다.

이미지도 원본 해상도의 JPEG를 그대로 내려 줍니다. 최적화된 썸네일을 쓰지 않습니다. 이것 역시 저희 테스트 피드의 특성이 아니라 설계상의 선택이고, Curator.io가 하는 것과 정반대입니다. 이미지가 많은 계정에서 두 제품이 전혀 다르게 동작하는 이유입니다.

격리는 두 가지 코드가 있습니다. 기본 스크립트 코드는 전역 DOM에 그대로 그려지고 Shadow DOM도 iframe도 없어서 테스트 CSS에 완전히 무너졌습니다. 여기에 더해 Juicer는 전역 선택자에 자체 Tailwind 변수를 선언하기 때문에 Curator.io와 마찬가지로 새는 방향이 양쪽입니다. iframe 코드를 쓰시면 완전히 격리됩니다. 이것도 Flockler, Taggbox와 같은 구조이니, Juicer를 쓰신다면 기본 코드가 아니라 iframe 코드를 쓰십시오.

정리하면, 성능이 중요하지 않은 자리, 예를 들어 사내 대시보드나 검색 노출이 중요하지 않은 커뮤니티 페이지에서는 저렴한 다중 플랫폼 수집 도구로서 쓸 만합니다. 반대로 검색 노출이나 사용자 경험이 중요한 페이지 라면 레이아웃 흔들림 하나만으로도 피하시는 편이 낫습니다.

Walls.io

이런 경우에 맞습니다: 실시간 검수가 필요한 대형 행사의 소셜 월을 운영하고, 그에 맞는 예산이 있는 경우.

Walls.io는 웹사이트 삽입보다 행사와 디지털 사이니지를 우선으로 만들어진 제품입니다. 15개 이상의 플랫폼을 지원하고, 무엇보다 실시간 처리가 강점입니다. 웹소켓으로 새 게시물을 화면에 밀어 주기 때문에 페이지를 새로고침하지 않아도 갱신됩니다. 컨퍼런스나 전시, 매장 행사에서 소셜 월을 띄우는 용도라면 이건 실질적인 기술적 우위입니다.

CSS 격리는 훌륭했습니다. 브라우저의 iframe을 그대로 쓰기 때문에 완전히 보호되고, 테스트 CSS는 전혀 영향을 주지 못했습니다. 삽입 형태도 깔끔해서 iframe 요소 하나에 높이를 맞춰 주는 스크립트가 붙는 정도입니다.

파일은 11개를 불러옵니다. 실시간 갱신용 웹소켓 라이브러리와 메인 번들, 몇 개의 유틸리티 스크립트입니다. 웹소켓이 붙어 있다는 점 자체가 이 제품의 성격을 말해 줍니다. 실시간으로 갱신되는 행사용 월을 위해 만들어진 도구이고, 마케팅 페이지에 피드를 하나 얹는 것과는 다른 일이며, 그 기능이 필요하지 않아도 그만한 장치를 함께 싣고 옵니다. 영상도 자동 재생하기 때문에 릴스를 많이 올리는 계정이라면 사진 위주 계정보다 부담이 큽니다.

대부분의 사용자가 멈추는 지점은 가격입니다. 이 비교에서 가장 높은 가격대이고 무료 요금제 없이 체험 기간만 제공됩니다. 홈페이지에 인스타그램 피드 하나를 올리려는 목적이라면 과합니다. 반대로 여러 화면에 걸쳐 실시간 검수가 들어가는 기업 행사라면 이 용도로 만들어진 제품이 맞습니다.

인스타그램 피드 위젯에는 조회수 제한이 있습니까?

대부분 있습니다. 저희 호스팅 요금제도 마찬가지입니다. 호스팅형 위젯은 제공 업체 서버에서 내려오기 때문에, 방문자가 페이지를 열 때마다 업체 쪽에 요청이 한 번씩 발생합니다. 그래서 업체들은 이것을 월 조회수 한도로 가격에 반영합니다. 무료 요금제의 한도가 생각보다 훨씬 작은 경우가 많고, 한도를 넘기면 위젯이 아예 표시되지 않게 되는 제품도 있습니다. 쇼핑몰처럼 트래픽이 몰리는 날이 있는 사이트라면 이 항목을 먼저 보셔야 합니다.

예외는 내 사이트가 직접 피드를 내려 주는 경우입니다. CollectSocials 워드프레스 플러그인은 게시물과 디자인을 워드프레스 데이터베이스로 복사해 두고 내 도메인에서 직접 그립니다. 그래서 동기화가 끝난 뒤에는 방문자가 저희 서버에 요청을 보내지 않고, 그 조회수는 무료 요금제를 포함한 어떤 요금제에서도 차감되지 않습니다. 트래픽이 아무리 몰려도 마찬가지입니다. 제가 테스트한 여덟 개 중에서 조회수라는 항목 자체가 사라지는 구성은 이것뿐이었습니다.

여기서 무게를 지는 단어는 동기화가 끝난 뒤이고, 이 조건은 숨기지 않고 말씀드리는 편이 맞습니다. 아직 첫 동기화가 끝나지 않은 피드이거나 사이트가 캐시하지 못하는 피드라면, 방문할 때마다 저희 쪽에서 불러오게 되고 그 조회수는 동기화가 성공할 때까지 요금제에 차감됩니다.

플러그인은 워드프레스 공식 플러그인 저장소에 있어서 관리자 화면의 플러그인 검색으로 바로 설치하실 수 있고, 편집기용 블록과 [collectsocials] 숏코드를 함께 제공합니다. 이 비교에 나온 나머지 도구 대부분은 삽입 코드를 HTML 블록에 붙여넣는 방식을 그대로 요구합니다.

워드프레스가 아닌 국내 빌더를 쓰신다면 이야기가 조금 다릅니다. HTML 블록이나 스크립트 삽입을 허용하는 빌더라면 일반 삽입 코드를 그대로 쓰실 수 있지만, 저희가 각 국내 빌더에서 검증한 전용 설치 경로를 제공하는 것은 아닙니다. 쓰시는 빌더가 본문에 스크립트 태그를 허용하는지 먼저 확인하시는 편이 좋습니다.

UGC 사용 동의는 유료 기능인 경우가 많습니다

고객이 올린 사진을 쇼핑몰이나 홈페이지에 그대로 가져다 쓰려면 사용 동의를 받고 그 기록을 남겨 두어야 합니다. 이 기능은 비교 대상 중 여러 제품에서 상위 요금제로 올라가야 열리는 항목입니다.

CollectSocials에서는 무료 요금제를 포함해 모든 요금제에서 쓰실 수 있습니다. 동의를 요청하고 그 응답을 기록으로 남기는 흐름까지 그대로 사용하실 수 있습니다.

행사용 라이브 월도 비슷합니다. 상위 요금제 기능이지만 첫 행사는 무료로 실전 운영이 가능합니다. 어떤 요금제에서든 팀당 한 번, 24시간 고라이브 시간을 예약하면 그동안 오버레이 없는 월이 돌아가기 때문에, 결제 전에 실제 행사 하나를 끝까지 돌려 보시고 판단하실 수 있습니다.

어떤 경우에 무엇을 쓰면 좋은가

인스타그램 피드만 홈페이지에 깔끔하게 올리고 싶은 경우. 무료 요금제로 시작해 보시면 됩니다. 기간이 끝나면 사라지는 체험판이 아니라 계속 쓰실 수 있는 요금제이고, 피드 아래에 저희 링크가 표시됩니다. 예산이 가장 중요한 기준이고 플랫폼 하나만 한 페이지에 올리시면 되는 상황이라면 Elfsight의 진입 요금제가 더 저렴합니다. 다만 CSS 격리가 없어 사이트 스타일과 충돌할 수 있다는 점은 감안하셔야 합니다. Curator.io의 무료 요금제도 선택지인데, 동기화 주기가 길다는 점과 CSS 스코프를 직접 잡으셔야 한다는 점을 감수하실 수 있어야 합니다.

워드프레스를 쓰시는 경우. 플러그인으로 설치되는 쪽을 권해 드립니다. 삽입 코드를 붙여넣는 대신 관리자 화면에서 설치되고, 동기화가 끝난 피드는 조회수가 차감되지 않습니다.

인스타그램과 구글 리뷰를 한 위젯에 같이 보여 주고 싶은 경우. 이 항목은 제품 구조를 먼저 보셔야 합니다. 피드와 리뷰를 별도 상품으로 나눠 두 개를 구독해야 하는 제품이 있고, 플랫폼마다 위젯을 따로 사야 하는 제품도 있습니다. 하나의 피드에 여러 출처를 섞을 수 있는지를 결제 전에 확인하시는 편이 좋습니다. Elfsight는 이 용도에는 맞지 않습니다. 위젯 단위로 파는 구조라 플랫폼마다 삽입 코드가 따로 생깁니다.

UGC 사용 허락 관리가 필요한 경우. Taggbox가 이 영역에서 가장 기능이 깊습니다. 다만 상위 요금제로 올라가셔야 하고 22개 파일과 로딩 중 밀림을 함께 받으셔야 합니다. 동의 기록만 남기면 되는 정도라면 저희 쪽은 무료 요금제에서도 됩니다.

개발자가 직접 얹어서 쓰실 경우. Curator.io가 잘 맞습니다. 이미지 파이프라인이 이 중에서 가장 견실하고 개발자용 도구가 충실합니다. 어차피 CSS 스코프는 직접 잡으실 테니 격리가 없다는 점의 비용도 상대적으로 작습니다.

행사와 디지털 사이니지까지 함께 운영하시는 경우. Flockler와 Walls.io가 이 영역의 전용 제품입니다. 둘 다 격리를 위해서는 iframe 코드를 쓰셔야 합니다. 다만 1년에 한두 번 행사를 치르는 정도라면, 첫 행사는 무료 24시간 고라이브 시간으로 실전 운영이 가능하니 먼저 한 번 돌려 보시고 비교하셔도 늦지 않습니다.

리뷰가 중심이고 인스타그램은 부차적인 경우. EmbedSocial입니다. iframe으로 완전히 격리되고 리뷰 관리 기능이 이 중에서 가장 깊습니다. 피드와 리뷰가 별도 상품이라 비용이 늘어난다는 점은 감안하셔야 합니다.

벤더에게 반드시 물어볼 질문

토큰이 만료되면 어떻게 알려 주나요? 인스타그램 토큰은 언젠가 만료되고, 그때 피드는 갱신을 멈춥니다. 알림이 오는지, 다시 연결하는 절차가 어느 정도인지, 그리고 다시 연결한 뒤에 기존 설정과 골라 둔 게시물이 남는지를 물어보십시오. 가입하고 몇 달 안에 반드시 겪게 되는 항목입니다.

조회수 한도를 넘기면 어떻게 되나요? 위젯을 숨기는 제품도 있고, 추가 요금을 청구하는 제품도 있으며, 결제 주기가 돌아올 때까지 렌더링을 막는 제품도 있습니다.

CSS 격리는 어떤 방식인가요? Shadow DOM인지, iframe인지, 아니면 없는지 셋 중 하나로 답을 받으십시오. 답이 없거나 모른다고 하면 없는 쪽에 가깝습니다. 그리고 삽입 코드가 두 종류라면 어느 쪽을 주는 것인지도 함께 확인하십시오. 이 글에서 본 것처럼 같은 제품에서도 결과가 갈립니다.

결제 전에 실제 화면을 볼 수 있나요? 무료 요금제나 의미 있는 체험이 없는 제품은 보지 않고 사라는 뜻입니다.

해지하면 내 데이터는 어떻게 되나요? 골라 둔 게시물, 수정한 문구, 디자인 설정이 내보내지는지 사라지는지 미리 확인해 두시면 나중에 도구를 바꾸실 때 곤란해지지 않습니다.

정리

여덟 개를 같은 페이지에 올려 놓고 확인한 결과는 기능 목록을 비교하는 것보다 훨씬 분명했습니다. 구조 면에서는, 둘은 외부 도메인 iframe으로 그려져 작업이 사이트 메인 스레드 밖에서 일어나고 대신 iframe 특유의 제약을 받습니다. 나머지 여섯 중에서는 한 개의 파일만 불러오는 것과 스물두 개를 불러오는 것이 같이 있었고, Taggbox와 Juicer.io는 자리를 미리 확보하지 않아 로딩 중 페이지를 밀었습니다.

격리 면에서는, Shadow DOM을 쓴 것은 하나였습니다. EmbedSocial과 Walls.io는 iframe으로 확실히 격리됐습니다. Flockler와 Taggbox, Juicer.io는 iframe 코드를 쓰면 완전히 격리되지만 기본 코드에는 보호가 전혀 없습니다. Elfsight와 Curator.io는 iframe 선택지 자체가 없었고, 기본 삽입 코드가 기본적인 CSS 간섭도 버티지 못했습니다.

그리고 한국에서 검색해 오시는 분들이 실제로 겪는 문제, 즉 위젯이 어느 날 조용히 끊기는 문제는 연결 방식과 그다음 절차에서 갈립니다. 인스타그램에 직접 로그인해 만든 토큰은 서버 쪽에서 갱신할 수 있고, 페이스북을 거친 토큰은 사람이 다시 연결해야 합니다. 그리고 다시 연결할 때 코드를 손봐야 하는지, 대시보드에서 끝나는지가 갈립니다. 계약 전에 이 두 가지를 확인해 두시면 몇 달 뒤에 덜 곤란하십니다.

위에 적은 내용은 전부 개발자도구로 직접 확인하실 수 있는 항목입니다. 어느 제품의 데모 페이지에서든 1분이면 됩니다. 결제 전에 한 번씩 확인해 보시기 바랍니다.

인스타그램 피드를 홈페이지에 붙이는 방법 전반은 인스타그램 피드 삽입 가이드에서 다뤘고, 제품 쪽 설명은 인스타그램 피드 위젯 페이지에 정리해 두었습니다. 페이스북 페이지와 유튜브, X(트위터)를 같이 올리시려는 경우에는 페이스북 페이지 삽입, 유튜브 재생목록 임베드, X(트위터) 피드 삽입 글을 참고하시면 됩니다. 요금제는 요금제 페이지 (영어)에 있습니다.