Skip to content

README.md

Latest commit

 

History

History
207 lines (138 loc) · 7.57 KB

README.md

File metadata and controls

207 lines (138 loc) · 7.57 KB
Raw

🤖 AI Coding Tutorial

Gemini · Claude · ChatGPT — AI로 코딩하는 가장 빠른 방법

License: MIT Last Updated Tutorials

세 가지 대표 AI 모델의 코딩 활용법을 실전 중심으로 안내합니다.
환경 설정부터 프롬프트 작성, 프로젝트 개발, 클라우드 배포까지 전 과정을 다룹니다.

3 AI 모델 가이드 7+ 챕터 구성 20+ 실전 예제 전체 무료 공개
Gemini · Claude · ChatGPT 환경 설정 → 배포까지 코드 포함 실습형 교육 목적 오픈소스

📋 목차

AI 모델별 코딩 튜토리얼

💎 Gemini 코딩 튜토리얼

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 실전 배포 가이드

👉 Gemini 튜토리얼 바로가기 →

🧠 Claude 코딩 튜토리얼

Anthropic · claude.html · 🚧 준비 중

Claude Code(CLI), claude.ai, API 활용법을 다루는 실전 가이드입니다. 긴 컨텍스트 윈도우와 강력한 코드 분석 능력을 활용하여 복잡한 프로젝트를 효율적으로 개발하는 방법을 배웁니다.

다루는 도구:

Claude Code · claude.ai · API · MCP · Artifacts

👉 Claude 튜토리얼 바로가기 →

💬 ChatGPT 코딩 튜토리얼

OpenAI · chatgpt.html · 🚧 준비 중

ChatGPT, Codex, GitHub Copilot을 활용한 코딩 가이드입니다. 대화형 코드 생성부터 자동 코드 리뷰, CI/CD 파이프라인 연동까지 OpenAI 생태계를 폭넓게 다룹니다.

다루는 도구:

ChatGPT · Codex · Copilot · API · Canvas

👉 ChatGPT 튜토리얼 바로가기 →

🎯 모든 튜토리얼이 다루는 핵심 주제

각 AI 모델의 특성에 맞춰 아래 주제를 실전 코드와 함께 설명합니다.

주제 내용
⚙️ 환경 설정 윈도우 PC에서 Node.js, Python, Git 등 개발 환경을 설정하는 방법
💻 AI 코딩 도구 CLI, IDE 확장, 웹 인터페이스 등 각 모델의 코딩 도구 활용법
🎨 UI 디자인 AI로 세련된 디자인을 생성하고 프로젝트에 적용하는 전략
🧩 기술 스택 React, TypeScript, FastAPI, SQLite 등 핵심 기술 스택 소개
📝 프롬프트 엔지니어링 원하는 결과를 얻기 위한 효과적인 프롬프트 작성 기법
☁️ 클라우드 배포 Vercel, Cloud Run 등 경제적인 클라우드 배포 옵션과 실전 가이드

📊 AI 모델 한눈에 비교

프로젝트 성격에 맞는 AI 모델을 선택하세요.

항목 💎 Gemini 🧠 Claude 💬 ChatGPT
개발사 Google 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

🤝 기여하기

튜토리얼 개선에 기여를 환영합니다!

  1. 이 리포지토리를 Fork 합니다
  2. 새 브랜치를 생성합니다 (git checkout -b feature/improve-tutorial)
  3. 변경 사항을 커밋합니다 (git commit -m 'Add: Claude 튜토리얼 초안')
  4. 브랜치를 Push 합니다 (git push origin feature/improve-tutorial)
  5. Pull Request 를 생성합니다

기여 가이드

  • 한국어 기반, 코드 주석은 한국어 또는 영어
  • HTML 파일은 단일 파일로 유지 (외부 의존성 최소화)
  • 실전 예제 코드를 포함해주세요
  • 스크린샷 추가 시 assets/ 폴더에 저장

📄 라이선스

이 프로젝트는 MIT License에 따라 배포됩니다.
교육 목적으로 자유롭게 사용·수정·재배포할 수 있습니다.

Made with ❤️ for AI Coding Learners

💎 Gemini · 🧠 Claude · 💬 ChatGPT