API 기초와 연결 인터랙티브 학습실

API가 뭔지, API Key가 뭔지, Claude API는 어떻게 작동하는지, MCP와 어떻게 연결되는지.
비개발자도 이해할 수 있는 눈높이에서 API의 모든 것을 배웁니다.

진행률 0%

혹시 이런 상태인가요?

API가 뭔지 정확히 모르겠다
API Key와 API와 MCP의 관계가 헷갈린다
Claude API를 쓰면 뭘 할 수 있는지 모르겠다
토큰, 엔드포인트, JSON 같은 용어가 어렵다
MCP 서버가 API를 어떻게 자동으로 쓰는지 궁금하다

API 개념 — 비유와 예시로 API가 뭔지 명확히 이해

요청 구조 — 엔드포인트, API Key, JSON 요청/응답을 흐름도로 파악

Claude API — Messages API, 모델 선택, 토큰, 도구 사용까지

MCP 연결 — API 위에 MCP가 어떻게 얹히는지 완전 이해

활용 사례 — API로 무엇을 만들 수 있는지 7가지 실전 안내

🔌 API = 프로그램끼리 대화하는 규칙. 메뉴판을 보고 주문하는 것과 같다.
섹션 A

API란 무엇인가

API를 한 번도 안 써본 사람도 이해할 수 있도록, 비유부터 시작합니다.

🍽️ API = 레스토랑의 메뉴판 + 웨이터

레스토랑에 가면: ① 메뉴판을 봅니다 (어떤 것을 주문할 수 있는지) → ② 웨이터에게 주문합니다 (정해진 형식으로 요청) → ③ 주방에서 요리가 나옵니다 (결과를 받음). API도 정확히 이렇게 작동합니다.

📋
메뉴판
API 문서
(뭘 요청할 수 있나)
🧑‍🍳
웨이터
API 자체
(요청을 전달)
🍱
요리
응답 데이터
(결과물)
⚡ API 작동 흐름 — 한 눈에 보기
📱 내 앱
요청 생성
🔑 API Key
인증
🌐 API 서버
처리
📦 응답
JSON
1
내 앱이 요청을 보냄: "서울의 현재 날씨를 알려줘"라는 요청을 정해진 형식(URL + 파라미터)으로 보냅니다.
2
API Key로 인증: "나는 허가받은 사용자야"를 증명합니다. API Key가 없으면 서버가 거부합니다.
3
서버가 처리: 요청을 받아 날씨 데이터를 조회하고 계산합니다.
4
응답을 돌려줌: JSON 형식으로 "서울, 맑음, 22°C" 같은 데이터를 돌려줍니다. 내 앱이 이걸 받아서 화면에 보여줍니다.

일상에서 이미 쓰고 있는 API 예시

상황내부적으로 일어나는 일사용되는 API
카카오맵 길찾기출발지·도착지를 보내면 최적 경로를 받음카카오 경로 API
"카카오로 로그인"카카오가 신원을 확인하고 토큰을 발급카카오 OAuth API
Claude에게 질문메시지를 보내면 AI 응답을 받음Claude Messages API
날씨 앱이 날씨 표시위치 좌표를 보내면 날씨 데이터를 받음기상 데이터 API
결제창에서 카드 결제카드 정보를 보내면 승인/거절을 받음PG사 결제 API
💡 API vs MCP 관계 미리보기: API는 "서비스의 메뉴판과 주문 규격"이고, MCP는 "AI가 이 메뉴판을 자동으로 읽고 주문할 수 있게 해주는 연결 장치"입니다. MCP는 API 위에 얹어지는 레이어입니다. (자세히는 MCP 섹션에서!)
섹션 B

API 요청의 구조 해부

API 요청이 어떤 부품들로 이루어져 있는지, 하나씩 뜯어봅니다.

📍 엔드포인트 (Endpoint) = 목적지 주소

API 서버의 특정 기능에 접근하는 URL입니다. 레스토랑의 "주소"와 같습니다.

# Claude Messages API 엔드포인트 POST https://api.anthropic.com/v1/messages # 구조 분해 https:// → 보안 연결 (HTTPS) api.anthropic.com → Anthropic의 API 서버 도메인 /v1/ → 버전 1 (향후 v2가 나올 수 있음) /messages → "메시지" 기능에 접근

🔑 API Key = 입장권 + 신분증

API를 사용할 권한이 있음을 증명하는 비밀 키입니다. 콘서트 입장권처럼, 이게 없으면 서버가 요청을 거부합니다.

# 요청 헤더에 API Key를 포함시킴 x-api-key: sk-ant-api03-xxxxxxxxxxxx... anthropic-version: 2023-06-01
⚠️ API Key는 비밀번호와 같습니다. 절대 공개하거나 코드에 직접 적지 마세요. 환경 변수(.env 파일)에 저장하세요.

📝 요청 본문 (Request Body) = 주문서

API에게 "무엇을 해달라"는 구체적인 내용입니다. JSON 형식으로 작성합니다.

