CodingAgent

44 posts
Storybook MCP로 AI에게 컴포넌트 맥락 알려주기

Storybook MCP로 AI에게 컴포넌트 맥락 알려주기

AI 코딩 에이전트에게 UI를 만들어달라고 하면 종종 난감한 결과물이 나옵니다. 프로젝트에 이미 잘 만들어둔 Button, Card, Modal 같은 컴포넌트가 있는데 에이전트는 그 존재를 모르니까 비슷한 걸 또 만들어버리는 거죠. 디자인 시스템을 열심히 구축해놨는데 AI가 인라인 스타일로 대충 때운 컴포넌트를 내놓으면 정말 답답합니다 😅 이 문제의 원인은 간단합니다. AI 에이전트에게 우리 프로젝트의 UI 컴포넌트에 대한 맥락이 없기 때문인데요. Storybook이 MCP(Model Context Protocol)를 통해 이 문

ccusage: 클로드 코드 토큰 사용량과 비용을 한눈에

ccusage: 클로드 코드 토큰 사용량과 비용을 한눈에

클로드 코드를 쓰다 보면 어느 순간 궁금해지는 게 있어요. 이번 달에 토큰을 얼마나 썼지? 비용은 얼마쯤 나왔을까? 세션 중에 /cost로 현재 비용을 확인할 수는 있는데, 지난주 월요일에 얼마를 썼는지나 프로젝트별 비용 분포는 알기 어렵죠. ccusage는 이 질문들에 답해주는 CLI 도구예요. 클로드 코드가 로컬에 남기는 세션 로그 파일을 분석해서 일별, 월별, 세션별 토큰 사용량과 비용을 테이블 형태로 보여줘요. 설치할 필요도 없이 npx 한 줄이면 바로 실행할 수 있어서 진입 장벽이 거의 없어요. 바로 실행해보기 ccusag

AI를 위한 CLI 설계: 에이전트가 쓰기 좋은 커맨드라인 도구 만들기

AI를 위한 CLI 설계: 에이전트가 쓰기 좋은 커맨드라인 도구 만들기

요즘 개발하다 보면 CLI 도구를 직접 타이핑하기보다 AI 에이전트한테 시키는 일이 부쩍 늘었습니다. 클로드 코드나 Cursor 같은 코딩 에이전트가 터미널에서 git, npm, docker, grep 같은 명령어를 알아서 실행해주니까요. 근데 가만 생각해보면 우리가 쓰는 CLI 도구 대부분은 사람이 직접 타이핑하는 걸 전제로 만들어졌어요. --help 플래그로 사용법을 찾아보고, 탭 완성으로 옵션을 탐색하고, 에러 메시지를 읽고 다시 시도하는 거죠. AI 에이전트는 이렇게 도구를 쓰지 않습니다. 문서를 읽어 이해한 뒤 명령어를 한

Superpowers: 클로드 코드에 소프트웨어 엔지니어링 원칙을 심다

Superpowers: 클로드 코드에 소프트웨어 엔지니어링 원칙을 심다

클로드 코드에게 "이 기능 만들어줘"라고 하면 곧바로 코드를 쓰기 시작합니다. 빠르긴 한데, 가끔 불안할 때가 있어요. 테스트는 나중에 추가하려나? 설계는 괜찮은 건가? 파일이 너무 커지는 거 아닌가? 사람이 개발할 때는 자연스럽게 거치는 고민들인데, AI한테는 명시적으로 시키지 않으면 넘어가 버리는 부분이죠. Superpowers는 이런 고민을 플러그인 하나로 해결하려는 시도입니다. Jesse Vincent가 만든 이 클로드 코드 플러그인은 TDD, 체계적 디버깅, 브레인스토밍 같은 소프트웨어 엔지니어링 방법론을 Claude의 워

클로드 코드 상태줄: 터미널 하단을 나만의 대시보드로

클로드 코드 상태줄: 터미널 하단을 나만의 대시보드로

클로드 코드로 긴 작업을 하다 보면 궁금한 게 생깁니다. 컨텍스트 윈도우를 얼마나 쓴 거지? 비용은 지금 얼마쯤 됐지? 매번 /cost나 /model을 쳐서 확인할 수 있긴 한데 작업 흐름이 끊기죠. 상태줄(statusline)은 이런 정보를 터미널 하단에 항상 띄워주는 기능입니다. 셸 스크립트 하나로 컨텍스트 사용량이나 비용, Git 브랜치 같은 걸 실시간 대시보드처럼 꾸밀 수 있어요. 한번 설정해두면 작업 흐름을 끊지 않고 세션 상태를 한눈에 파악할 수 있습니다. 상태줄이 뭔가요? 상태줄은 클로드 코드 화면 맨 아래에 붙는 커스

