바이브코딩으로 랜딩페이지 하나 뚝딱 만들었는데, 어디서 본 듯한 보라색 그라데이션에 둥근 버튼... 결국 다른 사이트 뒤져서 컴포넌트 골라 복붙하고 스타일 다시 맞추느라 시간 다 썼던 경험, 있으실 겁니다. Magic MCP는 그 검색-복붙 과정을 대화 안에서 끝내줍니다.
뭔가요
21st.dev가 만든 MCP 서버로, 원래 이름이 Magic이었다가 지금은 21st MCP로 통합됐습니다(예전 설정도 그대로 작동합니다). React/Tailwind 컴포넌트 1만 개 이상을 검색하거나, 자연어 설명만으로 새 컴포넌트를 생성해서 에디터에 바로 삽입해주는 도구입니다. v0나 Figma Make랑 비슷한 포지션인데, 채팅 밖으로 나가지 않고 에디터 안에서 끝난다는 게 차이입니다.
어떻게 해결하나
로그인 폼이 필요하면 이렇게 요청할 수 있습니다.
```
로그인 폼 만들어줘. 21st에서 괜찮은 컴포넌트 있으면 찾아서 써줘.
```
`search` 도구가 후보 컴포넌트 몇 개를 보여주고, 마음에 드는 걸 고르면 `get_component`로 실제 코드를 가져와 프로젝트에 삽입합니다. 딱 맞는 게 없으면 `generate`로 설명만 던져서 새로 만들 수도 있고, `search_logo`로 브랜드 로고를 SVG/JSX로 바로 찾아 넣을 수도 있습니다.
어떻게 시작하나
CLI로 한 번에 설정하는 게 가장 편합니다.
```
npx @21st-dev/cli@latest init --client claude
```
수동으로 붙이고 싶으면 MCP 설정에 이렇게 추가하면 됩니다.
```json
{
"mcpServers": {
"21st": {
"url": "https://21st.dev/api/mcp",
"headers": { "x-api-key": "YOUR_21ST_API_KEY" }
}
}
}
```
API 키는 21st.dev/mcp에서 무료로 발급받을 수 있습니다.
언제 쓰고 언제 쓰지 말지
프론트엔드 화면 작업할 때, 컴포넌트 아이디어가 안 떠오를 때, 로고 하나 급하게 삽입해야 할 때 유용합니다. 반대로 이미 확고한 디자인 시스템이 있는 팀 프로젝트라면 여기서 가져온 컴포넌트가 오히려 스타일을 깨뜨릴 수 있습니다. 이런 경우엔 Vibers에도 이미 올라온 Frontend Design 플러그인이 더 맞는 선택입니다 — Frontend Design은 미적 판단 과정 자체를 가르치는 쪽이고, Magic MCP는 실제 소스 코드를 즉시 가져다주는 쪽이라 서로 보완 관계에 가깝습니다.
한계
AI 생성 기능(`generate`, `iterate_generation`)은 계정에 AI 액세스가 활성화돼 있어야 쓸 수 있고, 무료 티어에서는 제한이 있을 수 있습니다. 그리고 철저히 React/Tailwind 전제라 다른 프레임워크 쓰는 프로젝트엔 안 맞습니다. 생성 품질도 프롬프트에 따라 편차가 꽤 있어서, 검색으로 기존 컴포넌트 가져오는 쪽이 더 안정적입니다.
출처
댓글 0
첫 댓글을 남겨보세요!