클로드 코드 플러그인 5개 설치 가이드

먼저 확인하세요 · 어디서 쓸 수 있나

터미널에서 클로드 코드를 쓰면 5개 전부 됩니다. 클로드 웹과 데스크탑 앱에서는 마지막 1개만 됩니다.

앞의 4개는 클로드 코드에 붙는 플러그인이라 웹이나 앱에는 설치할 자리 자체가 없습니다. 5번만 스킬이라서 웹, 데스크탑 앱, 모바일 어디서나 쓸 수 있고 무료 요금제에서도 됩니다.

웹이나 앱만 쓰신다면 아래로 쭉 내려서 5번 Task Observer부터 보세요. 나머지 4개를 쓰고 싶으시면 클로드 코드를 먼저 설치하셔야 합니다.

클로드 코드를 기본값 그대로 쓰면 사실 반만 쓰는 겁니다. 아래 5개를 깔면 토큰, 기억, 디자인, 인터넷 조작, 반복작업 문제가 한 번에 정리됩니다.

깃허브에 직접 들어갈 필요 없습니다. 5개 중 4개는 명령어 한 줄 복사해서 붙여넣으면 끝나고, 나머지 1개만 파일을 받아서 올리면 됩니다.

시작 전에 딱 두 가지

1) Node.js 설치 (1번 OmniRoute만 필요)

nodejs.org 에서 LTS 버전을 받아 설치하고, 터미널을 껐다가 다시 켜세요. 안 껐다 켜면 설치해도 인식을 못 합니다. 나머지 4개는 클로드 코드 안에서 바로 됩니다.

2) 명령어 두 종류 구분하기

헷갈리기 제일 쉬운 부분이라 먼저 짚고 갑니다.

• / 로 시작하는 것은 클로드 코드 안에서 칩니다

• / 없이 시작하는 것은 터미널(명령 프롬프트)에서 칩니다

1. OmniRoute

토큰 부족하면 다른 AI로 자동전환

작업 중간에 토큰이 부족해지면 거기서 멈추다가, 다른 모델로 알아서 갈아타서 계속 작업하게 해줍니다. 내 컴퓨터 안에 작은 중계 서버를 하나 띄워두고, 클로드 코드가 그쪽을 거쳐가도록 바꿔주는 식입니다. 무료로 쓸 수 있는 모델도 미리 들어 있어서, 아무것도 가입 안 해도 일단 동작합니다.

설치 (터미널)

npm install -g omniroute

설치가 끝나면 서버가 localhost:20128 에서 자동으로 뜨기 시작합니다. 설치 중에 노란 글씨로 경고가 주욱 뜨는 건 정상입니다. 제작자도 문서에서 무해하다고 밝혀둔 내용이니 그냥 기다리세요.

클로드 코드와 연결 (터미널)

설정 파일을 손으로 고칠 필요 없습니다. 앞으로는 claude 대신 아래 명령으로 실행하시면 알아서 연결된 상태로 켜집니다.

omniroute launch

확인하는 법

브라우저 주소창에 http://localhost:20128 을 치면 대시보드가 뜹니다. 화면이 뜨면 성공입니다. 안 뜨면 터미널을 닫았는지 확인하세요. 터미널을 닫으면 서버도 같이 꺼집니다.

문제가 생기면

• npm: command not found 가 뜬다 → Node.js가 안 깔렸거나 터미널을 안 껐다 켜신 경우입니다

• 대시보드가 안 열린다 → 터미널을 다시 열고 omniroute 를 치면 서버가 다시 뜹니다

출처: diegosouzapw · https://github.com/diegosouzapw/OmniRoute · MIT 라이선스

2. claude-mem

이제 모든 이야기를 기억합니다

클로드 코드는 창을 닫으면 지금까지 한 얘기를 전부 잊습니다. 다음날 다시 처음부터 설명해야 했던 이유입니다. 이걸 깔면 지난 작업 내용을 요약해서 다음 대화에 자동으로 넣어주고, 예전에 뭘 했는지도 검색해서 찾아줍니다.

설치 방법 A (클로드 코드 안에서, 이게 제일 쉽습니다)

