※이 글의 순서와 화면은 2022년 시점의 것입니다. Webflow의 현행 UI에서는 명칭과 배치가 달라졌을 수 있습니다. 특히 Instagram 연동 API는 Meta에 의한 큰 사양 변경이 반복되고 있으므로, 현행 사양은 반드시 Meta 공식 문서에서 확인해 주세요.
안녕하세요. Webflow 전문가 마사토입니다. 이번에는 위와 같은 고민을 해결합니다.
✅이 글의 내용
- Webflow에 Instagram을 삽입하는 방법
- 삽입한 Instagram을 자동으로 업데이트하는 방법
Instagram을 자동으로 업데이트하는 방법은 두 가지입니다. 아래 목록과 같습니다.
- 커스텀 코드를 사용하는 방법
- Webflow의 CMS를 사용하는 방법
제가 추천하는 방법은 ①입니다. 이유는 간단하고 무료이기 때문입니다. 이 방법으로 만드는 쪽이 유연하므로 이쪽으로 만들어 가겠습니다.
이 글의 요점
- Webflow에 Instagram 삽입하기란?
- Webflow에 Instagram을 삽입한다는 것은 커스텀 코드(JavaScript)를 사용해 Instagram 게시물을 사이트에 표시하고 자동으로 업데이트하는 방법으로, 전 6단계·완전 무료로 구현할 수 있습니다. Webflow에서는 PHP를 쓸 수 없으므로 JavaScript를 사용합니다.
목차
【복붙으로 완료】Webflow에 삽입한 Instagram을 자동 업데이트하는 방법
- 【STEP1】Instagram을 프로 계정으로 전환한다
- 【STEP2】Facebook 계정과 연동한다
- 【STEP3】Facebook for Developers에 로그인해 각 코드를 취득한다
- 【STEP4】Instagram의 액세스 토큰을 연장한다
- 【STEP5】Instagram을 불러오는 JS 코드를 Webflow에 기입한다 | 자체 노하우
- 【STEP6】Webflow 안에서 Instagram 사진 표시 영역을 만든다 | 자체 노하우
※Webflow에서는 PHP를 쓸 수 없으므로 JavaScript를 사용합니다.
마지막에 Webflow에 기입하는 공정은 “공개하기만 하면 된다”고 생각하기 쉽지만 큰 함정이 있었기에, 실제 경험을 바탕으로 함정을 피하는 방법을 소개하겠습니다.
【STEP1~2】Instagram의 프로 계정 전환과 Facebook 계정 연동
참고 사이트①(일본어)을 참고해 만들어 주세요.
【STEP3】Facebook for Developers에 로그인해 각 코드 취득
STEP3의 액세스 권한은 아래 항목을 사용했습니다.
- pages_show_list
- business_management
- instagram_basic
- instagram_manage_comments
- instagram_manage_insights
- pages_read_engagement
- pages_manage_posts
【STEP4】Instagram의 액세스 토큰을 연장한다
액세스 코드의 연장은 참고 사이트③(일본어)을 사용해 할 수 있습니다. 참고 사이트③의 “유효 기간 무제한 액세스 토큰 취득” 항목을 찾아, 유효 기간이 무제한인 액세스 토큰을 취득합시다.
바로 아래에 Instagram 프로 계정 ID 취득 방법이 적혀 있으므로 함께 확인하면 순조롭게 진행할 수 있습니다.
여기까지 아래 코드를 메모했는지 확인합시다.
- Instagram 프로 계정 ID
- 액세스 토큰(기한: 무제한)
(2026년 추가: 이 글을 공개한 뒤 Meta 쪽에서 Instagram 연동 API의 큰 사양 변경이 있었습니다. 위의 액세스 권한 항목과 액세스 토큰 취득·연장 순서는 현행 사양과 다를 수 있습니다. 구현 전에 반드시 Meta 공식 문서에서 현행 사양을 확인해 주세요.)
【STEP5】Instagram을 불러오는 JS 코드를 Webflow에 기입한다
참고 사이트①② 중 원하는 쪽의 JS 코드를 Webflow에 기입하고, 해당 항목에 여기까지 취득한 코드를 기입합니다.
기입할 JS 코드는 반드시 페이지 상세 설정을 열어 Before </body> tag 항목에 기입합시다.
【STEP6】Webflow 안에서 Instagram 사진 표시 영역을 만든다
이번에 사용하는 JS 코드는 지정한 HTML 코드에 이미지를 자동으로 불러오는 것입니다. 그래서 Webflow에서 Div를 넣고 지정된 클래스를 만들어야 합니다.
- Webflow 안에서의 작업
Div 블록을 넣고 클래스를 참고 사이트①의 경우 “insta_list”, 참고 사이트②는 “Instagram”으로 붙입니다
- 커스텀 코드를 넣는 위치
페이지 상세 설정을 열어 Before </body> tag 항목에 JS를 기입합니다. JS는 여기 외의 곳에 사용하면 제대로 동작하지 않습니다.
커스텀 코드를 사용하지 않고 레이아웃을 바꾸는 방법
부모 “Instagram”을 사용해 레이아웃을 완결시키는 방법입니다. 방법은 간단합니다. 부모를 “Grid”로 하고 한 칸의 크기를 지정하면 됩니다.
아주 단순하고 누구나 떠올릴 만한 방법이지만, 저는 이 방법을 가장 추천합니다. 이유는 Webflow 안에서 완성 디자인을 상상하기 쉽기 때문입니다.
실제로 아래 사진은 제가 친구의 사이트를 만들 때 사용한 방법인데, 비어 있는 부분에 사진이 들어간다고 생각하면 이해하기 쉽습니다.
2026년 10월 추가: Instagram 연동 API의 현재 상황과 대안
(2026년 10월 추가) Meta는 개인 계정용 “Instagram Basic Display API”를 2024년 12월 4일로 제공 종료했습니다. Meta의 공지에 따르면 종료 후에는 모든 요청이 실패하며, 개인용 앱에서 쓸 수 있는 Instagram API는 없어진다고 합니다(출처: Meta for Developers “Instagram Basic Display API에 관한 최신 정보” 2024년 9월 4일·2026년 10월 5일에 확인).
이 글의 STEP3는 Facebook for Developers에서 instagram_basic·pages_show_list 등의 액세스 권한을 사용하는 Facebook 페이지 연동형 방법입니다. 공식 안내에 따르면 이 방식은 지금도 “Facebook 로그인을 사용한 Instagram API”로 제공되고 있습니다. 다만 글의 순서는 2022년 시점의 것이므로 화면이나 순서의 세부 사항은 바뀌었을 수 있습니다.
공식 안내에서 현재 쓸 수 있는 방법은 아래 두 가지입니다. 둘 다 Instagram 프로 계정(비즈니스 또는 크리에이터)이 전제이며, 개인 계정인 채로는 쓸 수 없습니다.
- Facebook 로그인을 사용한 Instagram API: Facebook 페이지에 연동한 프로 계정용. 액세스 권한은 instagram_basic·pages_show_list·pages_read_engagement 등(이 글의 순서는 이쪽 계열)
- Instagram 로그인을 사용한 Instagram API: Facebook 페이지가 없어도 쓸 수 있음. 액세스 권한은 instagram_business_basic 등
액세스 토큰도 공식 안내에서는 단기 토큰(유효 기간 1시간)을 장기 토큰으로 교환하며, 장기 토큰은 60일간 유효하고 기한이 끝나기 전에 갱신하는 방식입니다. STEP4의 “유효 기간 무제한 액세스 토큰”은 공식 개요 페이지에 실려 있지 않으므로, 사이트에 넣는다면 60일 이내에 갱신하는 구조를 마련해 둡시다(출처: Meta for Developers “Instagram 플랫폼 개요” 2026년 9월 28일 업데이트·2026년 10월 5일에 확인).
정리: 노코드 Webflow에 삽입한 Instagram을 자동 업데이트하는 방법
Instagram 도입은 앞으로 수요가 더 늘어날 것으로 보입니다. 그러니 지금부터 방법을 파악해 둡시다.
참고로 이 정보는 Webflow 질문 코너에서도 답이 나오지 않은 것으로, 많은 분에게 수요가 있으리라 봅니다. “어떻게든 영어 글로 만들 수 없을까” 하는 생각을 하면서 요즘은 일본 일주를 즐기고 있습니다.
만약 노마드 워커에 관심이 있다면 제 라이프스타일 글도 읽어 봐 주세요. 의외로 지금보다 고정비가 낮아질지도 모릅니다.
(2026년 추가: 현재는 일본 미야기현 시오가마시를 거점으로 주식회사 Webharu를 경영하고 있습니다)
Webflow 제작 의뢰도 받고 있으니 제작에 어려움을 겪는 분은 폼을 통해 질문·의뢰해 주시면 감사하겠습니다. 그럼 또 뵙겠습니다.
이 방법을 실천하는 데 참고한 사이트는 아래 두 곳입니다.
제작 실적
자주 묻는 질문
Webflow에 Instagram을 무료로 삽입할 수 있나요?
네, 커스텀 코드를 사용하는 방법이라면 완전 무료로 할 수 있습니다. 자동 업데이트 방법은 커스텀 코드 방식과 Webflow CMS 방식 두 가지가 있지만, 간단하고 무료이며 유연한 커스텀 코드 방법을 추천합니다.
Instagram 액세스 토큰의 유효 기간은 어떻게 하면 되나요?
글의 순서에서는 참고 사이트의 방법으로 “유효 기간 무제한 액세스 토큰”을 취득했습니다. 2026년 10월 시점의 공식 안내에서는 장기 액세스 토큰의 유효 기간이 60일간이며, 기한이 끝나기 전에 갱신하는 방식입니다. 사이트에 넣는다면 정기적으로 갱신하는 구조를 마련해 주세요.
삽입한 사진을 표시하려면 Webflow 쪽에서 무엇을 만들면 되나요?
JS 코드는 지정한 HTML 코드에 이미지를 자동으로 불러오므로, Webflow에서 Div 블록을 넣고 지정된 클래스를 만듭니다. 클래스 이름은 참고 사이트①의 경우 “insta_list”, 참고 사이트②의 경우 “Instagram”입니다.
Instagram의 JS 코드는 Webflow의 어디에 기입하나요?
페이지 상세 설정을 열어 Before
