- Webflow에 Instagram 삽입하기란?
- Webflow에 Instagram을 삽입한다는 것은, 커스텀 코드(JavaScript)를 사용해 Instagram 게시물을 사이트에 표시하고 자동으로 업데이트하는 방법으로, 전 6단계·완전 무료로 구현할 수 있습니다. Webflow에서는 PHP를 쓸 수 없으므로 JavaScript를 사용합니다.
※이 글의 순서와 화면은 2022년 시점의 것입니다. Webflow의 현행 UI에서는 명칭과 배치가 달라졌을 수 있습니다. 특히 Instagram 연동 API는 Meta에 의한 큰 사양 변경이 반복되고 있으므로, 현행 사양은 반드시 Meta 공식 문서에서 확인해 주세요.
안녕하세요. Webflow 전문가 마사토입니다. 이번에는 위와 같은 고민을 해결합니다.
✅이 글의 내용
- Webflow에 Instagram을 삽입하는 방법
- 삽입한 Instagram을 자동으로 업데이트하는 방법
Instagram을 자동으로 업데이트하는 방법은 두 가지입니다. 다음과 같습니다.
- 커스텀 코드를 사용하는 방법
- Webflow의 CMS를 사용하는 방법
제가 추천하는 방법은 ①입니다. 이유는 간단하고 무료이기 때문입니다. 이 방법으로 만드는 쪽이 유연하므로 이쪽으로 만들어 가겠습니다.
【복붙으로 완료】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 안에서 완성 디자인을 상상하기 쉽기 때문입니다.
실제로 아래 사진은 제가 친구의 사이트를 만들 때 사용한 방법인데, 비어 있는 부분에 사진이 들어간다고 생각하면 이해하기 쉽습니다.
정리: 노코드 Webflow에 삽입한 Instagram을 자동 업데이트하는 방법
Instagram 도입은 앞으로 수요가 더 늘어날 것으로 보입니다. 그러니 지금부터 방법을 파악해 둡시다.
참고로 이 정보는 Webflow 질문 코너에서도 답이 나오지 않은 것으로, 많은 분에게 수요가 있으리라 봅니다. “어떻게든 영어 글로 만들 수 없을까” 하는 생각을 하면서 요즘은 일본 일주를 즐기고 있습니다.
만약 당신이 노마드 워커에 관심이 있다면 제 라이프스타일 글도 읽어 봐 주세요. 의외로 지금보다 고정비가 낮아질지도 모릅니다.
(2026년 추가: 현재는 센다이로 거점을 옮겨 주식회사 Webharu를 경영하고 있습니다)
Webflow 제작 의뢰도 받고 있으니 제작에 어려움을 겪는 분은 폼을 통해 질문·의뢰해 주시면 감사하겠습니다. 그럼 또 뵙겠습니다.
이 방법을 실천하는 데 참고한 사이트는 다음 두 곳입니다.
자주 묻는 질문
Webflow에 Instagram을 무료로 삽입할 수 있나요?
네, 커스텀 코드를 쓰는 방법이라면 완전 무료로 할 수 있습니다. 자동 업데이트 방법은 커스텀 코드 방식과 Webflow CMS 방식 두 가지가 있지만, 간단하고 무료이며 유연한 커스텀 코드 방식을 추천합니다.
Instagram 액세스 토큰의 유효 기간은 어떻게 하나요?
유효 기간이 무제한인 액세스 토큰을 취득해 연장합니다. 참고 사이트의 “유효 기간 무제한 액세스 토큰 취득” 항목에 순서가 있고, 바로 아래에 Instagram 프로 계정 ID 취득 방법도 적혀 있습니다.
삽입한 사진을 표시하려면 Webflow 쪽에서 무엇을 만들어야 하나요?
JS 코드는 지정한 HTML 코드에 이미지를 자동으로 불러오므로, Webflow에서 Div 블록을 넣고 지정한 클래스를 만듭니다. 클래스명은 참고 사이트①의 경우 “insta_list”, 참고 사이트②의 경우 “Instagram”입니다.
Instagram의 JS 코드는 Webflow의 어디에 기입하나요?
페이지 상세 설정을 열어 Before </body> tag 항목에 기입합니다. 여기 외의 곳에 기입하면 제대로 동작하지 않습니다.
이 글의 순서는 2026년 현재도 그대로 쓸 수 있나요?
Instagram 연동 API는 Meta에 의한 큰 사양 변경이 반복되고 있으므로, 글 안의 액세스 권한 항목이나 토큰 취득 순서는 현행 사양과 다를 수 있습니다. 구현 전에 반드시 Meta 공식 문서에서 현행 사양을 확인해 주세요.
