본문으로 건너뛰기

© 2026 Molayo

Dev.to헤드라인2026. 06. 10. 12:05

AI 코딩 에이전트를 투명하게 만들기 - 모델에 실제로 무엇을 보내는지 확인하세요

요약

AI 코딩 에이전트의 내부 동작을 투명하게 확인할 수 있는 로컬 도구인 ccglass를 소개합니다. 이 도구는 역방향 프록시를 통해 시스템 프롬프트, 메시지 히스토리, 도구 호출 및 토큰 비용을 웹 대시보드에서 시각화해 줍니다.

핵심 포인트

  • ccglass는 에이전트와 API 사이의 요청/응답을 가로채는 로컬 프록시 도구임
  • 시스템 프롬프트와 전체 메시지 히스토리를 상세히 확인할 수 있음
  • 도구 스키마 및 모델의 도구 호출 과정을 모니터링 가능함
  • 토큰 사용량과 비용 상세 내역을 실시간으로 파악할 수 있음
  • 턴별 차이점(Diff) 확인을 통해 에이전트 동작 디버깅이 용이함

Claude Code나 Codex와 같은 AI 코딩 에이전트(AI coding agents)를 사용해 보셨다면, 그것들이 얼마나 강력한지 알고 계실 것입니다. 하지만 동시에 블랙박스(black box)처럼 느껴지기도 합니다. 시스템 프롬프트(system prompt)에는 실제로 무엇이 들어있을까요? 매 턴마다 얼마나 많은 컨텍스트(context)가 전송되고 있을까요? 내 토큰(tokens)은 다 어디로 가고 있는 걸까요?

최근 저는 이러한 질문들에 멋지게 답해주는 ccglass라는 도구를 발견했고, 제 경험을 공유하고자 합니다.

ccglass란 무엇인가요?
ccglass는 당신의 AI 코딩 에이전트와 모델 API(model API) 사이에서 역방향 프록시(reverse proxy) 역할을 하는 가벼운 로컬 도구입니다. 모든 요청(requests)과 응답(responses)을 가로채서 로그를 남기고, 이를 매우 보기 좋은 웹 대시보드(web dashboard)에 표시해 줍니다.

ccglass 대시보드

시작하기
설치는 간단합니다 (Node.js 18+ 필요):

npm install -g ccglass

그 다음 실행하고 에이전트를 선택하기만 하면 됩니다:

ccglass

또는 직접 지정할 수도 있습니다:

ccglass claude # Claude Code용
ccglass codex # Codex용
ccglass deepseek # DeepSeek-TUI용

그러면 다음과 같은 작업이 수행됩니다:

  1. 로컬 프록시 서버(local proxy server) 시작
  2. 적절한 환경 변수(environment variables) 자동 설정
  3. 에이전트 실행
  4. 웹 대시보드 열기

끝입니다! 설치할 CA 인증서도 없고, 복잡한 설정도 필요 없습니다.

확인할 수 있는 것들

대시보드는 모든 것을 보여줍니다:

  1. 전체 시스템 프롬프트 (The Full System Prompt)

이것이 아마 가장 흥미로운 부분일 것입니다. 서로 다른 에이전트들이 모델에 지침을 전달하기 위해 어떻게 프롬프트를 구성하는지 볼 수 있습니다. Claude Code의 시스템 프롬프트를 읽어보는 것은 정말 매혹적입니다!

  1. 전체 메시지 히스토리 (Complete Message History)

매 턴마다 전송되는 전체 컨텍스트가 어떻게 진화하는지, 그리고 무엇이 유지되고 무엇이 삭제되는지 확인할 수 있습니다.

  1. 도구 스키마 및 호출 (Tool Schemas and Calls)

에이전트가 모델에 제공하는 도구 정의(tool definitions)가 무엇인지, 그리고 모델이 응답으로 어떤 도구 호출(tool calls)을 수행하는지 볼 수 있습니다.

  1. 토큰 및 비용 상세 내역 (Token and Cost Breakdown)

정확히 몇 개의 토큰을 사용하고 있는지, 무엇이 캐싱(cached)되었는지 알 수 있으며, 요청당 및 세션당 비용 추정치를 확인할 수 있습니다.

토큰 요약

  1. 턴별 차이점 보기 (Turn-by-Turn Diff View)

요청(requests)을 비교하여 턴(turn) 사이에 정확히 무엇이 변경되었는지 확인하세요. 에이전트가 왜 다르게 행동하기 시작했는지 디버깅(debugging)할 때 매우 유용합니다.

지원되는 에이전트 (Supported Agents)

목록이 상당히 광범위합니다:

  • Claude Code (Bedrock 및 Vertex 모드 포함)
  • Codex (OpenAI)
  • DeepSeek-TUI 및 Reasonix
  • Kimi (Moonshot)
  • OpenCode
  • Ollama
  • OpenRouter
  • GLM/Zhipu
  • CodeBuddy (VS Code/JetBrains 플러그인)

IDE 지원

사용자가 Cursor, Cline, Continue.dev 또는 사용자 정의 API 기본 URL(API base URL)을 설정할 수 있는 유사한 IDE를 사용하는 경우, 프록시 모드(proxy mode)를 사용할 수 있습니다:

ccglass proxy --provider openai

그런 다음 IDE의 API 기본 URL을 제공되는 로컬 프록시 주소로 지정하기만 하면 됩니다.

이 도구가 마음에 드는 이유

  1. 최고로부터 배우기 - 프로덕션급(production-grade) 에이전트 시스템이 어떻게 구축되는지 확인하세요.
  2. 효과적인 디버깅 - 에이전트가 왜 특정 선택을 하는지 이해하세요.
  3. 비용 최적화 - 토큰(tokens)이 실제로 어디에 사용되는지 확인하세요.
  4. 로컬 전용 - 모든 로그는 사용자의 기기에 남습니다 (기본적으로 인증 토큰은 마스킹 처리됩니다).
  5. MIT 라이선스 - 완전히 오픈 소스입니다.

전문가 팁: 문서화를 위한 내보내기 (Export for Documentation)

모든 요청을 raw HTTP, Markdown, JSON 또는 HAR 형식으로 내보낼 수 있습니다:

ccglass export / --format md

문서화, 버그 보고서 또는 흥미로운 프롬프트(prompts)를 저장하는 데 매우 유용합니다.

직접 시도해 보세요

AI 코딩 에이전트를 정기적으로 사용하고 있다면, ccglass를 꼭 사용해 보시길 강력히 추천합니다. 이러한 도구들에 대해 생각하는 방식이 바뀔 것입니다.

지금 설치하세요:

npm install -g ccglass

프로젝트 확인하기: github.com/jianshuo/ccglass

여러분이 가장 좋아하는 AI 코딩 에이전트는 무엇인가요? 에이전트를 더 잘 이해하기 위한 좋은 도구를 찾으셨나요? 댓글로 알려주세요!

AI 자동 생성 콘텐츠

본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.

원문 바로가기
0

댓글

0