스펙 주도 개발: 바이브 코딩을 넘어 AI 에이전트와 일하는 법

스펙 주도 개발: 바이브 코딩을 넘어 AI 에이전트와 일하는 법

"장바구니 기능 만들어줘." 코딩 에이전트에게 이렇게 요청하면 뭔가 그럴듯한 코드가 나옵니다. 그런데 결과를 보면 내가 원했던 것과 미묘하게 다릅니다. 상품 수량 변경이 빠져 있거나 할인 적용 로직이 내 의도와 다릅니다. 합계를 계산하는 방식이 요구사항과 안 맞기도 하죠. 에이전트가 멍청한 걸까요? 아닙니다. 내가 원하는 걸 충분히 명확하게 전달하지 않은 겁니다. 이런 식으로 분위기에 맡겨 코드를 생성하는 걸 **바이브 코딩(Vibe Coding)**이라고 부릅니다. 대략적인 의도만 던지고 에이전트가 알아서 해주길 바라는 거죠. 간

Sentry MCP 서버로 AI에게 에러 디버깅 맡기기

Sentry MCP 서버로 AI에게 에러 디버깅 맡기기

Sentry로 프로덕션 에러를 모니터링하고 있으면 보통 이런 워크플로우를 반복하게 됩니다. Slack에서 에러 알림을 받고 Sentry 대시보드로 이동해서 스택 트레이스를 확인하고 관련 코드를 에디터에서 열어서 원인을 파악하고 수정 코드를 작성합니다. 이 과정에서 브라우저와 에디터를 끊임없이 왔다 갔다 하게 되는데요. 만약 코딩 중인 AI 도구에서 "이 프로젝트에서 최근에 발생한 에러 보여줘"라고 말하면 바로 이슈 목록을 가져오고 "이 에러 원인 분석해줘"라고 하면 스택 트레이스를 보고 수정 코드까지 제안해준다면 어떨까요? 🤔 S

클로드 코드의 언어 모델 선택과 추론 강도 조절

클로드 코드의 언어 모델 선택과 추론 강도 조절

클로드 코드로 작업하다 보면 가끔 이런 상황이 생깁니다. 오타 하나 고치려고 했는데 Opus가 코드베이스 전체를 분석하느라 30초를 기다린다거나, 반대로 복잡한 아키텍처 리팩토링을 맡겼는데 Haiku가 피상적인 답만 내놓는 경우요. 두 경우 모두 언어 모델과 추론 강도가 작업에 맞지 않아서 생기는 문제인데요. 클로드 코드에서 언어 모델과 추론 강도는 모든 상호작용의 품질과 속도에 가장 직접적으로 영향을 주는 설정입니다. 이 글에서는 어떤 언어 모델과 추론 강도 조합이 어떤 작업에 적합한지 그리고 상황에 따라 전환하는 방법을 하나씩

cmux: 코딩 에이전트를 위한 터미널

cmux: 코딩 에이전트를 위한 터미널

Claude Code를 터미널에서 돌리다 보면 자연스럽게 여러 세션을 동시에 띄우게 됩니다. 하나는 프론트엔드 리팩토링을 시키고, 다른 하나는 API 테스트를 작성하게 하고, 또 다른 하나는 버그를 추적하게 하는 식이죠. 문제는 이 세션들을 관리하는 게 생각보다 귀찮다는 겁니다. Ghostty에서 분할 창을 여러 개 열어놓으면 어느 에이전트가 질문을 던지고 기다리는 중인지 눈으로 일일이 확인해야 해요. macOS 알림도 어떤 세션에서 온 건지 맥락이 부족하고요. cmux는 이 문제를 해결하려고 만들어진 터미널입니다. Ghostty의

Harness Engineering: AI 코딩 에이전트를 위한 환경 설계

Harness Engineering: AI 코딩 에이전트를 위한 환경 설계

AI 코딩 에이전트로 개발하다 보면 반복되는 경험이 하나 있습니다. 프롬프트를 아무리 잘 써봐야 에이전트가 프로젝트 맥락을 놓치고, 아키텍처는 무시한 채 엉뚱한 코드를 만들어내는 거죠. 사람이 뒤에서 계속 수습하느라 바쁩니다 😅 왜 이런 걸까요? 모델이 멍청해서? 아닙니다. 에이전트가 일할 수 있는 환경 자체가 안 갖춰져 있어서 그렇습니다. OpenAI가 최근 발표한 Harness Engineering이라는 글이 딱 이 지점을 짚는데요. 이번 글에서 그 내용을 정리해 보겠습니다. Harness란 무엇인가 Harness는 말 그대로

