공개 문서
content/courses/index.mdx
아래는 content/courses/index.mdx 와 동일한 원문입니다. Markdown과 HTML 변환 결과를 각각 복사할 수 있습니다.
공개 문서 원문 (Markdown)
---
title: "커리큘럼 목차"
slug: "index"
description: "Skoolchef Tutorial 전체 커리큘럼 목차"
date: "2026-03-13"
draft: false
---
# Skoolchef Tutorial 커리큘럼
Cursor · Claude Code · Gemini CLI · Google Workspace CLI로 배우는 AI 바이브코딩 커리큘럼입니다. 6개 모듈 · 19챕터. **L1(초급)** · **L2(중급·실무)** 표시가 있는 챕터는 난이도 참고용입니다.
## 챕터 목록
00. [AI 코딩 도구 개요](./00-intro) — Cursor, Claude Code, Gemini CLI, Google Workspace CLI — 네 도구의 차이와 조합 방법 · L1
01. [회원 가입](./01-signup) — GitHub, Cursor, Tally, Vercel, Supabase 계정 생성 가이드 · L1
02. [설치](./02-installation) — Cursor IDE, Node.js, pnpm 설치 가이드 · L1
03. [준비 — 서비스 기획서 작성](./03-preparation) — Claude AI를 활용한 랜딩페이지 기획서 작성 방법 · L1
04. [화면 설계서 작성 with AI](./04-wireframe) — Claude / ChatGPT를 활용한 랜딩페이지 화면 설계서 작성 · L1
05. [랜딩페이지 구현](./05-landing-page-spec) — Cursor + Next.js 15로 코어브리핑 랜딩페이지 실제 구현 · L1
06. [Claude Code 설치 및 시작](./06-claude-code-install) — Claude Code CLI 설치, 인증, 첫 실행까지 · L1
07. [CLAUDE.md 설정](./07-claude-md-setup) — 프로젝트 맥락을 AI에게 전달하는 CLAUDE.md 작성법 · L1
08. [멀티파일 워크플로우](./08-multifile-workflow) — Claude Code로 여러 파일을 동시에 작업하는 방법 · L2
09. [Git 연동 워크플로우](./09-git-workflow) — Claude Code와 Git을 함께 사용하는 실전 워크플로우 · L2
10. [Gemini CLI 설치 및 시작](./10-gemini-install) — Google Gemini CLI 설치, 인증, 100만 토큰 컨텍스트 활용법 · L1
11. [Gemini CLI 코드 리뷰](./11-gemini-code-review) — 100만 토큰으로 전체 코드베이스를 한 번에 분석하는 방법 · L2
12. [3도구 통합 워크플로우](./12-integrated-workflow) — Cursor + Claude Code + Gemini CLI를 역할에 맞게 조합하는 실전 패턴 · L2
13. [Google Workspace CLI 설치 및 시작](./13-google-workspace-cli-install) — gws(Google Workspace CLI) 설치, 인증, Drive·Docs·Sheets 첫 실행까지 · L1
14. [Google Workspace CLI 기본 사용법](./14-google-workspace-cli-basics) — Drive·Docs·Sheets·Gmail 명령과 파이프·AI 연동 패턴 · L2
15. [Google Workspace CLI와 3도구 연동](./15-google-workspace-cli-integration) — gws + Cursor·Claude Code·Gemini CLI 조합 — 문서·데이터를 개발 워크플로우에 넣기 · L2
16. [4도구 통합 워크플로우](./16-integrated-workflow) — Cursor + Claude Code + Gemini CLI + Google Workspace CLI를 역할에 맞게 조합하는 실전 패턴 · L2
17. [SaaS 로그인 인증 구축 매뉴얼 (Google · Kakao · Supabase)](./17-login-auth-google-kakao-supabase) — Next.js + Supabase Auth + Google OAuth + Kakao OAuth, 초보자도 그대로 따라 할 수 있는 셋팅 가이드 · L2
18. ["Show me" — 비주얼 결과물 즉시 만들기](./18-show-me-visual-output) — Claude Code에 "Show me"를 붙이면 HTML 카드·차트·계산기를 즉시 생성한다. 주택 담보 대출 계산기를 예제로 배운다. · L2
## 기술 스택 (2026)
| 분류 | 기술 |
|------|------|
| 프레임워크 | Next.js 15 (App Router) |
| 스타일 | Tailwind CSS |
| 폼 | Tally |
| 배포 | Vercel |
| 데이터베이스 | Supabase |
| AI 도구 | Cursor, Claude Code, Gemini CLI, Google Workspace CLI |
공개 문서 변환 코드 (HTML)
<hr>
<h2>title: "커리큘럼 목차"
slug: "index"
description: "Skoolchef Tutorial 전체 커리큘럼 목차"
date: "2026-03-13"
draft: false</h2>
<h1>Skoolchef Tutorial 커리큘럼</h1>
<p>Cursor · Claude Code · Gemini CLI · Google Workspace CLI로 배우는 AI 바이브코딩 커리큘럼입니다. 6개 모듈 · 19챕터. <strong>L1(초급)</strong> · <strong>L2(중급·실무)</strong> 표시가 있는 챕터는 난이도 참고용입니다.</p>
<h2>챕터 목록</h2>
<ol start="0">
<li><a href="./00-intro">AI 코딩 도구 개요</a> — Cursor, Claude Code, Gemini CLI, Google Workspace CLI — 네 도구의 차이와 조합 방법 · L1</li>
<li><a href="./01-signup">회원 가입</a> — GitHub, Cursor, Tally, Vercel, Supabase 계정 생성 가이드 · L1</li>
<li><a href="./02-installation">설치</a> — Cursor IDE, Node.js, pnpm 설치 가이드 · L1</li>
<li><a href="./03-preparation">준비 — 서비스 기획서 작성</a> — Claude AI를 활용한 랜딩페이지 기획서 작성 방법 · L1</li>
<li><a href="./04-wireframe">화면 설계서 작성 with AI</a> — Claude / ChatGPT를 활용한 랜딩페이지 화면 설계서 작성 · L1</li>
<li><a href="./05-landing-page-spec">랜딩페이지 구현</a> — Cursor + Next.js 15로 코어브리핑 랜딩페이지 실제 구현 · L1</li>
<li><a href="./06-claude-code-install">Claude Code 설치 및 시작</a> — Claude Code CLI 설치, 인증, 첫 실행까지 · L1</li>
<li><a href="./07-claude-md-setup">CLAUDE.md 설정</a> — 프로젝트 맥락을 AI에게 전달하는 CLAUDE.md 작성법 · L1</li>
<li><a href="./08-multifile-workflow">멀티파일 워크플로우</a> — Claude Code로 여러 파일을 동시에 작업하는 방법 · L2</li>
<li><a href="./09-git-workflow">Git 연동 워크플로우</a> — Claude Code와 Git을 함께 사용하는 실전 워크플로우 · L2</li>
<li><a href="./10-gemini-install">Gemini CLI 설치 및 시작</a> — Google Gemini CLI 설치, 인증, 100만 토큰 컨텍스트 활용법 · L1</li>
<li><a href="./11-gemini-code-review">Gemini CLI 코드 리뷰</a> — 100만 토큰으로 전체 코드베이스를 한 번에 분석하는 방법 · L2</li>
<li><a href="./12-integrated-workflow">3도구 통합 워크플로우</a> — Cursor + Claude Code + Gemini CLI를 역할에 맞게 조합하는 실전 패턴 · L2</li>
<li><a href="./13-google-workspace-cli-install">Google Workspace CLI 설치 및 시작</a> — gws(Google Workspace CLI) 설치, 인증, Drive·Docs·Sheets 첫 실행까지 · L1</li>
<li><a href="./14-google-workspace-cli-basics">Google Workspace CLI 기본 사용법</a> — Drive·Docs·Sheets·Gmail 명령과 파이프·AI 연동 패턴 · L2</li>
<li><a href="./15-google-workspace-cli-integration">Google Workspace CLI와 3도구 연동</a> — gws + Cursor·Claude Code·Gemini CLI 조합 — 문서·데이터를 개발 워크플로우에 넣기 · L2</li>
<li><a href="./16-integrated-workflow">4도구 통합 워크플로우</a> — Cursor + Claude Code + Gemini CLI + Google Workspace CLI를 역할에 맞게 조합하는 실전 패턴 · L2</li>
<li><a href="./17-login-auth-google-kakao-supabase">SaaS 로그인 인증 구축 매뉴얼 (Google · Kakao · Supabase)</a> — Next.js + Supabase Auth + Google OAuth + Kakao OAuth, 초보자도 그대로 따라 할 수 있는 셋팅 가이드 · L2</li>
<li><a href="./18-show-me-visual-output">"Show me" — 비주얼 결과물 즉시 만들기</a> — Claude Code에 "Show me"를 붙이면 HTML 카드·차트·계산기를 즉시 생성한다. 주택 담보 대출 계산기를 예제로 배운다. · L2</li>
</ol>
<h2>기술 스택 (2026)</h2>
<table>
<thead>
<tr>
<th>분류</th>
<th>기술</th>
</tr>
</thead>
<tbody><tr>
<td>프레임워크</td>
<td>Next.js 15 (App Router)</td>
</tr>
<tr>
<td>스타일</td>
<td>Tailwind CSS</td>
</tr>
<tr>
<td>폼</td>
<td>Tally</td>
</tr>
<tr>
<td>배포</td>
<td>Vercel</td>
</tr>
<tr>
<td>데이터베이스</td>
<td>Supabase</td>
</tr>
<tr>
<td>AI 도구</td>
<td>Cursor, Claude Code, Gemini CLI, Google Workspace CLI</td>
</tr>
</tbody></table>