Claude Code로 CMS 프로젝트 하루만에 만들기 — 기획부터 코딩까지 자동화

Claude Code로 CMS 프로젝트를 하루만에 기획서 작성 → 이슈 생성 → 코딩 → PR까지 해봤어요.

"AI가 코딩을 해준다"는 말은 많이 들었는데, 실제로 프로젝트 전체 흐름을 같이 해보니까 느낌이 달라요. 그냥 코드 자동완성이 아니라, 노션에 기획서를 직접 쓰고 → 이슈 만들고 → 코드 짜고 → 커밋까지 하는 페어 프로그래밍 파트너에 가까웠어요.

1. Claude Code란?

Claude Code는 Anthropic에서 만든 CLI 기반 AI 코딩 도구예요.

터미널에서 npm으로 설치하거나, VS Code 확장프로그램으로도 설치할 수 있어요.

VS Code에서는 Extensions에서 "Claude Code"를 검색해서 설치하면 에디터 안에서 바로 쓸 수 있어요.

VS Code 설치 가이드

파일을 직접 읽고, 편집하고, 터미널 명령어를 실행하는 건 기본이고, MCP 서버를 연결하면 노션에 기획서를 쓰거나, 피그마 디자인을 읽는 것까지 가능해요.

Copilot이나 Cursor랑 뭐가 다른지 궁금하죠?

	Copilot / Cursor	Claude Code
방식	IDE 내 자동완성 / 챗	CLI에서 직접 파일 조작
범위	현재 파일 중심	프로젝트 전체 탐색
실행	코드 제안만	git, npm, gh 등 직접 실행
컨텍스트	열린 파일	CLAUDE.md + 전체 코드베이스

핵심은 CLAUDE.md 파일이에요. 프로젝트 루트에 이 파일을 두면 Claude가 프로젝트 규칙을 이해하고 알아서 따라요.

이걸 써두면 "이 프로젝트에서는 이렇게 해줘"라고 매번 말할 필요가 없어요.

2. 노션 기획서도 Claude Code가 작성

사실 노션 기획서 자체도 Claude Code가 만들었어요. "공공기관 CMS 기획서 써줘"라고 하니까 노션에 사이트맵, 와이어프레임 12개 화면, DB 설계, API 설계까지 직접 작성해줬어요.

Claude Code는 Notion MCP 서버를 통해 노션 페이지를 직접 생성하고 편집할 수 있어요. 단순히 읽기만 하는 게 아니라, 기획 단계부터 AI가 참여하는 거죠.

이렇게 만든 기획서를 다시 Claude Code에 읽히면 이후 작업에서 계속 참고해요.

"대시보드에 뭐 넣을까?" 물으면 기획서 기반으로 대답하고, 코드도 거기에 맞춰 짜요.

Claude Code는 memory 폴더에 프로젝트 맥락을 저장하기 때문에, 다음 세션에서도 이어서 작업할 수 있어요.

3. GitHub 이슈로 코딩 자동화

이게 진짜 강력했어요.

3-1. 라벨 + 마일스톤 + 이슈 + 보드 자동 생성

"할일을 이슈에 적어놓고 자동화하고 싶어"라고 했더니 3가지 옵션을 제시해줬어요.

그러자 gh CLI로 한 방에 전부 만들어줬어요:

• 라벨 9개: frontend, backend, admin, web, shared, ui, api, a11y, infra
• 마일스톤 5개: Phase 1-A MVP ~ Phase 4
• 이슈 18개: 로그인, 대시보드, 게시판, 미디어, 설정 등 전부
• GitHub Projects 보드: 칸반 보드에 이슈 전부 연결

기획서에서 읽은 내용을 기반으로 이슈를 나눈 거라서, 빠뜨리는 것 없이 체계적이었어요.

3-2. 이슈 번호로 코딩

이슈가 생기니까 작업 흐름이 깔끔해졌어요.

Claude가 @hanui/react에서 쓸 수 있는 블록을 알아서 찾아서 가져다 씁니다.

LoginForm, AdminLayout, BoardManagement, MediaGallery, SiteSettings, UserManagement, TrashList — 이미 만들어둔 블록들을 조합해서 화면을 만들었어요.

커밋 메시지에도 이슈 번호가 자동으로 들어가요:

3-3. 하루 만에 만든 것들

카테고리	화면
인증	로그인 (mock, 기본값 자동 입력)
어드민	대시보드, 게시판, 미디어, 설정, 계정, 휴지통, 고정 페이지, 메뉴
에디터	Tiptap (서식, 정렬, 목록, 표, 이미지, 링크 — 21개 툴바 버튼)
퍼블릭	메인, 기관소개(LNB+브레드크럼), 게시판 목록/상세
인프라	모노레포(pnpm + Turbo), KRDS 디자인 토큰, GitHub 프로젝트 보드

