AI

103 posts
클로드 코드 /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가 점점 더 많은 코드를 작성하더라도, 그 코드가 올바른지 검증하고, 문제가 생겼을 때 디버깅하고, 시스템 전체를 이해하는 능력은 여전히 개발자의 몫이기 때문

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

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

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

claudecode.nvim: Neovim에서 Claude Code 쓰기

claudecode.nvim: Neovim에서 Claude Code 쓰기

Neovim에서 코딩을 하다가 Claude한테 물어보고 싶은 게 생기면 보통 어떻게 하시나요? 대부분은 별도 터미널을 띄워두고 거기에 claude 명령을 입력해서 대화하시죠. 그런데 작업 중인 코드 일부를 통째로 보내고 싶거나, Claude가 제안한 변경 사항을 그대로 파일에 반영하고 싶을 때는 복사 붙여넣기를 반복하느라 흐름이 자꾸 끊깁니다. 😅 claudecode.nvim은 이 끊김을 없애주는 Neovim 플러그인입니다. 에디터 안에서 바로 Claude Code 터미널을 띄우고, 시각 모드로 선택한 코드를 한 번에 전송하고,

gh skill로 에이전트 스킬 관리하기

gh skill로 에이전트 스킬 관리하기

좋아 보이는 에이전트 스킬을 동료 깃허브 저장소에서 발견해서 따라 써보고 싶은데, 막상 적용하려고 하면 막막할 때가 있죠. SKILL.md 파일을 다운로드해서 어디다 저장할지 검색하고, 의존하는 스크립트까지 같이 챙겨오고, 며칠 뒤에 원본이 업데이트되면 또 수동으로 덮어쓰고... 😅 게다가 직접 만든 스킬을 동료에게 공유할 때도 비슷한 문제가 생깁니다. 스펙에 맞게 잘 작성했는지 확인하기도 쉽지 않고, 검색이 잘 되도록 메타데이터를 챙기는 일도 신경 쓸 게 한두 가지가 아니거든요. GitHub이 이 문제를 해결하려고 GitHub

Claude Design 사용법: 디자인 시스템부터 Claude Code 연동까지

Claude Design 사용법: 디자인 시스템부터 Claude Code 연동까지

"내일 임원 보고 자료 좀 만들어 오세요." 퇴근 직전에 이런 말을 들으면 파워포인트의 빈 슬라이드부터 떠오르는데요. 내용은 있는데 어디서부터 시각화해야 할지 막막하고, 디자인팀에 부탁하자니 일정이 빠듯합니다 😅 2026년 4월 17일 Anthropic이 공개한 Claude Design은 이런 시각 작업을 Claude와 대화하며 처리하는 도구입니다. 처음 나왔을 때만 해도 슬라이드나 프로토타입을 빠르게 만드는 실험적 제품에 가까웠는데요. 이후 디자인 시스템을 조직 단위로 관리하고, 코드에 있는 실제 컴포넌트를 Claude Code

TanStack AI: 프레임워크에 종속되지 않는 AI SDK

TanStack AI: 프레임워크에 종속되지 않는 AI SDK

AI 기능을 웹 앱에 붙이는 일이 요즘 정말 흔해졌습니다. 채팅 인터페이스를 만들거나, LLM에게 도구를 쥐여주거나, 스트리밍 응답을 화면에 뿌리거나. 그런데 막상 시작하면 고민이 생깁니다. OpenAI를 쓸지 Anthropic을 쓸지, React인지 Vue인지, Next.js인지 다른 프레임워크인지에 따라 코드가 전부 달라지거든요. TanStack Query와 TanStack Router로 유명한 TanStack 생태계에서 이 문제를 해결하려고 나온 게 바로 TanStack AI입니다. 스스로를 "AI 도구의 스위스"라고 소개할

과연 AI가 개발자 일자리를 없애고 있을까요?

과연 AI가 개발자 일자리를 없애고 있을까요?

