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가 만든 결과를 그대로 믿지 않습니다. 테스트, 리뷰, 사용자 확인을 포함합니다.
• 처음부터 큰 서비스를 만들지 않습니다. 한 명의 사용자, 한 가지 문제, 한 가지 핵심 행동부터 시작합니다.

도구 진화 경로

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

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가 하지만 "무엇을 만들고 있는지"는 나도 알아야 함

웹사이트 제작의 흐름

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

실습 프롬프트

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

이걸 바로 만들 수 있는 랜딩+데모 페이지로 만들어줘.
반드시 아래 기준을 만족해줘.
- 첫 화면에서 서비스가 무엇을 하는지 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가 어떻게 연결되는지
• 함수 — 반복되는 작업을 하나의 이름으로 만들기
• 이벤트 — 사용자가 클릭하면 무엇이 일어나는지

실습 프롬프트

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

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

반드시 아래 기준을 만족해줘.
- 입력 후 페이지를 새로 고침해도 입력값이 유지됨
- 저장된 데이터를 목록으로 보여줌
- 삭제 기능이 있음
- 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 입력/출력 — "요약해줘"보다 "이런 입력을 받아서 이런 출력을 내줘"가 더 정확함

실습 프롬프트

지난번 만든 [프로젝트 이름]에 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가 함께 일하는 것

실습 프롬프트

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

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

산출물 기준

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

---

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

운영자 진행 팁

• 매 세션 시작 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와 함께 작게 만들고, 만지면서 모르는 것을 배워서, 고치면서 더 배우고, 결국 내 손으로 쓸 수 있게 만들기”를 참가자가 체득하면 성공입니다.