아래 두 줄을 한 줄씩 순서대로 치세요.

/plugin marketplace add thedotmack/claude-mem

/plugin install claude-mem

설치 방법 B (터미널)

위 방법이 안 되면 터미널에서 아래 한 줄로도 됩니다.

npx claude-mem install

이건 하지 마세요

검색하면 가끔 나오는 방법인데, 제작자가 문서에 명시적으로 말린 방식입니다.

npm install -g claude-mem

이렇게 깔면 부품만 깔리고 정작 기억 기능이 동작하지 않습니다. 위의 A 또는 B로만 설치하세요.

확인하는 법

설치 후 클로드 코드를 한 번 껐다 켜세요. 직전에 했던 작업을 언급했을 때 맥락을 알아듣기 시작하면 제대로 동작하는 겁니다.

알아두면 좋은 것

기록에서 빼고 싶은 민감한 내용은 제외할 수 있는 기능이 따로 있습니다. 회사 일이나 개인정보를 다룰 때는 공식 문서의 설정 부분을 한 번 보고 쓰세요.

출처: thedotmack · https://github.com/thedotmack/claude-mem · Apache License 2.0

3. Frontend Design

AI 냄새나는 화면 탈출하세요

AI에게 화면을 맡기면 늘 비슷한 보라색 그라데이션에 똑같이 생긴 버튼이 나옵니다. 이걸 깔면 글꼴과 색을 과감하게 골라줘서, 어디서 본 것 같지 않은 화면이 처음부터 나옵니다. 앤트로픽이 직접 만든 공식 플러그인입니다.

설치 (클로드 코드 안에서)

다운받을 파일이 없습니다. 아래 한 줄을 붙여넣으면 끝입니다.

/plugin install frontend-design@claude-plugins-official

명령어가 안 먹힐 때

앤트로픽 공식 목록은 클로드 코드를 처음 켜면 자동으로 등록됩니다. 드물게 등록이 안 된 경우가 있는데, 그때만 터미널에서 아래를 한 번 치고 다시 시도하세요.

claude plugin marketplace add anthropics/claude-plugins-official

이건 / 없이 터미널에서 치는 명령입니다.

쓰는 법

따로 불러낼 필요 없습니다. 깔아둔 상태에서 평소처럼 화면을 만들어달라고 하면 알아서 적용됩니다. 예를 들어 이런 요청에서 차이가 크게 느껴집니다.

• 음악 스트리밍 앱 대시보드 만들어줘

• AI 보안 스타트업 랜딩페이지 만들어줘

• 다크모드 지원되는 설정 화면 디자인해줘

확인하는 법

/plugin 을 치면 깔린 목록이 나옵니다. 거기에 frontend-design이 있으면 됩니다.

출처: Anthropic (공식) · https://claude.com/plugins/frontend-design

정식 명칭은 Frontend Design입니다. 다른 이름으로 돌아다니는 경우가 있으니 위 주소로 확인하세요.

4. Playwright

AI가 인터넷을 알아서 조작합니다

지금까지 AI는 인터넷을 직접 만질 수 없었습니다. 이걸 깔면 AI가 스스로 브라우저를 열어 페이지를 돌아다니고, 버튼을 누르고, 스크린샷을 찍습니다. 내가 만든 화면을 직접 열어보고 이상한 곳을 찾아 고치는 것도 여기서 나옵니다. 마이크로소프트가 만들었고 앤트로픽 공식 목록에 올라와 있습니다.

설치 (클로드 코드 안에서)

다운받을 파일이 없습니다. 아래 한 줄을 붙여넣으세요.

/plugin install playwright@claude-plugins-official

명령어가 안 먹히면 위 3번의 "명령어가 안 먹힐 때" 부분을 먼저 하고 다시 시도하세요. 둘 다 같은 공식 목록을 씁니다.

쓰는 법

명령어를 외울 필요 없이 평소 말하듯 시키면 됩니다.

• example.com 열어서 스크린샷 찍어줘

• 로그인 폼에 이 이메일로 채워봐줘

• 제출 버튼 누르고 확인 메시지 뜨는지 봐줘

