claude code 추천 플러그인, Next.js 빌드에서 살아남은 MCP 셋업 6개

Claude Code에서 ‘플러그인’을 찾고 있다면, 지금은 전통적인 VS Code 확장보다 MCP 서버, 훅, CLI 연동을 먼저 보는 게 실전적입니다. 제가 Next.js 대시보드와 Supabase 연동 작업을 굴려보며 가장 자주 남긴 조합은 Filesystem, GitHub, Context7, Playwright, Sequential Thinking, Sentry였습니다.

Filesystem, Context7, Playwright부터 연결해 작은 기능 하나를 끝까지 수정·검증해보세요. 성공한 흐름만 남기면 나만의 Claude Code 작업 템플릿이 됩니다.

핵심은 간단합니다. 코드 수정은 Claude Code에게 맡기되, 문서 검색·브라우저 테스트·이슈 추적·에러 확인은 플러그인처럼 붙인 도구로 나눠야 삽질이 줄어듭니다.

Claude Code에서 플러그인처럼 쓰는 도구의 정체

Claude Code는 에디터 확장을 잔뜩 붙이는 방식보다, 터미널 안에서 프로젝트를 읽고 명령을 실행하는 흐름에 가깝습니다. 그래서 여기서 말하는 확장은 대부분 MCP(Model Context Protocol) 서버입니다.

MCP는 Claude가 외부 도구와 안전하게 대화하도록 이어주는 규격입니다. 예를 들어 Context7은 최신 라이브러리 문서를 가져오고, Playwright MCP는 실제 브라우저를 열어 UI를 점검하게 해줍니다. GitHub MCP는 이슈와 PR 맥락을 붙일 때 편합니다.

먼저 깔아볼 만한 6개 조합

1. Filesystem MCP: 프로젝트 읽기 권한을 명확히 나누기

가장 기본이지만 중요합니다. Claude Code가 어디까지 파일을 읽고 수정해도 되는지 경로를 제한할 수 있어, 여러 프로젝트를 동시에 다루는 사람에게 특히 좋습니다.

예를 들어 개인 실험 폴더와 회사 저장소를 같은 노트북에 둔다면, 작업 디렉터리만 허용해두는 습관이 필요합니다. 처음에는 귀찮아도 나중에 잘못된 경로를 건드리는 위험을 줄입니다.

2. Context7 MCP: 오래된 답변 대신 최신 문서 붙이기

Next.js, Tailwind CSS, Supabase처럼 버전 변화가 빠른 도구는 모델의 기본 지식만 믿으면 막히는 경우가 있습니다. Context7은 라이브러리 문서를 현재 맥락에 끌어와서 “이 버전에서는 어떤 API를 써야 하는지” 확인하는 용도로 좋습니다.

제가 App Router 기반 인증 페이지를 정리할 때도, 예전 Pages Router 예제가 섞이면 수정이 꼬였습니다. 이럴 때 “Context7로 Supabase 최신 auth 문서를 확인하고, 현재 코드에 맞춰 수정해줘”라고 요청하면 방향이 훨씬 선명해집니다.

3. Playwright MCP: 눈으로 확인하던 UI 테스트를 줄이기

Claude Code가 코드를 고쳐도 버튼이 실제로 눌리는지, 모달이 뜨는지, 폼 검증이 맞는지는 별개입니다. Playwright MCP를 붙이면 브라우저 기반 확인을 에이전트 흐름에 넣을 수 있습니다.

작은 SaaS 랜딩 페이지를 고친다고 가정해보면, “가격 카드 CTA 클릭 → 회원가입 모달 → 이메일 입력 오류 메시지 확인” 같은 흐름을 사람이 매번 클릭하지 않아도 됩니다. 다만 테스트 시나리오를 너무 크게 주면 실패 원인 추적이 어려워져, 한 번에 한 화면씩 맡기는 편이 낫습니다.

4. GitHub MCP: 이슈와 PR 맥락을 코드 작업에 붙이기

GitHub 저장소를 중심으로 일한다면 유용합니다. 단순히 파일만 보는 것이 아니라, 이슈 설명·PR 코멘트·브랜치 흐름을 함께 읽게 만들 수 있습니다.

주의할 점은 토큰 권한입니다. 처음부터 repo 전체 권한을 넓게 주기보다, 필요한 저장소와 작업 범위부터 작게 시작하세요.

5. Sequential Thinking MCP: 복잡한 리팩터링을 단계로 쪼개기

