클로드코드
실전 도구 대백과

① 스킬 (Skills)

AI에게 건네는 "신입 온보딩 매뉴얼"입니다. 폴더 하나가 스킬 하나이고, 그 안에 "이런 작업은 이렇게 하세요"라는 지침(SKILL.md)이 들어 있어요. 디자인 스킬을 깔아두면 디자인 작업 시 클로드가 그 매뉴얼을 꺼내 읽고 전문가답게 일합니다. 범용 AI가 그 분야 전문가로 바뀌는 것이죠.

② MCP (Model Context Protocol)

클로드코드가 원래 다룰 수 있는 건 내 컴퓨터의 파일과 터미널 정도예요. MCP는 여기에 바깥세상으로 통하는 문을 답니다. GitHub·Figma·노션·데이터베이스·웹브라우저 같은 외부 서비스와 직접 대화하게 해주는 표준 규격이에요. 흔히 "AI 세계의 USB-C 포트"로 비유합니다.

③ CLAUDE.md

프로젝트 폴더에 두는 "우리 프로젝트 규칙서"입니다. 대화할 때마다 자동으로 읽히기 때문에, 여기에 규칙을 정리해두면 같은 설명을 반복하지 않아도 됩니다. 단, 매번 통째로 읽히므로 너무 길면 오히려 역효과예요.

AI가 만든 웹사이트는 어딘가 뻔한 모습(비슷한 폰트, 보라색 그라데이션, 알약 모양 버튼)이 되기 쉽습니다. 이 스킬은 그 흔한 패턴을 금지하고, 코드를 짜기 전에 구체적인 디자인 방향을 먼저 정하게 만들어요. 디자인 관련 스킬 중 가장 먼저 깔아볼 기본기.

진짜 무기는 161개 업종별 디자인 룰을 미리 정해놨다는 점입니다. 은행은 장난스러운 디자인·보라핑크 그라데이션 금지, 럭셔리는 빠른 애니메이션 금지(고급스러움은 '느림'에서 나옴), 반대로 키즈 학습앱은 차분한 색이 금지 — 같은 룰이 업종에 따라 완전히 뒤집힙니다. UI 스타일 50여 종, 컬러 팔레트 161개, 폰트 조합 57개, 10개 프레임워크(React·Vue·Flutter·Tailwind) 지원.

저장소 · github.com/nextlevelbuilder/ui-ux-pro-max-skill

Design+Code 창업자가 무료 공개한 라이브러리(웹디자인 62·Codex 10·미디어 2·UI 1). Codex·Claude Code·Cursor 전부 호환. 핵심은 두 가지 — video-to-superprompt: 화면 녹화 영상만 넣으면 레이아웃·모션·컬러·구현 방식까지 상세 프롬프트로 변환. html-to-interaction-prompts: 랜딩페이지 전체를 섹션별 프롬프트로 분해. 한계도 있는데, 인물 사진이 든 화보형 영상은 결과가 뭉개져서 실제 사진 URL을 직접 넣어 보완해야 합니다.

저장소 · github.com/MengTo/Skills

Vercel·Linear를 거친 디자인 엔지니어가 애플의 WWDC 디자인 강연을 17가지 원칙으로 압축한 스킬입니다. 명령어 한 줄로 설치되고, 애플 디자인 외 스킬 4개가 함께 딸려옵니다.

저장소 · github.com/emilkowalski

구글이 공개한 디자인 시스템 검토용 스킬. UI 구성부터 접근성 검사까지 쭉 점검해줍니다. 스크립트나 레퍼런스 파일까지 다 안 가져와도 SKILL.md 하나만 적용해도 검토 결과가 쓸 만하다는 평이 많아요.

저장소 · github.com/google-labs-code/design.md

디자인 취향을 다이얼처럼 조절하는 스킬. "좀 더 미니멀하게", "좀 더 대담하게" 같은 방향 조정을 수치처럼 다룰 수 있게 해줍니다.

AI가 만든 값싸 보이는 모션을 다듬어주는 스킬. 애니메이션 타이밍과 자연스러움을 개선합니다.

