Claude 생태계 한눈에 보기

Claude가 무엇이고, 어떤 도구와 모드가 있고, 각각 언제 쓰는지 한 페이지에서 살펴봅니다.

왜 오늘 Claude Code를 쓰나요?

바이브코딩 도구는 여러 가지가 있습니다 — OpenAI의 Codex, Google의 Firebase Studio, Cursor, Bolt.new 등. 각각 강점이 다르고, 업데이트 속도도 매섭습니다. "어떤 AI가 제일 좋다"고 딱 정해지는 게 아니라, 용도에 따라 달라집니다.

그중 Claude Code를 선택한 이유는 명확합니다. 코딩 실력이 업계 최상위권이면서, 한국어 이해도가 높고, 무엇보다 터미널에서 직접 파일을 만들고, 서버를 켜고, 배포까지 한 번에할 수 있습니다. 다른 도구들은 코드를 "보여주기만" 하는 경우가 많지만, Claude Code는 실제로 실행합니다.

강사가 다니던 콴다에서는 전 구성원이 Claude를 쓰고, 1인당 월 100~200달러를 투자할 만큼 실무에서 검증된 도구였습니다.

Claude의 생태계 확장 속도도 선택 이유 중 하나입니다. Anthropic은 금융·컨설팅 같은 전문 분야로 활용 범위를 빠르게 넓히고 있고, 새 모델이 나올 때마다 “이 일은 이제 AI가 하겠다”는 이야기가 업계에서 오갈 만큼 파급력이 큽니다. 업데이트 속도, 생태계 확장, 실무 적용 범위 — 세 가지가 함께 겹치는 도구는 지금으로선 손에 꼽힙니다.

꼭 기억해 주세요

ChatGPT를 써도 충분해요.중요한 건 도구보다 ‘익숙해지는 것’이에요

오늘 Claude로 배우는 건 한 플랫폼에서 AI 쓰는 법에 익숙해지기 위해서예요. 웹사이트를 만들고, 고치고, 올리는 한 바퀴를 돌아보고 개념이 손에 익으면, 그다음엔 ChatGPT든 다른 도구든 얼마든지 써도 돼요.

예전에는 Claude가 확실히 앞서 있었어요. 스킬(Skills)이라는 개념을 먼저 만들었고, 외부 도구를 붙이는 MCP 연동도 더 쉽게 열어줬고, 무엇보다 코딩을 압도적으로 잘했거든요. 그런데 지금은 회사마다 성능이 모두 높아져서, 어느 걸 쓰느냐는 점점 개인 취향과 비용의 문제가 됐어요.

Claude로 일할 때

· Claude Code — 코드 짜고 실행·배포까지
· Cowork — 파일·앱을 넘나드는 긴 업무
· 스킬·커넥터·예약 작업

ChatGPT로 일할 때

· Codex — 코드 짜고 고치는 코딩 에이전트 (Windows·Mac 앱)
· ChatGPT Work — 연결한 앱·파일을 넘나들며 문서·표·발표자료까지 만드는 업무 에이전트
· 예약 작업(Scheduled Tasks)·딥 리서치·프로젝트·플러그인(앱 연결)

회사마다 주는 편의 기능이 조금씩 달라서, 입맛에 맞는 쪽을 골라 쓰면 돼요.AI에 충분히 익숙해지면 “이건 이 도구가 편하네” 하고 우리가 알아서 고르게 돼요. 그때부턴 플랫폼에 얽매이지 않아요. 토큰을 더 주는 곳, 싸게 체험할 수 있는 곳, 성능이 좋아진 곳으로 그때그때 옮겨 가면 돼요. 여러 AI 골라 쓰기 — 키만 바꿔서에서 방법을 볼 수 있어요.

기능 이름은 2026년 10월 기준이에요. 두 회사 모두 이름을 자주 바꿔요.

오늘의 여정 — 지금 여기에 있습니다

소개

세팅

디자인

코딩

마무리

코딩 도구의 진화 — 어떻게 여기까지 왔을까?

VS Code

코드 편집기

