안녕하세요 저는 코딩의 ㅋ 도 모르는 핵초보로써 진행해본 클로드+안티그래비티 활용 페이지 구축 과정을 설명드리겠습니다
✅한줄 요약
카카오톡으로 일일이 응대하던 수동 예약 시스템을, Claude x antigravity 조합으로 브랜드 웹사이트를 제작하고있습니다
✅문제 상황 (Before)
기존에는 고객 문의가 들어오면 카카오톡 오픈채팅으로 일일이 응대해야 했습니다.
상담, 견적, 일정 조율이 모두 수동이라 하루 2~3시간이 단순 응대에 소요됨
포트폴리오를 노션 링크로만 보여주다 보니 전문적인 브랜드 이미지 전달에 한계가 있음
상담시 주로 보내드려야 하는 내용이 비슷비슷함
✅사용한 도구
도구명: Claude, antigravity
주요 기능: 전체 프로젝트 아키텍처 설계, React/Vite 코드 작성, 디버깅, 배포 가이드
✅ AI와 협업한 과정
1️⃣ 클로드로 기획서 뽑기 (프롬프트를 위한 프롬프트)
저는 우선 만들고 싶은 페이지가 명확했습니다. 해당 내용을 클로드에게 설명해주고 안티그래비티에 넣을 기획서를 만들어달라고 했죠
그리고 이 기획서를 md(markdown)으로 줘 라고 하고 명령한 후 파일을 다운로드받습니다
나는 안티그래비티를 활용해서 바이브코딩으로 페이지를 만들거야 거기에 명령할 기획서를 너가 짜줘 그리고 그 파일을 md파일로 전달줘 (내가만들고싶은 페이지 내용 알려주기) 그리고 나는 코딩에 대해 잘 몰라서 이후에 안내해야 하는 내용은 최대한 쉽고 간단하게 설명해줘2️⃣ 기획서 프롬프트를 안티그래비티로 붙여넣기
한국어 문자 메시지 스크린샷
그럼 이런식으로 프롬프트에 집어넣을 md파일을 아예 제작해줍니다
이 파일을 저장해서 안티그래비티에 넣어줍니다.
(만약 이 과정에서 만들어준 파일을 안티그래비티 어디에 넣어야 하는지 모르시겠으면 이 조차도 클로드에게 물어보시면 됩니다)
다 넣으신 후
안티그래비티 프롬프트창에 @ 누르고 기획서명을 태그 한 후
"이 기획서를 참고해서 초기화해줘" 라고 요청하기
3️⃣ 안티그래비티에 적용완료
Adobe 코드 편집기의 스크린샷
이런식으로 기본 세팅이 완료되니
한국어로 된 웹사이트의 홈페이지
디자인이 많이 투박하지만 어쨌든 사이트다운 사이트가 만들어졌습니다!
그 이후 디테일한 부분들은 클로드에게 프롬프트를 작성하고 > 그걸 안티그래비티에 넣어서 수정하는 식으로 진행했습니다
❓ 왜 안티그래비티에 바로 요청하지 않고 클로드를 썼는지
아무래도 저는 코딩을 잘 모르기도하고 프롬프트 자체를 잘못 주면 페이지가 많이 망가질것같다는 생각이 들어서 안티그래비티가 이해하기 쉬운 프롬프트로 한번에 넣어주고싶었습니다!
💡 이 과정에서 배운 AI 활용 팁
효과적이었던 것
기획서는 구체적으로: 원하는 바를 클로드로 정리해서 md파일로 전달하니, AI가 전체 맥락을 이해하고 알아서 척척 진행했습니다.
맥락 위주로 질문하기: "코드 짜줘"보다 "이런 문제가 있는데 어떻게 해결해?"라고 물었을 때, 기술적인 해결책(서버 재시작 등)을 더 잘 제시했습니다.
이렇게 하면 안 돼요
무조건적인 신뢰: AI가 짠 코드라도 내 환경(npm 버전 등)과 다를 수 있으니, 실행이 안 될 때는 에러 메시지를 그대로 보여주고 다시 요청해야 합니다.
➡️ 앞으로의 계획
해당 페이지로 신청한 사람들의 DB를 제 개인 노션페이지로 연동하여 예약목록을 받을 수 있게끔 할 예정입니다.
디자인 디벨롭을 더 할 예정이고요
가능하다면 노션 연동이 아닌 개별적인 어드민 페이지도 생성할 수 있을까 싶긴 한데 백에서 데이터 작업도 들어가야 할 것 같아서 조금 보류 중입니다
