CodingAgent

60 posts
Agent Plugins: 스킬과 MCP를 한 패키지로 묶기

Agent Plugins: 스킬과 MCP를 한 패키지로 묶기

에이전트용 스킬을 하나 잘 만들어 두면 여기저기서 쓰고 싶어집니다. 팀 동료는 클로드 코드 대신 Codex를 쓰고, 다른 동료는 Cursor를 쓰니까요. 스킬만 나눠주는 거라면 방법은 이미 있습니다. skills.sh의 npx skills add에 -a '*'를 붙이면 지원하는 코딩 에이전트 전부에 같은 스킬을 한 번에 설치해 주거든요. 진짜 문제는 스킬이 혼자 굴러가지 않을 때 드러납니다. 배포 상태를 조회하는 MCP 서버가 있어야 동작하는 스킬이라면, 서버 설정은 여전히 도구마다 손으로 넣어야 하죠. 스킬과 도구가 한 몸인데 배

Herdr: AI 코딩 에이전트를 위한 터미널 멀티플렉서

Herdr: AI 코딩 에이전트를 위한 터미널 멀티플렉서

AI 코딩 에이전트 하나를 터미널에서 돌릴 때는 별문제가 없습니다. 그런데 버그 수정은 Codex에 맡기고, 테스트 실패 원인 조사는 Claude Code에 시키고, 옆에서는 개발 서버까지 띄우기 시작하면 상황이 달라져요. 터미널 탭을 돌아다니며 누가 작업 중인지, 누가 권한 승인을 기다리는지 계속 확인해야 합니다. 일은 에이전트들이 하는데 정작 사람은 터미널을 순찰하느라 바쁜 셈이죠. 🤔 Herdr는 이 문제를 풀기 위해 만든 터미널 멀티플렉서(terminal multiplexer)입니다. 화면을 나누고 세션을 유지하는 데서 그

코딩을 덜 하게 된 우리는 에이전트를 제대로 감독할 수 있을까요?

코딩을 덜 하게 된 우리는 에이전트를 제대로 감독할 수 있을까요?

요즘 이런 말을 자주 듣습니다. 이제 개발자는 코드를 직접 짜기보다 코딩 에이전트를 지휘하고 감독해야 한다고요. 저도 개발자의 역할이 바뀌고 있다는 큰 흐름에는 동의합니다. 다만 여기에는 조심해야 할 역설이 있습니다. 과연 직접 구현을 할 수 없는 개발자가 에이전트를 감독할 수 있을까요? 문법을 빠르게 떠올리고 코드를 입력하는 속도는 조금 느려져도 괜찮습니다. 하지만 요구 사항을 파악하고, 코드의 동작을 예측하고, 실패 원인을 추적하는 능력까지 잃는다면 이야기가 달라집니다. 에이전트가 만든 결과물을 판단할 기반도 함께 사라지기 때문

TanStack Intent: 라이브러리와 함께 배포하는 에이전트 스킬

TanStack Intent: 라이브러리와 함께 배포하는 에이전트 스킬

AI 에이전트에게 라이브러리를 다루는 코드를 맡겼다가 한숨을 쉬어 본 적 있으신가요? 분명 최신 버전을 설치했는데 2년 전에 사라진 API를 자신 있게 써 놓거나, 이름만 남고 시그니처가 바뀐 함수를 옛날 방식으로 호출해 놓는 경우 말입니다. 모델이 게을러서가 아닙니다. 학습 데이터에 남은 옛 코드와 지금 node_modules에 설치된 코드가 다를 뿐이죠. 문제는 에이전트가 그 차이를 알 방법이 마땅치 않다는 데 있습니다. TanStack Intent는 이 간극을 조금 색다른 방식으로 메웁니다. 문서를 어딘가에 잘 정리해 두고 에

클로드 코드 Dynamic Workflows: 수십 개 에이전트를 스크립트로 굴리기

클로드 코드 Dynamic Workflows: 수십 개 에이전트를 스크립트로 굴리기

