1장. 프로젝트 만들기

이번 장에서 할 일

pro-kit으로 Claudle 프로젝트를 만들어요. 이 장에서 만드는 건 빈 프로젝트예요. 서비스를 담을 틀과 규칙, 스킬, 전문 에이전트, 내 컴퓨터에 켠 DB(서비스의 데이터를 저장하는 곳)만 들어 있고, 내 서비스는 2~3장에서 기획과 디자인을 한 뒤 4장부터 화면을 만들어요.

1. 프로젝트 만들기

pro-kit 폴더(~/projects/pro-kit)에서 연 에이전트에 붙여 넣으세요(시작하기의 "pro-kit 폴더에서 열기").

[claudle]은 프로젝트 폴더 이름이에요. 영어 소문자와 -로 바꿔도 돼요. 폴더 이름을 바꿨다면 이후 명령의 claudle도 내 폴더 이름으로 바꿔요.

neon 템플릿은 pro-kit의 두 템플릿 가운데 하나예요. 개발할 때는 내 컴퓨터의 DB를 쓰고, 배포할 때는 Neon(인터넷에 있는 DB 서비스)에 올리는 구성이에요.

에이전트는 이런 순서로 일해요. 옵션 없이 열었다면 명령마다 허락을 물어요. 읽어 보고 허락하세요.

1. 1.

   준비물(Node 22.20 이상, pnpm, git, Docker 또는 Podman)이 있는지 확인해요. 없으면 설치 방법을 알려 주고 멈춰요.

2. 2.

   최신 Better-T-Stack(웹 서비스의 기본 틀을 한 번에 만들어 주는 도구)으로 웹 프로젝트를 만들고, pro-kit을 설치해요. 에이전트 규칙, 스킬, 검사 도구가 들어가요.

3. 3.

   내 컴퓨터에 DB를 켜고, 로그인 정보를 담을 표를 만드는 첫 마이그레이션(DB의 표를 만들거나 바꾸는 기록)을 적용해요.

4. 4.

   코드 모양을 정리하고 검사한 뒤 첫 기록(커밋)을 남겨요.

보고에는 내가 할 일도 함께 나와요. 이 튜토리얼에서는 이렇게 하면 돼요.

2. 새 폴더에서 에이전트 열기

새 프로젝트의 규칙, 스킬, 전문 에이전트는 그 폴더에서 에이전트를 열어야 켜져요. 2장부터는 모두 이 폴더에서 해요. 대화창에 /exit(Codex는 /quit)를 입력해 닫고, 터미널에 입력하세요.

cd ~/projects/claudle.agents/skills/impeccable/scripts/impeccable hooks onclaude --dangerously-skip-permissions   # Codex는 codex --yolo

두 번째 줄은 화면 파일을 고칠 때마다 디자인 검사기가 결과를 알려 주게 켜는 명령이에요. 처음 한 번만 하면 돼요. 폴더를 믿을지 물으면 "예"를 고르세요(폴더를 믿을지 물을 때).

Codex로 열었다면 대화창에 /hooks를 입력해 디자인 검사기 훅을 믿는다고 확인하세요.

3. (선택) 시안을 그리려면

그림은 프리셋 팩(만들 서비스의 화면 구성, 기능 규칙, 디자인 노트, 예시 데이터, 그림을 묶어 둔 폴더)에서 받고, 3장의 홈 화면(소개 쪽) 구성은 구성도(고르기 페이지가 직접 그리는 화면 구성 그림)로 골라요. 기본 흐름에는 AI로 그릴 그림이 없어서 이 단계는 건너뛰어도 돼요.

구성도 대신 시안(완성 화면을 미리 그린 그림)을 그려서 고르고 싶을 때만 준비하세요.

• Codex, Antigravity, Grok Build: 자체 이미지 도구로 그려서 준비할 것이 없어요.

• Claude Code: 스스로 그리지 못해서 이미지 API 연결이 필요해요. 둘 중 하나를 준비하세요.

  • 유료 OpenAI API 키가 있으면: 작업 폴더 ~/projects에 .env 파일을 만들고 키를 적어 저장하세요. 그린 장수만큼 내 OpenAI 계정에 요금이 나와요.

  • ChatGPT 유료 요금제가 있으면: Codex CLI를 설치하고 ChatGPT로 로그인해 두세요.

방법은 이미지 그리기에 있어요. 준비를 마치면 에이전트를 닫았다가 2단계처럼 다시 여세요. 2장을 시작하기 전에 해 두면 대화를 끊지 않고 3장까지 갈 수 있어요.

에이전트가 물어보면