텍스트 설명이 아니라 진짜 파일을 만들고 편집합니다. "이 PDF의 표를 엑셀 비교표로 만들어줘", "이 데이터로 파워포인트 만들어줘"가 실제로 열어볼 수 있는 파일로 떨어져요. 워드·PDF·엑셀·파워포인트를 모두 다루므로, 문서 업무가 많다면 가장 실용적인 스킬입니다.

클로드 안에 마케팅팀 하나를 들이는 묶음. 카피라이팅·SEO 감사·랜딩페이지 진단(CRO)·이메일·광고까지 한 번에 깔립니다. "랜딩페이지 진단해줘"라고만 해도 맞는 스킬이 알아서 발동해요.

AI가 쓴 글 특유의 기계적인 문체를 사람이 쓴 듯 자연스럽게 고쳐주는 스킬. 블로그·소개글 작성에 유용합니다.

"Limit reached…" 메시지를 자주 본다면 이것부터. 클로드의 답변에서 부연설명을 걷어내고 핵심만 짧게 답하게 만듭니다. 코드와 기술적 사실은 그대로 두고 잡담만 없애서 출력 토큰이 확 줄어요.

클로드는 세션이 끝나면 내용을 다 잊어버립니다. 이 스킬은 작업을 자동 요약·저장했다가 다음에 켜면 불러와요. "어제 하던 거 이어서"가 실제로 됩니다. 저장은 내 PC 로컬에만 이뤄져 외부 유출이 없습니다.

AI와 나눈 대화를 지식창고처럼 축적·정리해주는 스킬. 흩어진 대화 내용을 나중에 다시 찾아 쓸 수 있게 만듭니다.

불필요한 코드 생성을 막고 작업에 필요한 최소한만 짜게 하는 스킬. AI가 시키지도 않은 기능을 잔뜩 만들어놓는 문제를 줄입니다.

클로드코드 특유의 '복잡병'을 잡아주는 도구. 코드를 더 단순하고 읽기 쉽게 정리해 성능·가독성·유지보수성을 함께 올립니다.

AI에게 코딩을 시키면 묻지도 따지지도 않고 일단 코드부터 쏟아내는 문제를 잡아주는 스킬입니다. 아이디어를 던지면 질문으로 기획을 다듬고 → 작업을 잘게 쪼개고 → 서브에이전트가 각각 실행하고 → 결과를 스스로 검증(TDD)하고 코드리뷰까지. 10년 차 베테랑 개발자의 작업 노하우 14가지가 하나로 합쳐져 있어요. 단, 입문 단계에선 다소 과할 수 있습니다.

나만의 스킬을 직접 만드는 스킬. "이런 스킬 만들어줘"라고 말만 하면 대화형으로 요구사항을 물어보며 완성된 스킬 파일을 만들어줍니다. 같은 지시를 계속 반복하고 있다면 그게 바로 나만의 스킬로 만들 신호예요.

프로젝트가 커질수록 CLAUDE.md도 비대해지는데, 정리할 시간은 없죠. 이 플러그인은 작업이 끝나면 자동으로 회의록을 남기고, 6개 기준으로 자동 채점하며, 누락된 설정까지 진단해줍니다. CLAUDE.md 관리를 클로드에게 맡기는 셈.

클로드코드를 하나의 비서가 아니라 스타트업 하나처럼 굴리는 구성. 기획·디자인 검토·QA/테스트·릴리스 관리·엔지니어링 등 역할별 전문 에이전트 팀을 붙입니다.

주제만 주면 대본·장면·모션그래픽 애니메이션까지 짜서 완성된 영상(MP4)으로 렌더합니다. 릴스·쇼츠, 제품 소개, 데이터를 움직이는 차트 영상에 강해요. 직원 3명 이하 소규모·개인은 무료.

URL을 주고 /clone-website 한 줄이면 사이트를 분해해 깨끗한 Next.js 코드로 다시 지어주는 템플릿. 스크린샷을 보고 흉내내는 게 아니라 브라우저로 실제 사이트를 열어 색·폰트·간격의 실측값을 읽어오고, 에셋도 실제로 받아옵니다. 옛 워드프레스 사이트를 모던 코드로 옮기거나, 잘 만든 사이트를 코드로 배우고 싶을 때 유용.

