Show GN: Claude Code 하네스로 만들어본 설정 파일 생성기 - ConfigDeck
(configdeck.dev)ConfigDeck (https://configdeck.dev/ko) 이라는 작은 도구를 만들어봤습니다.
설정 파일 생성기 자체는 흔한 주제이지만, 만드는 방식이 조금 실험적이었어서 경험을 나눠보고 싶었습니다.
무엇인가
프로젝트 시작할 때마다 .eslintrc, prettier.config, tsconfig 같은 설정 파일을 이전 프로젝트에서 복붙하는 게 번거로워서, 옵션을 골라 다운로드받는 형태로 만들어봤습니다.
- 9종 설정 파일 지원: ESLint, Prettier, TSConfig, Vite, Vitest, Next.js,
.gitignore, .editorconfig, .env.example - 스택 프리셋: React+Vite, Next.js, Astro, Node.js 등 한 번에 여러 파일 생성
- .eslintrc → eslint.config.mjs 마이그레이션 (Flat Config 변환)
- 한국어 / 영어 지원
- 100% 정적 사이트 (Cloudflare Pages, 콘텐츠 페이지 JS 0KB)
- 입력값은 브라우저 안에서만 처리, 외부 전송 없음
기술 스택: Astro 6 + Svelte 5 (Runes) + Tailwind 4 + TypeScript strict
만든 방식 — AI에 많이 맡겨봤습니다
이번에는 Claude Code를 활용해서 개발 프로세스 자체를 정리해보는 시도를 해봤습니다.
기획 방향을 잡고 중간 점검을 하는 정도가 사람이 한 일이고, 구현은 가능한 한 AI에게 맡겨봤습니다. 잘된 부분도 있고 시행착오도 많았지만, 과정을 공개하면 비슷한 시도를 하시는 분들께 참고가 될 것 같아 정리해봤습니다.
저장소의 .claude/ 디렉토리에 사용한 설정을 모두 공개해두었습니다:
https://github.com/jsg3121/configDeck/tree/main/.claude
- 하네스 문서 (CLAUDE.md, conventions, ADR 등)
- 도메인별 에이전트 (config-maker, ui-publisher, ux-designer,
qa-agent, seo-specialist 등) - 슬래시 스킬 (/lint-check, /code-review, /seo-audit, /research 등)
- ADR로 기술 의사결정 기록
- 자동화 Hook (PostToolUse 포맷팅, Stop 빌드/린트 검증)
작성하면서 신경 쓴 건 "Why-First" 정도입니다. 규칙만 적기보다 왜 그런지를 같이 적으니, AI가 엣지 케이스에서 좀 더 일관되게 판단하는 듯한 느낌이 있었습니다.
에이전트는 대략 이런 흐름으로 협업하게 구성했습니다:
product-planner → ux-designer → ui-publisher → qa-agent
(기획) (설계) (구현) (검증)
QA는 unit-tester / e2e-tester / static-analyzer 서브에이전트를 두고 qa-agent가 결과를 모아 리포트를 만드는 형태입니다.
시행착오
좋았던 점
- ADR로 의사결정을 남기다 보니, 시간이 지나도 "왜 이렇게 짰지?"를 되짚기가 수월했습니다.
- 하네스에 컨벤션을 적어두니 세션이 바뀌어도 결과물이 비교적 일관되게 나오는 듯합니다.
- 도메인별로 에이전트를 나눠두니, 기획과 구현이 한 컨텍스트에 뒤섞이지 않아서 따라가기 편했습니다.
어려웠던 점
- 처음엔 하네스가 없다 보니 결과물 스타일이 매번 흔들렸고, 지금 형태로 정리되기까지 여러 차례 다시 다듬었습니다.
- 토큰 비용이 생각보다 부담이라, 작업 규모에 따라 메인 대화 / 스킬 / 에이전트를 골라 쓰는 가이드를 따로 만들어 쓰고 있습니다.
- AI가 잘된 것처럼 보고하는 경우가 있어서, Stop hook으로 빌드 / 린트를 자동 검증하게 두는 게 도움이 됐습니다.
아직 정답을 찾았다고 말하긴 어렵고, 더 나은 방식이 있을 것 같습니다.