요즘IT는 지난 10월 클로드 코드 세미나 ‘클코나잇’을 열고 클로드 코드를 현업에서 실제로 활용하는 다양한 사례를 공유했습니다. 스타트업 개발팀의 자동화 사례, 클로드 코드 맥스플랜을 아깝지 않게 쓰는 법, 팀에서 바이브 코딩을 표준화한 테크 리드의 사례, 엔터프라이즈급 웹앱을 구축한 사례를 공유했는데요. 참가자들에게 “클로드 현업 꿀팁의 장” “실전에 도움되는 세미나” “최근 웨비나 중 가장 유익했다”라고 호평을 받았습니다. 아쉽게도 참석하지 못한 분들을 위해 그날의 핵심 내용을 정리해 콘텐츠로 다시 전해드립니다.

이번 글은 세미나 첫 번째 주제였던 “실무 꿀팁 대방출: 클로드 코드로 개발 생산성 200% 높인 노하우”입니다. 개발자들을 위한 클로드코드 딥다이브 세미나참가 신청도 열려 있으니 많은 관심 부탁드립니다.

안녕하세요, 풀스택 개발자 승형수입니다. 오늘은 제가 직접 발로 뛰고 구르면서 배웠던 Claude Code 활용법을 소개해 드릴 수 있어서 정말 기쁘게 생각합니다.

Claude Code 사용 여정

저는 8월부터 Claude Code를 사용하기 시작했습니다. 클로드 코드는 5월 22일에 나온 걸로 알고 있었는데요. 저는 소문으로만 듣다가 실제로 8월 초부터 한 번 사용해 볼까라는 마음으로 시작하게 되었습니다.

처음에는 월정액 구독이 부담스러워 API를 사용한 만큼만 결제하는 방식을 썼습니다. 하지만 하루 두 시간씩 사흘 정도 사용했을 뿐인데 50달러 가까운 요금이 청구됐고, 그 즉시 Max 플랜으로 구독을 변경했습니다.

이후 월 100달러의 Max 5x 플랜(Pro 대비 토큰 5배 제공)도 사용했지만, 당시 가장 강력했던 Opus 4.1 모델의 아웃풋 토큰 비용이 1M(100만)당 75달러에 달했기에 이마저도 금방 소진되었습니다.

결국 200달러짜리 Teams 플랜까지 사용하게 되었습니다. 최근에는 Opus보다 성능이 뛰어나면서도 비용은 1M 토큰 아웃풋당 15달러로 훨씬 저렴한 Sonnet 4.5 모델이 등장했습니다.

하지만 8월 말부터 '주간 사용량 제한(Weekly Limit)'이 새로 도입되었습니다. 이는 5시간 세션 제한(토큰 제한)과는 별개로, 실제 컴퓨팅 시간에 대한 주간 제한입니다. 이처럼 비용과 토큰 사용에 대한 어려움은 여전하며, 효율적인 사용법이 꼭 필요한 이유입니다.

Claude Code 사용량 한도 추적

Claude Code의 사용 한도를 확인하는 방법도 있습니다. Claude Code를 실행하신 다음, /usage라는 슬래시 명령어를 입력하시면 됩니다.

최근 Claude 2.0으로 올라온 이후부터는, 다른 서드파티 도구를 쓰지 않아도 이렇게 현재 세션의 사용량을 추적할 수 있습니다. 여기서 'Current Session'은 5시간을 기준으로 얼마나 토큰을 사용했는지를 보여주는데요, 보통 프로(Pro) 플랜 기준으로 5시간 동안 최대 225번까지 질문이 가능하다는 통계가 있습니다.

그리고 최근 추가된 '위클리 리밋Weekly Limit'은 세션 리밋Session Limit과는 개념이 다릅니다. 세션 리밋밋이 우리가 채팅과 질문답변을 거듭하며 소모한 '프롬프트의 양'에 대한 제한이라면, 'Weekly Limit'은 Claude에게 일을 시켰을 때, AI가 실제로 '계산 연산'을 얼마나 수행했는지, 그 '컴퓨팅 시간' 자체를 제한하는 것입니다.

토큰 사용량 최적화 전략

제가 현업에서 Claude Code와 타협 없이 일하기 위해 세운 네 가지 기준은 다음과 같습니다.

토큰 사용량 최적화
일관된 작업 흐름 유지
환각 없애기(최신 정보 검색)
'사람 개발자'가 일하는 도구 사용하기

이 기준들을 달성하기 위해 저는 여러 MCP(Master Control Program)를 활용합니다.

