클로드 코드 에이전트 & 스킬, 자동 세팅 파일 공개!

파일 하나 멘션하면 클로드 코드 에이전트 팀 세팅이 자동으로 끝납니다. 서비스 정의부터 디자인 시스템, 4개 에이전트와 파이프라인 스킬까지 Step 0~7 대화형으로 진행됩니다.

시몬2026년 4월 5일
클로드 코드 에이전트 & 스킬, 자동 세팅 파일 공개!

안녕하세요 시몬입니다!

지난 AI 하네스 웨비나에서 약속드린 에이전트, 스킬 자동 설정 파일 링크와 사용법을 안내드려요!

웨비나에서 직접 시연해 드리긴 했지만, 막상 혼자 세팅하려면 여전히 어려운 분들이 많을 거라 생각합니다. 그런 분들을 위해 준비했습니다.

원래 모바일과 웹 범용으로 쓸 수 있게 만들었었는데, 검증 범위가 넓어지다 보니 웹 전용으로 스코프를 줄여서 정리했습니다. 프로젝트에 넣고 클로드에게 이 파일을 읽고 설정해달라고 하면 끝납니다.

가이드 파일이 뭔가요?

파일 이름은 claude-web-agent-setting-guide.md입니다.

에이전트와 스킬 세팅을 어떤 순서로, 어떻게 하라고 단계별 지침을 담은 문서입니다. 사용법은 간단해요.

  1. 새로운 폴더를 만듭니다
  2. VS Code에서 해당 폴더를 엽니다
  3. 가이드 파일을 폴더에 넣습니다
  4. 클로드 코드를 실행합니다
  5. @claude-web-agent-setting-guide.md 로 파일을 멘션하면서 세팅을 진행해달라고 합니다
  6. AI가 질문하면 답변합니다

전체 세팅 시간은 약 10분 정도 걸려요.

기술 스택은 Next.js (App Router) + Tailwind CSS + TypeScript로 고정되어 있습니다. 웹 프로젝트에 집중해서 검증된 구성을 바로 쓸 수 있게 만들었습니다.

세팅이 끝나면 프로젝트에 아래와 같은 구성이 완료됩니다.

  • 에이전트 4개 (project-manager, designer, frontend-dev, reviewer)
  • 파이프라인 스킬 (에이전트 4개를 순서대로 조율하는 오케스트레이터)
  • 디자인 시스템 + 디자인 토큰 파일 (CSS 변수 포함)
  • 프로젝트 지시 파일 (CLAUDE.md)
  • 기술 스택에 맞는 스킬 설치까지

Step 0~7, 어떻게 진행되나요?

파일 하나를 멘션하면 총 8단계가 순서대로 진행됩니다.

  • Step 0: 경로 변수 설정 (에이전트, 스킬, 문서 저장 위치 확인)
  • Step 1: Next.js 프로젝트 초기화 (create-next-app + 빌드 확인)
  • Step 2: 서비스 정의 (서비스명, 타겟, 핵심 기능을 대화형으로 수집)
  • Step 3: 브랜드 아이덴티티 + 디자인 시스템 (키컬러, 토큰, CSS 변수까지)
  • Step 4: 스킬 설치 (find-skills, skill-creator, frontend-design + 스택별 추천)
  • Step 5: 에이전트 4개 생성 (PM, Designer, Frontend-dev, Reviewer)
  • Step 6: 파이프라인 스킬 생성 (에이전트 팀을 조율하는 오케스트레이터)
  • Step 7: 프로젝트 지시 파일 생성 (CLAUDE.md)

설치 후 어떻게 작동하나요?

세팅이 끝나면 "랜딩페이지 만들어줘"처럼 태스크를 요청하면 됩니다. 파이프라인 스킬이 자동으로 실행되면서 아래 순서로 진행됩니다.

  1. PM이 기능 명세를 작성합니다
  2. 명세를 확인하고 승인합니다
  3. 디자이너가 화면을 설계합니다
  4. 설계를 확인하고 승인합니다
  5. 프론트엔드 개발자가 코드를 구현합니다
  6. 리뷰어가 코드를 검토합니다

각 단계 사이에 승인 게이트가 있어서 결과를 확인하고 수정을 요청할 수 있습니다.

현재 디자이너 에이전트는 텍스트 기반의 디자인 계획만 작성합니다. 여기에 Figma MCP나 Pencil MCP를 연결하면 실제 디자인 결과물을 만들고 승인받는 워크플로우로 확장할 수 있습니다. Pencil MCP 사용법은 지난 웨비나 영상에서 다뤘으니 참고하세요.

디자인 시스템 관련 설정도 포함

바이브 코딩으로 만든 앱들이 디자인 시스템 관련 세팅 없이 바로 개발에 들어가는 경우가 많습니다. 그래서 아예 과정 중에 디자인 관련 세팅이 포함되도록 구성했습니다. 키컬러, 브랜드 느낌, 테마 모드를 하나씩 결정하면 Tailwind v4 기반의 디자인 토큰 파일과 CSS 변수가 자동으로 생성됩니다.

뜯어보면서 배우셔도 좋습니다

클로드 코드 서브에이전트 구성을 처음 하려는 분들이 제일 많이 하는 말이 "어디서부터 시작하냐"입니다. 설명을 드려도 막연하고, 예시 코드를 드려도 어떻게 조합해야 할지 모르는 경우가 많습니다.

가이드 파일 자체를 읽어보면 에이전트 파일, 스킬 파일, 프로젝트 지시 파일이 어떤 역할을 하고 어떻게 연결되는지 감을 잡을 수 있습니다. 실제로 돌려보지 않더라도 구조를 이해하는 데 도움이 됩니다.

주의사항

에이전트를 활용한 작업은 토큰 소모가 많습니다. Pro 플랜 사용자분들은 빠르게 리밋에 도달할 수 있으니 참고하세요.

클로드 코드 세팅, 이제 막막하지 않습니다

클로드 코드 사용법을 배우는 과정에서 에이전트 팀 구성은 진입 장벽처럼 느껴지죠. 실제로 해보면 생각보다 단순합니다. 다만 처음엔 어떤 구조로 잡아야 하는지 감이 없을 뿐입니다.

이 가이드 파일이 그 첫 감을 잡는 데 도움이 됐으면 합니다.

아래 이메일을 입력하시면 자료를 보내드려요!