클로드 코드를 쓰다 보면 어느 순간 이런 작업을 만나게 됩니다. "저장소 전체의 라우트 핸들러를 훑어서 인증 누락을 찾아줘", "컴포넌트 500개를 새 스타일 시스템으로 옮겨줘", "문서와 이슈를 여러 방향에서 조사한 뒤 서로 검증해서 보고서를 만들어줘" 같은 요청 말이죠. 이런 작업은 한 대화 안에서 차근차근 진행할 수도 있습니다. 하지만 파일이 많아지고 검증 단계가 늘어나면 컨텍스트가 금방 지저분해지고, Claude가 어느 파일을 봤는지, 어떤 결과를 검증했는지 사람이 계속 추적해야 합니다. 서브 에이전트를 여러 번 호출하는 방

Discord MCP 서버로 AI에게 커뮤니티 운영 맡기기

Discord MCP 서버로 AI에게 커뮤니티 운영 맡기기

개발 커뮤니티나 팀의 소통 채널로 Discord를 운영하고 있으면 은근히 손이 가는 일이 많은데요. 새 버전을 릴리스하면 공지 채널에 변경 사항을 정리해서 올리고, 질문 채널에 쌓인 메시지를 읽고 답하고, 행사가 잡히면 이벤트를 등록합니다. 하나하나는 금방 끝나는 일이지만 매번 Discord 창을 열고 손으로 처리하다 보면 흐름이 자꾸 끊기죠. 😅 만약 코딩 중인 AI 도구에 "방금 머지된 PR 내용을 정리해서 #release 채널에 공지해줘"라고 말하면 그대로 처리해주고, "어제 질문 채널에 올라온 메시지 중에 아직 답이 없는

auth.md: AI 에이전트를 위한 회원가입 프로토콜

auth.md: AI 에이전트를 위한 회원가입 프로토콜

요즘 AI 에이전트가 단순히 질문에 답변만 하는 게 아니라, 실제로 사용자를 대신해서 외부 서비스를 호출하는 경우가 점점 늘고 있는데요. 예를 들어 코딩 에이전트한테 "Cloudflare에 새 워커를 배포해줘"라고 시키거나, 이메일 에이전트한테 "Resend로 뉴스레터 발송해줘"라고 부탁할 수 있습니다. 그런데 여기서 한 가지 문제가 생깁니다. 에이전트가 그 서비스에 가입되어 있어야 API를 호출할 수 있는데, 가입 자체가 사람을 전제로 만들어진 절차란 말이죠. 회원가입 폼, 이메일 인증, CAPTCHA, 대시보드 로그인 같은 단계

클로드 코드 /goal: 목표를 달성할 때까지 에이전트 굴리기

클로드 코드 /goal: 목표를 달성할 때까지 에이전트 굴리기

클로드 코드로 큰 작업을 시키다 보면 매 턴 마지막에 "다음 단계 진행해줘"나 "계속"이라고 답하는 자기 자신을 발견하게 됩니다. 테스트가 다 통과할 때까지, 마이그레이션이 끝날 때까지, 인수 조건이 모두 충족될 때까지 분명한 종착점은 있는데 그 사이를 사람이 일일이 클릭으로 끌고 가야 하죠. 🤔 이런 패턴을 한 줄로 해결해주는 명령어가 클로드 코드의 /goal입니다. 종료 조건을 걸어두면 매 턴이 끝날 때마다 별도 모델이 "조건이 만족됐나?"를 판단하고, 아니면 Claude가 알아서 다음 턴을 시작합니다. 이번 글에서는 /goa

클로드 코드 agent view: 여러 백그라운드 세션을 한 화면에서 관리하기

클로드 코드 agent view: 여러 백그라운드 세션을 한 화면에서 관리하기

클로드 코드로 일하다 보면 동시에 굴리고 싶은 작업이 점점 늘어납니다. 버그 하나는 조사를 시키고, 다른 한쪽에서는 PR 리뷰를 받고, 또 다른 세션에서는 깜박이는 테스트(flaky test)를 추적하고 싶죠. 그런데 터미널 탭을 세 개 열어두면 각각이 뭘 하고 있는지 일일이 들여다봐야 하고, 답해야 하는 세션이 어느 탭인지 찾는 데도 시간을 씁니다. 🤔 이럴 때 쓰라고 만든 게 바로 agent view입니다. claude agents 한 줄로 열리는 한 화면이고, 백그라운드에서 돌고 있는 모든 세션이 한눈에 들어옵니다. 누가 일

