웹빌더로 바이브 코딩하기 ② - Claude Code로 코드위젯 코드 받아서 붙여넣기

① 원하는 기능을 자연스럽게 설명하기

Claude Code에게 기능을 요청할 때는 코딩 용어를 쓸 필요가 없어요. 평소 말하듯이 설명하면 돼요. 예를 들어 '스크롤하면 아래에서 버튼이 슬며시 올라오는 효과를 만들어줘' 처럼요. 너무 짧게 요청하면 원하는 결과가 안 나올 수 있어요. 어떤 스타일인지, 어떤 색상인지, 모바일에서도 잘 보였으면 하는지 같은 세부 내용도 함께 알려주면 더 좋아요.

스크롤을 내리면 화면 하단에 '지금 상담받기' 버튼이 자연스럽게 올라오는 효과를 만들어줘. 스마트폰에서도 잘 보이게 해줘.

② 생성된 코드 복사하기

Claude Code가 만들어준 코드가 화면에 나타나면, 전체를 선택해서 복사해요. 코드 내용이 길고 복잡해 보여도 걱정하지 않아도 돼요. 지금은 코드를 이해하는 게 목표가 아니라 '원하는 기능을 만들어서 붙이는 흐름'에 익숙해지는 게 목표예요. 코드를 이해하고 싶다면 Claude Code에게 '이 코드가 어떻게 작동하는지 설명해줘'라고 물어보면 친절하게 설명해줘요.

③ 아임웹 코드위젯에 붙여넣기

아임웹 편집 화면에서 HTML 코드위젯을 원하는 위치에 추가해요. 위젯을 클릭하면 코드를 입력하는 창이 뜨는데, 복사한 코드를 그대로 붙여넣으면 돼요. 저장 후 미리보기 화면에서 기능이 정상으로 동작하는지 꼭 확인해보세요. 화면이 이상하게 보이면 Claude Code에게 '이렇게 됐는데 고쳐줘'라고 설명해주면 수정해줘요.

④ 상담 신청 폼 디자인 바꿔보기

웹빌더 기본 입력폼은 디자인이 단조롭게 느껴질 수 있어요. Claude Code에게 더 예쁜 디자인의 폼을 만들어달라고 요청해봐요. 버튼 색상, 둥근 테두리, 그림자 효과 같은 것도 원하는 대로 요청하면 반영해줘요. 여러 번 수정을 요청해도 괜찮아요. '좀 더 둥글게', '버튼 색을 초록색으로' 같이 구체적으로 말할수록 원하는 결과에 가까워져요.

깔끔하고 세련된 상담 신청 입력폼 코드를 만들어줘. 이름·연락처·문의내용 입력칸과 제출 버튼이 있고, 스마트폰에서도 보기 좋게 만들어줘.

⑤ 부드럽게 움직이는 배너 효과 추가하기

이벤트 공지나 중요한 내용을 강조할 때 움직이는 배너 효과를 쓰면 방문자의 시선을 더 잘 끌 수 있어요. 너무 빠르거나 번쩍이는 효과보다는 자연스럽고 부드럽게 움직이는 스타일이 실제 사이트에서 더 잘 어울려요. Claude Code에게 '자연스럽게 흘러가는 공지 배너를 만들어줘'라고 요청해보세요.

공지사항 문구가 부드럽게 좌우로 흘러가는 배너 코드를 만들어줘. 속도는 적당하게, 배경은 연한 노란색으로 해줘.