# AI Basecamp Builder Track 커리큘럼

하나의 서비스를 내가 실제로 쓸 수 있는 수준까지 고도화하는 과정에서, 필요한 IT 기본 지식을 자연스럽게 습득합니다. 목표는 “4개 만들기”가 아니라 “한 개를 내 손으로 쓸 수 있게 만들기”입니다.

## 한 줄 결론

Builder Track은 아이디어를 바로 만들고 → 만지면서 모르는 것을 배우고 → 고치면서 더 배우는 실습 트랙입니다. 도구는 Lovable/v0 → Cursor/Codex → Claude Code → AntiGravity 2.0 순으로 밀어붙입니다.

## 대상

- 만들고 싶은 앱/웹/서비스/도구 아이디어가 있는 사람
- 코딩을 잘 모르지만 AI와 함께 프로토타입을 만들고 싶은 사람
- 이미 개발 경험은 있지만 기획·검증·배포 루프를 빠르게 돌리고 싶은 사람
- 자동화보다 “사용자가 만지는 결과물”을 만들고 싶은 사람

## 최종 산출물

4회가 끝났을 때 각 참여자는 아래를 갖습니다.

1. **내가 실제로 쓸 수 있는 웹앱** — 배포된, 사용자 테스트 가능, AI 기능 탬재
2. **개발 과정 로그** — 무엇을 만들었는지, 무엇을 배웠는지 기록된 실험 로그
3. **다음 단계 로드맵** — 어떤 기능을 더 넣을지, 어떤 도구가 필요한지 정리된 계획

## 운영 원칙

- **기획서를 쓰지 않습니다.** 아이디어를 1문장으로 좁히고 바로 만듭니다.
- **모르는 게 나오면 그거를 배웁니다.** 사전 교육이 아니라 문제 해결 과정에서 자연스럽게 습득합니다.
- **매 세션마다 산출물을 남깁니다.** 설명은 10분, 나머지는 전부 제작입니다.
- **AI가 만든 결과를 그대로 믿지 않습니다.** 테스트, 리뷰, 사용자 확인을 포함합니다.
- **처음부터 큰 서비스를 만들지 않습니다.** 한 명의 사용자, 한 가지 문제, 한 가지 핵심 행동부터 시작합니다.

## 도구 진화 경로

세션마다 더 강력한 도구로 전환합니다.

| 세션 | 주도 도구 | 억히는 것 |
|---|---|---|
| 1회차 | Lovable / v0 / Bolt | 아이디어를 화면으로 만들기 |
| 2회차 | Cursor / Codex CLI | 코드를 직접 수정하고 기능 추가하기 |
| 3회차 | Claude Code | 터미널에서 AI와 대화하며 프로젝트 전체 관리 |
| 4회차 | AntiGravity 2.0 | 보널 에이전트로 병률 작업 및 고도화 |

## 4회 커리큘럼 요약

| 회차 | 목표 | 핵심 질문 | 배우는 IT 기본 지식 | 산출물 |
|---|---|---|---|---|
| 1회차 | 첫 화면을 만들고 배포한다 | 사용자가 처음 보는 화면은 무엇이어야 하나? | 웹의 기본: URL, 도메인, 호스틱, 배포 | 랜딩+데모 페이지 |
| 2회차 | 기능을 추가하고 데이터를 담는다 | 사용자가 입력한 것을 어디에 저장하고 다시 보여줘야 하나? | Git, 버전 관리, 데이터베이스/저장, API 개념 | 작동하는 미니앱 |
| 3회차 | AI 기능을 탈억시켜본다 | AI가 어디서 도움이 될까? 어디서 막혀야 할까? | API, 프롬프트, 인증, 요청/응답 | AI 기능 탈입 앱 |
| 4회차 | 내가 쓸 수 있는 수준까지 다듬다 | 사용자가 막힌 지점은 어디? 어떻게 고치면 더 좋을까? | 보안, 성능, 오류 처리, 병률 처리 | 완성된 웹앱 + 다음 로드맵 |

---

## 1회차 — 첫 화면을 만들고 배포한다

### 목표

아이디어를 1문장으로 좁히고, 2시간 안에 랜딩+데모 페이지를 만들어 배포합니다.

### 진행 (3시간)