방금 만든 화면을 띄우고 나서 "직접 열어보고 이상한 곳 고쳐줘" 라고 하는 게 가장 체감이 큽니다.

알아두면 좋은 것

이 도구는 AI에게 브라우저를 조작할 수 있는 손을 달아주는 것까지입니다. 이상한 곳을 고치는 건 클로드가 합니다. 처음 실행할 때 브라우저를 받느라 잠시 걸릴 수 있습니다.

확인하는 법

/plugin 을 치면 깔린 목록이 나옵니다. 거기에 playwright가 있으면 됩니다.

출처: Microsoft · https://claude.com/plugins/playwright

5. Task Observer

반복 작업을 탐지하고 자동화합니다

옆에서 지켜보다가 내가 매번 똑같이 시키는 일을 찾아냅니다. 그걸 한 번에 처리하는 기능으로 만들자고 먼저 제안하기 때문에, 오래 쓸수록 시키는 말이 짧아집니다.

앞의 4개와 달리 이건 파일을 받아서 올리는 방식입니다. 정확히는 플러그인이 아니라 스킬이라서 설치 경로가 다릅니다.

1단계 · 파일 받기

이 페이지 아래 첨부된 task-observer-skill.zip 을 누르면 바로 받아집니다. 깃허브에 들어갈 필요 없습니다.

압축을 풀지 마세요. zip 그대로 올리는 겁니다.

2단계 · 코드 실행 켜기 (이거 안 하면 스킬이 안 보입니다)

클로드 설정 → 기능 으로 가서 코드 실행을 켜주세요. 스킬은 이게 켜져 있어야 동작합니다.

3단계 · zip 올리기

1. 커스터마이즈 → 스킬 로 갑니다 (주소로 바로 가려면 claude.ai/customize/skills)

2. + 버튼을 누릅니다

3. 방금 받은 zip 파일을 그대로 올립니다

올리고 나면 모든 대화와 코워크 작업에서 쓸 수 있게 됩니다. 무료 요금제를 포함해 모든 요금제에서 됩니다.

왜 zip 통째로 올려야 하나요

이 스킬은 SKILL.md 한 장과 references 폴더가 같이 있어야 제대로 동작합니다. SKILL.md 하나만 올리면 반쪽짜리로 동작하면서 "뭔가 빠졌다"고 계속 알려줍니다. 제작자가 문서에 명시한 내용입니다. 첨부된 zip은 필요한 파일만 같은 폴더에 담아둔 상태라 그대로 올리면 됩니다.

코워크에서 쓸 때 주의점

코워크에서 쓴다면 첫 작업을 시작할 때 공유 폴더를 하나 지정하고, 앞으로도 계속 같은 폴더를 써야 합니다. 폴더가 바뀌면 그동안 쌓인 관찰 기록을 못 찾습니다.

기존에 폴더에 들어 있던 파일은 건드리지 않으며, 스킬 업데이트도 자동으로 적용되지 않고 검토할 수 있게 따로 모아둡니다.

쓰는 법

작업을 평소처럼 하면 됩니다. 세션을 마무리할 때 "관찰한 거 기록했어?" 라고 한 번 물어보는 게 제작자가 권하는 방식입니다. 시간이 지나면 정기적으로 검토 세션을 잡아서 쌓인 제안을 한 번에 보면 됩니다. 개발 경험이 없어도 쓸 수 있습니다.

출처: Eoghan Henn (rebelytics.com) · https://github.com/rebelytics/one-skill-to-rule-them-all · CC BY 4.0

첨부된 zip은 원본 저장소에서 받은 파일을 그대로 담은 것이며, 라이선스 전문과 제작자 문서가 함께 들어 있습니다. 내용을 고치지 않았습니다.

다운로드

Task Observer 스킬 파일은 아래에 있습니다.

마지막으로

여기 정리한 5개는 모두 원 제작자가 공개한 것이며, 무드모드가 만든 도구가 아닙니다. 설치 방법만 초보자 기준으로 정리한 페이지입니다. 최신 버전과 상세 설정은 각 저장소를 확인하세요.

정리 · @moodmode.ai