Claude 활용 가이드 - Chapter 1: Claude

프론트엔드 개발을 하다 보면 AI 코딩 어시스턴트 없이는 못 살게 된다. ChatGPT를 쓰다가 최근 Claude로 갈아탔는데, 특히 코드 작업에서 체감 차이가 꽤 컸다.

Claude가 뭔가?

Anthropic이라는 회사에서 만든 AI 어시스턴트다. OpenAI에서 나온 사람들이 만들어서 ChatGPT랑 비슷하지만, 결정적인 차이가 있다.

현재 사용 가능한 모델은

• Claude Sonnet 4.5: 가장 똑똑하고 일상적으로 쓰기 좋은 모델 (이게 메인)
• Claude Opus 4.1/4: 더 무거운 작업용
• Claude Sonnet 4: 이전 버전

웹/모바일/데스크톱 앱에서 쓸 수 있고, API와 CLI 도구인 Claude Code도 제공한다.

얼마나 내야 하나?

무료 플랜

기본적으로 무료로 쓸 수 있다. 근데 메시지 제한이 빡세다. 복잡한 코드 몇 번만 물어봐도 제한에 걸린다.

Pro 플랜 ($20/월)

• Sonnet 4.5 무제한은 아니지만 훨씬 여유롭게 사용 가능
• Opus 4.1/4 접근 (더 복잡한 작업용)
• 우선 접근 및 빠른 응답
• Claude Code 사용 가능 (이게 핵심)

실무에서 쓰려면 Pro는 거의 필수다. 하루에 몇 번만 막혀도 답답하다.

API 사용

API로 쓰면 토큰당 과금이다:

• Claude Sonnet 4.5: 입력 $3/M토큰, 출력 $15/M토큰
• 100만 토큰이면 대략 책 한 권 분량

개인 프로젝트에선 월 사용료가 부담스러울 수 있다. 하지만 Pro 플랜으로 Claude Code 쓰는 게 훨씬 편하다.

ChatGPT/Gemini랑 뭐가 다른가?

3개 다 써봤는데, 각각 장단점이 있다.

코드 품질과 맥락 이해

ChatGPT는 빠르고 범용적이다. 간단한 질문에는 좋은데, 코드가 길어지면 맥락을 자꾸 놓친다. 특히 여러 파일에 걸친 작업을 시키면 일관성이 떨어진다.

Gemini는 구글 서비스와 통합이 좋다. 근데 코드 생성 품질이 들쑥날쑥하다. 가끔 이상한 구조를 제안한다.

Claude는 긴 맥락을 유지하는 능력이 탁월하다. 200K 토큰까지 기억한다는데, 실제로 체감된다. FSD 아키텍처 규칙 같은 복잡한 컨벤션을 한 번 설명하면 계속 지켜준다.

 

// ChatGPT는 이렇게 any를 넣는 경우가 많았다
const handleData = (data: any) => { ... }

// Claude는 프롬프트에 "any 금지"라고 하면 진짜 안 쓴다
const handleData = (data: RobotData) => { ... }

Artifacts (코드 미리보기)

Claude의 킬러 피처다. 코드를 작성하면 Artifacts라는 별도 패널에 실행 가능한 형태로 보여준다.

React 컴포넌트를 만들면 바로 렌더링해서 보여준다. HTML/CSS도 실시간으로 확인 가능하다. 디버깅 사이클이 엄청 빨라진다.

// Claude한테 "Three.js로 회전하는 큐브 만들어줘" 하면
// 바로 Artifacts에서 실행되는 걸 볼 수 있다
import * as THREE from 'three';

function RotatingCube() {
  // ... Three.js 코드
  // 실제로 돌아가는 큐브를 바로 확인
}

ChatGPT는 코드만 던져준다. 직접 복사해서 로컬에서 돌려봐야 한다.

프로젝트 파일 인식

이게 제일 큰 차이다. Claude는 프로젝트의 여러 파일을 동시에 이해한다.

src/
  entities/robot/
    model/types.ts
    api/robotApi.ts
  features/robot-control/
    ui/RobotController.tsx

ChatGPT한테 "RobotController 수정해줘"라고 하면 그 파일만 본다. 근데 Claude한테 프로젝트 구조를 업로드하고 물어보면:

"아, entities/robot의 타입을 참조하는 거네요. features 레이어니까 entities만 참조해야 하고, widgets는 못 씁니다."

 

이런 식으로 FSD 구조를 이해한다. 파일 3~4개를 동시에 고쳐야 할 때 진가가 드러난다.

언제 Claude를 쓰면 좋은가?

이럴 때 Claude

• 복잡한 리팩토링 (여러 파일 수정)
• 긴 맥락이 필요한 작업 (아키텍처 설계)
• TypeScript 타입 추론이 복잡할 때
• 프로젝트 컨벤션을 엄격히 지켜야 할 때

이럴 때 ChatGPT

• 빠른 답변이 필요한 간단한 질문
• 최신 라이브러리 정보 (ChatGPT가 더 업데이트가 빠름)
• 이미지 생성 (DALL-E 연동)

나는 Claude를 메인으로 쓰고, 급할 땐 ChatGPT를 쓴다.

 

실전 팁

1. 맥락 관리

Claude는 맥락을 잘 기억하지만, 대화가 너무 길어지면 헷갈린다. 중요한 작업을 시작할 때는 새 채팅을 여는 게 좋다.

2. 프롬프트 엔지니어링

구체적으로 요구사항을 명시할수록 좋다.

나쁜 예:

"로봇 컨트롤러 만들어줘"

좋은 예:

"features/robot-control/ui/RobotController.tsx 파일을 만들어줘. entities/robot의 useRobotState 훅을 사용하고, Zustand로 상태 관리해. any 타입 금지, React.FC 쓰지 마."

3. 파일 업로드 활용

프로젝트 구조를 이해시키려면 주요 파일들을 업로드하자. package.json, tsconfig.json, 주요 컴포넌트 몇 개만 올려도 맥락 파악이 빨라진다.

4. Artifacts로 빠른 검증

UI 관련 작업은 Artifacts에서 바로 확인한다. 로컬에 복사하기 전에 대충 맞는지 확인할 수 있다.

 

주의사항

1. 할루시네이션

Claude도 틀린 답을 준다. 특히 최신 라이브러리 API는 잘못 알고 있는 경우가 많다. 공식 문서 확인은 필수다.

 

 

typescript

// Claude가 제안한 코드
import { useSuspense } from '@tanstack/react-query'; // 이런 훅 없음

// 실제로는
import { useSuspenseQuery } from '@tanstack/react-query';

2. 과도한 의존

코드를 이해 없이 복붙하면 나중에 디버깅 못 한다. Claude가 준 코드도 반드시 리뷰하고 이해한 다음 쓰자.

3. 보안 정보

API 키나 민감한 정보를 Claude한테 절대 보내지 마라. 로그에 남는다.