바이브 코딩으로 랜딩페이지 만들기 ③ - 디보 Starter 연동해서 관리하기

① 디보 Starter 가입하기

디보(di-bo.me)에 접속해서 회원가입을 해요. Starter 플랜을 선택하면 팝업·배너·카운트다운·FAQ 같은 기능을 사용할 수 있어요. 가입 후 내 사이트를 등록하면 연동에 필요한 코드가 발급돼요. 이 코드를 랜딩페이지에 붙여넣으면 연결이 완료돼요.

② 랜딩페이지와 디보 연결하기

디보에서 발급된 연동 코드를 프로젝트 파일에 추가해요. Claude Code에게 '이 코드를 프로젝트에 추가해줘'라고 붙여주면, 어느 파일 어느 위치에 넣어야 하는지 알려주고 직접 수정까지 해줘요. 연결이 잘 됐는지는 개발 서버를 켜고 브라우저에서 확인할 수 있어요.

디보 Starter 연동 코드를 프로젝트에 추가해줘. 아래 코드를 올바른 위치에 넣어줘:
[디보에서 발급된 연동 코드 붙여넣기]

③ 팝업 기능 추가하기

이벤트 안내나 공지사항을 팝업으로 띄우고 싶을 때 사용하는 기능이에요. 디보 관리자페이지에서 팝업 내용, 이미지, 노출 기간을 설정하면 랜딩페이지에 자동으로 반영돼요. 코드를 수정할 필요가 없어서, 비개발자도 혼자서 운영할 수 있어요.

④ 자주 묻는 질문(FAQ)과 배너 기능 붙이기

FAQ는 방문자가 자주 궁금해하는 내용을 정리해서 보여주는 영역이에요. 배너는 페이지 상단이나 중간에 띠 형태로 공지를 올릴 수 있는 기능이고, 카운트다운은 이벤트 마감까지 남은 시간을 보여주는 타이머예요. 이 기능들도 모두 디보 관리자페이지에서 내용만 입력하면 랜딩페이지에 바로 나타나요.

⑤ 관리자페이지에서 직접 수정해보기

연동이 완료됐으면 직접 내용을 바꿔보면서 랜딩페이지에 바로 반영되는 걸 확인해볼게요. 예를 들어 팝업 제목을 바꾸거나 FAQ 질문을 수정한 뒤 랜딩페이지를 새로고침하면 바로 달라진 내용이 보여요. 코드를 전혀 건드리지 않고도 페이지 운영이 가능한 상태가 된 거예요!