클로드코드로 상세페이지부터 모집신청폼, 관리자 대시보드, 인스타 포스팅까지 만든 후기

소개

Claude Code를 가르치는 워크샵을 준비하면서, 모집용 랜딩페이지가 필요했습니다. 이전에는 노션이나 구글폼으로 해결했는데, 이번에는 "Claude Code 워크샵"이니까 사이트 자체를 Claude Code로 만들면 그게 가장 강력한 증거가 되겠다고 생각했어요.

코딩을 전혀 모르는 상태에서 5일 만에 랜딩페이지, 신청폼(Airtable 연동), 관리자 대시보드, 인스타그램 모집 포스트까지 만든 과정을 공유합니다.

Claude Code에게 이렇게 말했습니다:

워크샵 랜딩페이지 만들어줘.
Above Coding Club이라는 이름이고, Claude Code를 배우는 오프라인 워크샵이야.
소개, 커리큘럼, FAQ, 신청폼이 필요해.

첫 버전이 바로 나왔지만, 카피와 커리큘럼 내용을 수정해야 했어요. 피드백도 자연어로 전달했습니다:

"강의"라는 단어를 전부 "워크샵"으로 바꿔줘

모바일에서 글씨가 너무 작아. 읽기 편하게 수정해줘

노코드 백엔드도 Claude Code가 만들어줬습니다:

신청 폼을 제출하면 Airtable에 저장되게 해줘.
Vercel 서버리스 함수로 만들어줘.
필드는: 이름, 연락처, 이메일, 하시는 일, 맥북 확인, 만들어보고 싶은 도구, 하고 싶은 말

이 한 마디로 api/apply.js 서버리스 함수가 생성되고, 폼 제출 → Airtable 저장이 자동으로 연결됐습니다.

가장 놀라웠던 순간입니다:

신청자 목록이랑 직군 분포 볼 수 있는 대시보드 만들어줘

몇 분 만에 총 신청자 수, 입금 현황, 직군별 분포 차트, 참가자 테이블, 만들고 싶은 도구 목록까지 포함된 대시보드가 완성됐습니다.

여기서 가장 많은 시행착오가 있었습니다.

디자인을 말로 설명하는 게 어려웠어요. "좀 더 세련되게", "좀 더 깔끔하게"라고 하면 원하는 결과가 안 나왔습니다. 레이아웃, 색감, 구성을 계속 바꿔가며 여러 버전을 만들었어요.

해결 방법은 레퍼런스였습니다. 마음에 드는 인스타 포스트를 직접 찾아서 이미지로 보여주면서:

이 레퍼런스처럼 만들어줘. 초록 배경에 터미널 윈도우 넣고,
워크샵 정보는 하단에 배치해줘.

이렇게 하니까 원하는 결과에 훨씬 빨리 도달할 수 있었습니다.

AI가 대신 정해주지 않는 것들은 직접 결정하고 수정해야 했습니다:

4/5는 토요일이 아니라 일요일이야. 수정해줘

참가비 10만원을 5만원 할인 표시로 바꿔줘

계좌번호 옆에 입금자명(김*석) 추가해줘

환불정책 문구도 두 번, 요일 오류도 한 번 수정했습니다. 운영 관련 정보는 미리 확정해두는 게 좋습니다.