1. 토큰 최적화: Serena

Serena MCP는 미리 설정해 놓은 코드베이스 프로젝트를 LSP(Language Server Protocol)로 분석합니다. Syntax와 AST(추상 구문 트리)를 기반으로 코드를 심볼 단위로 시맨틱 분석하고, 이 정보들을 미리 인덱싱해 둡니다.

덕분에 저희는 전체 파일을 읽는 대신, 특정 명령어로 필요한 함수나 클래스 이름만 검색해서 가져올 수 있습니다. 이렇게 되면 파일 전체를 읽어들이지 않고도 원하는 함수나 클래스만 골라서 읽을 수 있는 거죠.

또한, 해당 심볼의 레퍼런스(참조) 추적도 가능합니다. "내가 고치려는 이 함수가 코드베이스 내에서 어디에 쓰이고 있는지" 그 정확한 참조 정보를 Serena MCP가 Claude에게 전달해 주는 역할을 합니다.

결과적으로 파일 전체를 읽을 필요가 없어지기 때문에 최대 70%의 토큰 절약 효과가 있다고 하고요. 게다가 Claude가 전체 파일을 직접 읽고 추론하는 것이 아니라, Serena가 코드 간의 참조 관계를 명확히 전달해 주기에, Claude가 훨씬 더 명확한 판단을 내릴 수 있습니다.

2. 일관된 작업 흐름: Task Master AI와 Sequential Thinking

Task Master

Task Master AI는 AI를 기반으로 한 작업 관리 시스템입니다. PRD라고 해서 내가 원하는 작업 문서를 txt 파일로 정리해두면, Task Master가 읽어들여서 AI가 이해할 수 있는 분량과 상세한 설명이 담긴 태스크들로 분할해서 만들어 줍니다.

사람이 애매모호하게 자연어로 설명하는 것보다 구조화된 형태로 해야 할 일들을 정해놓으면, AI는 하나의 태스크만 읽어들이고 단위 단위의 작업들을 하기 때문에 훨씬 정확하고 탄탄한 코드들을 연속으로 생성해낼 수 있습니다.

Sequential Thinking

Sequential Thinking도 많이 들어보셨을 텐데요. Anthropic에서 직접 만든 MCP 서버 중에 하나입니다. 계속해서 AI가 한 번에 생각하고 한 번에 답을 내는 게 아니라 차근차근 단계별로 생각할 수 있도록 강제해줍니다. 그래서 AI가 좀 더 정확하고 일관되게 작업할 수 있도록 도와줍니다.

3. 환각 없애기(최신 정보 검색): Context7와 Perplexity MCP

Context7

이것은 유명한 패키지들에 대한 마크다운 식의 AI가 쉽게 읽어들일 수 있는 형태로 공식 문서들이 모두 마크다운으로 정리되어 있고요. Claude Code가 특정 패키지 라이브러리에 대해서 질의하게 되면 마크다운 형태로 답변을 리턴해주고, 최신 문서를 학습시키기 때문에 정확한 베스트 프랙티스에 맞춰서 개발하도록 할 수 있습니다. Next.js의 App Router를 Pages Router 프로젝트에서 사용하려 하는 환각 현상을 막아줄 수 있습니다.

Perplexity MCP

Perplexity API를 이용해 Sonar 엔진을 사용해서 웹 검색을 최대한 정확하게 할 수 있습니다. Claude Code가 단순히 패키지에 대한 문서를 읽는 것 이상으로, 우리가 디자인 패턴을 활용하게 하고 싶을 때나 브레인스토밍이 필요할 때 폭넓은 웹 검색을 Perplexity의 힘을 빌려서 할 수 있도록 돕습니다.

4. '사람 개발자'의 작업 방식 모방 : Figma, Chrome, DB 연동 MCP

실제로 우리 프론트 개발자들은 많은 것을 봅니다. Figma의 디자인도 눈으로 보고 그것을 코드로 구현하기도 하고요. 내가 개발한 브라우저의 실제 렌더링 화면을 보고 틀린 것을 파악해서 코드를 고칩니다.

기존의 Claude Code나 AI들은 그저 텍스트 속에서 이루어지는 개발만 했기 때문에 시각적인 판단을 하는 데 인간 개발자보다 부족한 점이 많았어요. 이런 부분들을 Screenshot MCP나 Figma MCP로 보완해줄 수가 있습니다.

