클로드 코드로 코딩할 때 놓치면 아까운 오픈소스 도구 5가지
클로드 코드로 뭔가 만들다 보면 기본 기능만으로는 아쉬운 순간이 옵니다. 웹페이지를 읽혀야 하는데 컨텍스트가 순식간에 차버리거나, 대화가 길어질수록 앞서 정한 규칙을 까먹거나, 화면을 만들어달라고 하면 매번 비슷한 카드형 레이아웃이 나오거나, MCP 서버 하나 붙이는 데 생각보다 손이 많이 가는 식입니다.
이번 포스팅에서는 다섯 가지 오픈소스 도구들을 정리해 봤습니다.
| 도구 | 해결하는 문제 | 설치 명령 |
|---|---|---|
| agent-browser | 브라우저 자동화 시 컨텍스트가 순식간에 차는 문제 | npm install -g agent-browser |
| vercel-labs/skills | 스킬을 에이전트마다 다른 폴더 구조에 맞춰 옮기는 번거로움 | npx skills add owner/repo |
| GSD Core | 긴 세션에서 쌓이는 컨텍스트 손상과 세션 간 기억 단절 | npx @opengsd/gsd-core@latest |
| Taste Skill | AI가 만드는 화면이 다 비슷비슷해 보이는 문제 | npx skills add Leonxlnx/taste-skill |
| Smithery | MCP 서버를 하나씩 찾아 설정 파일에 옮겨 적는 번거로움 | smithery mcp add <서버명> --client claude |
웹페이지를 읽히다가 컨텍스트가 바닥나면 agent-browser
Playwright MCP를 붙이면 도구 정의만으로 13,700토큰이 나가고, 페이지 하나를 읽을 때마다 접근성 트리 전체가 통째로 들어옵니다. Vercel 랩스가 만든 agent-browser는 이 트리를 그대로 넘기는 대신 인터랙티브 요소마다 @e1, @e2 같은 짧은 참조 번호를 붙여 돌려주는 방식으로 컨텍스트 사용량을 최대 93% 줄입니다.
vercel-labs/agent-browser 저장소, 별 41.7k를 받았다
Rust 네이티브 바이너리라 부팅 시간이 50밀리초 이하이고, agent-browser mcp 명령으로 클로드 코드 같은 MCP 클라이언트에 그대로 붙일 수도 있습니다. 자세한 설치 방법과 명령어는 아래 글에 정리해뒀습니다.
다른 사람이 만든 스킬을 여러 에이전트에 쓰려면 vercel-labs/skills
클로드 코드 전용으로 스킬을 만들면 .claude/skills/ 폴더 구조를 따라야 하는데, 같은 스킬을 커서나 코덱스에서 쓰려면 폴더 경로를 다시 맞춰야 합니다. Vercel이 공개한 vercel-labs/skills는 이 변환과 배치를 npx skills add owner/repo 한 줄로 대신 처리해주는 CLI입니다.
skills.sh, 스킬을 검색하고 설치 수 기준 순위를 볼 수 있는 디렉터리
agent-browser와 마찬가지로 Vercel 랩스가 만든 프로젝트라 서로 이어지는 부분이 있습니다. 클로드 코드와 커서, 코덱스를 포함해 70개 넘는 에이전트를 지원하고, 아래에서 다룰 Taste Skill도 실제로는 이 CLI로 설치됩니다.
세션이 길어질수록 답답해지는 느낌을 고치는 GSD Core
며칠씩 이어지는 프로젝트를 클로드 코드로 진행하다 보면 대화가 길어질수록 앞서 정한 규칙을 잊어버리고, 새 세션을 열면 어제 어떤 결정을 내렸는지부터 다시 설명해야 합니다. GSD Core는 이 컨텍스트 손상과 세션 간 기억 단절 문제를 Discuss, Plan, Execute, Verify, Ship이라는 5단계 루프로 풀어내는 오픈소스 프레임워크입니다.
GSD Core GitHub 저장소 화면
핵심은 무거운 작업을 매번 깨끗한 컨텍스트를 가진 서브에이전트에서 처리하고, 결정 사항과 진행 상황을 STATE.md 같은 마크다운 파일에 디스크로 남긴다는 점입니다. 대화 메모리가 아니라 파일 자체가 세션 간 기억 역할을 하는 구조라, /clear로 대화를 초기화해도 진행 상황이 남습니다.
AI가 만드는 화면이 다 비슷해 보인다면 Taste Skill
클로드 코드나 커서로 랜딩 페이지를 만들면 히어로 섹션에 큰 제목, 3열 카드형 기능 소개, 은은한 그라데이션이라는 익숙한 패턴이 반복됩니다. Taste Skill은 이 뻔한 기본값을 걷어내기 위해 DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY라는 세 다이얼과 줄표 금지 같은 구체적인 규칙을 SKILL.md에 담아둔 프로젝트입니다.
Taste Skill 공식 홈페이지, 캐치프레이즈는 Less slop, designs pop
설치 명령이 앞서 소개한 npx skills add인 걸 보면 알 수 있듯, Taste Skill은 vercel-labs/skills 생태계 위에서 배포되는 스킬입니다. 다만 대시보드나 복잡한 제품 UI까지 만능으로 다듬어주지는 않고, 랜딩 페이지와 포트폴리오처럼 첫인상이 중요한 화면에 맞춰져 있습니다.
MCP 서버를 자연어로 찾아 붙이고 싶다면 Smithery
클로드 코드에 MCP 서버를 붙이려면 저장소를 찾고, 실행 명령어를 확인하고, 인증 방식을 알아내는 과정을 거쳐야 합니다. Smithery는 17,000개가 넘는 MCP 서버를 모아두고, mcp search나 tool find 같은 명령으로 이름 대신 하려는 작업을 문장으로 검색할 수 있게 해주는 레지스트리입니다.
Smithery 홈페이지, 상단에 Arcade.dev 인수 안내 배너가 걸려 있다
Smithery에도 skill add --agent claude-code 명령으로 스킬을 설치하는 기능이 있어서 앞서 나온 vercel-labs/skills와 영역이 겹칩니다. 차이는 인증입니다. Smithery는 OAuth 흐름과 자격 증명 주입까지 대신 처리해주는 쪽에 가깝고, vercel-labs/skills는 인증이 필요 없는 순수 지침 파일 배포에 집중합니다.
정리
다섯 도구는 겹치는 부분보다 각자 겨냥하는 문제가 뚜렷하게 갈립니다. 웹페이지를 읽고 조작하는 작업이 잦다면 agent-browser, 만든 스킬이나 남이 만든 스킬을 여러 에이전트에서 쓰고 싶다면 vercel-labs/skills, 며칠씩 이어지는 프로젝트에서 컨텍스트와 기억이 자꾸 끊긴다면 GSD Core를 먼저 볼 만합니다. 화면 디자인이 매번 비슷하게 나온다면 Taste Skill을, MCP 서버 연결과 인증이 번거롭다면 Smithery를 붙여보면 됩니다.
Leave a comment