과연 AI가 개발자 일자리를 없애고 있을까요? 🤔 요즘 미디어를 보면 AI 때문에 개발자가 사라질 거라는 이야기들이 참 많이 들리죠? 그래서 그런지 주변에도 AI로 대체될까 봐 걱정하시는 개발자 분들이 참 많은 것 같아요. 그런데 현재 채용 데이터는 조금 다른 이야기를 하고 있습니다. 아래는 채용 데이터 분석 플랫폼 TrueUp에서 최근에 발표한 수치입니다. 소프트웨어 개발자 채용 공고 6만 7천 개 (3년 내 최고치) 2026년 들어서만 약 30% 증가 2023년 중반 저점 대비 무려 2배 이상 특히 흥미로운 점은 실리콘밸리 지

A2A 프로토콜: AI 에이전트끼리 대화하는 표준

A2A 프로토콜: AI 에이전트끼리 대화하는 표준

AI 에이전트 하나만으로 모든 일을 처리할 수 있다면 좋겠지만, 현실은 그리 단순하지 않습니다. 기업 환경에서는 채용 담당 에이전트, 일정 관리 에이전트, 데이터 분석 에이전트처럼 각자 전문 분야가 다른 에이전트들이 따로 돌아가고 있는 경우가 많거든요. 문제는 이 에이전트들이 서로 다른 프레임워크로 만들어져서 직접 대화할 방법이 없다는 겁니다. 바로 이 문제를 해결하기 위해 Google이 내놓은 것이 A2A(Agent-to-Agent) 프로토콜입니다. 이름 그대로 AI 에이전트 간의 통신을 표준화하는 오픈 프로토콜인데요. 이 글에서

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 에이전트는 이렇게 도구를 쓰지 않습니다. 문서를 읽어 이해한 뒤 명령어를 한

Claude Dispatch: 폰 하나로 내 컴퓨터에 일 시키기

Claude Dispatch: 폰 하나로 내 컴퓨터에 일 시키기

외출했는데 갑자기 "아, 그 파일 정리해놔야 했는데" 싶을 때 있잖아요. 아니면 회의 준비 자료를 미리 만들어놓고 싶은데 컴퓨터 앞에 갈 시간이 없을 때요. 이럴 때 폰으로 메시지 하나 보내면 내 데스크톱에서 Claude가 알아서 처리해주면 얼마나 좋을까요? Anthropic이 2026년 3월에 내놓은 Dispatch가 딱 이걸 해줍니다. Claude 모바일 앱에서 메시지를 보내면 내 컴퓨터에서 돌아가는 Claude가 파일을 열고 앱을 조작한 뒤 결과를 정리해서 폰으로 알려주는 거예요. 어떻게 동작하고 어떻게 쓰는 건지 하나씩 살펴

browser-use: AI 에이전트가 웹 브라우저를 자유자재로 다루는 시대

browser-use: AI 에이전트가 웹 브라우저를 자유자재로 다루는 시대

웹 브라우저 자동화라고 하면 보통 Playwright나 Selenium으로 셀렉터를 하나하나 잡아가며 스크립트를 짜는 모습이 떠오릅니다. 버튼 위치가 바뀌면 셀렉터도 고쳐야 하고, 페이지마다 로딩 타이밍이 달라서 wait_for 코드를 여기저기 넣어야 하죠. 이런 작업이 번거로워서 "AI한테 그냥 시키면 안 되나?"라고 한 번쯤 생각해보신 적 있을 겁니다. browser-use는 바로 그 발상에서 출발한 오픈소스 Python 라이브러리입니다. 자연어로 "해커뉴스에서 오늘의 인기 글 5개를 찾아줘"라고 지시하면 LLM이 직접 브라우저

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

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

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

AWS Bedrock으로 AI 모델 사용하기

AWS Bedrock으로 AI 모델 사용하기

요즘 AI 기능을 서비스에 통합하려는 기업이 정말 많죠. 그런데 OpenAI나 Anthropic 같은 AI 제공업체의 API를 직접 쓰려면 각 업체마다 별도로 계정을 만들고 API 키를 관리해야 하고 비용 청구도 따로 받게 됩니다. 이미 AWS 인프라를 쓰고 있는 조직이라면 이게 꽤 번거로운 일이에요. AWS Bedrock은 이런 고민을 해결해주는 서비스입니다. 여러 AI 회사의 파운데이션 모델(Foundation Model)을 AWS 환경 안에서 통합된 API로 호출할 수 있게 해주거든요. 기존에 사용하던 IAM 권한 체계와 AW

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

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

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

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

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

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

Discord