가장 압도적으로 많이 쓰는 코드 편집기. 코드를 직접 한 줄씩 타이핑하고, 확장 프로그램으로 문법 검사를 받으며 개발했습니다. 프로그래밍 언어를 알아야 하고, 터미널 명령어도 외워야 했어요.

VS Code에서 직접 코드를 작성하는 화면 — 개발자가 직접 한 줄씩 코드를 타이핑하던 시절

GitHub Copilot

AI 보조

VS Code 안에서 AI가 다음에 쓸 코드를 제안해주기 시작했습니다. Tab 한 번이면 자동완성. 하지만 여전히 코드를 읽고 판단하는 건 사람의 몫이었습니다.

Copilot이 코드를 제안하는 화면 — AI가 다음 코드를 제안 — 하지만 여전히 직접 코딩하는 사람이 판단

Cursor

AI IDE

AI가 대신 코딩해주는 혁신적인 IDE가 등장. ChatGPT, Claude 같은 모델을 직접 연결해서 대화하면서 코드를 수정할 수 있게 되었습니다. 하지만 화면의 절반은 여전히 코드 편집기 — 코드를 읽을 일이 없는 기획자에게는 자리만 차지하는 공간이었습니다.

Cursor에서 AI와 대화하며 코딩하는 화면 — 화면 절반이 코드 편집기 — 개발자에게는 유용하지만, 비개발자에게는 불필요한 공간

Cursor + Claude Code

AI가 주도

사람들이 아예 Cursor 안에서 Claude Code를 띄워서 쓰기 시작했습니다. 코드를 "제안"하는 수준을 넘어서, AI가 파일 생성 → 코드 작성 → 서버 실행까지 직접 실행합니다. 하지만 여전히 화면에는 코드가 가득 — 비개발자에게는 부담스러운 화면입니다.

Cursor에서 Claude Code를 띄워 사용하는 화면 — Claude Code가 직접 작업하지만, 화면은 여전히 코드로 가득

터미널 + 브라우저 미리보기

더 강력한 다음 단계

터미널에서 Claude Code를 실행하고, 브라우저에서 내 작품을 미리보면서 작업합니다. 개발자들이 쓰는 가장 강력한 방식이에요. 오늘 수업은 아래 Desktop 앱으로 진행하고, 익숙해지면 이 경로로 넘어올 수 있습니다.

터미널에서 Claude Code를 실행하고 브라우저에서 미리보기하는 화면 — 왼쪽: 터미널(Claude Code) / 오른쪽: 브라우저 미리보기 — 개발자에게는 익숙한 방식

Claude Desktop — Code 탭

오늘 쓰는 것가장 쉬운 형태

이 안에서 다 됩니다. 대화창 + 미리보기만으로 한국어로 말하면 AI가 파일 생성 → 코드 작성 → 서버 실행 → 배포까지 처리해요. 오늘 수업의 웹사이트 제작과 MCP(Connectors — 구글 드라이브 연결) 체험을 모두 이 앱에서 합니다.

Claude Desktop Code 탭에서 대화와 미리보기만으로 작업하는 화면 — 왼쪽: 대화로 지시 / 오른쪽: 실시간 미리보기 — 코드를 볼 필요가 없습니다

바이브코딩(Vibe Coding)이란?

2025년 초에 등장한 새로운 프로그래밍 방식입니다. 코드를 한 줄도 직접 타이핑하지 않고, AI에게 자연어(한국어, 영어 등)로 원하는 것을 설명하면 AI가 코드를 대신 작성해줍니다.

기존 코딩

<div className="header">
<h1>Hello</h1>
</div>

개발 언어를 배우고, 문법을 외우고, 직접 타이핑

바이브코딩

"파란색 헤더에 회사 로고랑 메뉴를 넣어줘"

한국어로 설명하면 AI가 코드를 작성

터미널 명령어도 AI가 대신합니다

영화에서 해커가 쓰는 검은 화면에 초록 글씨 — 그게 터미널입니다. 터미널은 컴퓨터에게 글자로 명령을 내리는 창이에요. 원래는 npm run dev 같은 명령어를 외워야 했지만, 바이브코딩에서는 "서버 켜줘"라고 한국어로 말하면 됩니다.

