CONTACT
IMWEB with DIBO 아임웹 개발자를 위한 실전 코드 아카이브
아임웹 홈페이지에 바로 활용할 수 있는 JavaScript·HTML·CSS 코드부터
디보 API를 연동하는 실전 예제까지, 제작 시 바로 도움이 되는 내용만 담았습니다.
현장에서 자주 마주치는 문제들을 어떻게 해결하는지,
그리고 아임웹 기본 기능으로는 어려운 부분을 디보와 함께
어떻게 확장해 나갈 수 있는지 친절하게 안내해 드립니다.
아임웹을 조금 더 자유롭게 활용하고 싶거나,
고객이 원하는 ‘딱 그 기능’을 구현하고 싶은 분들에게
실제 프로젝트에서 바로 써먹을 수 있는 커스텀 개발 팁을 꾸준히 소개할 예정입니다.
#아임웹 #아임웹 코드 #디보 연동 #아임웹 코드 콘텐츠 관리
토큰 생성 가이드
디보(DIBO)의 관리 기능을 프론트엔드(UI 코드)와 안정적으로 연결하기 위해서는 API 토큰 발급이 반드시 필요합니다. 토큰은 각 관리사이트 단위로 1개만 생성하면 되며, 발급된 토큰을 아임웹 또는 자체 개발 웹사이트의 header code 영역에 삽입하면 즉시 연동이 활성화됩니다.
1. 구독 결제 필수
토큰을 생성하기 위해서는 반드시 디보 구독 결제가 활성화되어 있어야 합니다. 현재 제공되는 요금제는 Starter (9,800원, 부가세 별도)이며, 결제 후에는 관리 기능(익스텐션)을 무제한으로 생성해 사용할 수 있습니다.
관리가 필요한 모든 콘텐츠—이미지, 텍스트, 상품, 갤러리, 공지사항 등—을 디보에서 생성한 관리 기능과 연결하여 운영자가 직접 수정 가능한 구조로 구축할 수 있습니다.
2. 토큰 생성 절차
아래 단계대로 진행하면 누구나 안정적으로 토큰을 발급받아 연동할 수 있습니다.
디보 대시보드 좌측 메뉴의 관리사이트 목록으로 이동합니다.
구독이 활성화된 관리사이트의 대시보드로 진입합니다.
대시보드 오른쪽에 있는 토큰 생성 버튼을 클릭합니다.
로그인 비밀번호를 입력하면 보안 절차가 완료되고 토큰이 발급됩니다.
생성된 토큰 값을 안전한 곳에 보관합니다.
⚠ 토큰은 외부 공유 절대 금지
아임웹 관리자에서 환경설정 > SEO > 헤더 코드 영역으로 이동합니다.
아래 형식으로 토큰을 삽입합니다. (원활한 사용을 위해 axios CDN 코드도 포함되어있습니다)
<script> const diboToken = '여기에_발급받은_토큰_값을_붙여넣으세요'; </script>저장 즉시 디보 API 연동이 활성화됩니다.
3. 연동 정상 여부 확인
새로고침 후 개발자 도구(Network)에서 /api/dibo 요청이 확인되면 토큰이 성공적으로 적용된 것입니다.
이제 디보 익스텐션을 활용해 이미지, 텍스트, 갤러리 등 모든 데이터를 아임웹/React/Vue 등 api를 적용할 수 있는 모든 프론트 코드와 자유롭게 연결할 수 있습니다.