학습 경로 가이드

학습 경로 개요

Vibe Coding은 단순히 도구를 배우는 것이 아니라, AI와 협업하는 새로운 사고방식을 익히는 과정입니다. 이 가이드는 여러분이 효과적으로 학습할 수 있도록 검증된 경로를 제시합니다.

시간 투자 가이드

초급 (2-3주) ⭐

2025년 AI 코딩 도구 선택 가이드

2025년 현재 AI 코딩 도구는 크게 3가지 유형으로 나뉩니다. 자신에게 맞는 도구를 선택하는 것이 학습의 첫 단계입니다.

Week 1: 개념 이해 및 첫 프로젝트

Day 1-2: 기초 학습 (3-4시간) - 필수

1. Vibe Coding이란? 완독 (30분)
2. AI CLI 도구 생태계 읽고 도구 선택 (30분)
3. Claude CLI 시작 또는 Ollama 시작 (1시간)
4. 첫 번째 프로젝트: Hello World (1시간)

Day 3-4: 프롬프트 기본 (2-3시간) - 필수

1. 프롬프트 기본 학습 (1시간)
2. 두 번째 프로젝트: 계산기 앱 (2시간)

Day 5-7: TODO 앱 완성 (3-4시간) - 필수

1. 세 번째 프로젝트: TODO 앱 (3시간)
2. 코드 리뷰 및 이해 (1시간)

// HTML 요소를 JavaScript 변수에 연결
// document.querySelector() = HTML에서 특정 요소를 찾아 연결
const form = document.querySelector("#todo-form");  // 할 일 입력 폼
const input = document.querySelector("#todo-input");    // 텍스트 입력 상자
const list = document.querySelector("#todo-list");      // 할 일 목록 (ul/ol)

// 폼 제출 이벤트 리스너 - 사용자가 Enter 키를 누르면 실행
// addEventListener = "이벤트가 발생하면 이 함수를 실행해라"
form.addEventListener("submit", (e) => {
  e.preventDefault();  // 기본 동작(페이지 새로고침) 차단
  
  // 입력값 가져오기 - trim()으로 앞뒤 공백 제거
  const text = input.value.trim();
  if (!text) return;  // 빈 글자면 실행 중단
  
  // 새 HTML 요소(li) 생성하여 목록에 추가
  const li = document.createElement("li");  // 새로운 리스트 아이템
  li.textContent = text;  // 사용자가 입력한 텍스트 설정
  list.appendChild(li);  // 목록의 맨 뒤에 추가
  input.value = "";  // 입력창 비우기 (다음 입력을 위해)
});

초급 체크리스트

초급 추천 자료

• Vibe Coding이란?
• Claude CLI 5분 시작
• Ollama 로컬 시작
• 프롬프트 기본
• Claude CLI 가이드
• 프론트엔드 Vibe Coding

중급 (4-6주) ⭐⭐

Week 3-4: 도구 다양화 및 프롬프트 역량 강화

Day 1-3: 다른 CLI 도구 배우기 (4-5시간) - 필수

1. CLI 도구 비교 읽고 2번째 도구 선택 (1시간)
2. Ollama 설치 및 로컬 LLM 실행 (1시간)
3. Aider 또는 Continue.dev 학습 (2시간)

Day 4-7: API 연동 프로젝트 (6-8시간)

1. 날씨 앱 (OpenWeather API 연동)
2. 영화 검색 앱 (TMDB API 연동)
3. GitHub 프로필 뷰어 (GitHub API 연동)

Week 5-6: 복잡한 프로젝트 및 프롬프트 최적화

Day 1-3: React/Vue 프로젝트 (5-6시간)

1. React TODO 앱 (상태 관리 with useState/useEffect)
2. Vue.js 블로그 (컴포넌트 구조)

Day 4-7: 백엔드 프로젝트 (6-8시간)

1. Express.js REST API (CRUD 기능)
2. 데이터베이스 연동 (MongoDB 또는 PostgreSQL)
3. 인증 시스템 (JWT)

// Express.js - Node.js 웹 프레임워크 (서버를 만드는 도구)
import express from "express";

// 서버 애플리케이션 생성
const app = express();

// JSON 요청 본문을 처리하는 미들웨어
// app.use() = 요청이 올 때마다 실행되는 중간 처리 단계
app.use(express.json());

// POST /posts 라우트 - 새 게시글을 생성하는 API 엔드포인트
// req = 클라이언트의 요청, res = 서버의 응답
app.post("/posts", async (req, res) => {
  // req.body에서 데이터 추출 (구조 분해 할당)
  const { title, body } = req.body;
  
  // 유효성 검사 - 제목이나 본문이 비어있으면 400 에러
  if (!title || !body) return res.status(400).json({ error: "invalid payload" });
  
  // DB 저장 로직 자리 - 실제 앱에서는 데이터베이스에 저장
  res.status(201).json({ id: 1, title });
});

