Claude Code를 Fullstack 웹 앱 전문가로 바꾸세요 🔌

Source: Dev.to

왜 Claude Code에 Wasp 플러그인이 필요한가

Claude Code는 훌륭한 코딩 어시스턴트이지만, Wasp의 배터리‑포함(full‑stack) 프레임워크 기능을 어떻게 활용해야 하는지 항상 알지는 못합니다.
Wasp은 개발자와 AI가 사랑하는 인기 도구들—React, ExpressJS, Prisma, TanStack Query—위에 구축되었습니다. 이 때문에 Claude는 Wasp의 고수준 추상화 대신 해당 도구들을 직접 사용해 코드를 작성하려고 할 수 있습니다.

• 인증 예시 – Claude에게 Google 인증을 추가해 달라고 요청하면 AuthJS나 Better Auth 같은 라이브러리를 제안할 수 있습니다. Wasp은 몇 줄의 코드만으로 이를 처리할 수 있지만, Claude는 그 바로 가기를 인식하지 못할 수 있습니다.
• 환각 및 오래된 문법 – 신생 프레임워크인 만큼 Claude는 Wasp 패턴을 환각하거나, 폐기된 문법을 사용하거나, 풀스택 앱을 구축하는 방법에 대해 잘못된 가정을 할 수 있습니다.

이러한 문제를 해결하기 위해 Wasp 팀은 Claude를 진정한 Wasp 전문가로 전환시키는 Claude Code 플러그인을 만들었습니다.

Claude를 Wasp 전문가로 만들기

Claude Code는 사용자 정의 명령, 스킬, 훅, 규칙 등을 통해 지식 소스와 가드레일 역할을 할 수 있습니다. Wasp‑Claude 플러그인은 Claude가 Wasp 프로젝트와 원활히 작업할 수 있도록 필수 요소들을 묶어 제공합니다.

설치

Claude 마켓플레이스에서 플러그인을 추가합니다:

claude plugin marketplace add wasp-lang/claude-plugins

프로젝트에 설치합니다:

claude plugin install wasp@wasp-plugins --scope project

Claude Code 세션에서 플러그인을 초기화합니다:

/wasp:init

기능

• 자동 문서화 – 개발 및 디버깅 중에 프로젝트 버전에 맞는 올바른 Wasp 문서를 가져옵니다.
• 오류 방지 – 환각이나 오래된 접근 방식을 피하도록 Wasp‑특화 팁, 패턴, 모범 사례를 제공합니다.
• 가이드 워크플로 – 스킬과 명령을 통해 인증, 이메일, 데이터베이스, 배포 등 Wasp의 배터리‑포함 기능을 단계별로 설정합니다.
• 전체 디버깅 가시성 – 관리형 데이터베이스, 개발 서버를 시작하고 브라우저 콘솔 접근을 연결해 Claude가 전체 스택을 볼 수 있게 합니다.
• 버전 가드레일 – 훅을 통해 Claude가 프로젝트의 Wasp 버전을 확인하고 작업 수행 전에 적절한 LLM‑친화적 문서를 가져오도록 합니다.

예시 명령

다음과 같은 다양한 Wasp 관련 작업을 Claude에게 요청할 수 있습니다:

• “내 앱에 Google 인증을 추가해 줘”
• “데이터베이스를 SQLite에서 PostgreSQL로 마이그레이션하고 실행해 줘”
• “내 앱을 Railway에 배포해 줘”
• “대시보드 구축을 위해 ShadCN UI를 내 앱에 추가하는 데 도움 줘”
• “Wasp의 SaaS 스타터 템플릿을 사용해 새로운 SaaS 앱을 시작해 줘”
• “왜 내 반복 작업이 작동하지 않을까?”

플러그인은 /wasp:help와 같은 슬래시 명령도 제공해 빠른 참고가 가능합니다.

향후 계획

첫 번째 버전은 Claude에게 견고한 Wasp 기본기를 제공하는 데 초점을 맞추었습니다. 향후 업데이트에서는 다음을 추가할 예정입니다:

• 더 많은 가드레일 및 고급 스킬
• 개발 속도를 높이는 추가 워크플로
• Wasp 기반 오픈소스 SaaS 스타터인 Open SaaS 전용 별도 플러그인, SaaS 앱 생성을 간소화

플러그인 개선을 위한 피드백과 아이디어를 언제든 환영합니다.