사실 백엔드도 마찬가지입니다. 백엔드도 Postgres MCP를 사용하며, 다양한 DB에 관한 것들이 다 있을 텐데요. 실제로 우리 회사가 사용하는 DB에 접속을 시켜서, 백엔드 개발자의 경우 엔티티로 정의되어 있는 TypeORM이나 Prisma로 정의되어 있는 스키마 파일, 그리고 실제로 그것이 적용되어 있는 DB에 대한 자료를 모두 주게 되면, Claude가 훨씬 더 정확한 백엔드적인 판단을 내리는 데 도움을 줄 수 있습니다.

물론 실제로 작동하는, 리모트 회사의 DB에 연결할 때는 절대로 UPDATE나 DELETE 등의 위험한 작업을 하지 않도록 설정을 해주어야 하겠죠.

MCP 연동의 한계: 컨텍스트 윈도우 관리

하지만 MCP 연동에는 함정이 있습니다. 좋은 도구를 발견했다고 무조건 많이 연동하면 안 됩니다. /context라고 입력하게 되면 현재 Sonnet 모델이 가지고 있는 컨텍스트 윈도우의 전체 용량과 이것들이 지금 무엇으로 미리 점유되어 있는지를 보여줍니다.

화면을 보시면 MCP 툴이 45K 토큰으로 22%나 차지하고 있어요. 유용하다고 해서 많이 추가하게 되면 실제로 우리가 작업해야 하는 free space가 점점 줄어들 수밖에 없습니다. 그렇게 되면 한 번의 세션에서 너무 짧은 개발밖에 할 수 없게 됩니다. 해당 세션에서 꼭 써야 하는 것만 선별적으로 연결하시고 나머지는 disable 해주신 채로 작업해주시면 좋겠습니다.

서브 에이전트 활용

여러 가지 더 추가로 활용할 수 있는 서브 에이전트들이 있는데요. 최근에 Claude가 발표되면서 플러그인이라는 명령어가 생겼습니다. 이 플러그인은 일종의 서브 에이전트들을 누구나 오픈소스로 제공하게 되면, 이곳에서 마켓플레이스 개념으로 설치할 수가 있게 돼요. 그렇게 되면 개인들이 공유하는 여러 가지 서브 에이전트들을 명령어 하나로 편리하게 설치해서 사용할 수 있게 됩니다.

BMat Metathings

그 외에도 추가할 수 있는 다양한 서브 에이전트 활용법이 있습니다. 최근 Claude 2.0이 발표되면서 '플러그인'이라는 명령어가 새로 생겼습니다. 이는 일종의 서브 에이전트 마켓플레이스 개념으로, 누구나 오픈소스로 제공하는 플러그인을 이곳에서 설치할 수 있게 된 것입니다. 덕분에 개인들이 공유하는 여러 서브 에이전트들을 명령어 몇 줄로 편리하게 설치하고 사용할 수 있습니다.

소개해드리고 싶었던 것 중 하나가 'BMAD METHOD'라는 에이전트 모음집입니다. 여기에는 애자일 개발 방법론에 입각한 다양한 도우미 기능들이 슬래시 커맨드로 마련되어 있습니다.

이 플러그인의 강점은 단순히 개발 효율을 높이는 것을 넘어섭니다. 브레인스토밍, 시장 조사, 아이템의 유효성 검증, 재무적 플랜 수립 등 심도 있는 조언을 해주는 에이전트까지 포함되어 있어 설치해 보시는 것을 강력히 추천합니다.

실무 개발 방법론 및 라이브 데모

제가 실제로 사용하고 있는 프론트엔드 개발 방법이 있는데요. 두 가지 에이전트를 세워놓고, 하나는 피그마 MCP로 디자인을 확인하며 프론트엔드 개발을 진행하고, 두 번째로 DevTools 에이전트로 화면에 출력물을 검증하면서 스스로 자기가 구현한 내용을 보고 스스로 코드를 고쳐나가는 방식으로 개발하고 있습니다.

MCP 서버 설정

먼저, 피그마 [Actions] > [Preferences] 메뉴에서 'Enable Desktop MCP Server'를 활성화하여 Figma의 로컬 MCP 서버를 실행합니다. 그다음, Figma의 'Dev 모드'로 들어가 작업할 디자인의 'link selection'을 복사합니다.

참고로 제 개발 환경은 VSCode가 아닌, Ghostty 터미널의 Neovim입니다. 특히 tmux를 사용해 터미널 세션을 관리합니다. 이렇게 하면 세션이 끊기지 않고 지속적으로 개발을 이어갈 수 있습니다.

워크플로우 정의