중급 체크리스트

중급 추천 자료

• CLI 도구 비교
• Ollama란?
• Ollama 연동
• 코딩용 프롬프트
• 프롬프트 최적화
• API 키 관리
• REST API 구축
• React 프롬프트
• 프론트엔드 Vibe Coding
• 백엔드 Vibe Coding

고급 (6주+) ⭐⭐⭐

고급 주제

실전 배포 및 운영

1. MCP (Model Context Protocol) 통합

• MCP 개념 이해
• MCP 서버 개발 (Python/TypeScript)
• MCP 실전 예제 (파일 시스템, DB, API)
• 커스텀 MCP 서버로 외부 도구 통합

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { z } from "zod";

const server = new McpServer({ name: "team-tools", version: "1.0.0" });

server.registerTool("create_jira_issue", {
  title: "Create Jira Issue",
  inputSchema: { summary: z.string() }
}, async ({ summary }) => ({
  content: [{ type: "text", text: `created: ${summary}` }]
}));

2. 다중 LLM 전환 전략

• LLM 생태계 개요
• 다중 LLM 전환
• LiteLLM, Portkey 사용
• 비용 최적화: 간단한 작업 → Haiku, 복잡한 작업 → Opus

3. CI/CD 및 자동화

• CI/CD와 LLM 통합
• CI/CD 파이프라인 구축
• AI 기반 테스트
• GitHub Actions으로 자동 코드 리뷰
• 문서 자동 생성

4. 보안 & 비용 관리

• 보안 모범 사례
• 비용 최적화
• 비용 모니터링

5. 팀 협업

• 팀 프롬프트 라이브러리
• AI 코드 리뷰

6. 커스텀 도구 개발

• 회사/팀 전용 CLI 도구 개발
• 프로젝트 템플릿 자동 생성
• 코드 스타일 가이드 자동 적용

고급 프로젝트 예시

고급 체크리스트

고급 추천 자료

• MCP (Model Context Protocol)
• 다중 LLM 전환
• CI/CD & LLM
• CI/CD 파이프라인 구축
• AI 기반 테스트
• 보안 모범 사례
• 비용 최적화
• 팀 프롬프트 라이브러리
• AI 코드 리뷰
• Vibe Coding 디자인 패턴
• 비용 모니터링
• Ollama 고급 활용

효과적인 학습 방법론

학습 팁 10가지

1. 프로젝트 기반 학습: 이론만 보지 말고 실제 프로젝트를 만들어보세요
2. 점진적 난이도: 쉬운 것부터 시작해서 점점 어려운 것으로
3. 코드 이해: AI가 생성한 코드를 반드시 읽고 이해하세요
4. 변형 실습: 같은 프로젝트를 다른 방식으로 다시 만들어보세요
5. 에러 경험: 의도적으로 에러를 만들고 AI와 함께 디버깅하세요
6. 커뮤니티 활용: Discord, Reddit에서 질문하고 답변하세요
7. 블로그 작성: 배운 내용을 블로그에 정리하세요
8. 오픈소스 기여: GitHub에서 작은 버그 수정부터 시작하세요
9. 페어 프로그래밍: 다른 사람과 함께 AI를 활용해보세요
10. 주기적 복습: 1주일마다 지난 프로젝트를 다시 보세요

AI 소통법: 프롬프트 마스터하기

Vibe Coding에서 실력의 차이는 프롬프트 품질에서 나타납니다. 같은 기능이라도 프롬프트에 따라 결과물의 품질이 크게 달라집니다.

피해야 할 실수

동기 유지 전략

• 작은 승리 축하: 작은 기능 하나 완성해도 축하하세요
• 진행 상황 기록: 매일 무엇을 배웠는지 기록하세요
• 목표 시각화: 만들고 싶은 앱의 목록을 적어두세요
• 학습 동료: 함께 배우는 친구를 찾으세요
• 휴식 중요: 막히면 잠시 쉬고 돌아오세요

다음 단계

학습 경로를 이해했다면, 이제 실제로 시작할 차례입니다!

역량 성장 맵

Vibe Coding 학습은 단순히 도구를 익히는 것이 아니라, AI와 협업하여 서비스를 만드는 역량을 키워가는 과정입니다. 각 단계에서 달성해야 할 구체적인 목표를 확인하세요.

핵심 정리

지금 바로 시작하세요

학습 경로를 읽었다면, 이제 실제로 시작할 차례입니다. 완벽한 준비는 없습니다. 지금 바로 첫 번째 프로젝트를 만들어보세요!

• 🚀 Claude CLI로 시작하기 - 터미널에서 AI와 대화
• 🎨 Vibe Coding이란? - 개념부터 이해하기
• 🔧 CLI 도구 비교 - 내게 맞는 도구 찾기
• 🤖 Codex 가이드 - 코딩 에이전트 워크플로우