이번 편에서 할 것

웹빌더는 원래 코드 없이 만드는 서비스로 많이 알려져 있지만, 사실 코드를 붙여넣을 수 있는 공간(코드위젯)을 활용하면 훨씬 다양한 기능을 추가할 수 있어요. 이번 시리즈에서는 아임웹·카페24 같은 웹빌더에 Claude Code를 함께 사용해서 입력폼·배너·스크롤 효과 같은 기능을 쉽게 추가하는 방법을 차근차근 배워볼 거예요. 코딩 경험이 없어도 괜찮아요!

단계별 실습

① 웹빌더에서도 바이브 코딩이 가능한 이유

많은 분들이 웹빌더는 '코딩 없이 만드는 서비스'라고만 생각하지만, 실제로는 '코드위젯'이라는 기능을 통해 HTML·CSS·JavaScript 코드를 직접 넣을 수 있어요. HTML·CSS·JavaScript는 웹페이지를 구성하는 기본 언어인데, 이걸 직접 쓸 줄 몰라도 괜찮아요. Claude Code에게 원하는 기능을 설명하면 코드를 대신 만들어주고, 우리는 그걸 복사해서 코드위젯에 붙여넣기만 하면 돼요. 기본 페이지 제작은 웹빌더로 편하게 하고, 추가 기능만 AI 도움을 받아 붙이는 방식이에요.

② Claude Code는 어떤 걸 도와줄 수 있을까?

Claude Code는 웹빌더에서 기본 제공하지 않는 다양한 기능을 코드 형태로 만들어줄 수 있어요. 예를 들어 예쁜 디자인의 상담 신청 폼, 스크롤하면 부드럽게 나타나는 버튼, 홈페이지 상단에 뜨는 공지 배너, 이벤트 마감까지 카운트하는 타이머 같은 것들이에요. 원하는 기능을 문장으로 설명하면 코드를 만들어주니까, '나는 코딩을 모른다'고 걱정하지 않아도 돼요.

③ 아임웹 코드위젯 위치 확인해보기

이번 시리즈에서 만들 기능들은 대부분 아임웹의 코드위젯에 코드를 붙여넣는 방식으로 작동해요. 아임웹 편집 화면에서 위젯 추가 버튼을 누르면 '기본 위젯' 목록 안에 'HTML'이 있어요. 이걸 원하는 위치에 추가하면 코드를 넣을 수 있는 창이 열려요. 어느 위치에 있는지 한 번 미리 찾아두면 다음 편부터 훨씬 빠르게 진행할 수 있어요.

④ 앞으로 만들 기능 미리 보기

이번 시리즈에서는 총 5편에 걸쳐 이런 내용을 다룰 거예요. ② 실제로 코드 받아서 웹빌더에 붙여넣기 → ③ 디보 Starter 연동해서 팝업·배너·FAQ를 관리자페이지에서 편하게 수정하기 → ④ 내 도메인 연결하고 검색 노출 설정하기 → ⑤ 웹빌더 방식과 코드 방식 중 내 상황에 맞는 선택 정리하기 순서로 진행돼요. 끝까지 따라오면 진짜 운영 가능한 사이트가 완성돼요!

⑤ 웹빌더 방식, 이런 분께 잘 맞아요

이 시리즈는 이미 아임웹이나 카페24를 사용 중이거나 웹빌더 방식이 더 편하게 느껴지는 분들을 위한 시리즈예요. 드래그 앤 드롭으로 레이아웃을 잡는 게 익숙하거나, 빠르게 사이트를 오픈해야 하는 상황이라면 이 방식이 더 잘 맞아요. 코드로 직접 처음부터 만드는 방법이 궁금하다면 이전 시리즈도 함께 참고해보세요.