```
0:00-0:10  아이디어 1문장 쓰기 (누구의 무엇을 해결)
0:10-0:20  Lovable/v0/Bolt 설명 + 시작
0:20-1:20  AI에게 "이거 만들어줘" → 반복 수정
1:20-1:40  화면 디자인 조정 (색, 폰트, 배치)
1:40-2:00  Vercel/Netlify/Cloudflare Pages 배포
2:00-2:20  배포된 링크 확인 + 타인 공유
2:20-2:50  1분 데몤 + 피드백
2:50-3:00  다음 실험 정리
```

### 이 세션에서 배우는 IT 기본 지식

**웹의 기본 구조**
- **URL** — 인터넷 주소의 기본. 도메인, 경로, 쿼리 등의 개념
- **호스팅/ 서버** — 내가 만든 페이지를 세상에 보여주는 곳. Vercel/Netlify가 무엇인지 이해하기
- **배포** — 내 컴퓨터에서만 보던 화면을 늦이들도 볼 수 있게 만드는 것
- **HTML/CSS/JS** — 웹페이지의 구성 요소. 방법은 AI가 하지만 "무엇을 만들고 있는지"는 나도 알아야 함

**웹사이트 제작의 흐름**
- 아이디어 → 와이어프레임 → 디자인 → 개발 → 테스트 → 배포
- 각 단계의 목적과 산출물을 알아두면 나중에 더 강력한 도구로 전환할 때 백그라운드가 있음

### 실습 프롬프트

```txt
나는 [대상 사용자]를 위한 [서비스/도구]를 만들고 싶어.
현재 아이디어는 [아이디어 설명]야.

이걸 바로 만들 수 있는 랜딩+데모 페이지로 만들어줘.
반드시 아래 기준을 만족해줘.
- 첫 화면에서 서비스가 무엇을 하는지 5초 안에 보임
- 사용자가 하나의 행동을 할 수 있음 (클릭, 입력, 버튼 등)
- 모바일에서도 깨지지 않음
- 배포 가능한 링크를 제공
```

### 산출물 기준

- [ ] 배포된 링크가 있다
- [ ] 첫 화면에서 서비스 목적이 보인다
- [ ] 사용자가 하나의 행동을 할 수 있다
- [ ] 모바일에서도 깨지지 않는다
- [ ] 배우다 만진 것: URL, 도메인, 호스팅, 배포, HTML/CSS/JS 개념

---

## 2회차 — 기능을 추가하고 데이터를 담는다

### 목표

1회차의 페이지에 사용자 입력, 데이터 저장, 조회 기능을 넣고, Git으로 버전을 관리합니다.

### 진행 (3시간)

```
0:00-0:15  1회차 산출물 공유 + 배우다 만진 것 보기
0:15-0:30  Git/GitHub 개념 설명 (어떻게 도구가 우리의 수정을 기억하는지)
0:30-0:45  Cursor/Codex CLI 설치 + 프로젝트 연결
0:45-1:30  AI에게 "기능 추가해줘" → 코드 수정 과정 관찰
1:30-1:50  데이터 저장 구조 설계 (localStorage → JSON → 간단 DB)
1:50-2:10  Git으로 저장 + GitHub에 옮기기
2:10-2:40  테스트 + 배포
2:40-3:00  1분 데몤 + 다음 실험 정리
```

### 이 세션에서 배우는 IT 기본 지식

**버전 관리 (Git)**
- **저장소(Repository)** — 프로젝트의 하나의 시간선. 과거의 나를 보관하는 곳
- **커밋(Commit)** — "이 시점의 나를 저장한다"는 의미. 잘못 돌려도 이 시점으로 돌아갈 수 있음
- **버전 관리의 에세이**: 수정 → 저장 → 테스트 → 배포. 이 루트를 모르면 안돼요

**데이터와 저장**
- **데이터베이스** — 정렬된 데이터를 저장하고 조회하는 시스템. Excel이 하나의 표라면 DB는 여러 표를 연결한 것
- **localStorage** — 브라우저 안에 저장. 간단하지만 사람마다 다름
- **JSON** — 데이터를 쓰는 표준 형식. API와 대화할 때 쓰임

**코드의 구조**
- **파일 구조** — HTML, CSS, JS가 어떻게 연결되는지
- **함수** — 반복되는 작업을 하나의 이름으로 만들기
- **이벤트** — 사용자가 클릭하면 무엇이 일어나는지

### 실습 프롬프트