Claude Desktop의 Code 탭이 IDE와 터미널을 하나로 합쳤습니다. 한국어로 말하면 AI가 코드를 쓰고, 명령어를 실행하고, 에러도 알아서 고칩니다. 가끔 보안 인증 같은 작업만 Code 탭 안의 내장 터미널에서 직접 하면 됩니다.

코딩을 몰라도 되나요?

네. 바이브코딩에서는 "무엇을 만들고 싶은지"를 말로 설명하는 게 핵심이에요. HTML, CSS, JavaScript 같은 코드는 AI가 작성합니다. 여러분이 잘하는 것 — 기획력, 콘텐츠 감각, 사용자 이해 — 이 바이브코딩에서 가장 중요한 역량입니다.

claude.ai (웹)

Desktop (앱)

Code CLI (터미널)

Chat

친구한테 물어보듯이

웹앱

Claude

오늘

주간 보고 초안 작성

SQL 쿼리 디버깅 도움

타입스크립트 제네릭 질문

Next.js 라우팅 문제

CSS 레이아웃 정렬

Alycia

주간 보고 초안 작성

이번 주 마케팅팀 주간 보고 초안 써줘. 핵심 성과 3개랑 다음 주 계획 포함해서.

마케팅팀 주간 보고 (5/12 ~ 5/16)

이번 주 핵심 성과를 정리했습니다.

핵심 성과

여름 캠페인 랜딩 페이지 A/B 테스트 완료 — CTR 12.3% 달성 (목표 대비 +2.3%p)

인스타그램 릴스 시리즈 3편 발행 → 도달 32만, 참여율 4.8%

B2B 리드 발굴: 웨비나 신청 147건 (전주 대비 +38%)

다음 주 계획

1. 여름 캠페인 본격 집행 (Meta/Google 동시)

2. 블로그 SEO 콘텐츠 2편 발행

3. 웨비나 참석자 후속 이메일 시퀀스 세팅

좋아! 여기에 지출 현황 표도 추가해줘.

Message Claude...

Claude는 실수를 할 수 있습니다. 중요한 정보는 반드시 확인하세요.

가벼운 질문, 번역, 아이디어 브레인스토밍. 간단한 질문-답변에 최적화된 모드입니다.

예시

"우리 팀이 다음 주에 신규 프로젝트 킥오프 미팅을 하는데, 영어로 초대 이메일 작성해줘. 참석자는 디자인팀, 개발팀이고 시간은 월요일 오후 2시야."

Chat 탭에서 이메일 번역을 요청한 화면 — Chat 탭 — 텍스트 대화만 오갑니다

Artifact란?

Chat에서 Claude가 만들어주는 결과물 패널

Claude가 말로 설명하는 대신, 직접 만들어서 보여주는 것입니다. 채팅 오른쪽에 별도 패널이 열리면서 문서, 차트, 미니 앱 등을 바로 보여줍니다. 영어로 "만들어진 결과물"이라는 뜻이에요.

예시 1 — "회의록 정리해줘" → 문서

Claude

새 대화

이번 주 회의 내용을 보고서로 정리해줘

회의록을 정리했습니다.

오른쪽 패널에서 확인해보세요.

메시지 입력...

회의록_0527.mdArtifact

마케팅팀 주간 회의록

2025년 5월 27일 (화) 14:00 – 15:00장소: 2층 회의실 A

김민준 (팀장)이수현박지훈최유나강다은

TL;DR — 핵심 요약

•여름 캠페인 확정, 6월 9일 론칭 목표
•SNS 콘텐츠 제작 일정 2주 앞당기기로 합의
•B2B 파트너십 제안서 초안 다음 주 금요일까지 제출

1. 여름 캠페인 진행 현황

—랜딩 페이지 디자인 시안 3종 검토 완료. 안 B로 최종 확정.
—Meta Ads 예산 300만 원, Google Ads 200만 원 배분 확정.
—카피라이팅은 이수현 담당, 5/30(금)까지 초안 완성.

