처음 보는 용어
튜토리얼에 나오는 말을 쉬운 말로 풀었어요. 다 외울 필요는 없고, 막힐 때 찾아보면 돼요.
도구
| 용어 | 뜻 |
|---|---|
| 터미널 | 글자로 컴퓨터에 명령하는 프로그램. macOS는 "터미널" 앱, Windows는 Ubuntu 창 |
| 에이전트 | 대화로 부탁하면 코드를 쓰고 명령을 실행해 주는 AI. pro-kit은 Claude Code, Codex, Antigravity, Grok Build를 지원하고, 튜토리얼은 Claude Code와 Codex로 확인했어요(에이전트별 차이) |
| 세션 | 에이전트를 한 번 열어 대화하는 단위. 닫았다가 다시 열면 새 세션이에요 |
| 묻지 않고 진행하는 옵션 | 에이전트가 명령마다 허락을 묻지 않게 여는 옵션. claude --dangerously-skip-permissions, codex --yolo 등. 주의할 점 |
| Codex CLI | 터미널에서 쓰는 Codex. Claude Code를 쓸 때도 설치하고 ChatGPT로 로그인해 두면 이미지를 그릴 수 있어요 |
| 프롬프트 | 에이전트에게 보내는 부탁 글. 튜토리얼의 프롬프트 블록을 복사해 붙여 넣어요 |
| 대화창 | 터미널에서 에이전트를 연 뒤 프롬프트를 입력하는 곳 |
| 스킬 | 에이전트가 읽는 작업 설명서. 부탁하면 에이전트가 알아서 골라 써요 |
| 호출률 | 에이전트가 필요한 스킬을 실제로 불러 쓴 비율 |
| 하네스 | 에이전트가 정해진 순서와 검사를 지키며 일하게 만드는 규칙, 스킬, 자동 검사의 묶음. pro-kit이 새 프로젝트에 설치해요 |
| pro-kit | 새 프로젝트를 만들고 에이전트가 일할 환경을 갖춰 주는 생성기. 이 튜토리얼의 출발점 |
| Docker | 내 컴퓨터에서 DB 같은 프로그램을 상자에 담아 띄우는 도구. Podman도 같은 일을 해요 |
| Node.js, pnpm | 웹 서비스를 만들고 실행하는 데 필요한 프로그램과 그 부품 관리 도구 |
| git, 커밋, push | git은 파일이 바뀐 기록을 저장하는 도구예요. 기록 한 번을 커밋, 그 기록을 GitHub에 올리는 일을 push라고 해요 |
만들기
| 용어 | 뜻 |
|---|---|
| 프로젝트 | 서비스 하나를 이루는 파일이 모두 들어 있는 폴더 |
| 모노레포 | 웹 앱, API, DB 같은 여러 부분을 한 저장소(프로젝트 폴더)에 함께 담은 구조. pro-kit으로 만든 프로젝트가 이 모양이에요 |
| 화면과 서버 | 화면은 브라우저에 보이는 부분, 서버는 뒤에서 데이터를 저장하고 꺼내 주는 부분 |
| DB(데이터베이스) | 회원, 글, 주문처럼 서비스의 데이터를 저장하는 곳 |
| 로컬 | 내 컴퓨터. "로컬 DB"는 내 컴퓨터에 띄운 DB |
localhost:3001 | 내 컴퓨터에서 실행 중인 서비스를 브라우저로 여는 주소 |
| 로그인(인증) | 회원이 누구인지 확인하는 기능 |
| 예시 데이터 | 화면을 먼저 보기 위해 넣어 두는 가짜 데이터. 나중에 DB의 진짜 데이터로 바꿔요 |
| 프리셋 | Preset. 프로킷으로 미리 만들어 둔 서비스. 모두 11개로, 랜딩페이지 4개, 앱 화면 5개, 유명 서비스 클론하기 2개(Nextflix, Claudle)예요. 프리셋 팩으로 같은 서비스를 만들어 보거나 바꿔 만들 수 있어요(프리셋 고르기) |
| 프로킷 사이트, 프리셋 사이트 | 프로킷 사이트는 pro-kit 홈페이지(prokit-web.vercel.app)예요. 프리셋을 모아 보고 모든 페이지를 미리 볼 수 있고, 튜토리얼과 문서도 있어요. 프리셋 사이트는 프리셋마다 GitHub Pages에 올린 사이트(https://roadkwon-ai.github.io/pro-kit/<이름>/)로, 직접 눌러 보며 써 볼 수 있어요 |
| 프리셋 팩 | Preset Pack. 만들 서비스의 화면 구성, 디자인, 예시 데이터, 그림을 묶어 둔 폴더. zip 파일 하나로 받아 풀어요. 프리셋마다(클론 튜토리얼 Nextflix, Claudle 포함) 있고, 에이전트가 필요한 팩만 받아 그것만 보고 만들어요. 받는 법은 프리셋 팩 안내에 있어요(에이전트는 node scripts/pack.mjs <이름>으로 받아요) |
| 라운드, dev-cycle | 라운드는 기능 하나를 만들거나 요청한 것을 고치고 확인까지 마치는 작업 묶음이에요. 스펙, 구현, 테스트, 리뷰를 거쳐 내가 직접 확인해야 닫혀요. 라운드를 이렇게 돌리는 pro-kit의 절차를 dev-cycle이라고 해요 |
| 케이스 | 라운드에서 하는 작업의 종류(화면만 바꾸는지, DB까지 바꾸는지 등). 종류마다 챙길 항목이 달라요 |
| 대조표 | 라운드마다 만드는 체크 표. 단계마다 실제로 한 일과 증거(명령, 결과)를 적어요. 다 채웠는지는 pnpm dev-cycle audit 명령이 검사해요 |
| 스펙 | 만들기 전에 기능의 범위와 동작을 적은 문서. 에이전트가 보여 주면 읽고 확인해요 |
| 마이그레이션 | DB의 표를 만들거나 바꾸는 기록. 순서대로 쌓여서 다른 DB에도 똑같이 적용할 수 있어요 |
| 보안 리뷰 | 전문 에이전트가 로그인과 권한에 빈틈이 없는지 보는 단계. 로그인 정보를 다루는 파일을 고치면 저절로 붙어요 |
| 관람 등급 | 작품을 볼 수 있는 나이 기준. 이 튜토리얼에서는 전체, 7세, 12세, 15세, 19세예요 |
| 스트리밍 | AI 답을 다 만든 뒤 한 번에 보여 주지 않고, 만드는 대로 글자씩 흘려 보여 주는 것. 기다리는 동안에도 답이 오는 게 보여요 |
| 모의 응답 | 실제 AI 대신 미리 써 둔 답을 질문의 낱말로 골라 흘려 보내는 것. AI 키가 없어도 대화가 어떻게 흐르는지 볼 수 있어요 |
| 아티팩트 | AI 답 속의 코드나 문서를 따로 꺼내 바로 보고 써 볼 수 있게 한 결과물. Claudle에서는 답의 HTML을 오른쪽 창에서 미리 봐요 |
| 시스템 지침 | 사용자가 보지 않는 곳에서 AI에게 늘 함께 보내는 지시문. 프로젝트의 지침과 파일이 여기에 붙어요 |
| 저작자 표기 | 남이 만든 작품을 쓸 때 만든 곳과 이용 허락 조건을 밝히는 글. 이 튜토리얼의 영상은 이 표기를 해야 쓸 수 있어요 |
디자인
| 용어 | 뜻 |
|---|---|
PRODUCT.md | 서비스가 무엇이고 누구를 위한 것인지 적은 기획 문서 |
GLOSSARY.md | 서비스에서 쓰는 말을 정리한 용어집. 에이전트가 같은 대상을 늘 같은 말로 부르게 해 줘요 |
| 사이트맵 | 서비스의 모든 페이지와 페이지 사이의 이동을 정리한 목록 |
| 브리프 | 화면 하나를 만들기 전에 쓰는 짧은 설계 메모 |
| 스타일 카탈로그 | 잘 만든 서비스의 디자인 규칙을 모아 둔 곳. 에이전트가 여기서 어울리는 스타일을 추천해요 |
DESIGN.md, 디자인 토큰 | DESIGN.md는 고른 스타일의 색, 글꼴, 간격 규칙을 적은 파일이에요. 그 안의 색, 글꼴, 간격 값 하나하나를 디자인 토큰이라고 해요 |
| comp(시안), plate | comp는 구현하기 전에 AI로 그려 보는 화면 그림이에요. 셋 중 하나를 골라요. plate는 화면에 넣는 사진이나 일러스트예요 |
| 배치도 | 화면마다 무엇이 어디에 놓이는지 그린 그림. 프리셋 팩에 들어 있고, 영어로는 wireframe이라고 해요 |
| 구성도 | 시안 대신 고르기 페이지가 직접 그리는 간단한 화면 구성 그림. 시안을 그리지 않거나 그릴 수 없을 때 써요. 에이전트는 배치도나 wireframe이라고 부르기도 해요 |
| 빌보드 | 홈 맨 위에 크게 걸리는 대표 작품 화면 |
| hover 창 | 작품 카드에 마우스를 올리면 잠시 뒤 펼쳐지는 작은 창. 재생, 찜, 평가 버튼이 있어요 |
| critique, audit, polish | 만든 화면을 평가하고(critique), 접근성·성능 같은 품질을 점수로 점검하고(audit), 지적을 모아 다듬는(polish) 단계. audit은 라운드의 대조표를 검사하는 명령(pnpm dev-cycle audit)을 뜻하기도 해요 |
| 디자인 리뷰 점수 | 화면이 쓰기 편한지 AI 디자인 평가 도구가 매긴 점수예요. 사용성 전문가 야코브 닐슨이 정리한 10가지 기준(지금 무슨 일이 일어나는지 알려 주는지, 익숙한 말을 쓰는지, 잘못 눌러도 되돌릴 수 있는지 등)마다 0~4점을 매겨 40점 만점이에요. 28점 이상이면 좋음, 36점 이상이면 아주 좋음이에요. 첫 화면 하나만 볼 때처럼 해당하지 않는 기준을 빼면 만점이 32점이나 28점이 돼요 |
| 접근성 | 키보드만 쓰거나 화면 읽기 프로그램을 쓰는 사람도 서비스를 쓸 수 있는 정도. 글자 대비, 키보드 이동, 버튼 이름 같은 것을 봐요 |
| P0~P3 | 디자인 리뷰가 찾은 문제의 급. P0은 할 일을 아예 못 하게 막는 문제, P1은 크게 헷갈리거나 불편한 문제예요. P2는 불편하지만 돌아갈 길이 있는 문제, P3은 다듬으면 좋은 것이에요 |
올리기
| 용어 | 뜻 |
|---|---|
| 배포 | 만든 서비스를 인터넷에 올려 누구나 들어올 수 있게 하는 일(배포하기) |
| Vercel | 웹 서비스를 인터넷에 올려 주는 곳 |
| GitHub Pages | GitHub 저장소의 파일을 무료로 인터넷에 올려 주는 기능 |
| Neon | 인터넷에 있는 DB 서비스. 배포할 때 써요. 개발 중에는 내 컴퓨터의 DB를 써요 |
| GitHub | git 기록을 인터넷에 올려 두는 곳 |
| 정적 사이트 | 서버 없이 미리 만든 파일만으로 보여 주는 사이트. GitHub Pages에 올린 프리셋 사이트가 이 방식이에요 |
| 원격 DB, 운영 DB | 인터넷에 둔 DB가 원격 DB예요. 그중 배포한 서비스가 실제로 쓰는 DB를 운영 DB라고 해요. 이 튜토리얼에서는 Neon에 만들고, 내 컴퓨터의 로컬 DB와는 따로예요 |
| 운영(production), develop | Vercel에 올리는 두 곳. 운영은 누구나 들어오는 실제 주소이고, develop은 운영에 올리기 전에 먼저 보는 확인용 주소예요 |
| 환경변수 | 배포한 서비스가 쓰는 설정값과 비밀값. DB 주소 같은 값을 파일에 두지 않고 Vercel에 운영용과 develop용으로 나눠 넣어요 |
| 릴리스 | 운영에 올릴 코드에 버전 번호(예: v0.1.0)를 붙여 기록하는 일. 바뀐 점을 적은 노트와 GitHub의 릴리스 쪽(GitHub Release)을 함께 만들어요 |
계정과 비용
| 용어 | 뜻 |
|---|---|
| 사용량 한도 | 요금제마다 일정 시간에 쓸 수 있는 양. 넘으면 잠시 멈춰요 |
| API 키 | 프로그램이 내 계정으로 서비스를 쓰게 해 주는 비밀 열쇠. 비밀번호처럼 다뤄요 |
| 토큰 | 에이전트가 내 GitHub이나 Vercel 계정으로 배포하게 해 주는 비밀 열쇠. 비밀번호처럼 다뤄요. 배포하기 |
| 토큰(AI 사용량) | AI가 글을 읽고 쓰는 양을 세는 단위. 한글 한 글자가 대략 토큰 하나예요. 튜토리얼의 "약 440만 토큰"이 이 뜻이에요 |
| AI Gateway | 여러 회사의 AI 모델을 한 주소와 키로 부르게 해 주는 서비스. Claudle 7장은 Kilo AI Gateway를 써요 |
| 무료 모델 | 돈을 내지 않고 부를 수 있는 AI 모델. 하루나 시간당 쓸 수 있는 양이 정해져 있고, 공급자가 대화를 기록할 수 있어서 개인 정보는 넣지 않아요 |
OPENAI_API_KEY | OpenAI API 키를 적는 항목 이름. 이 키를 넣는 것이 Claude Code로 이미지를 그리는 두 방법 중 하나예요. 이미지 그리기 |
| gpt-image | Claude Code가 Codex CLI를 거쳐 ChatGPT 요금제로 이미지를 그리게 해 주는 스킬. pro-kit이 프로젝트에 설치해요 |
.env, .env.example | .env는 키 같은 비밀값을 적는 파일이에요. 튜토리얼에서는 작업 폴더 ~/projects에 하나 만들어 OpenAI 키와 배포 토큰을 적어요. 프로젝트 안의 .env는 git이 무시해서 GitHub에 올라가지 않아요. .env.example은 무엇을 적을지 보여 주는 예시 파일이에요 |