클로드 코드 예약 작업: 반복 업무를 자동화하는 세 가지 방법

클로드 코드 예약 작업: 반복 업무를 자동화하는 세 가지 방법

매일 아침 출근하면 습관처럼 하는 일이 있습니다. PR 리뷰 목록 확인하고, CI 실패한 거 훑어보고, 의존성 업데이트 알림 살펴보고... 중요한 일이긴 한데 매번 직접 하자니 번거롭죠. "이거 Claude가 알아서 해주면 안 되나?" 싶은 생각, 한 번쯤은 드셨을 겁니다. 클로드 코드에는 바로 이런 반복 업무를 자동으로 처리해주는 예약 작업(Scheduled Tasks) 기능이 있습니다. 컴퓨터를 꺼도 돌아가는 Cloud 예약 작업, 로컬 파일에 접근할 수 있는 Desktop 예약 작업, 세션 안에서 가볍게 폴링하는 /loop까지

Ralph Wiggum 개발법: 코딩 에이전트를 밤새 돌리는 요령

Ralph Wiggum 개발법: 코딩 에이전트를 밤새 돌리는 요령

AI 코딩 에이전트로 작업하다 보면 한 가지 답답한 순간이 있습니다. 에이전트가 코드를 작성하다가 어느 시점에 "완료했습니다"라고 선언하는데, 정작 빌드가 깨져 있거나 테스트가 실패하는 거죠. 그래서 다시 지시하고 또 고치고 또 확인하고... 이 과정을 수십 번 반복하다 보면 "차라리 내가 짜는 게 빠르겠다"는 생각이 들기도 합니다 😅 그런데 2025년 말, 호주에서 염소를 키우던 한 개발자가 이 문제를 아주 단순한 방법으로 해결했습니다. Bash while 루프 하나로요. 이름도 기가 막히는데, Ralph Wiggum입니다. R

클로드 코드 음성 모드: 말로 코딩하는 시대가 열리다

클로드 코드 음성 모드: 말로 코딩하는 시대가 열리다

클로드 코드로 복잡한 리팩토링을 지시하려고 프롬프트를 작성하고 있습니다. "이 함수에서 에러 핸들링 로직을 분리하고, 재시도 메커니즘을 추가하되, 기존 인터페이스는 유지해줘. 그리고 관련 테스트도..." 여기까지 타이핑하다 보면 손가락이 먼저 지칩니다. 머릿속에는 이미 완성된 문장이 있는데 키보드로 옮기는 과정이 병목이 되는 거죠. 특히 코드 경로나 변수명은 타이핑이 편하지만 맥락 설명이나 의도를 전달할 때는 말이 훨씬 빠릅니다. 2026년 3월 3일, Anthropic이 이 문제에 대한 답을 내놨습니다. 클로드 코드에 음성 모드가

클로드 코드 원격 제어: 소파에서도 코딩을 멈추지 않는 법

클로드 코드 원격 제어: 소파에서도 코딩을 멈추지 않는 법

책상에서 클로드 코드로 리팩토링하고 있었는데 갑자기 택배가 옵니다. "잠깐이면 되겠지" 하고 나갔다 오면 흐름이 끊기죠. 퇴근 후 소파에서 뒹굴거리다가 "아까 그 작업 어디까지 했더라?" 싶을 때도 있고요. Anthropic이 2026년 2월에 내놓은 Remote Control(원격 제어)은 딱 이 문제를 풀어줍니다. 터미널에서 돌아가는 클로드 코드 세션을 스마트폰이나 다른 컴퓨터 브라우저에서 그대로 이어 쓸 수 있거든요. 원격 제어가 뭔가요? 한마디로 내 컴퓨터에서 돌아가는 클로드 코드 세션에 원격으로 접속하는 겁니다. 클로드 코

클로드 코드 자동 메모리: AI가 스스로 기억하는 법

클로드 코드 자동 메모리: AI가 스스로 기억하는 법

클로드 코드에는 두 가지 메모리 시스템이 있습니다. 개발자가 직접 작성하는 CLAUDE.md와 Claude가 스스로 학습하는 자동 메모리(auto memory)입니다. CLAUDE.md가 "이렇게 해"라는 명시적인 지시라면, 자동 메모리는 Claude가 작업하면서 "아, 이 프로젝트에서는 이렇게 하는구나"하고 스스로 메모하는 노트에 가깝습니다. | | CLAUDE.md | 자동 메모리 | | --------- | ------------------------------- | ---------------------------------