2. SNS 콘텐츠 전략

—인스타그램 릴스 4편 + 카드뉴스 6편 제작 예정.
—외부 크리에이터 2인 협업 검토 중 (강다은 연락 담당).

Action Items

캠페인 랜딩 페이지 카피 초안이수현5/30

Meta/Google Ads 세팅 완료박지훈6/3

B2B 파트너십 제안서 초안최유나6/6

크리에이터 협업 견적 수령강다은5/29

v1 · 방금 생성됨게시됨

예시 2 — "매출 데이터 정리해줘" → 차트

Claude

매출 분석 요청

이번 분기 매출 데이터를 차트로 정리해줘

매출 분석 대시보드를 만들었습니다.

2025년 분기별 매출 추이와 성장률을 시각화했어요. Q4가 가장 높은 실적을 기록했습니다.

Message Claude...

매출_분석.htmlArtifact

2025 분기별 매출 분석

단위: 백만 원

연간 누적 매출 656M · 전년 대비 +18.4%

200M150M100M50M0

124M

158M

171M

203M

Q1Q2Q3Q4

전분기 대비 +18.7% 성장

최고 분기

Q4 · 203M

성장률 추이

예시 3 — "프로젝트 관리 보드 만들어줘" → 미니앱

Claude

프로젝트 관리 보드

팀 프로젝트 관리 보드를 만들어줘

프로젝트 관리 보드를 만들었습니다. 드래그로 상태를 변경할 수 있어요.

포함된 기능

• 3단계 칸반 컬럼 (할 일 / 진행 중 / 완료)
• 우선순위 태그 (높음 / 중간 / 낮음)
• 담당자 아바타 표시

수정 사항을 입력하세요...

프로젝트_보드.htmlArtifact

팀 프로젝트 보드

할 일2

랜딩 페이지 디자인

높음

서

서연

API 문서 작성

중간

도

도윤

진행 중2

사용자 인증 구현

높음

지

지호

DB 스키마 설계

중간

서

서연

완료1

프로젝트 기획서

낮음

도

도윤

Chat 실습

실습 1 — 마크다운 Artifact 만들기

대화로 문서 Artifact를 만들고, 이어서 수정해봅니다.

1. 먼저 이걸 보내보세요.

복사해서 Chat에 붙여넣기

작은 전시 오프닝 초대 문구를 작성해줘. 주제는 '일상의 사물' 사진전이고, 장소는 성수동 작은 갤러리, 오프닝은 금요일 저녁 7시야. 편안하게 와서 차 한잔 하는 분위기라는 걸 담아줘. 마크다운으로 깔끔하게 정리해줘.

→ 오른쪽에 마크다운 문서 Artifact가 열립니다.

2. 결과를 보고, 이어서 수정해보세요.

이어서 보내기

관람 안내 섹션도 하나 추가해줘. 관람 시간과 찾아오는 길을 간단히 넣어줘.

→ 전체를 다시 쓰지 않고, 기존 Artifact에 내용이 추가됩니다.

실습 2 — 차트 Artifact 만들기

이번에는 데이터를 넣어서 차트 Artifact를 만들어봅니다.

복사해서 Chat에 붙여넣기

이 데이터를 보기 좋은 차트로 만들어줘. 주차, 방문자수, 문의수, 전환율 1주차, 1200, 48, 4.0% 2주차, 1850, 92, 5.0% 3주차, 3200, 224, 7.0% 4주차, 2100, 105, 5.0% 5주차, 4500, 360, 8.0% 6주차, 3800, 266, 7.0%

→ 이번에는 차트 Artifact가 열립니다. 같은 Chat인데 결과물 형태가 다르죠!

Cowork

비서에게 업무 맡기기

앱에서만

매출_Q1.xlsx 분석

매출_Q1.xlsx

Microsoft Excel · 2,847행 · 12열 · 1.4 MB

분석 완료

매출_Q1.xlsx를 분석했어요. 총 4개월 데이터에서 핵심 지표를 정리했습니다.

