Claude Code
Part 3 · 프로젝트 완성하기Chapter 9 · 스펙 주도 개발

템플릿으로 SDD 6단계 시작하기 | 프로젝트 셋업

템플릿을 클론하고 SDD 6단계가 어떤 도구(Skills·Hooks·Rules·Agent)로 자동화되어 있는지 확인합니다

Overview

SDD 6단계 사이클은 Lesson 1에서 살펴봤습니다. 6단계를 매번 직접 구성하려면 어떤 Skill을 만들지, 어떤 Hook으로 강제할지, 검증을 어디서 자동화할지를 매 프로젝트마다 직접 결정해야 합니다.

이번 레슨에서는 이 구성이 미리 끝나 있는 엔지니어링 템플릿을 클론하고, 각 도구가 어떤 단계를 담당하는지 확인합니다.

학습 목표

  • 엔지니어링 템플릿을 GitHub에서 클론하고 실행합니다
  • 템플릿에 포함된 도구(CLAUDE.md, Skills, Agents, Hooks, Rules)가 어떤 SDD 단계를 담당하는지 확인합니다
  • 도구가 단계를 어떻게 자동화하는지 설명합니다

Step 1: GitHub에서 템플릿 클론하기

템플릿 저장소에서 새 프로젝트를 생성합니다. https://github.com/toy-crane/harness-engineering-template 에 접속한 뒤, Use this template 버튼을 클릭합니다.

GitHub 템플릿 저장소의 Use this template 버튼

Create a new repository를 선택하고, 저장소 이름을 입력한 뒤 생성합니다.

GitHub Create a new repository 화면

생성된 저장소를 로컬에 클론하고 의존성을 설치합니다.

git clone https://github.com/<username>/<repo-name>.git
cd <repo-name>
bun install
bun dev

http://localhost:3000에서 초기 화면이 나타나면 셋업이 완료된 것입니다.

Step 2: shadcn preset 적용하기 (선택)

템플릿은 기본 shadcn 스타일을 사용합니다. 색상·폰트·테마를 바꾸고 싶다면 preset을 적용합니다.

https://ui.shadcn.com/create 에 접속하면 다양한 스타일 preset을 확인할 수 있습니다.

Shadcn 공식 사이트의 preset 스타일 목록

Claude Code에서 다음과 같이 입력하면 preset이 프로젝트에 적용됩니다.

shadcn preset을 {preset-id}로 바꿔줘

기본 스타일로도 충분합니다

preset 적용은 디자인을 커스텀하고 싶을 때만 진행합니다. 본 챕터의 흐름과 무관하므로, 기본 스타일로도 다음 레슨을 진행할 수 있습니다.

Step 3: 6단계 담당 도구 확인하기

Ideate/idea-refineSpecify/write-specSketch/sketch-wireframePlan/draft-planBuild/execute-planCompound/self-improve
각 단계마다 한 Skill 이 절차를 자동화합니다 — 보조 도구(Agent · Hook · Rule)는 본문 표 참조

템플릿에는 SDD 워크플로우에 필요한 도구가 미리 구성되어 있습니다. 각 단계의 핵심 도구는 다음과 같으며, 동작 방식과 활용은 해당 레슨에서 자세히 다룹니다.

단계핵심 도구
Ideate (선택)/idea-refine
Specify/write-spec
Sketch/sketch-wireframe
Plan/draft-plan · plan-reviewer
Build/execute-plan · code-reviewer · Hooks · Rules
Compound/compound

이 도구들은 다섯 층으로 이루어집니다. Skills가 단계별 절차를, Agents가 별도 컨텍스트의 검증을, Hooks·Rules가 Build에서 규칙 강제와 영역 가드를, CLAUDE.md가 전 단계 공통 컨텍스트를 담당합니다. 이 다섯 층 덕분에 개발자는 사이클 자체에 집중할 수 있습니다.

CLAUDE.md: 모든 단계에 적용되는 공통 설정

다른 layer는 각 단계 레슨에서 자기 역할로 다시 등장하지만, CLAUDE.md는 특정 단계에 한정되지 않고 매번 자동으로 불러집니다. 세 가지 규약을 정의합니다.

  • 6단계 phase 표: 어느 단계에 무엇을 산출하는지
  • 수용 기준 테스팅 원칙: 외부 관찰 가능한 동작은 자동화, 디자인 판단은 Human review
  • 아키텍처 레이어 순서: types → config → lib → services → hooks → components → app. Plan 단계의 Task 순서가 이 레이어를 따릅니다

examples/requirements.md에는 feedme.wiki 클론 프로젝트의 요구사항이 들어 있습니다. 다음 레슨부터 이 요구사항을 입력으로 SDD 사이클을 진행합니다.

핵심 포인트 정리

  1. 템플릿 환경 구성: CLAUDE.md, Skills, Agents, Hooks, Rules가 미리 갖춰져 있어, SDD 사이클 자체에 집중할 수 있습니다
  2. 도구-단계 매핑: 6개 Skill이 6단계를 자동화하고, Agents가 Plan·Build를 검증하며, Hooks·Rules가 Build에서 규칙을 강제하고 영역을 보호하며, CLAUDE.md가 전 단계의 공통 컨텍스트가 됩니다

FAQ

  • Q: 기존 프로젝트에 .claude/만 복사해서 적용해도 되나요?

    • A: 가능합니다. 다만 CLAUDE.md의 아키텍처·테스팅 규약이 기존 프로젝트와 맞는지 확인이 필요합니다. 충돌이 있으면 CLAUDE.md를 프로젝트에 맞게 수정해서 사용합니다.
  • Q: 템플릿의 Skills를 빼거나 추가할 수 있나요?

    • A: 네. 각 Skill은 .claude/skills/<name>/SKILL.md 파일 하나로 동작합니다. 빼고 싶으면 디렉터리를 삭제하고, 추가하고 싶으면 같은 위치에 새 디렉터리를 만들면 됩니다.
  • Q: Reference Skill은 일반 Skill과 어떻게 다른가요?

    • A: 동작 방식은 같습니다. next-best-practices 같은 Skill은 라이브러리·프레임워크의 사용 규약을 담고 있어 Build 단계에서 자동으로 로드됩니다. 절차를 자동화하는 것이 아니라 지식을 제공하는 것이 주된 역할입니다.

이어서 배울 내용

프로젝트 셋업이 완료되었습니다. 다음 레슨에서는 SDD의 첫 단계인 Specify를 배웁니다. examples/requirements.md의 feedme.wiki 요구사항을 입력으로 /write-spec을 실행합니다.

On this page