이번 편에서 할 것

지금까지는 Claude Code로 코드를 받아서 붙여넣는 방식이었어요. 그런데 팝업 문구나 이벤트 배너 내용을 바꿀 때마다 코드위젯을 열고 수정해야 한다면 번거롭겠죠? 이번 편에서는 디보 Starter를 연동해서 관리자페이지에서 클릭 몇 번으로 내용을 바꿀 수 있는 구조를 만들어볼 거예요. 한 번만 연결해두면 이후엔 코드를 건드리지 않아도 돼요.

단계별 실습

① 디보 Starter 가입하기

디보(di-bo.me)에 접속해서 회원가입을 하고 Starter 플랜을 선택해요. 가입 후 '내 사이트 등록' 메뉴에서 사용 중인 웹빌더 주소를 입력해요. 등록이 완료되면 연동에 필요한 코드가 발급돼요. 이 코드를 웹빌더에 붙여넣으면 연결이 시작돼요.

② 아임웹과 디보 연결하기

디보에서 발급된 연동 코드를 아임웹에 붙여넣어요. 아임웹 관리자 화면에서 '설정 → 사이트 설정 → 헤더 코드' 영역에 넣으면 모든 페이지에 자동으로 적용돼요. 저장 후 페이지를 새로고침하면 디보와 연결이 완료돼요.

③ 팝업 기능 연결하기

디보 관리자페이지에서 팝업을 만들고 내용·이미지·노출 기간을 설정하면, 웹사이트에 자동으로 팝업이 뜨기 시작해요. 이벤트 기간이 끝나면 관리자페이지에서 '팝업 끄기'만 누르면 돼요. 매번 코드위젯을 열고 코드를 수정할 필요가 없어서 훨씬 편리해요.

④ 배너·타이머·FAQ 기능 추가하기

팝업 외에도 다양한 기능을 관리자페이지에서 바로 설정할 수 있어요. 상단 공지 배너는 문구와 배경색을 입력하면 바로 반영되고, 이벤트 마감 타이머는 종료 날짜를 입력하면 자동으로 카운트다운이 시작돼요. 자주 묻는 질문(FAQ)도 질문과 답변을 입력창에 넣기만 하면 사이트에 바로 표시돼요. 이 모든 걸 코드 한 줄 없이 관리할 수 있어요.