클로드 코드 내장 에이전트 스킬

클로드 코드 내장 에이전트 스킬

클로드 코드를 쓰다 보면 /help나 /clear 같은 슬래시 커맨드가 익숙해집니다. 이런 커맨드는 세션 초기화, 모델 전환 같은 단일 동작을 바로 실행하죠. 그런데 슬래시 /를 눌러보면 이것과는 좀 다른 느낌의 명령어들이 눈에 띕니다. /simplify, /batch, /loop 같은 것들인데요. 이것들은 슬래시 커맨드가 아니라 **내장 스킬(Bundled Skills)**입니다. 슬래시 커맨드가 고정된 로직을 실행하는 것과 달리, 내장 스킬은 프롬프트 기반으로 동작해요. Claude에게 상세한 플레이북을 주고 도구를 조합해서 작

Goose 사용법: Block이 만든 오픈소스 AI 코딩 에이전트

Goose 사용법: Block이 만든 오픈소스 AI 코딩 에이전트

AI 코딩 에이전트 시장이 점점 뜨거워지고 있죠. Claude Code나 OpenCode 같은 도구가 이미 많은 개발자의 워크플로우에 자리 잡았는데요, 오늘은 조금 다른 접근 방식을 취하는 도구를 하나 소개해드리겠습니다. 바로 Block(구 Square)이 만든 오픈소스 AI 코딩 에이전트, Goose입니다. Goose는 2025년 1월에 처음 공개된 이후 빠르게 성장해서, 지금은 GitHub 스타 27,000개 이상, 기여자 400명 이상의 대규모 오픈소스 프로젝트가 되었습니다. 2025년 12월에는 Linux Foundation

클로드 코드 Tasks: 세션을 넘나드는 작업 관리

클로드 코드 Tasks: 세션을 넘나드는 작업 관리

클로드 코드로 규모 있는 프로젝트를 진행하다 보면 한 세션에서 끝나지 않는 작업이 생기기 마련입니다. 인증 시스템을 추가하려면 DB 스키마부터 설계하고, API 엔드포인트를 만들고, 프론트엔드를 고치고, 테스트까지 작성해야 하죠. 문제는 이 과정에서 어디까지 했고 뭐가 남았는지 추적하기가 쉽지 않다는 겁니다. 🤔 예전에는 Claude Code가 내부적으로 Todo라는 간단한 체크리스트를 사용했는데요. 세션 메모리에만 존재해서 터미널을 닫거나 /clear를 하면 사라져 버렸습니다. 서브 에이전트도 메인 세션의 Todo를 볼 수 없었

Chrome DevTools MCP로 AI 코딩 에이전트에게 브라우저의 눈 선물하기

Chrome DevTools MCP로 AI 코딩 에이전트에게 브라우저의 눈 선물하기

AI 코딩 에이전트를 쓰면서 이런 답답함을 느낀 적 없나요? 코드를 수정했는데 브라우저에서 실제로 어떻게 보이는지 에이전트가 알 수 없다는 거죠. CSS를 고쳤는데 레이아웃이 깨졌는지, API 호출이 실패하는지, 성능이 느려졌는지 에이전트는 전혀 모릅니다. 눈을 가리고 프로그래밍하는 거나 마찬가지예요 😅 이전에 Playwright MCP로 AI 에이전트에게 브라우저 자동화를 맡기는 방법을 다뤘었는데요. 이번에는 구글 Chrome DevTools 팀이 직접 만든 MCP 서버를 살펴보려고 합니다. Playwright MCP가 접근성

skills.sh: 공개 에이전트 스킬 생태계

skills.sh: 공개 에이전트 스킬 생태계

이전 글에서 에이전트 스킬이 무엇인지, 왜 필요한지 살펴보았습니다. 그런데 매번 필요한 스킬을 처음부터 만들어야 할까요? 다른 개발자들이 만든 유용한 Skill을 쉽게 찾아서 설치할 수 있다면 좋겠죠? 이번 글에서는 이런 필요를 채워주는 에이전트 스킬 공개 디렉토리인 skills.sh에 대해서 알아보겠습니다. skills.sh란? skills.sh는 2026년 1월 Vercel에서 출시한 Skills 디렉토리입니다. 공식 슬로건은 "The Open Agent Skills Ecosystem"인데요, Skills를 검색하고, 설치하고,

Discord