1장. 화면만 만드는 프로젝트 만들기
이번 장에서 할 일
pro-kit으로 화면만 만드는 프로젝트를 만들어요. 이 장에서 만드는 건 빈 프로젝트예요. 화면을 담을 틀과 화면을 기획하고 디자인하는 규칙, 스킬, 전문 에이전트만 들어 있고, 내 서비스의 화면은 2장부터 만들어요. DB(데이터를 저장하는 곳)를 쓰지 않아서 Docker가 없어도 되고 몇 분이면 끝나요.
1. 프로젝트 만들기
pro-kit 폴더에서 연 에이전트에 붙여 넣으세요(시작하기의 "직접 준비하기"). [ ] 안은 프로젝트 폴더 이름이에요. 영어 소문자와 -로 바꿔도 돼요.
프롬프트에이전트 대화창에 붙여 넣기
화면만 만들어 볼 프로젝트를 [living]이라는 이름으로 만들어줘. DB는 쓰지 않아. 없는 준비물은 설치해줘.
에이전트는 이런 순서로 일해요. 옵션 없이 열었다면 명령마다 허락을 물어요. 읽어 보고 허락하세요.
준비물(Node, pnpm, git)이 있는지 확인하고, 없으면 설치해요.
최신 Better-T-Stack으로 웹 프로젝트를 만들어요.
pro-kit을 설치해요. 에이전트 규칙, 스킬, 검사 도구가 들어가요.
코드 모양을 정리하고 검사한 뒤, 첫 기록(커밋)을 남겨요.
이렇게 되면 성공
에이전트가 프로젝트 위치(
~/projects/living)와 함께 "화면만 프로젝트"라고 알려 줘요.보고에 화면을 보는 법, HTML로 내보내는 법, 나중에 실제 서비스로 바꾸는 법이 있어요.
막히면
비밀번호를 입력하라고 해요: 프로그램 설치에 컴퓨터 비밀번호가 필요할 때예요. 에이전트가 알려 준 명령을 새 터미널 창에서 직접 실행하고, 끝나면 대화창에
설치했어. 이어서 해줘라고 보내세요.같은 이름의 폴더가 이미 있대요: 다른 이름으로 다시 요청하세요. 예:
화면만 만들어 볼 프로젝트를 living2라는 이름으로 만들어줘. DB는 쓰지 않아.neon과 supabase 중에서 고르래요:
화면만 만들 거야. 추천대로 해줘라고 답하세요.Docker가 없다고 멈췄어요:
화면만 만들 거라 DB는 쓰지 않아. Docker 없이 진행해줘라고 보내세요.
2. 새 폴더에서 에이전트 열기
새 프로젝트의 규칙, 스킬, 전문 에이전트는 그 폴더에서 에이전트를 열어야 켜져요. 결과물의 품질이 여기서 나와요. 대화창에 /exit(Codex는 /quit)를 입력해 닫고, 터미널에 입력하세요.
터미널터미널에 입력
cd ~/projects/livingclaude --dangerously-skip-permissions # Codex는 codex --yolo
폴더를 믿을지 물으면 "예"를 고르세요.
3. (선택) Claude Code에서 이미지를 그리려면
Claude Code는 스스로 이미지를 그리지 못해요. 화면 시안과 사진을 그리려면 둘 중 하나를 준비하세요. Codex, Antigravity, Grok Build는 자체 이미지 도구가 있어서 이 단계를 건너뛰어도 돼요. 준비하지 않아도 끝까지 할 수 있어요.
ChatGPT 유료 요금제가 있으면: Codex CLI를 설치하고 ChatGPT로 로그인해 두세요. pro-kit이 설치한 gpt-image 스킬이 Codex CLI로 그려요.
유료 OpenAI API 키가 있으면: 작업 폴더
~/projects에.env파일을 만들고 키를 적어 저장하세요. 에이전트를 열 때 이 파일에서 키를 읽어요.
방법은 이미지 그리기에 있어요. 준비를 마치면 에이전트를 닫았다가 2단계처럼 다시 여세요. 5장에서 화면 구성을 고르기 전에만 하면 돼요.
에이전트가 물어보면
| 질문 | 답 |
|---|---|
| 프로젝트 이름이나 위치 | living, 기본 위치 그대로 |
| 명령을 실행해도 되는지 | 내용을 읽어 보고 허락 |
| 이 폴더를 믿을지(새 폴더에서 처음 열 때) | 예 |
이 쪽을 다 했나요?