저는 이 작업을 위해 미리 Claude.md에 'Development Workflow'를 정의해 두었습니다. 이 워크플로우는 두 개의 에이전트, 즉 'Frontend React Dev Agent'와 'Reviewer Agent'로 구성됩니다.

작업 순서는 이렇습니다.

먼저 'Dev Agent'가 코드와 테스트를 구현합니다.
코드가 완성되면 'Reviewer Agent'가 작동하여 전체 코드를 검증하고 리뷰합니다.
만약 여기서 개선안이 나오면, 'Dev Agent'가 다시 코드를 수정합니다.
이 과정은 'Reviewer'가 최종 승인(Approve)할 때까지 계속 반복되도록 설정되어 있습니다.

디자인 인식 및 개발 시작

아까 복사한 Figma 셀렉션 링크를 붙여넣고 "Figma MCP로 셀렉션을 읽고 작업을 시작해"라고 지시하면, Claude가 MCP를 이용해 디자인 전체를 읽어들입니다. (시연용 디자인은 채팅 앱의 구독 플랜을 만드는 간단한 UI입니다.)

디자인을 다 읽고 나면 Q&A 레이아웃이 나옵니다. 이것은 최근 Claude Code (v2.0.24)에 도입된 새로운 기능으로, 구조화된 Q&A 레이아웃을 통해 개발자의 의도를 더 명확하게 파악하도록 도와줍니다.

저는 구현 범위를 "간단한 UI"라고 일단 입력하겠습니다. "컴포넌트 구조는"라는 질문에는, 시연 속도를 위해 "단일 컴포넌트"로 지정하겠습니다. 상태 관리는 "useState"를, 스타일링은 "Figma 생성"을 선택해서 바로 개발을 시작하도록 지시해 보겠습니다.

라이브 코딩 시연 결과

Claude는 직접 브라우저를 작동시키고, 스크린샷을 찍어 그 내용을 읽어들인 뒤, 자율적으로 문제를 해결합니다.

다만, 이 워크플로우가 '리뷰 후 재개발'을 계속 반복하는 무한 루프(recursive loop)에 빠지는 경우가 있습니다. 저희 경험상, AI에게 한 번에 너무 큰 규모의 작업을 맡기거나 너무 어려운 임무를 요청할 때 이런 문제가 확실히 발생하는 것 같습니다.

'토큰이 녹는다'는 표현에 저도 굉장히 공감합니다. 특히 자동화 브라우저를 켜는 작업은 토큰 소모가 정말 심합니다.

한 가지 팁을 드리자면, Chrome DevTools MCP의 토큰 사용량이 Playwright MCP의 약 4분의 1 수준입니다. 따라서 웬만한 경우에는 Playwright보다 Chrome DevTools를 사용하시길 강력히 권장합니다.

마치며: AI 개발 세팅의 핵심과 개발의 본질

정리해 말씀드리자면, AI 개발 세팅의 핵심은 다음과 같습니다.

첫째, 비용 및 효율성 관리입니다. Claude Code의 요금제는 계속 변하고 있고, 토큰은 언제나 아껴야 하는 것이 현실입니다. 따라서 항상 최신 요금제 변화를 주시하고 한도(Limit)를 효율적으로 관리하는 것이 중요합니다.

둘째, 전략적 MCP 통합입니다. 다양한 MCP들을 도입하고 활용해서, 인간 개발자가 실제 작업하는 환경과 최대한 유사한 환경을 구축해야 합니다.

셋째, 서브 에이전트의 적극적인 활용입니다. (이 점을 아까 깜빡하고 말씀드리지 못했는데) 서브 에이전트를 사용하는 가장 큰 이유 중 하나는, 메인 프롬프트와 컨텍스트 윈도우를 '독립시켜' 사용할 수 있다는 점입니다.

즉, 메인 화면의 제약(컨텍스트 한계)을 받지 않고, 아예 독립된 형태의 새로운 컨텍스트 윈도우에서 작업을 처리합니다. 덕분에 메인 컨텍스트가 금방 소모되지 않는, 더 깔끔한 환경에서 작업을 이어갈 수 있습니다.

코드 에디터는 언젠가 사라질 수 있다고 생각합니다. 하지만 '개발을 통해 문제를 해결한다'는 업의 본질은 변하지 않습니다. AI도 결국 우리를 도와주는 또 하나의 도구라고 생각하면 좋겠습니다.

사용자가 직접 문제를 이해하고, 해결책을 찾고, 코딩하는 그 '재미' 또한 절대 변하지 않고 그대로일 것입니다.