Playwright CLI: AI 코딩 에이전트를 위한 Microsoft의 새로운 브라우저 자동화 도구

Playwright CLI: AI 코딩 에이전트를 위한 Microsoft의 새로운 브라우저 자동화 도구

AI 코딩 에이전트에게 브라우저를 맡기는 흐름이 더 빨라지고 있습니다. 이전에 Playwright MCP로 AI 에이전트가 MCP 서버를 통해 브라우저를 다루는 방법을 살펴봤고, Vercel Labs의 agent-browser 같은 CLI 기반 접근도 소개했었는데요. 이번에는 Playwright를 만든 Microsoft가 직접 내놓은 새 도구를 들고 왔습니다. Playwright CLI는 그 이름 그대로 Playwright의 핵심 기능을 명령줄 인터페이스로 노출한 도구입니다. 흥미로운 점은 이게 단순한 playwright 패키지의

AI 덕분에 올라간 개발 생산성만큼, 우리의 실력도 함께 오르고 있을까요?

AI 덕분에 올라간 개발 생산성만큼, 우리의 실력도 함께 오르고 있을까요?

AI 덕분에 올라간 개발 생산성만큼, 우리의 실력도 함께 오르고 있을까요? AI가 업무 효율을 높인다는 건 이미 여러 연구를 통해서 밝혀졌습니다. 일부 작업은 AI를 활용하면 최대 80%까지 시간을 단축할 수 있다고 하죠. 하지만 생산성을 대가로 잃는 것은 없는지 생각해보셨나요? 특히 소프트웨어 개발처럼 지속적인 학습이 중요한 영역에서는 이 질문이 더 날카롭게 다가옵니다. AI가 점점 더 많은 코드를 작성하더라도, 그 코드가 올바른지 검증하고, 문제가 생겼을 때 디버깅하고, 시스템 전체를 이해하는 능력은 여전히 개발자의 몫이기 때문

React Doctor로 React 코드 건강 점검하고 코딩 에이전트 가르치기

React Doctor로 React 코드 건강 점검하고 코딩 에이전트 가르치기

코딩 에이전트와 함께 React 코드를 짜다 보면 묘한 위화감이 들 때가 있습니다. 코드는 분명히 동작하고 타입도 맞는데, useEffect 안에서 상태를 폭포처럼 줄줄이 갱신하거나 dangerouslySetInnerHTML을 별 고민 없이 넣어두는 식이죠. 에이전트 입장에서는 "요구사항을 만족시키는 코드"를 짠 것이지만, 우리 입장에서는 "리뷰 코멘트가 쏟아질 코드"입니다. 이 간극을 메우는 도구가 Million.co에서 만든 React Doctor입니다. 한 줄짜리 명령으로 React 프로젝트를 진단해서 0~100 사이의 건강

Notion MCP 서버로 AI에게 워크스페이스 작업 맡기기

Notion MCP 서버로 AI에게 워크스페이스 작업 맡기기

회사 위키나 개인 노트를 Notion으로 관리하고 있으면 매일 비슷한 동선을 반복하게 되는데요. 새 프로젝트가 시작되면 PRD 템플릿을 복제해서 채워 넣고, 미팅 노트를 정리해서 관련 페이지에 링크를 걸고, 작업 상태를 데이터베이스에서 일일이 업데이트합니다. 정작 글을 쓰는 시간보다 페이지를 찾고 형식을 맞추는 시간이 더 길게 느껴질 때도 있죠. 😅 만약 코딩 중인 AI 도구에 "어제 미팅 노트를 보고 결정 사항만 추려서 새 PRD로 만들어줘"라고 말하면 그대로 처리해주고, "지난 분기 회고 페이지에서 반복적으로 나온 이슈를 찾아

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

Discord