Gemini · Claude · ChatGPT — AI로 코딩하는 가장 빠른 방법
세 가지 대표 AI 모델의 코딩 활용법을 실전 중심으로 안내합니다.
환경 설정부터 프롬프트 작성, 프로젝트 개발, 클라우드 배포까지 전 과정을 다룹니다.
| 3 AI 모델 가이드 | 7+ 챕터 구성 | 20+ 실전 예제 | 전체 무료 공개 |
|---|---|---|---|
| Gemini · Claude · ChatGPT | 환경 설정 → 배포까지 | 코드 포함 실습형 | 교육 목적 오픈소스 |
Google ·
gemini.html· 7개 챕터
Gemini CLI, Antigravity IDE, Google AI Studio, Stitch를 활용한 풀스택 개발 가이드입니다. 윈도우 환경에서 무료로 Gemini 2.5 Pro를 사용하여 서비스를 개발하고 클라우드에 배포하는 전 과정을 단계별로 안내합니다.
다루는 도구:
Gemini CLI · Antigravity · AI Studio · Stitch · Cloud Run
챕터 구성:
| 챕터 | 주제 | 내용 |
|---|---|---|
| 01 | 핵심 기술 스택 | 프론트엔드/백엔드 개념, React, TypeScript, FastAPI, SQLite, npm 소개, 윈도우 개발 환경 세팅 |
| 02 | Gemini CLI | 설치, 인증(무료 1,000회/일), 대화형·원라인 사용법, GEMINI.md 컨텍스트 파일 |
| 03 | Antigravity | 에이전트 중심 IDE 설치·설정, Editor/Manager View, Plan/Fast 모드 활용 |
| 04 | AI Studio | 웹 기반 Vibe Coding, 멀티모달 입력(이미지→코드), API Key 발급 |
| 05 | Stitch | AI UI 디자인 생성, 커스터마이징, Figma/코드 내보내기, Antigravity 연동 |
| 06 | 디자인 카피 전략 | 토스·배민·카카오 등 디자인 시스템 분석법, CSS 변수 테마 구축 |
| 07 | 클라우드 배포 | 8개 옵션 비교(무료~프로덕션), Vercel + Cloud Run 실전 배포 가이드 |
Anthropic ·
claude.html· 🚧 준비 중
Claude Code(CLI), claude.ai, API 활용법을 다루는 실전 가이드입니다. 긴 컨텍스트 윈도우와 강력한 코드 분석 능력을 활용하여 복잡한 프로젝트를 효율적으로 개발하는 방법을 배웁니다.
다루는 도구:
Claude Code · claude.ai · API · MCP · Artifacts
OpenAI ·
chatgpt.html· 🚧 준비 중
ChatGPT, Codex, GitHub Copilot을 활용한 코딩 가이드입니다. 대화형 코드 생성부터 자동 코드 리뷰, CI/CD 파이프라인 연동까지 OpenAI 생태계를 폭넓게 다룹니다.
다루는 도구:
ChatGPT · Codex · Copilot · API · Canvas
각 AI 모델의 특성에 맞춰 아래 주제를 실전 코드와 함께 설명합니다.
| 주제 | 내용 | |
|---|---|---|
| ⚙️ | 환경 설정 | 윈도우 PC에서 Node.js, Python, Git 등 개발 환경을 설정하는 방법 |
| 💻 | AI 코딩 도구 | CLI, IDE 확장, 웹 인터페이스 등 각 모델의 코딩 도구 활용법 |
| 🎨 | UI 디자인 | AI로 세련된 디자인을 생성하고 프로젝트에 적용하는 전략 |
| 🧩 | 기술 스택 | React, TypeScript, FastAPI, SQLite 등 핵심 기술 스택 소개 |
| 📝 | 프롬프트 엔지니어링 | 원하는 결과를 얻기 위한 효과적인 프롬프트 작성 기법 |
| ☁️ | 클라우드 배포 | Vercel, Cloud Run 등 경제적인 클라우드 배포 옵션과 실전 가이드 |
프로젝트 성격에 맞는 AI 모델을 선택하세요.
| 항목 | 💎 Gemini | 🧠 Claude | 💬 ChatGPT |
|---|---|---|---|
| 개발사 | Anthropic | OpenAI | |
| 무료 코딩 도구 | Gemini CLI, Antigravity, AI Studio | Claude Code, claude.ai | ChatGPT, Codex |
| 무료 사용량 | 1,000 req/일 (CLI) | 일일 메시지 제한 | 일일 메시지 제한 |
| 컨텍스트 윈도우 | 1M 토큰 | 200K 토큰 | 128K 토큰 |
| 코드 실행 | ✅ 터미널 + 브라우저 | ✅ 터미널 | ✅ 샌드박스 |
| UI 디자인 도구 | ✅ Stitch | — | ✅ Canvas |
| 에이전트 IDE | ✅ Antigravity | — (CLI 기반) | ✅ Codex |
| 강점 | 통합 생태계, 무료 사용량 | 정확성, 긴 맥락 이해 | 범용성, 플러그인 생태계 |
# Node.js LTS 설치 (npm 포함)
winget install OpenJS.NodeJS.LTS
# Python 3.12+ 설치
winget install Python.Python.3.12
# Git 설치
winget install Git.Git
# 설치 확인
node --version # v20.x 이상
python --version # 3.12 이상
git --version# 리포지토리 클론
git clone https://github.com/YOUR_USERNAME/ai-coding-tutorial.git
cd ai-coding-tutorial
# 브라우저에서 열기 (VS Code Live Server 또는 직접 열기)
start index.html또는 GitHub Pages로 배포된 사이트에서 바로 확인:
🌐 https://YOUR_USERNAME.github.io/ai-coding-tutorial/
ai-coding-tutorial/
├── index.html # 메인 페이지 (AI 모델 선택)
├── gemini.html # Gemini 코딩 튜토리얼 (7개 챕터)
├── claude.html # Claude 코딩 튜토리얼 (준비 중)
├── chatgpt.html # ChatGPT 코딩 튜토리얼 (준비 중)
├── README.md # 이 파일
└── LICENSE # MIT License
튜토리얼 개선에 기여를 환영합니다!
- 이 리포지토리를 Fork 합니다
- 새 브랜치를 생성합니다 (
git checkout -b feature/improve-tutorial) - 변경 사항을 커밋합니다 (
git commit -m 'Add: Claude 튜토리얼 초안') - 브랜치를 Push 합니다 (
git push origin feature/improve-tutorial) - Pull Request 를 생성합니다
- 한국어 기반, 코드 주석은 한국어 또는 영어
- HTML 파일은 단일 파일로 유지 (외부 의존성 최소화)
- 실전 예제 코드를 포함해주세요
- 스크린샷 추가 시
assets/폴더에 저장
이 프로젝트는 MIT License에 따라 배포됩니다.
교육 목적으로 자유롭게 사용·수정·재배포할 수 있습니다.