요즘 바이브 코딩이다 AI 코딩이다 말이 많길래, 저도 진지하게 한번 해봤어요. 처음엔 그냥 제 개인 사이트 하나 만들어볼까 하고 시작한 건데…
Next.js로 게시판 하나 만들자 → 댓글도 필요하고 → 권한도 필요하고 → 소셜 로그인도 있어야 하고 → 어라 갤러리도? → 쇼핑몰 붙이고 싶은데? …
이러다 보니 결국 "이거 그냥 CMS 아니냐" 싶어져서, 커뮤니티/쇼핑몰/기업 사이트 같은 걸 하나의 코드베이스로 찍어낼 수 있는 구조로 설계가 바뀌더라고요.
재밌었던 건 플러그인 폴더 구조예요. 위젯 파일 하나 떨구면 어드민 설정 UI가 자동으로 생기게 해놨는데, 이걸 또 AI한테 "카운트다운 타이머 위젯 만들어줘" 하면 진짜 뚝딱 찍어내서 좀 신기했습니다. (AI가 이 프로젝트 구조대로 위젯 짜도록 레시피 몇 개 미리 심어뒀거든요)
그렇게 깔짝대다 보니 어느새 공개까지 해버렸네요. Next.js 16, React 19, Prisma, MySQL 조합이고 Docker로 1분 설치됩니다.
근데 하면서 제일 어려웠던 게, AI가 자꾸 기존 패턴 무시하고 자기 맘대로 새로 짜려고 하는 거였어요. CLAUDE.md나 룰 파일 아무리 써놔도 파일 많아지면 그냥 잊어버리고… 혹시 비슷하게 바이브 코딩 하시는 분들은 이런 부분 어떻게 제어하시나요? 노하우 있으면 공유 좀 부탁드립니다 🙏
네 하네스입니다 오타이네요 ^^
내부시스템에서 쓸거라 디자인이 엄청중요하진 않지만 그래도 어느정도는 해야할텐데... 이상하게 디자인이 너무 엉성하게 나오네요..ㅠㅠ
현재 사용되는 Chatbot (Claude, OpenAI, Gemini)의 자유도를 많이 주면 더 좋은 디자인이나, 그럴싸한 제품을 만들어주는 것 같지만, 반복적인 실수나 계속 리붓트하려는 경향이 있는 것 같습니다.
그래서 에이전트를 먼저 만들어서 개별 에이전트에 CLAUDE.md (AGENT.md)파일을 두고 상위에 다시 CLAUDE.md 파일로 최종 권위를 주는 경우로 개발하게 되면 원래 Chatbot이 가지고 있는 자유도가 떨어져서 원하는 제품이 안나올 수 있습니다.
제가 생각하기에 가장 좋은 방향은 하네스 엔지니어링이 가지고 있는 반복적 실수를 최소화하자는 개념을 도입하되, Reference는 사람이 잡아주는 형태입니다.
즉, 내가 원하는 형태의 구조 (디자인, 코드형태)는 잡아놓은 상태에서, agent를 만들어서 "안되는 Rule"외에는 자유도를 주는 겁입니다. md 파일의 기본 룰은 Reference를 따르면서 금지 동작들을 추가로 계속 작성해 두는 것입니다.
post-hook을 사용하면 강력하게 통제됩니다