codingstairs
노트에듀라이프연락
⌕검색⌘K
koen

Navigation

  • Intro
  • Blog
  • Life

연락하기

로그인 없이도 보낼 수 있어요. 답변이 필요하면 이메일을 함께 적어 주세요.

  • 익명 폼으로 의견 남기기 →
  • ✉ warragon112@gmail.com
  • 카카오톡 오픈채팅 ↗

© 2026 codingstairs

  • 노트
  • 에듀
  • 검색
  • 라이프
  • 연락
  • 약관
  • RSS
  • GitHub
에듀›AI 시대의 개발 도구 — Claude Code · MCP · 디자인 도구

AI 시대의 개발 도구 — Claude Code · MCP · 디자인 도구

AI 도구를 더 강하게 다루는 7단계. Claude Code 부터 MCP 서버, 워크플로 자동화, AI 디자인 도구까지.

1단계부터 시작하기 →
난이도
beginner
강의
7

AI 도구를 진짜로 쓰는 법

AI 코딩 도구는 "복붙 챗봇"이 아니에요. 컨텍스트(MCP), 자동화(Skills/Subagents), 다른 IDE 와의 연결을 이해하면 도구가 도구를 부립니다.

이 강좌가 끝나면 가능한 것:

  • Claude Code 의 슬래시 명령·메모리·확장 메커니즘 이해
  • MCP 서버·클라이언트 / Context7 / Figma 연결
  • Skills + Subagents + Hooks 로 워크플로 만들기
  • 다른 AI CLI/IDE 도구와의 차이 비교
  • AI 디자인 도구 (Stitch · v0 · Figma AI) 비교

단계 흐름

[1] 왜 AI 도구 ──▶ [2] Claude Code ──▶ [3] MCP ──▶ [4] Skills + Subagents
                                                         │
                                                         ▼
                     [7] 디자인 도구 ◀── [6] 워크플로 ◀── [5] Context7 / Figma

12 는 시작, 35 는 컨텍스트 확장 (외부 도구·실시간 문서), 6~7 은 자동화·디자인 응용.

전제 — getting-started 강좌 + Claude Code 또는 호환 IDE 설치.

단계별 강의

  1. 1

    1단계 — 왜 지금 AI 도구인가

    →
  2. 2

    2단계 — Claude Code 시작

    →
  3. 3

    3단계 — MCP 의 개념과 클라이언트

    →
  4. 4

    4단계 — Skills · Subagents · Hooks

    →
  5. 5

    5단계 — Context7 · Figma MCP

    →
  6. 6

    6단계 — 워크플로 만들기

    →
  7. 7

    7단계 — AI 디자인 도구 (Stitch · v0 · Figma AI)

    →

다른 강좌

전체 보기 →
  • 처음 시작하는 개발 환경
  • HTML/CSS/JS 부터 React, Next, Tailwind 까지
  • Next.js 16 으로 첫 풀스택 앱 만들기
  • Spring Boot 4 로 시작하는 백엔드
  • Python · FastAPI · 데이터 파이프라인
  • Docker · Caddy · 클라우드 10단계 배포 옵션
  • 중앙 관리자 플랫폼 — 여러 도메인을 한 허브에서
  • 로컬 LLM · pgvector · RAG 챗봇 만들기
  • Tauri 2 — 데스크탑 · 모바일 한 코드베이스
  • 테스트 전략과 품질 게이트
  • 웹 보안의 기초 — JWT · OAuth · OWASP
  • PostgreSQL 깊게 다루기 + Redis · Kafka
  • 공공데이터 크롤러 만들기
  • 모노레포 · SSOT · 계층 분리 사고