{ "model": "claude-sonnet-4-6", ← 어떤 AI 모델을 쓸지 "max_tokens": 1024, ← 응답 최대 길이 "system": "당신은 친절한 도우미입니다.", ← AI 역할 지정 "messages": [ {"role": "user", "content": "안녕, Claude!"} ] }
model: 어떤 AI 모델을 쓸지 선택. 레스토랑에서 "코스 요리"를 고르는 것.
max_tokens: 응답의 최대 길이. "접시 크기"를 정하는 것. 1024토큰 ≈ 약 750단어.
system: AI의 역할을 지정하는 지시문. 레스토랑 테마 설정과 같음.
messages: 대화 내용. role이 "user"면 사용자 말, "assistant"면 AI의 말.

📦 응답 (Response) = 결과물

서버가 처리한 결과를 JSON으로 돌려줍니다.

{ "id": "msg_01XFDUDYJgAACzvnptvVoYEL", "type": "message", "role": "assistant", "content": [ {"type": "text", "text": "안녕하세요! 무엇을 도와드릴까요?"} ], "model": "claude-sonnet-4-6", "stop_reason": "end_turn", "usage": { "input_tokens": 12, ← 내가 보낸 토큰 수 (비용 계산) "output_tokens": 15 ← AI가 생성한 토큰 수 (비용 계산) } }

⚡ HTTP 메서드 = 행동의 종류

메서드의미비유Claude API?
GET데이터 가져오기메뉴판 보기
POST데이터 보내고 처리주문하기✅ 사용
PUT데이터 수정주문 변경
DELETE데이터 삭제주문 취소
💡 Claude API는 POST를 사용합니다. "이 메시지를 보내고 답변을 생성해줘."

🔴 HTTP 상태 코드 = 결과 신호등

코드의미대처법
200 OK성공! 정상 응답응답 데이터를 사용하면 됨
400 Bad Request요청 형식이 잘못됨JSON 구조와 파라미터 확인
401 UnauthorizedAPI Key 없거나 잘못됨API Key 확인
429 Too Many Requests요청 너무 많음 (Rate Limit)잠시 기다렸다가 재시도
500 Server Error서버 측 문제잠시 후 재시도, 상태 페이지 확인
섹션 C

Claude API 완전 가이드

Claude API를 사용하기 위해 알아야 할 핵심 사항을 단계별로 배웁니다.

섹션 D

API 핵심 개념 6가지

API를 제대로 이해하기 위해 반드시 알아야 할 개념들입니다.

섹션 E

MCP — API 위에 얹히는 AI 연결 레이어

MCP(Model Context Protocol)가 API와 어떻게 다른지, 그리고 왜 강력한지 이해합니다.

🗼 레이어 구조로 이해하기

🤖 AI (Claude) — 판단하고 실행을 지시
🔗 MCP 서버 — AI와 도구를 연결하는 중간 다리
📡 외부 서비스 API — 실제 작업을 수행 (Gmail, Notion, Figma…)
📦 결과 데이터 — AI가 받아서 사용자에게 전달
API vs MCP — 핵심 차이
📡 API (기존 방식)
  • • 개발자가 직접 코드로 호출
  • • 어떤 API를 언제 쓸지 사람이 결정
  • • 결과를 사람이 보고 판단
  • • 단방향: 요청 → 응답
🔗 MCP (AI 시대 방식)
  • • AI가 자동으로 API를 호출
  • • 어떤 도구를 쓸지 AI가 판단
  • • 결과를 AI가 분석해서 다음 행동 결정
  • • 에이전트: 여러 API를 연쇄 호출

🔄 MCP 작동 흐름 — 실제 예시

예시: "내 Gmail에서 오늘 받은 미팅 초대를 찾아서 구글 캘린더에 추가해줘"

1
사용자 요청: Claude에게 자연어로 요청합니다.
2
Claude 판단: "Gmail MCP 도구와 Google Calendar MCP 도구를 써야겠다"고 스스로 결정합니다.
3
MCP → Gmail API 호출: MCP 서버가 Gmail API에 "오늘 받은 메일 목록 주세요"라고 요청합니다.
4
Claude가 분석: 받은 메일 목록에서 미팅 초대 이메일을 찾아 내용을 파악합니다.
5
MCP → Calendar API 호출: MCP 서버가 Google Calendar API에 일정 추가를 요청합니다.
6
결과 보고: "오늘 3개의 미팅 초대를 찾아 캘린더에 추가했습니다."
💡 사용자는 자연어로 한 번만 요청했지만, 뒤에서 Claude가 여러 API를 자동으로 연쇄 호출했습니다. 이것이 MCP의 힘입니다.

🧰 Claude.ai에서 연결 가능한 MCP 서비스들

📧 Gmail
이메일 읽기/쓰기
📅 Google Calendar
일정 관리
📁 Google Drive
파일 접근
💬 Slack
메시지 발송
📝 Notion
문서 편집
🎨 Figma
디자인 컨텍스트