물론 전부 mock 데이터지만, 화면 구조와 라우팅이 완성되어 있어서 백엔드 API만 연결하면 돼요.

4. PR도 만들어줘

Claude Code는 gh CLI를 쓸 수 있으니까 PR 생성도 가능해요.

이러면 Claude가:

1. git log으로 커밋 히스토리 확인
2. git diff main...HEAD로 변경사항 분석
3. PR 제목 + 본문 자동 작성
4. gh pr create 실행

코드 리뷰할 때도 유용해요. 다른 사람이 올린 PR URL을 주면 변경사항을 분석하고 리뷰 코멘트도 달아줘요.

5. 슬래시 커맨드로 반복 작업 자동화

Claude Code에는 슬래시 커맨드, 에이전트, 훅 기능이 있어요. .claude/commands/ 폴더에 마크다운 파일을 넣으면 /명령어로 바로 쓸 수 있어요.

이 프로젝트에서 실제로 /commit과 /build를 가장 많이 썼어요. 매번 "커밋해줘", "빌드해줘" 타이핑하는 것보다 훨씬 빨라요.

에이전트는 복잡한 작업을 독립 컨텍스트에서 처리해요. 예를 들어 code-reviewer 에이전트가 변경된 코드를 심각도별로 리뷰하고, test-runner 에이전트가 관련 테스트를 자동으로 찾아서 실행해요.

훅은 이벤트 발생 시 자동 실행되는 안전장치예요. 파일 수정하면 Prettier가 자동 포맷팅되고, rm -rf 같은 위험한 명령어는 자동 차단돼요.

	커맨드	에이전트	훅
실행	/명령어로 직접 호출	Claude가 자동 위임	이벤트 시 자동 실행
역할	정해진 작업 수행	복잡한 작업을 독립 수행	단순 검증/자동화
예시	/commit → 커밋	코드 리뷰 자동 위임	저장 → Prettier 실행

이 커맨드/에이전트/훅을 모아서 claude-settings 레포로 공개했어요. 프론트엔드/백엔드/풀스택 중 선택해서 원라인 설치할 수 있어요:

커맨드 21종, 에이전트 4종, 훅 5종의 전체 목록과 사용법은 Claude Code 슬래시 커맨드 21종 — 설치 한 줄이면 끝에서 자세히 다뤘어요.

GitHub: https://github.com/hanui-o/claude-settings

실전에서 느낀 팁 3가지

1. CLAUDE.md를 잘 써라

프로젝트 컨벤션을 적어두면 Claude가 일관된 코드를 짜요.

예를 들어 HANUI에서는:

• Modal은 onClose prop (onOpenChange 아님)
• Badge variants: primary, info, gray, secondary, success, warning, error
• Select에 id prop 미지원

이런 걸 안 써두면 매번 타입 에러나고 고쳐야 해요. 써두면 처음부터 맞춰요.

2. 빌드를 자주 시켜라

Claude가 코드를 짜면 바로 pnpm build를 시켜요. 타입 에러나 lint 에러를 즉시 잡고 고쳐요.

실제로 우리도 작업하면서 이런 에러들을 만났어요:

빌드 에러 메시지를 보여주면 Claude가 원인을 파악하고 알아서 고쳐요.

3. 작은 단위로 커밋시켜라

한 번에 다 하지 말고 기능 단위로 커밋하면 히스토리가 깔끔해요.

"이거 커밋해줘"라고 말하면 알아서 변경 파일을 staging하고, 이슈 번호 포함한 커밋 메시지를 만들어요.

마무리

Claude Code는 "코드 좀 짜줘"가 아니라 **"같이 프로젝트 하자"**에 가까워요.

기획서 읽기 → 이슈 정리 → 코딩 → 빌드 확인 → 커밋 → PR까지, 개발 워크플로우 전체를 같이 돌릴 수 있어요.

특히 공공 SI처럼 화면이 많고 반복 패턴이 있는 프로젝트에서는 생산성이 확실히 올라요. 디자인 시스템(HANUI) 블록을 가져다 쓰면서 18개 이슈의 프론트엔드 화면을 하루 만에 거의 다 만들었거든요.

다음에는 백엔드(전자정부프레임워크 v5) 연동 과정도 공유할게요.

---

이 글에서 사용한 프로젝트:

• HANUI — KRDS 기반 React 디자인 시스템
• claude-settings — Claude Code 슬래시 커맨드, 에이전트, 훅 설정 모음
• hanui CMS — HANUI 기반 공공기관 CMS