결제 로직, 인증 미들웨어, 데이터 마이그레이션처럼 한 번에 손대기 부담스러운 작업에 어울립니다. 코드 작성 능력을 갑자기 올려준다기보다, Claude가 계획을 세우고 검증 포인트를 나누는 데 도움을 줍니다.

특히 “먼저 영향 범위를 목록화하고, 수정 파일을 제안한 뒤, 테스트 명령까지 제시해줘”처럼 시키면 결과가 안정적입니다.

6. Sentry MCP: 운영 에러를 바로 코드 수정 맥락으로 연결

Sentry를 이미 쓰고 있다면 검토할 만합니다. 에러 스택과 발생 환경을 Claude Code 작업 맥락으로 가져와 원인 후보를 좁히는 방식입니다.

단, 운영 로그에는 개인정보나 민감한 값이 섞일 수 있습니다. 마스킹 설정과 접근 권한을 먼저 확인한 뒤 연결하는 것이 안전합니다.

비교표: 내 상황에는 무엇부터 붙일까?

추천 대상별로 고르면 더 쉽습니다

혼자 사이드프로젝트를 만드는 빌더

Filesystem + Context7 + Playwright를 먼저 권합니다. 코드 수정, 문서 확인, 화면 테스트가 바로 이어져서 작은 제품을 빠르게 다듬기 좋습니다. 여기에 배포 후 에러가 쌓이면 Sentry를 추가하면 됩니다.

팀 저장소에서 일하는 개발자

GitHub MCP + Filesystem + Sequential Thinking이 우선입니다. 이슈의 의도와 PR 리뷰 맥락을 놓치지 않는 것이 중요하기 때문입니다. 권한 관리는 팀 정책에 맞춰 별도 토큰을 쓰는 편이 안전합니다.

문서가 자주 바뀌는 스택을 쓰는 사람

Context7의 체감이 큽니다. 특히 “최신 공식 문서 기준으로 답해줘”라는 문장을 프롬프트에 넣으면, Claude가 오래된 패턴으로 돌아가는 일을 줄일 수 있습니다.

실제 작업 예시: 로그인 버그를 고치는 흐름

가상의 예로, Supabase 로그인 후 대시보드로 이동하지 않는 버그가 있다고 해보겠습니다. 저는 먼저 Claude Code에 “관련 파일을 찾고, 인증 흐름을 요약한 뒤 수정 계획만 제안해줘”라고 시킵니다.

그다음 Context7로 Supabase Auth 문서를 확인하게 하고, 수정 후 Playwright로 로그인 폼 동작을 검증합니다. 실패하면 에러 메시지와 콘솔 로그를 다시 Claude에게 넘겨 작은 단위로 고칩니다. 이 흐름의 장점은 ‘코드 작성 → 문서 확인 → UI 검증’이 한 세션 안에서 이어진다는 점입니다.

자주 막히는 지점

Q. Claude Code에 공식 플러그인 마켓이 있나요?

일반적인 앱스토어식 마켓을 기대하면 다르게 느껴질 수 있습니다. 현재 실전에서는 MCP 서버, 훅, slash command, 외부 CLI를 조합해 확장하는 방식으로 이해하는 편이 맞습니다.

Q. 처음부터 여러 MCP를 다 연결해도 되나요?

가능은 하지만 추천하지 않습니다. 연결이 많아질수록 권한, 속도, 실패 원인을 추적하기 어려워집니다. 먼저 2~3개로 자주 쓰는 작업을 안정화한 뒤 늘리세요.

Q. Cursor나 ChatGPT와 같이 써도 되나요?

됩니다. Cursor는 에디터 안에서 빠른 수정과 탐색에 좋고, Claude Code는 터미널 중심의 작업 자동화에 강점이 있습니다. ChatGPT는 요구사항 정리나 긴 문서 초안 작성용으로 분리하면 역할이 겹치지 않습니다.

오늘 바로 할 일

새 프로젝트에 전부 붙이기보다, 현재 가장 자주 막히는 지점을 하나 고르세요. 문서 때문에 막히면 Context7, UI 확인이 번거로우면 Playwright, 이슈 맥락이 흩어지면 GitHub MCP부터 시작하면 됩니다.

설치 후에는 첫 프롬프트를 이렇게 짧게 잡아보세요. “현재 저장소 구조를 읽고, 이 작업에 필요한 파일과 확인 명령만 먼저 제안해줘.” Claude Code를 코딩 비서가 아니라 작업 동료처럼 쓰기 시작하는 첫 단계입니다.

관련 링크

• 관련 태그 더 보기
• 카테고리 더 보기
• 검색 결과 더 보기
• 참고 링크