저장소 · github.com/JCodesMore/ai-website-cloner-template

AI는 학습 시점 이후의 최신 정보를 모릅니다. 그래서 이미 바뀐 옛날 방식으로 코드를 짜다 오류를 내죠. Context7은 라이브러리·프레임워크의 최신 문서를 그때그때 가져와 이 문제를 줄여줍니다. "이 라이브러리 또 바뀌었네…" 하던 분들 필수.

클로드코드의 '사고력'을 한 단계 끌어올려주는 도구. 복잡한 문제를 단계별로 쪼개어 생각하게 만듭니다. 공식 마켓플레이스엔 없지만, 클로드코드에게 "시퀀셜 띵킹 설치해줘"라고 말하면 알아서 찾아 설치해줍니다.

큰 프로젝트에서 AI가 파일을 하나씩 다 뒤지느라 토큰이 폭발하는 문제를 해결합니다. 코드베이스를 미리 '지식 지도'로 인덱싱해 AI가 지도만 보고 바로 찾게 해요. 저장소 설명 기준 토큰을 크게 절약하며, 완전 로컬 실행이라 API 키도 필요 없습니다. Docker·런타임 설치도 불필요.

저장소 · github.com/DeusData/codebase-memory-mcp ※ 설치 명령은 저장소에서 최신값 확인

독립 검색 인덱스로 실시간 웹 검색을 붙입니다. Context7이 "개발 문서"라면 이건 "일반 웹 검색". 리서치 비중이 큰 작업에 유용.

클로드에게 '눈'을 달아주는 도구. 실제 브라우저를 열어 페이지를 이동하고, 폼을 채우고, 스크린샷을 찍고, 자기가 만든 화면을 직접 눌러보며 검증합니다. 단, 복잡한 페이지는 토큰을 많이 먹으니 주의.

Playwright가 브라우저를 조작한다면 이건 브라우저를 디버깅합니다. 콘솔 메시지·네트워크 요청을 읽어 "이 요청이 왜 실패하지?"를 AI가 직접 답할 수 있게 해요.

디자인 도구 Figma의 시안을 실제 코드로 옮길 때 씁니다. 디자인 시스템 파일을 연결해두면 색상·폰트 토큰을 그대로 지켜 작업해줘요. Figma Pro 이상 유료 계정 또는 개발자 모드 사용자만 이용 가능합니다.

자연어로 설명하면 고품질 UI 컴포넌트를 생성해주는 MCP. "코드 한 줄 몰라도 웹사이트 만들기" 조합에서 자주 등장하는 도구입니다.

21st.dev

이미지·영상 생성을 클로드코드에서 바로 호출합니다. Figma MCP와 함께 묶어 상세페이지 제작(디자인 링크 + 이미지·영상 자동 생성)에 활용하는 사례가 많아요.

"그 변경사항 찾아서, 그 파일 읽고, 할 일 등록해줘"를 대화 안에서 한 번에. 이슈 조회·코드 리뷰까지 AI가 직접 수행합니다.

노션과 슬랙을 읽고 정리하고 업데이트합니다. 회의 내용을 노션에 정리하거나, 슬랙 대화를 요약하는 작업을 자동화할 수 있어요.

회의록과 미팅 노트를 클로드가 바로 참고하게 합니다. "지난 회의에서 정한 내용대로 진행해줘" 같은 요청이 가능해져요.

Gmail·노션 등 여러 앱을 AI 에이전트에 연결하는 복잡한 과정을 크게 단축합니다. 앱마다 따로 설정할 필요 없이 Zapier 하나로 묶어 연결.

서비스에서 발생한 에러 로그를 직접 확인해 원인을 분석합니다. 오류를 말로 설명할 필요 없이 "이 에러 봐줘"로 끝.

앱에 로그인·데이터 저장 기능이 필요할 때. 데이터베이스와 회원 인증을 자연어로 관리해, 만든 웹앱을 실제 서비스처럼 작동시킬 수 있습니다.