해질 무렵이라 물이 통째로 금색이었습니다.
68
인스타그램 피드 위젯, 홈페이지가 인스타그램만큼 자주 바뀝니다
인스타그램 비즈니스 또는 크리에이터 계정을 연결하고, 어떤 게시물을 보여줄지 고르고, 레이아웃 40종과 테마 16종이 있는 디자인 스튜디오에서 꾸민 다음, 코드 한 줄을 홈페이지에 붙여넣으면 끝입니다. 그때부터는 인스타그램에 올리는 일이 곧 홈페이지를 갱신하는 일이 됩니다. 새 게시물은 무료 요금제에서 24시간마다, 상위 요금제에서는 5분마다 알아서 들어옵니다.
7일 전체 기능 체험, 카드 등록 없음. 무료 요금제는 계속 무료입니다.
@atlasandpine산길과 해안선, 그리고 느린 아침
팔로우68
41
atlasandpine
좋아요 54개해가 능선을 넘기 직전에 먼저 올라섰습니다.
Atlas & Pine은 이 화면을 위해 만든 가상의 데모 계정입니다. 카드 디자인과 그리드, 휴대폰 화면 렌더링은 실제 위젯의 것입니다.
40
스튜디오 레이아웃
16
기본 제공 테마
10
한 피드에 섞이는 플랫폼
5
인스타그램 소스 유형
지금 사용해 보기
가입하지 않고, 지금 이 자리에서 디자인해 보세요
결국 궁금한 것은 하나입니다. 우리 홈페이지에 어울리느냐. 그걸 확인하려고 이메일부터 넘길 이유는 없다고 봅니다. 레이아웃을 바꾸고 테마를 고르고 캡션, 날짜, 프로필 사진, 배지를 켜고 끄면서 피드가 어떻게 달라지는지 눌러 보세요. 내 계정 연결은 그다음에, 메타 공식 로그인으로 진행합니다.
레이아웃
테마
표시 항목
지금 보는 조합 Grid Minimal
이 수로는 매일 밤 이럽니다.
83
우리 발자국 말고는 아무것도 없었습니다.
57
여기서 절반은 샀습니다. 후회는 없습니다.
39
해가 능선을 넘기 직전에 먼저 올라섰습니다.
54
이 길이 벚꽃을 한 주 더 붙들고 있었습니다.
44
Grid. 행이 고르고 게시물 크기가 모두 같습니다. 페이지 한 구획에 넣기에 가장 무난한 기본값입니다.
내 피드로 만들어 보기실제 렌더러가 아니라 미리보기입니다. 테마 색은 제품이 쓰는 테마 정의에서 그대로 읽어 오고 레이아웃 이름도 실제 이름이지만, 여기 모양은 이 페이지를 위해 그린 것입니다. 실제 스튜디오에는 레이아웃 40종과 테마 16종, 모든 요금제에서 쓸 수 있는 테마 빌더가 있고, 편집하는 동안 진짜 위젯이 그려집니다. Atlas & Pine은 데모 계정이고 사진은 CC0 대체 이미지입니다.
비교
인스타그램 공식 임베드 코드로는 안 되는 것
인스타그램이 제공하는 임베드 버튼은 게시물 하나짜리 코드를 내줍니다. 그 게시물에 고정되어 있고, 레이아웃이나 색을 고를 수 없고, 스토리는 아예 대상이 아닙니다. 피드 위젯은 게시물이 아니라 피드를 가리킵니다. 그래서 화면을 채우고, 계정을 따라 바뀌고, 승인한 것만 보여줍니다.
산길에서 바로
@atlasandpine산길과 해안선, 그리고 느린 아침
팔로우83
57
72
소스 유형
위젯 하나에 인스타그램 피드 다섯 가지
보통 인스타그램 위젯이라고 하면 내 게시물을 내 홈페이지에 거는 것을 말합니다. 그건 이 위젯이 돌릴 수 있는 다섯 가지 피드 가운데 하나입니다. 업종에 따라서는 브랜드가 쓴 글보다 고객이 쓴 글이 훨씬 잘 팝니다. 다섯 가지 모두 무료 요금제에 들어 있습니다.
지금 홈페이지에 떠 있는 것
야시장2시간 남음첫 커피5시간 남음새벽 서핑9시간 남음벚꽃길 달리기14시간 남음모래언덕 오르기18시간 남음스토리가 만료되는 순간 해당 링은 위젯에서 빠집니다. 그래서 이 줄에는 계정에 더 이상 살아 있지 않은 스토리가 남아 있지 않습니다.
atlasandpine18시간 전
디자인 스튜디오
인스타그램이 아니라 우리 홈페이지처럼 보이게
좋은 피드 위젯의 목표는 원래부터 그 페이지의 일부였던 것처럼 보이는 것입니다. 레이아웃 40종, 테마 16종, 모든 요금제에서 무료인 테마 빌더, 그리고 날짜와 프로필 사진, 배지, 캡션 표시 여부를 켜고 끄는 설정이 있습니다. 아래는 같은 피드를 그 가운데 세 가지로 그린 것이고, 나머지는 위쪽에서 직접 눌러 볼 수 있습니다.
Grid
Masonry
Carousel
68
atlasandpine 끝에서 끝까지 금빛이었습니다.
설치
빈 대시보드에서 홈페이지에 올라가기까지 네 단계
실제로 마주치는 순서대로 네 단계이고, 각 단계가 무엇을 만들어 내는지 함께 보여줍니다. 개발자가 필요한 단계는 하나도 없습니다. 한국어 가이드에서 같은 경로를 실제 계정으로 밟으며 그때그때 찍은 스크린샷과 함께 다시 설명합니다.
- 비즈니스 또는 크리에이터 계정개인 계정에서 전환하는 것은 무료이고 인스타그램 앱에서 1분이면 됩니다.
- 다섯 가지 소스 중 세 가지는 페이스북 페이지가 필요합니다해시태그, 멘션, 태그된 게시물은 페이지를 거칩니다. 계정과 스토리는 아닙니다.
- 개발자는 필요 없습니다코드 한 조각을 한 번 붙여넣으면 됩니다. 콘텐츠가 바뀌어도 코드는 그대로입니다.
- 01
인스타그램 연결
무료로 가입해 피드를 만들고, 메타 공식 OAuth 절차로 인스타그램 비즈니스 또는 크리에이터 계정을 연결합니다. 개인 계정은 외부 서비스 접근이 열리지 않습니다. 저희가 아니라 메타가 정한 규칙입니다.
카드 등록 없음소스 추가인스타그램비즈니스 또는 크리에이터 계정연결여기서 메타의 로그인 및 권한 동의 화면이 열립니다. 비밀번호는 저희가 보지도 저장하지도 않습니다.
- 02
보여줄 것만 고르기
가져온 게시물은 수집함에 카드로 쌓이고, 승인과 고정, 삭제 버튼이 붙습니다. 게시물 문구는 그 자리에서 고칠 수 있습니다. 내가 고르지 않은 것은 방문자에게 보이지 않습니다.
승인 버튼은 내가 쥡니다수집함3건 대기그날 들판에 있던 색을 전부.오늘 세 번째 커피. 더 할 말 없음.승인됨키워드 규칙과 AI 콘텐츠 필터가 이 대기열에 오기 전에 게시물을 먼저 걸러 줍니다.
- 03
위젯 디자인하기
레이아웃 40종과 테마 16종 중에서 고르고, 날짜와 프로필 사진, 배지, 캡션 표시를 켜고 끄면 미리보기가 누르는 즉시 다시 그려집니다.
미리보기가 실제 렌더러입니다디자인 스튜디오그리드매스너리캐러셀+37+12스튜디오 미리보기는 실제 위젯입니다. 여기서 확인한 그대로 홈페이지에 올라갑니다.
- 04
어디에나 삽입하기
설치할 곳에 맞는 코드를 복사해 피드가 보일 자리에 붙여넣습니다. 일반 HTML과 워드프레스는 스크립트, 윅스와 스퀘어스페이스는 높이가 자동 조정되는 iframe, 노션과 구글 사이트는 주소만 받습니다.
설치할 곳에 맞는 코드가 나옵니다코드 받기일반 HTML<link rel="preload" as="fetch" …><div id="collectsocials-4f9c21a7"></div><script src="…/api/widget"data-feed-id="…" data-token="…"data-container="…" data-api-base="…"defer></script>줄여서 보여준 것입니다. 실제 대화상자에서는 내 아이디 값과 피드 주소 속성이 채워집니다. 거기서 설치할 곳을 고르면 코드 형태가 그에 맞게 바뀝니다.
검수
승인하지 않은 게시물은 홈페이지에 올라가지 않습니다
가져온 게시물은 카드 형태로 대기합니다. 승인하거나, 위로 고정하거나, 삭제하거나, 문구를 그 자리에서 고칠 수 있습니다. 키워드 규칙과 AI 콘텐츠 필터가 들어오는 게시물을 먼저 걸러 주기 때문에, 해시태그와 멘션 피드를 회사 홈페이지에 걸어도 괜찮아집니다.
호환성
위젯 하나로, 쓰던 홈페이지 그대로
스크립트 태그가 어디서나 그대로 붙는 것은 아닙니다. 어떤 빌더는 외부 코드를 샌드박스에 가두고, 어떤 빌더는 아예 지워 버립니다. 그래서 삽입 화면이 어디에 설치할지를 먼저 묻고, 그 환경에 맞는 코드를 내줍니다.
스크립트 삽입
HTML, 워드프레스, 웹플로우, React
스크립트 태그 하나와 컨테이너 div 하나면 됩니다. 위젯은 Shadow DOM 안에서 렌더링되므로 홈페이지 CSS와 서로 간섭하지 않습니다.
래핑된 스크립트
쇼피파이
쇼피파이 테마는 섹션을 flexbox로 배치해서 컨테이너를 눌러버립니다. 그래서 같은 스크립트를 폭 보정 래퍼로 감싼 코드를 내줍니다.
iframe 삽입
윅스(Wix), 스퀘어스페이스
두 곳 모두 외부 스크립트를 샌드박스에 가두거나 제거합니다. 그래서 콘텐츠 높이에 맞춰 스스로 크기를 조정하는 iframe으로 나갑니다.
주소만 붙여넣기
노션, 구글 사이트
스크립트를 아예 실행할 수 없는 도구에는 고정 높이 프레임 주소를 내줍니다. 내용은 프레임 안에서 스크롤됩니다.
불러오는 방식
점수표가 아니라 구조로 빠릅니다
속도 점수 순위표는 공개하지 않습니다. 위젯 점수는 그것이 페이지의 어디에 놓였고 피드에 무엇이 담겼는지에 따라 달라지기 때문입니다. 대신 어떻게 만들어졌는지를 공개합니다. 개발자 도구를 열면 직접 확인할 수 있는 내용입니다.
파일 하나
지연 로딩 스크립트 하나, 컨테이너 하나
연동에 필요한 전부가 스크립트 태그 하나와 div 하나입니다. 지연 로딩이라 페이지가 그려지는 것을 막지 않습니다.
동시 요청
스크립트를 받는 동안 피드도 같이 옵니다
삽입 코드가 피드 요청을 미리 걸어 두기 때문에 게시물과 코드가 차례로가 아니라 동시에 도착합니다.
Shadow DOM
우리 CSS와 홈페이지 CSS가 부딪치지 않습니다
위젯은 Shadow DOM 안에서 그려집니다. 홈페이지 스타일이 피드를 깨뜨릴 수도, 피드가 홈페이지를 깨뜨릴 수도 없습니다.
하나의 벽
홈페이지에 필요한 피드가 인스타그램 하나인 경우는 드뭅니다
피드 하나에 10개 플랫폼을 섞을 수 있습니다. 릴스 옆에 페이스북 게시물과 구글 리뷰, 유튜브 영상이 같은 영역에 놓이는 식입니다. 인스타그램과 페이스북을 함께 쓰는 경우가 가장 많고, 그쪽은 페이스북 피드 위젯 페이지에서 다룹니다. X(구 트위터)만 유료이고 나머지는 전부 무료 요금제에 들어 있습니다. X가 API 사용료를 받기 때문입니다.
Instagram해가 뜨기 직전에 능선에 올랐습니다.
TikTok이 수로는 매일 밤 이럽니다
Atlas & Pine7주 전Facebook
마지막 빛까지 기다렸더니 호수 전체가 분홍색으로 물들었습니다.
박지연2주 전Google
사진만 보고 일출 코스를 예약했는데 사진보다 나았습니다. 가이드분들이 어디서 언제 멈춰야 하는지 정확히 알고 계셨어요.
Atlas & Pine@atlasandpine · 3일 전Twitter/X
Sunrise crew made the ridge before the storm broke. Whole set is up on the site now.
김태훈한 달 전Google
올해만 두 번째입니다. 일정이 전부 제시간에 돌아갔고, 인원을 적게 받는 게 이 팀의 핵심이라고 봅니다.
Instagram이번 주 첫 파도, 꼭대기에서 그대로.
YouTube능선 종주 3일, 처음부터 끝까지
Atlas & Pine5주 전Facebook
석호에서 하루. 배 여섯 척 나갔고 아무도 안 뒤집혔고, 물빛이 오후 내내 저 색 그대로였습니다.
Instagram기구가 뜨기 전에 먼저 올라와 있었습니다.
가상의 브랜드로 만든 데모 피드이며, 연결 가능한 소스 10종 가운데 6종을 한 벽에 담았습니다. 게시물과 리뷰 작성자, 반응 수치는 예시일 뿐 제품 지표가 아닙니다. 카드에 있는 항목은 전부 실제 위젯이 그리는 것이지만, 이 벽 자체는 위젯이 그린 것이 아니라 이 페이지를 위해 따로 그린 것입니다.
요금제
무료 요금제도 제대로 된 요금제입니다
7일 동안 카드 등록 없이 전부 써 보세요. 체험이 끝나도 실제 운영 중인 홈페이지에 그대로 걸어 둘 수 있는 요금제가 남습니다.
FAQ
인스타그램 위젯에 대해 자주 받는 질문
인스타그램 피드 위젯이 무엇인가요?
인스타그램에서 게시물을 가져와 홈페이지에 하나의 영역으로 보여주는 삽입형 구성 요소입니다. 스스로 갱신됩니다. 인스타그램이 제공하는 임베드 버튼과는 다릅니다. 그 버튼은 게시물 딱 하나짜리 코드를 내주고 이후 갱신되지 않습니다. 위젯은 게시물이 아니라 피드를 가리키기 때문에 내 콘텐츠가 바뀌면 페이지도 같이 바뀝니다. 인스타그램이 제공하는 모든 공식 방법을 직접 검증해 스크린샷과 함께 정리해 두었습니다.
인스타그램 비즈니스 계정이 꼭 있어야 하나요?
네, 비즈니스 또는 크리에이터 계정이어야 합니다. 개인 계정은 외부 위젯이 필요로 하는 API 접근을 열어주지 않습니다. 메타가 정한 규칙입니다. 해시태그, 태그된 게시물, 멘션 피드는 메타가 페이스북 페이지를 거쳐 전달하기 때문에 페이지가 추가로 필요합니다. 계정 게시물과 릴스, 스토리는 페이지 없이 인스타그램에 바로 연결됩니다.
해시태그나 고객이 태그한 게시물도 띄울 수 있나요?
가능합니다. 계정, 해시태그, 멘션, 태그된 게시물, 스토리 다섯 가지를 모두 지원하고 다섯 가지 전부 무료 요금제에서 쓸 수 있습니다. 메타 쪽 제약 두 가지는 미리 밝힙니다. 해시태그 검색은 7일 이동 기간 안에서 고유 해시태그 30개로 제한되고, 멘션은 설정한 시점 이후 것부터 전달되기 때문에 멘션 피드는 처음에 비어 있다가 며칠에 걸쳐 채워집니다.
위젯을 넣으면 홈페이지가 느려지나요?
느려지지 않도록 만들었습니다. 지연 로딩되는 스크립트 하나와 컨테이너 하나가 전부이고, 피드 요청은 스크립트를 내려받는 동안 동시에 출발하며, 렌더링은 Shadow DOM 안에서 이뤄져 홈페이지 CSS를 건드리지 않습니다. 속도 점수 순위표는 일부러 공개하지 않습니다. 점수는 피드가 페이지의 어디에 놓였는지와 무엇이 담겼는지에 따라 크게 달라지기 때문입니다. 그렇게 판단한 근거와 측정 데이터는 위젯 8종을 나란히 놓고 검증한 기록에 정리해 두었습니다.
무료 요금제로 어디까지 되나요?
레이아웃 40종 가운데 7종, 테마는 16종 전부와 테마 빌더, 승인 기능, 인스타그램 소스 유형 다섯 가지 전부, 그리고 하루 한 번 자동 동기화까지 포함됩니다. 무료 요금제 위젯에는 작은 CollectSocials 표기 링크가 붙고, 유료 요금제에서는 끌 수 있습니다. 7일 체험은 카드 등록 없이 전체 기능을 그대로 씁니다.
새 게시물은 얼마나 자주 반영되나요?
요금제에 따라 자동으로 동기화됩니다. 무료 요금제는 24시간마다이고, 상위 요금제로 갈수록 짧아져 5분까지 내려갑니다. 수동으로 새로고침하거나 코드를 다시 붙여넣을 일은 없습니다. 삽입한 코드는 콘텐츠가 바뀌어도 그대로 둡니다.
어떤 게시물을 보여줄지 고를 수 있나요?
전부 고를 수 있습니다. 가져온 게시물은 승인, 고정, 삭제 버튼이 달린 검수 화면에서 대기하고, 게시물 문구는 화면에서 바로 수정할 수 있습니다. 키워드 규칙과 AI 콘텐츠 필터로 들어오는 게시물을 미리 걸러낼 수도 있습니다. 다른 사람이 쓴 글이 올라오는 해시태그와 멘션 피드에서 특히 중요한 기능입니다.
같은 위젯에 인스타그램 말고 다른 것도 띄울 수 있나요?
가능합니다. 피드 하나에 페이스북, 유튜브, 틱톡, 구글 리뷰, 핀터레스트를 포함해 10개 플랫폼을 섞어 하나의 벽으로 만들 수 있습니다. X(구 트위터)만 유료이고 나머지는 전부 무료 요금제에 들어 있습니다. X가 유료인 이유는 하나입니다. X가 API 사용료를 받기 때문입니다. 페이스북이 나머지 절반이라면 그쪽은 별도 페이지에서 다룹니다.
내 피드로 확인하는 데 오늘 저녁이면 충분합니다
인스타그램을 연결하고, 보여줄 게시물을 고르고, 레이아웃을 정하고, 코드 한 줄을 붙여넣으면 됩니다. 7일 체험은 전부 포함이고 카드도 묻지 않습니다.
워드프레스, 쇼피파이, 윅스, 스퀘어스페이스, 웹플로우, 노션, 일반 HTML에서 사용할 수 있습니다.