각 서비스는 자체 API를 가지고 있고, MCP 서버가 그 API를 Claude와 연결해 줍니다.

섹션 F

API로 무엇을 만들 수 있나

Claude API를 활용한 실전 활용 사례 7가지입니다.

섹션 G

5명 박사 패널

각 박사를 클릭하면 그 박사의 관점에서 API를 설명해 줍니다.

섹션 H

API 학습 로드맵

단계별로 체크하면서 API 이해도를 높여가세요.

섹션 I

퀴즈 — API 이해도 확인

12문항으로 API 기초 이해도를 확인합니다.

 
섹션 J

API 용어사전

모르는 용어가 나왔을 때 바로 찾아보세요.

섹션 K

복사용 메모

자주 참고할 내용을 클립보드에 복사해 두세요.

📋 API 핵심 개념 한 줄 정리

API      = 프로그램끼리 대화하는 규칙과 형식 (메뉴판+웨이터)
엔드포인트 = API 기능에 접근하는 URL 주소
API Key  = API 사용 권한을 증명하는 비밀 키 (절대 공개 금지)
JSON     = API 요청/응답에 쓰는 데이터 형식 {키: 값}
토큰     = AI가 텍스트를 처리하는 단위 (한국어 1글자 ≈ 1-2토큰)
MCP      = AI가 API를 자동으로 호출하게 해주는 연결 레이어
HTTP     = 웹에서 데이터를 주고받는 프로토콜
REST API = URL로 자원을 나타내고 HTTP 메서드로 행동을 표현하는 방식

📋 Claude API 요청 기본 구조

엔드포인트: POST https://api.anthropic.com/v1/messages

헤더:
  x-api-key: {API_KEY}
  anthropic-version: 2023-06-01
  content-type: application/json

본문 (JSON):
{
  "model": "claude-sonnet-4-6",
  "max_tokens": 1024,
  "system": "역할/지시 프롬프트",
  "messages": [
    {"role": "user", "content": "사용자 메시지"}
  ]
}

응답에서 꺼낼 것:
  data.content[0].text  → AI 답변 텍스트
  data.usage.input_tokens  → 입력 토큰 수
  data.usage.output_tokens → 출력 토큰 수

📋 모델별 사용 가이드

claude-opus-4-6     → 최고 품질, 복잡한 추론·분석 ($15/$75 per 1M)
claude-sonnet-4-6   → 품질+속도 균형, 대부분의 작업 ($3/$15 per 1M)
claude-haiku-4-5    → 빠르고 저렴, 단순 분류·요약 ($0.80/$4 per 1M)

선택 기준:
- 복잡한 분석/코딩 → Opus
- 일반 대화/글쓰기 → Sonnet  
- 빠른 분류/태깅   → Haiku
- 비용 절약 필요   → Haiku 먼저 시도

📋 API Key 보안 체크리스트

❌ 절대 하지 말 것:
- 코드에 직접 API Key 입력 (const apiKey = "sk-ant-...")
- GitHub에 API Key 포함된 파일 올리기
- 채팅이나 이메일로 API Key 공유
- 프론트엔드 JavaScript에 API Key 노출

✅ 올바른 방법:
- .env 파일에 저장: ANTHROPIC_API_KEY=sk-ant-...
- .gitignore에 .env 추가
- 서버 사이드에서만 API 호출
- 정기적으로 Key 교체 (분기 1회)
- 용도별로 다른 Key 발급

📋 토큰 & 비용 계산 가이드

토큰 기준 (대략):
- 영어 1단어   ≈ 1.3 토큰
- 한국어 1글자 ≈ 1~2 토큰
- 1페이지 문서  ≈ 500~700 토큰

비용 예시 (Sonnet 4.6 기준 $3/$15 per 1M):
- 짧은 Q&A (100/200 토큰) ≈ $0.000030/건
- 문서 요약 (2000/500 토큰) ≈ $0.000135/건
- 하루 1000건 요청 ≈ $0.03~0.14/일

팁:
- system 프롬프트는 매번 입력 토큰에 포함됨
- 긴 대화 맥락은 비용 급증 주의
- Haiku로 먼저 테스트 후 Sonnet/Opus로 전환

📋 API 에러 대응 가이드

401 Unauthorized → API Key 확인 (오타? 만료? 환경변수 로드됐나?)
400 Bad Request  → JSON 구조 확인 (필수 필드 누락? 잘못된 모델명?)
429 Too Many Req → Rate Limit 초과, 잠시 후 재시도 (지수 백오프)
500 Server Error → Anthropic 서버 문제, status.anthropic.com 확인
408 Timeout      → max_tokens 줄이거나 streaming 방식 전환

공통 디버깅 순서:
1. 상태 코드 확인
2. 에러 메시지 본문 읽기
3. API Key, 모델명, JSON 형식 순서로 점검
4. Anthropic 상태 페이지 확인 (status.anthropic.com)