감사합니다.

Q&A

Q. 사용하시는 marketplace 추천해주실 수 있나요?

superpowers를 추천합니다.관련 리뷰 기사도 공유드려요.

Q. 여러 개의 에이젼트가 같이 동작하게 한다는 것에 대해 조금 더 설명 해주실 수 있을까요? 2개를 병렬적으로 실행시켜서 각기 다른 터미널에서 각자 md를 확인하면서 개발한다는걸까요?

하나의 터미널, 하나의 세션에서 메인 컨텍스트가 두 개의 서브에이전트를 일꾼처럼 지휘합니다. 메인 세션에서 서브에이전트 세션이 따로 열려서, 에이전트가 파일을 수정하고 읽습니다. 에이전트의 작업은 에이전트의 독립된 컨텍스트로 사용되므로 메인 컨텍스트가 더 장기간 유지될 수 있습니다.

➡️ [참가하기] 클코나잇 딥다이브: AI 에이전트 오케스트레이션부터 DB 마이그레이션까지

Q. Senera를 통한 컨텍스트 관리는 사용하지 않으시는지요? 그리고 200K로 상대적으로 작은 context를 관리하는 노하우, context가 찼을 경우 compact을 하는지 아니면 신규 context를 만들어서 기존 맥락을 유지하게 하는지 궁금합니다.

serena mcp는 늘 사용하고 있습니다. ai 세션이 중단되어도 해야할 일을 영구적으로 저장할 수 있다면 굳이 compact를 하지 않고 reset을 해도 좋다고 생각합니다. 그렇기에 task-master를 통해 해야 할 일을 저장소에 마련해 두는 게 중요하다고 생각합니다!

Q. 클로드 코드와 gemini cli, codex 와 비교하면 코드 작성 능력 차이가 많이 나나요?

AI모델 차이보다도, CLI 툴 자체의 퀄리티가 클로드 코드가 가장 뛰어나다고 생각합니다. 클코의 auto compact 기능, 특히 auto compact를 한 후에 seamless하게 작업을 이어갈 수 있다는 점, mcp 서버와 안정적으로 통신하는 점 등등 개발자가 다루기 편하다는 게 강점 같습니다.

gemini-cli는 툴의 품질이 떨어지는 편이었고, (오류나 crash, 세션이 날라간다든지) codex도 훌륭하기는 했지만, 오픈AI와 앤트로픽의 설계 철학 차이가 선명했습니다. 클로드는 텅 빈 컨텍스트 위에 개발자가 원하는 기능을 쌓아가면서 AI를 활용하게 한다면, 오픈AI는 암묵적으로 활용할 수 있는 컨텍스트를 미리 흡수해둬서 ‘저절로 된’ 듯한 결과물을 주는 편입니다. 저는 클로드의 방식이 더 맘에 드는 것 같습니다.

Q. 클로드 코드 sub agent로 다른 gemini 나 codex 시킬수도 있나요?

각 프로그램마다 에이전트 문서의 문법이 약간씩 다르긴 하지만 (frontmatter 형식), 조금만 바꿔주면 모두 적용 가능합니다.

마침 최근에 알게 된 프로젝트를 소개드립니다. 클로드 코드의 프로그램 자체는 그대로 쓰되, LLM 모델만 원하는 것으로 대신 사용하게 프록시 계층을 씌워주는 패키지입니다.

Q. terminal을 Ghostty 으로 선택하신 이유가 있을까요?

ghostty는 크로스-플랫폼 터미널 에뮬레이터로, windows/mac/linux 모든 운영체제에서 네이티브 터미널 뷰를 제공합니다. 그래서 개발자가 어떤 플랫폼에서 작업하더라도 일관된 경험을 가져갈 수 있어요. 메모리 사용량도 iterm2에 비해 적은 편입니다.

Q. 기획자/디자이너와 같이 비전문 개발자도 클로드 코드를 사용해서 바이브 코딩이 가능할까요? 최소한의 개발 지식이 필요하지는 않을까요? git 같은 도구 사용법이라도요.

클로드 코드를 사용하지 않더라도 클로드 데스크탑을 사용한다면 기획자/디자이너도 얼마든지 사용할 수 있다고 생각합니다! claude desktop 또한 ‘커넥터’ 라는 기능으로 notion, github 등등 다양한 앱과 연동할 수 있습니다.

클로드 코드 딥다이브 무료 세미나에 참여해보세요!

자세한 내용은 아래 이미지를 눌러 확인해보세요.