비개발자가 클로드 코드로 웹사이트를 만든 바이브코딩 기록
3월에 인스타에 바이브코딩이 무엇인지와 초보자가 쓰기 좋은 도구를 정리한 카드뉴스를 올렸는데, 그때 소개한 시작 순서는 Lovable에 가입하고 만들고 싶은 것을 한 줄 입력한 다음 결과를 보면서 수정 요청을 반복하는 것이었습니다. 지금 운영하는 aiinjae.com은 7월에 클로드 코드로 만든 사이트이고, 7월 6일 첫 커밋부터 10월 19일까지 커밋이 85개 쌓였는데 그중 81개에 클로드가 공동 작성자로 남아 있습니다. 그 기록을 날짜 순서대로 따라가면서 정리했습니다.
첫날 만든 것
7월 6일 첫날에 홈, 교육 사례 목록과 상세 페이지, 콘텐츠 자료, 수강생 자료실까지 한 번에 만들었고, 같은 날 워크숍 페이지를 붙이고 신청 내용이 구글 시트로 들어가도록 연결하는 것까지 진행했습니다. 다음 날에는 워크숍 상세 페이지에 실제 내용을 채우고 모바일 화면과 링크를 공유했을 때 보이는 모습을 손봤습니다.
3월 릴스에서는 Lovable로 제 웹사이트를 만들었다고 소개했었는데, Lovable은 사이트에 들어가서 말로 설명하고 배포 버튼을 누르는 방식이었고 aiinjae.com은 제 컴퓨터 폴더에서 클로드 코드에게 말로 시키는 방식으로 만들었습니다. 코드는 클로드 코드가 쓰고 고쳤고 저는 화면을 띄워 보고 고칠 곳을 말하는 쪽이었습니다.
디자인 고치기
첫 화면 그래픽은 7월 16일에 네모 박스가 움직이는 그래픽을 넣었다가 다음 날 움직이는 속도를 올렸고, 7월 26일에 도트 그리드로 아예 바꾸면서 모바일에서 깨지는 곳 7군데를 같이 고쳤습니다. 이날은 교육 진행 방식 섹션, 문의 버튼 영역, 강사 소개를 다시 만들고 교육 사례 카드에서 상자 테두리를 걷어 내고 모서리 둥글기를 절반으로 줄이는 식으로 화면을 보면서 하나씩 말해서 고쳤습니다.
다음 날에는 교육의 가치 섹션을 일곱 가지 버전으로 만들어 보고 그중 하나를 홈 두 번째 자리에 올렸고, 나머지 여섯 개는 지우지 않고 보관해 두었습니다. 7월에만 커밋이 45개였습니다.
워크숍에서 같은 순서로 해 보기
디자인을 한창 고치던 7월 17일에 강사분들을 대상으로 바이브코딩 웹사이트 제작 워크숍을 4시간 동안 진행했습니다. 첫 한 시간은 내 페이지에 무엇이 들어갈지 요구사항정의서로 적고 내 소개와 이력을 페이지 재료로 뽑았고, 두 번째 시간은 색과 폰트와 톤을 적은 DESIGN.md 파일을 채워서 1차 페이지를 만들었습니다. 세 번째 시간은 그 파일을 다시 넣어 가며 채팅으로 여러 번 고쳤고, 마지막 시간에 배포해서 실제 주소를 만들었습니다.
6명이 참여해서 전원이 배포한 주소까지 받아 갔는데, 혼자 6명을 같이 보기는 조금 빠듯했고 제가 진행 순서를 조금 더 잘 정리하면 원활하게 될 것 같았습니다. 그날 쓴 자료는 바로 사이트 수강생 자료실에 올렸습니다.
자료실과 블로그 붙이기
8월 2일에는 문의를 카카오톡 대신 사이트 폼으로 받도록 바꿨고, 8월 9일에는 블로그 페이지를 임시 글로 먼저 세워 두었습니다. 그 뒤로는 강의가 있을 때마다 그날 자료를 자료실 맨 위에 올리는 작업이 반복됐습니다.
10월 15일에는 노션에 있던 강의 자료를 사이트 페이지로 옮기는 작업을 했는데, 옮기고 나서 실습 내용을 줄이고 겹치는 안내 문구를 덜어 내는 수정이 이어졌습니다.
배포하는 순서
배포는 사이트 폴더에 둔 CLAUDE.md 파일에 순서를 적어 두었는데, 커밋하고 배포 명령을 돌린 다음 실제 주소에서 바뀐 내용이 보이는지 확인하는 데까지 해야 끝난 것으로 정해 두었습니다. 커밋 메시지도 "자료실에서 강의 날짜를 내린다"처럼 한글 한 문장으로 쓰도록 같은 파일에 적어 두어서, 나중에 기록을 다시 볼 때 무엇을 고쳤는지 바로 보입니다.
처음 해 보는 분은
한 장짜리 소개 페이지만 필요하면 Lovable처럼 사이트 안에서 말로 만들고 배포하는 도구나, 8월 카드뉴스에서 소개한 ChatGPT의 Sites 기능처럼 대화창 안에서 페이지와 공유 링크까지 만드는 방법도 있습니다(Sites는 2026년 8월 기준 유료 플랜).
만들고 싶은 페이지에 들어갈 내용을 요구사항정의서 한 장으로 먼저 적어 두고, 그걸 클로드 코드에 붙여 넣는 것부터 시작해 보세요.
