바이브코딩으로 프론트 뚝딱 만들다 보면 이런 순간 오죠. 로그인 폼도, 대시보드도, 랜딩페이지도 죄다 똑같은 파란 버튼에 각진 카드. Claude가 스스로 디자인을 "창작"하다 보니 어쩔 수 없이 평균으로 수렴하는 겁니다.
Magic MCP(원래 이름은 21st.dev Magic, 지금은 21st MCP)는 이 문제를 다른 방식으로 풉니다. Claude가 UI를 직접 지어내는 대신, 21st.dev에 쌓인 1만 개 넘는 React/Tailwind 컴포넌트에서 골라오거나 그걸 베이스로 변형해서 프로젝트에 심어줘요. v0를 에디터 밖으로 안 나가고 쓰는 느낌이라고 보면 됩니다.
뭘 해결하나
예를 들어 "가격표 섹션 만들어줘, 토글로 월간/연간 전환되게"라고 하면, Magic MCP는 21st.dev 카탈로그에서 실제로 쓰이고 있는 프라이싱 컴포넌트 여러 개를 검색해서 후보를 보여주고, 그중 하나를 골라 지금 프로젝트의 스타일(Tailwind 설정, 기존 컴포넌트 패턴)에 맞춰 코드로 박아 넣어줍니다.
before: Claude가 처음부터 짠 카드 3개짜리 프라이싱 섹션 → 어디서 본 듯한 디폴트 느낌
after: 실제 프로덕션에서 쓰인 애니메이션 토글, 호버 인터랙션까지 딸려있는 컴포넌트가 코드에 그대로 들어옴
로고가 필요할 때 search_logo로 브랜드 로고를 찾아오는 것도 되고, 디자인 영감이 필요하면 get_inspiration으로 레퍼런스도 뽑아줍니다.
어떻게 시작하나
Claude Code 마켓플레이스에서 "21st" 플러그인을 설치하고, 21st.dev/mcp에서 무료 API 키를 받아 Plugins → Configure에서 API_KEY_21ST에 넣으면 끝입니다. 수동으로 붙이고 싶으면 mcpServers 설정에 아래처럼 추가하면 됩니다.
command: npx
args: -y @21st-dev/magic@latest API_KEY="여기에키"
언제 쓰고 언제 쓰지 마라
프론트엔드를 처음부터 짜야 하는데 디자인 감각에 자신 없는 경우, 또는 랜딩페이지·대시보드처럼 "어디서 본 듯한 정형화된 UI"가 오히려 전환율에 유리한 상황에 잘 맞습니다.
이미 사이트에 올라온 Frontend Design 플러그인(/post/435)과 헷갈릴 수 있는데, 그쪽은 Claude에게 디자인 감각과 미적 방향을 코칭해서 "직접 창작"하게 만드는 쪽이고, Magic MCP는 실전에서 검증된 남의 컴포넌트를 "가져다 쓰는" 쪽입니다. 완전히 오리지널한 브랜드 아이덴티티가 필요하면 Frontend Design 쪽이, 빠르게 돌아가는 화면이 급하면 Magic MCP 쪽이 낫습니다.
디자인 시스템이 이미 확고한 팀 프로젝트에 쓰면 톤이 안 맞아서 오히려 손이 더 갈 수 있어요. AI 생성 기능(generate, iterate_generation)은 계정에 AI access가 켜져 있어야 동작하는데, 안 켜져 있으면 ai_subscription_required 에러만 반복해서 봅니다.
한계
컴포넌트 검색은 결국 21st.dev 카탈로그 안에서만 도는 거라, 아주 특이한 인터랙션이나 국내 서비스 특유의 UI는 기대하기 어렵습니다. 가져온 컴포넌트가 프로젝트 디자인 토큰과 100% 맞아떨어지진 않아서, 색상·간격 정도는 손봐야 하는 경우가 많아요.
출처: https://github.com/21st-dev/magic-mcp · https://21st.dev/mcp
댓글 0
첫 댓글을 남겨보세요!