```txt
지난번 만든 [프로젝트 이름]에 사용자 입력 기능을 추가해줘.

사용자가 [입력할 것]을 입력하면
[저장되는 것]이 저장되고
[보여줘야 할 것]을 보여줘.

반드시 아래 기준을 만족해줘.
- 입력 후 페이지를 새로 고침해도 입력값이 유지됨
- 저장된 데이터를 목록으로 보여줌
- 삭제 기능이 있음
- Git으로 저장할 수 있음
```

### 산출물 기준

- [ ] 사용자 입력 → 저장 → 조회 가능
- [ ] 삭제 기능 있음
- [ ] GitHub에 코드가 옮겨졌음
- [ ] 배우다 만진 것: Git, 커밋, 데이터베이스, JSON, 파일 구조

---

## 3회차 — AI 기능을 탈억시켜본다

### 목표

2회차의 앱에 AI API를 연결해서 실제 AI 기능을 넣고, 프롬프트를 설계합니다.

### 진행 (3시간)

```
0:00-0:15  2회차 산출물 공유 + 배우다 만진 것 보기
0:15-0:35  API의 개념: "프로그램끼리 대화하는 방법"
0:35-0:50  Claude Code 설치 + 프로젝트 연결
0:50-1:30  AI에게 "API 연결해줘" → 요청/응답 구조 관찰
1:30-1:50  프롬프트 설계: 입력 → 출력 형식 고정
1:50-2:10  인증과 키 관리 (안전한 방법)
2:10-2:40  테스트 + 배포
2:40-3:00  1분 데몤 + 다음 실험 정리
```

### 이 세션에서 배우는 IT 기본 지식

**API의 기본**
- **API** — 프로그램끼리 대화하는 계약. 내 앱이 AI와 대화하려면 API가 필요함
- **Endpoint** — 어디로 요청할지
- **Method** — 무엇을 할지 (GET=불러오기, POST=보내기)
- **Request/Response** — 보내는 것과 받는 것
- **JSON** — API가 대화하는 표준 언어

**인증과 보안**
- **API Key** — 네 신분을 증명하는 열쇠. 노출하면 끚
- **환경변수** — 코드에 직접 쓰지 않고 변수로 관리하는 방법
- **오류 처리** — API가 답을 안 주면 어떻게 대처할지

**프롬프트 설계**
- **시스템 프롬프트** — AI가 누구인지, 무엇을 하는지, 어떻게 대답할지 를 정하는 지시
- **역할 vs 입력/출력** — "요약해줘"보다 "이런 입력을 받아서 이런 출력을 내줘"가 더 정확함

### 실습 프롬프트

```txt
지난번 만든 [프로젝트 이름]에 AI 기능을 추가해줘.

사용자가 [입력]을 하면
AI가 [처리]를 해서
[출력]을 보여줘.

반드시 아래 기준을 만족해줘.
- 입력 형식이 분명함
- 출력 형식이 고정되어 있음 (JSON 또는 표)
- API 키를 코드에 직접 넣지 않고 환경변수로 관리
- 오류 시 사용자에게 알림
```

### 산출물 기준

- [ ] AI 기능이 작동함
- [ ] 입력/출력 형식이 분명함
- [ ] API Key가 코드에 직접 노출되지 않음
- [ ] 오류 시 사용자에게 알림
- [ ] 배우다 만진 것: API, Endpoint, Method, Request/Response, JSON, 인증, 프롬프트

---

## 4회차 — 내가 쓸 수 있는 수준까지 다듬다

### 목표

3회차의 앱을 내가 실제로 쓸 수 있는 수준까지 고치고, 다음 단계 로드맵을 만듭니다.

### 진행 (3시간)

```
0:00-0:15  3회차 산출물 공유 + 배우다 만진 것 보기
0:15-0:35  보안과 성능의 기본: "남이 보면 안 되는 것", "느려지면 안 되는 것"
0:35-0:55  AntiGravity 2.0 소개: 보널 에이전트의 개념
0:55-1:30  피드백 받기: 친구/동료 3명에게 써보게 하기
1:30-1:50  애너리틱스 추가: 사용 로그, 에러 추적
1:50-2:10  보안 감사: 공개 데이터, 쿠키, 입력 검증
2:10-2:40  개선 + 배포
2:40-3:00  다음 단계 로드맵 작성 + 데몤데이
```