Q1 매출 분석 리포트· 자동 생성됨

Q1 총 매출

1.999억

+18.3%

월 평균

4,998만

+12.1%

최고 달성월

3월

5,940만

월별 매출 (만원)

4,280만

1월

3,650만

2월

5,940만

3월

5,120만

4월

3월 매출 5,940만원으로 Q1 최고치 달성 — 전월 대비 62.7% 급등

2월 저점(3,650만원) 분석 결과, 신학기 이전 교육비 지출 감소 패턴

Q1 누적 매출 합계 19,990만원 — 전분기 대비 +18.3% 성장

이 분석에 대해 더 질문해보세요...

문서 작성, 리서치, 데이터 분석, 외부 서비스 연동. Notion/Slack/Gmail 등을 연결하고, 차트와 문서를 앱 안에서 바로 만들어줍니다.

예시

"이 초대장 HTML 템플릿을 줄게. 이름과 QR코드만 바꿔서 10명분 대량 생성하고, A4 PDF 1페이지에 3장씩 정렬해줘."

Cowork 탭에서 초대장 대량 생성을 요청하고 진행 중인 화면 — 템플릿과 이름 리스트를 주면 Cowork이 알아서 작업을 진행합니다

Cowork 탭에서 초대장 10장이 완성된 결과 화면 — 완성! 10장의 초대장이 PDF로 생성되어 클릭 한 번에 열 수 있습니다

나에게 맞게 설정하기 — /setup-cowork

Cowork에서 /setup-cowork라고 치면, Claude가 내 일을 물어보고 맞는 도구 묶음을 깔아줍니다. Cowork는 세 조각으로 움직여요 — 스킬(/이름으로 부르는 반복 작업), 플러그인(직무별 스킬 묶음), 커넥터(Gmail·드라이브·캘린더 같은 실제 도구 연결).

/setup-cowork 실행 — 직무를 묻고 맞는 플러그인을 찾아주는 화면 — '무슨 일 하세요?' → 직무를 말하면 맞는 플러그인을 찾아 설치를 제안합니다

채팅 입력창에 채팅/협업 전환과 Cowork 추천 작업이 보이는 화면 — 입력창에서 '채팅 ↔ 협업'으로 전환 — 매일 브리핑·편지함 정리 같은 걸 바로 시킬 수 있어요

온보딩 마지막 — 내 일에 맞는 커넥터를 찾아 연결을 제안하는 화면 — 마지막엔 내 일에 맞는 커넥터까지 찾아서 연결을 제안해줍니다

Cowork에서 할 수 있는 것들

대화 속 차트

막대 그래프, 다이어그램, 테이블이 답변 안에 바로 그려집니다.

예약 작업

매일/매주 자동으로 반복 작업을 실행합니다.

브라우저 자동화

Chrome을 Claude가 직접 조작하여 정보를 수집합니다.

문서 생성

PPT, Excel, Word 파일을 만들면 바로 열 수 있습니다.

Cowork 실습

복사해서 Cowork에 붙여넣기

다음 내용으로 전시 운영 안내서를 엑셀이랑 PDF 둘 다 만들어줘. 전시명: 일상의 사물 — 사진전 기간: 9/1~10/31 (8주) 대상: 일반 관람객 운영: 화~일 11:00~19:00 (월 휴관) 장소: 성수동 작은 갤러리 관람료: 무료 엑셀에는 주간 운영·근무 일정표, PDF에는 관람객에게 나눠줄 안내문으로 만들어줘.

→ 완성된 파일을 클릭 한 번으로 바로 열 수 있습니다.

Code

오늘의 핵심 — 바이브 코딩

앱터미널오늘 사용

claude

랜딩 페이지 만들어줘

⠿프로젝트 구조 분석 중...

Readpackage.json

2 "name": "my-app",

3 "dependencies": {

4 "next": "14.2.3"

5 }

Writesrc/app/page.tsx

1 import React from "react";

2+import { Hero, Features } from "@/components";

