본문으로 건너뛰기
프로킷
시작하기

PROKIT TUTORIALS

튜토리얼

AI 에이전트(Claude Code, Codex, Antigravity, Grok Build 중 하나)와 pro-kit으로 내 서비스를 직접 만들어 보는 튜토리얼이에요. 코드를 몰라도 프롬프트 하나로 시작하면 돼요. pro-kit이 설치한 규칙과 스킬, 전문 에이전트가 개발자와 디자이너가 밟는 절차를 단계마다 나눠 맡아서, 짧은 요청으로도 전문가 수준의 결과물을 얻을 수 있어요.

참고

튜토리얼에서 만드는 서비스는 모두 연습용이에요. 데이터도 모두 예시예요.

시작하기

처음 한 번만 해요1 준비할 것2 터미널 열기3 에이전트 설치하기4 로그인하기5 작업 폴더에서 에이전트 열기

1~2단계 준비할 것 · 터미널 열기

  1. 3단계 에이전트 설치하기

    쓰려는 에이전트 하나만 설치하세요. 아래 명령을 복사해 터미널에 붙여 넣고 엔터를 누르면 돼요. Antigravity나 Grok Build는 에이전트별 차이를 보세요.

    Claude Code

    터미널터미널에 입력

    curl -fsSL https://claude.ai/install.sh | bash

    Codex

    터미널터미널에 입력

    curl -fsSL https://chatgpt.com/codex/install.sh | sh

  2. 4단계 로그인하기

    터미널에 에이전트 이름을 치면 처음 한 번 로그인 화면이 나와요.

  3. 5단계 작업 폴더에서 에이전트 열기

    터미널터미널에 입력

    mkdir -p ~/projects && cd ~/projectsclaude --dangerously-skip-permissions   # Codex는 codex --yolo

    --dangerously-skip-permissions(Codex는 --yolo)는 명령마다 허락을 묻지 않고 진행하는 옵션이에요.

    주의

    이 옵션으로 연 에이전트는 묻지 않고 파일을 바꾸거나 지우고, 프로그램을 설치하고, 인터넷에서 파일을 받아요. 폴더 안에서 열어도 폴더 밖까지 보호되지는 않아요. Codex의 --yolo는 격리 장치(샌드박스)도 함께 꺼요. 작업 폴더나 그 안의 프로젝트 폴더에서만 열고, 출처를 모르는 프롬프트나 저장소 주소는 붙여 넣지 마세요. 이상한 일을 하면 Esc로 바로 멈추세요. 걱정되면 옵션 없이 claude(Codex는 codex)로 여세요. 명령마다 허락을 물어서 느리지만 더 안전해요. 자세한 내용은 묻지 않고 진행하게 열기에 있어요.

이제 준비가 끝났어요. 고른 튜토리얼의 첫 프롬프트를 붙여 넣으세요. 예: 컨셉으로 화면 만들기의 첫 프롬프트

프롬프트 하나로 프로젝트 시작하기

튜토리얼 · 컨셉으로 화면 만들기

이 프롬프트로 바로 프로젝트를 시작할 수 있어요. 작업 폴더 ~/projects에서 연 에이전트에 붙여 넣어 보세요. pro-kit 설치부터 기획, 디자인, 모든 화면, HTML 내보내기까지 에이전트가 이어서 해요. 바꿀 곳은 [ ] 안 두 군데예요. 첫째는 프로젝트 폴더 이름(영어 소문자와 -), 둘째는 누가 쓰고 무엇을 하는 서비스인지예요.

프롬프트에이전트 대화창에 붙여 넣기

https://github.com/roadkwon-ai/pro-kit 을 이 폴더에 받고, 그 안의 AGENTS.md대로 화면만 만들 프로젝트를 pro-kit 옆에 [living] 폴더로 만들어줘. DB는 쓰지 않아. 없는 준비물은 설치해줘. [같이 사는 사람들이 함께 쓴 생활비를 적고, 월말에 누가 누구에게 얼마를 보내면 되는지 알려 주는 서비스]를 만들고 싶어. 필요한 화면을 모두 예시 데이터로 만들어줘. 로그인이나 저장 같은 기능은 빼고 화면만 만들어. 디자인 스타일은 서비스에 어울리는 걸로 추천해주고, 다 만들면 HTML 파일로 내보내줘.

결과는 HTML 파일로 받아서 내 컴퓨터에서 봐요. 만들자마자 인터넷에 올려 다른 사람도 보게 하려면 배포하기에서 계정과 토큰을 먼저 준비하고, 거기 있는 배포 프롬프트로 시작하세요. 배포에 관심이 없으면 위 프롬프트를 그대로 보내면 돼요.

컨셉으로 화면 만들기에서 이어 가기

읽는 순서

  1. 1시작하기에이전트를 설치하고 로그인해요. 처음 한 번만 해요.
  2. 2튜토리얼 고르기프리셋으로 만들어 보기에서 만들어 볼 프리셋을 고르고, 그 쪽의 프롬프트를 붙여 넣으세요. 만들고 싶은 서비스가 따로 있으면 가장 쉬운 방법의 프롬프트에 내 컨셉을 넣으세요. pro-kit은 에이전트가 받아요.
  3. 3막히면막혔을 때와 처음 보는 용어를 보세요.

튜토리얼 목록

프리셋은 모두 11개예요. 화면 프리셋 9개와 유명 서비스 클론하기 2개(Nextflix, Claudle)이고, 모두 프리셋 팩이 있어요.

표의 시간에서 앞 숫자는 순조롭게 한 번에 끝날 때의 최솟값이에요. 범위의 끝은 쓰는 AI와 끊김에 따라, 괄호는 결과를 보고 여러 번 고쳐 달라고 할 때 걸릴 수 있는 시간이에요.

주의

유명 서비스 클론하기는 토큰을 많이 써요. 끝까지 만들 때 튜토리얼 하나에 한 번에 완성하면 약 5시간~10시간 30분(여러 번 고쳐 달라고 하면 약 15시간 45분까지) 걸리고, 토큰은 최소 약 610만~770만(캐시 포함 약 3억~3.9억)이 들어요. 토큰도 시간처럼 2~3배까지 늘 수 있어요. 튜토리얼마다 값은 각 튜토리얼 소개 쪽의 "시간과 비용"에, 읽는 법은 시간과 비용 읽는 법에 있어요.

여기 없는 서비스도 pro-kit과 프롬프트를 응용해 만들 수 있어요. 가장 쉬운 방법의 프롬프트에 내 컨셉을 넣어 보세요.

튜토리얼 읽는 법

튜토리얼의 장은 모두 같은 모양이에요.

  • 이번 장에서 할 일: 무엇을 만드는지와 완성 화면

  • 프롬프트: 복사해서 에이전트 대화창에 붙여 넣는 글

    프롬프트에이전트 대화창에 붙여 넣기

    지금까지 만든 거 검증해줘

  • 터미널에 입력: 터미널에 직접 치는 명령. 튜토리얼 전체에서 몇 번 안 나와요

    터미널터미널에 입력

    cd ~/projects/living

  • 이렇게 되면 성공: 잘 됐는지 확인할 화면과 내용

  • 막히면: 눌러서 펼치는 상자. 흔한 문제와 붙여 넣을 복구 프롬프트가 있어요

  • 에이전트가 물어보면: 그 장에서 나오는 질문과 고를 답

가이드