### 이 세션에서 배우는 IT 기본 지식

**보안과 사용자 보호**
- **XSS** — 사용자 입력을 무시하고 실행하는 곳. 입력값을 검증해야 함
- **CSRF** — 남이 내 계정으로 행동하게 만드는 곳
- **쿠키 보안** — 쿠키에 민감한 정보를 넣지 않기
- **입력 검증** — 사용자가 무엇을 넣었는지 확인하기

**성능과 최적화**
- **로딩 시간** — 페이지가 나타나까지 얼마나 걸리나
- **이미지 최적화** — 이미지를 작게 만들거나 지연 로딩
- **코드 분할** — 한 번에 모두 불러오지 않고 필요한 것만 불러오기

**보널 에이전트의 개념**
- **동시 작업** — 한 번에 여러 개의 파일을 수정
- **오케스트레이션** — AI가 여러 작업을 어떻게 조율하는지
- **AntiGravity 2.0** — Google의 보널 에이전트 플랫폼. 여러 AI가 함께 일하는 것

### 실습 프롬프트

```txt
지난번 만든 [프로젝트 이름]을 내가 실제로 쓸 수 있는 수준까지 고도화해줘.

반드시 아래 기준을 만족해줘.
- 사용자 입력을 검증함 (XSS 방지)
- 로딩 시간이 3초 이내
- 모바일에서도 작동함
- 오류가 있으면 사용자에게 알림
- 다음 단계에 무엇을 해야 할지 로드맵으로 제시
```

### 산출물 기준

- [ ] 내가 실제로 쓸 수 있는 수준
- [ ] 보안 검사 통과 (입력 검증, 쿠키 보안)
- [ ] 성능 최적화 (로딩 3초 이내, 모바일 대응)
- [ ] 다음 단계 로드맵 있음
- [ ] 배우다 만진 것: 보안(XSS, CSRF), 성능, 보널 에이전트, 로드맵

---

## 세션별 배우는 IT 기본 지식 요약

| 세션 | 배우는 핵심 개념 | 억히는 방식 |
|---|---|---|
| 1회차 | URL, 도메인, 호스팅, 배포, HTML/CSS/JS | 만들면서 모르는 단어를 AI에게 물어보기 |
| 2회차 | Git, 커밋, 데이터베이스, JSON, 파일 구조 | 코드가 못 돼서 방향을 털어보기 |
| 3회차 | API, Endpoint, Method, 인증, 프롬프트 | API 연결이 안 돼서 오류 메시지 분석하기 |
| 4회차 | 보안(XSS, CSRF), 성능, 보널 에이전트 | 사용자가 막힌 지점을 보고 어디서 고치면 될지 찾기 |

## 운영자 진행 팁

- 매 세션 시작 10분은 지난 산출물 공유로 엽니다.
- 설명은 최대 15분, 나머지는 전부 제작 시간입니다.
- 참가자가 모르는 게 나오면 그 순간 개념을 5분 설명하고 다시 제작으로 돌아갑니다.
- 결과물이 없는 사람도 실험 로그를 공유하게 합니다.
- 매 세션 끝에 “배우다 만진 것”을 디코드에 공유합니다.

## 위험과 경계

- API Key와 개인정보는 절대 Discord에 붙여넣지 않습니다.
- 법률, 의료, 금융, 계약 판단을 AI가 최종 결정하지 않습니다.
- 사용자 데이터 수집 전 동의와 삭제 방법을 정합니다.
- AI 출력은 초안이며, 사실·숫자·외부 공개 문서는 사람이 검토합니다.
- 결제 기능은 트랙 후반부 별도 검토 전까지 붙이지 않습니다.

## 첫 모임에서 바로 쓸 미니 버전

시간이 2시간뿐이라면 아래만 진행합니다.

1. 아이디어 1문장 쓰기 — 10분
2. Lovable/v0 시작 — 10분
3. AI에게 만들어달라고 하기 — 30분
4. 화면 조정 — 20분
5. 배포 — 15분
6. 1분 공유 — 15분

## Builder Track의 성공 기준

완성된 대형 서비스가 아니라, “내가 원하는 것을 AI와 함께 작게 만들고, 만지면서 모르는 것을 배워서, 고치면서 더 배우고, 결국 내 손으로 쓸 수 있게 만들기”를 참가자가 체득하면 성공입니다.