3+export default function LandingPage() {

4+ return (

5+ <main>

6+ <Hero title="랜딩 페이지" />

7+ <Features />

8+ </main>

9+ ); }

3 files created— page.tsx, Hero.tsx, Features.tsx

claude-sonnet-5

|12.4k tokens

escinterrupt|$0.043

파일 생성, 코드 작성, 터미널 실행, 미리보기, Git 관리. 바이브 코딩은 이 모드에서 합니다.

예시

"내 자기소개 웹페이지 만들어줘. 이름은 김민수, 직업은 대학생, 취미는 게임이랑 카페 탐방. 깔끔하고 예쁘게 만들어줘."

Code 탭에서 웹페이지를 생성하고 미리보기가 표시된 화면 — Code 탭 — 파일을 만들고 바로 미리보기까지

어디서 뭘 해야 할지 모르겠다면?

Chat, Cowork, Code 중 뭘 써야 할지 헷갈릴 때 — Chat에 가서 그냥 상황을 설명하세요.

"이벤트 페이지를 만들고 싶은데, Chat에서 하면 되나요 Code에서 하면 되나요? 파일로 만들어서 배포해야 하거든요."

Claude가 상황에 맞는 탭을 추천해줍니다. 모든 탭이 같은 Claude니까, 어디서든 물어보면 알맞은 방법을 알려줘요.

Connectors

업무 도구를 AI에 연결

웹앱

연결된 도구

Claude가 접근할 수 있는 외부 서비스입니다

3/5

Google DriveActive

파일, 문서, 스프레드시트에 접근합니다

연결됨1,284개 항목2분 전

SlackActive

채널, 메시지, 파일에 접근합니다

연결됨47개 항목11분 전

NotionActive

페이지, 데이터베이스, 노트에 접근합니다

연결됨312개 항목34분 전

Gmail

이메일 스레드와 첨부파일에 접근합니다

이메일 읽기 및 검색

Google Calendar

일정, 미팅, 이벤트에 접근합니다

일정 조회 및 검색

도구를 연결하면 Claude가 더 정확한 답변을 제공합니다

마케팅팀 주간 현황

노션에서 마케팅팀 이번 주 할 일 목록 가져와서 정리해줘

Notion에서 "마케팅팀 Sprint Board" 검색 중...

마케팅팀 Sprint Board에서 이번 주 할 일을 가져왔어요. 총 4개 태스크 중 1개 완료, 2개 진행중, 1개 지연 상태입니다.

마케팅팀 Sprint Board

캠페인 랜딩 페이지 배포

지영5/16

인스타그램 릴스 시리즈 제작

민수5/18

B2B 웨비나 후속 이메일 세팅

현아5/19

SEO 블로그 콘텐츠 2편 작성

준호5/17 (지연)

준호님의 SEO 블로그 태스크가 1일 지연되고 있어요. 리마인더를 보낼까요?

Message Claude...

노션, 드라이브, 슬랙을 AI에 연결합니다. 클릭 한 번으로 읽고 쓰기. 연결해두면 Chat/Cowork/Code 어디서든 그 데이터를 활용할 수 있습니다.

어떤 모드를 쓸까?

Chat

결과물이

텍스트 답변

Cowork

결과물이

문서 / 보고서 / 파일

Code

결과물이

웹사이트 / 앱

하고 싶은 일	쓸 도구
질문, 글 작성, 번역	Chat (웹 / 앱)
웹사이트/앱 만들기	Code (앱 / 터미널)
엑셀 분석, PDF 요약	Cowork (앱)
노션/슬랙 데이터 연결	Connectors (웹 / 앱)
AI 기능 넣은 프로토타입	Code + AI 연결 (앱 / 터미널)

Chat = 대화, Cowork = 파일 작업, Code = 코딩. 결과물에 따라 선택!

이 페이지에서 배운 것

Claude 제품군(Chat/Code/Cowork/Connectors), 주요 기능(Artifact), 모드 선택법.

다음에 할 것

AI 도구를 사용하기 위한 환경(터미널)을 세팅합니다.

사례 소개

기초 개념