개발자를 위한 MCP 추천(6) - Magic MCP 설치 및 사용방법

안녕하세요! 갓대희입니다.

오늘은 최근 개발자들도 Design요소, 간단한 퍼블리싱은 퍼블리셔가 없어도 개발해야하는 방향이 되어가고 있는 상황에 이와 관련된 MCP도 알아보면 좋을 것 같아서 그 첫번째로 Magic MCP라는것에 대해 아주 간단하게 살펴보려고 한다.

 

 

언제 Magic MCP를 써야 할까?

프론트엔드 개발하다 보면 비슷비슷한 컴포넌트를 계속 만들게 된다.

버튼 하나 만들어도 기본 스타일, 호버 효과, 반응형, 접근성까지 신경 써야 하고, 간단한 카드 컴포넌트도 만들다 보면 생각보다 시간이 오래 걸린다.

Magic MCP는 이런 반복 작업을 자동화해준다. AI한테 "이런 버튼 만들어줘"라고 하면 실제로 쓸 수 있는 코드를 바로 생성해기 떄문에, 프로토타입 만들 때나 UI 빠르게 구성해야 할 때 특히 유용하다.

 

다만... 예전에는 베타 서비스 기간에는 무료였다고 하는데, 이젠 Credit제한으로 몇번 사용해보지 못한다. 간단하게 이런 MCP가 있다라는 정도로 내용을 살펴보도록 하자.  ( 2025-10월 초 Billing 정책)

 

Magic MCP가 뭔데?

Magic MCP(Model Context Protocol)는 21st.dev에서 만든 AI 기반 UI 생성 도구이다. 

  

핵심 기능

• AI 기반 생성: 자연어로 설명하면 컴포넌트를 만들어준다
• 멀티 IDE 지원: Cursor, Windsurf, VSCode, Cline에서 사용 가능하다
• 실시간 미리보기: 생성된 컴포넌트를 바로 확인할 수 있다
• TypeScript 지원: 타입 안정성이 보장된다
• SVGL 통합: 로고나 브랜드 자산도 쉽게 추가할 수 있다
• 3가지 변형 제공: 한 번 요청하면 3개의 다른 디자인을 보여준다

 

Magic UI 라이브러리와의 관계

Magic MCP는 Magic UI라는 컴포넌트 라이브러리를 기반으로 작동한다. Magic UI는 21st.dev에서 제공하는 React 컴포넌트 모음인데, 이 컴포넌트들이 Magic MCP를 통해 자동으로 생성된다.

• React + TypeScript: 최신 React 패턴을 사용한다
• Tailwind CSS: 커스터마이징이 쉽다
• Framer Motion: 부드러운 애니메이션을 기본 제공한다
• shadcn/ui 호환: 기존 프로젝트에 바로 통합 가능하다
• 접근성: ARIA 속성과 키보드 네비게이션을 지원한다

 

설치하고 설정하기

1단계: 필수 준비물

• Node.js: LTS 버전을 권장한다. node --version으로 확인하자
• IDE: VSCode, Cursor, Windsurf, Cline 중 하나
• 인터넷: API 통신이 필요하다
• API 키: 21st.dev에서 무료로 받을 수 있다

2단계: API 키 받기

Magic MCP를 쓰려면 API 키가 필요하다. 베타 기간엔 무료.

API 키 받는 법

Magic Console에 접속한다.

 

GitHub나 Google 계정으로 로그인한다.

다시 상기 URL의 대시 보드 접속 > "Setup Magic MCP"를 클릭한다.

 

나의 경우는 cursor로 진행을 해 보겠다.

 

 "Generate API KEY" 클릭

 

생성된 키는 복사해서 안전하게 보관하자. 해당 화면 가이드대로 진행하여 쉽게 cursor에 MCP 연동을 진행 하였다.

MCP 설정 파일을 보면 다음과 같이 설정 파일에 잘 추가되어있는것을 볼 수 있다.

 

⚠️ API 키 관리 주의
API 키는 절대 GitHub에 커밋하거나 공개하면 안 된다. 환경 변수나 VSCode 설정에 안전하게 저장해야 한다.

 

3단계:  직접 설치 방법

API Key만 있다면 다음과 같이 직접 설치하여 사용도 가능 하다.

 

방법 1: CLI 자동 설치

// VSCode

npx @21st-dev/cli@latest install vscode --api-key YOUR_API_KEY

// Cursor

npx @21st-dev/cli@latest install cursor --api-key YOUR_API_KEY

// Windsurf

npx @21st-dev/cli@latest install windsurf --api-key YOUR_API_KEY

YOUR_API_KEY 부분은 아까 받은 실제 API 키로 바꾸자.

장점
• 명령어 하나로 끝난다.
• 설정 파일을 자동으로 생성한다.
• 경로 걱정이 없다.
• 업데이트할 때도 똑같이 다시 실행만 하면 된다.

 

방법 2: 수동 설정 (세밀하게 조정하고 싶을 때)

설정을 직접 만지고 싶거나, CLI가 안 되면 이 방법을 써보자.

.vscode/mcp.json 만들기

프로젝트 폴더에 .vscode 폴더를 만들고 mcp.json 파일을 생성하자.

{
  "mcp": {
    "inputs": [
      {
        "type": "promptString",
        "id": "apiKey",
        "description": "21st.dev Magic API Key",
        "password": true
      }
    ],
    "servers": {
      "@21st-dev/magic": {
        "command": "npx",
        "args": ["-y", "@21st-dev/magic@latest"],
        "env": {
          "API_KEY": "${input:apiKey}"
        }
      }
    }
  }
}

이 설정은 VSCode 시작할 때 API 키를 입력하라고 물어본다. "password": true 옵션 덕분에 입력 내용이 가려진다.

💡 전역 설정으로 하고 싶으면
프로젝트마다 설정하기 귀찮으면 사용자 전역 설정에 넣을 수 있다:

1. Ctrl + Shift + P (Mac: Cmd + Shift + P)
2. "Preferences: Open User Settings (JSON)" 선택
3. 위와 똑같은 내용을 붙여넣는다

 

방법 3: 다른 IDE 설정

Cursor나 Windsurf를 쓰면 설정 파일 위치가 다르다:

• Cursor: ~/.cursor/mcp.json
• Windsurf: 프로젝트 폴더의 .windsurf/mcp.json
• Cline: 프로젝트 폴더의 .cline/mcp.json

JSON 내용은 VSCode와 똑같다.

 

4단계: 설치확인

확인 방법

1. VSCode / Cursor / Claude Desktop 등을 재시작한다. 
2. AI 에이전트 채팅창을 연다 (보통 사이드바에 있다)
3. /ui를 입력해서 자동완성이 나오는지 확인한다.
4. API 키를 입력하라는 창이 뜨면 성공이다!

또는.. 육안으로도 다음과 같이 본인이 사용하는 Tools에서 설치 확인을 할수도 있다.

공식 문서에 나온 테스트 명령어로 한 번 더 확인해보자:

/ui create a basic button

 

간단히 Claude CLI에 연동된 상태에서 확인하였을때에는 4가지 툴이 연동되어있는 것으로 보인다. 각각에 대해서 좀더 자세히 알아보자.

 

Magic MCP의 4가지 도구

Magic MCP를 설치하면 4가지 강력한 도구를 사용할 수 있다. 각각의 도구는 특화된 기능을 제공한다.

1️⃣ Component Builder (컴포넌트 생성기)

주요 기능

사용자가 새로운 UI 컴포넌트를 요청할 때 이 도구를 사용한다. /ui, /21, /21st 등을 언급하거나 버튼, 입력창, 대화상자, 테이블, 폼, 배너, 카드 또는 기타 React 컴포넌트를 요청할 때 작동한다.

사용 예시

/ui create a button with blue background and white text
/21 make a responsive card component with image and text
/21st build a modal dialog with close button

생성 가능한 컴포넌트

• Button: 다양한 스타일과 상태를 가진 버튼
• Input: 텍스트, 이메일, 비밀번호 입력 필드
• Dialog/Modal: 팝업 대화상자와 모달 창
• Table: 정렬, 필터링 기능이 있는 테이블
• Form: 유효성 검사가 포함된 폼
• Card: 이미지, 텍스트, 액션 버튼이 있는 카드
• Banner: 알림이나 프로모션 배너

주요 파라미터

• message: 사용자의 전체 메시지
• searchQuery: 컴포넌트 검색 쿼리 (2~4단어)
• absolutePathToCurrentFile: 현재 파일 경로
• absolutePathToProjectDirectory: 프로젝트 루트 경로

 

/ui로 호출할 수 있다고 되어 있는것으로 보이지만 동작하지 않아 직접 요청하여 호출해보았다.

 cli안에서 작업해주는게 아닌 web을 호출하여 작업을 해준다.

특별한 점
한 번 요청하면 여러가지 다른 디자인 변형을 보여준다. 마음에 드는 것을 골라서 바로 사용할 수 있다.

💡 언제 쓰면 좋을까?
- 프로젝트에 완전히 새로운 컴포넌트가 필요할 때
- 프로토타입을 빠르게 만들 때
- 디자인 시스템을 구축할 때

 

2️⃣ Component Inspiration (컴포넌트 영감 찾기)

주요 기능

21st.dev 라이브러리에서 기존 컴포넌트를 검색하고 미리보기할 수 있다. "이런 느낌의 컴포넌트 없을까?" 컴포넌트 아이디어를 얻거나 미리보기를 확인할 때 사용 사용한다.
이 도구는 새 코드를 생성하지 않고, 21st.dev에서 매칭되는 컴포넌트 데이터와 미리보기를 보여준다.

사용 예시

Show me modern pricing card examples
Find animated button components
Search for dashboard card layouts

 

반환 정보

• JSON 데이터: 컴포넌트의 구조화된 정보
• 미리보기 링크: 실제 동작을 볼 수 있는 링크
• 코드 스니펫: 바로 사용 가능한 코드 조각
• 관련 컴포넌트: 비슷한 다른 컴포넌트 추천

주요 파라미터

• message: 사용자의 전체 메시지
• searchQuery: 검색할 컴포넌트 키워드 (2~4단어)

 

ex) 다음과 같이 질의 해보았다.

 

ex) 응답 결과

## 3개의 모던 Pricing Card 템플릿

### 첫 번째: Popular Badge 가격표
Next.js + shadcn/ui 기반
Pro 티어에 그라디언트 "인기" 배지
Framer Motion 애니메이션 효과
반응형 그리드 (모바일: 세로 정렬, 데스크톱: 3열)

### 두 번째: 애니메이션 그라디언트 가격표
Framer Motion 중심 디자인
Pro 티어는 검은 배경에 흰 텍스트 (반전 효과)
동적 그라디언트 애니메이션

### 세 번째: 인디고 강조 가격표
순수 Tailwind CSS (의존성 최소화)
중앙 카드 전체가 인디고 배경
커스텀 SVG 체크 아이콘


## Magic MCP의 역할
21st.dev의 방대한 UI 컴포넌트 라이브러리에서 관련 예제 검색
각 컴포넌트의 디자인 특징과 기술 스택 정보 제공
실제 구현 가능한 컴포넌트 코드 제공 준비 완료

 

💡 활용 팁
프로젝트 시작 전에 이 도구로 디자인 방향을 잡으면 시간을 크게 절약할 수 있다. 마음에 드는 컴포넌트를 찾으면 Component Builder로 커스터마이징할 수 있을 것 같다.
- 어떤 스타일의 컴포넌트를 만들지 고민될 때
- 여러 디자인 옵션을 비교하고 싶을 때
- 팀과 디자인을 논의하기 전에 레퍼런스가 필요할 때

 

3️⃣ Component Refiner (컴포넌트 개선기)

주요 기능

이미 만들어진 컴포넌트를 개선하고 업그레이드할 때 사용한다. 디자인 개선, 애니메이션 추가, 접근성 향상 등이 가능하다.

사용 예시

Improve this button with hover animation
Add accessibility features to this form
Make this card component responsive
Refine the color scheme of this navbar

개선 가능한 영역

• 디자인: 색상, 간격, 타이포그래피 개선
• 애니메이션: 부드러운 전환 효과 추가
• 반응형: 모바일/태블릿/데스크톱 대응
• 접근성: ARIA 속성, 키보드 네비게이션
• 성능: 렌더링 최적화, 코드 간소화
• 다크모드: 다크 테마 지원 추가

✨ 단순히 코드만 주는 게 아니라 구현 가이드도 함께 제공한다. "왜 이렇게 개선했는지" 설명해주기 때문에 학습 효과도 있다.

4️⃣ Logo Search (로고 검색기)

주요 기능

SVGL 라이브러리와 연동해서 유명 브랜드 로고를 JSX, TSX, SVG 형식으로 가져올 수 있다. 회사/기술 로고가 필요할 때 직접 찾아서 다운로드할 필요가 없다.

사용 예시

/logo GitHub
/logo React, Vue, Angular
/logo Microsoft Office
Search for Discord logo in TSX format

지원 형식

• TSX: TypeScript React 컴포넌트
• JSX: JavaScript React 컴포넌트
• SVG: 순수 SVG 마크업

추가 기능

• 단일/다중 검색: 한 번에 여러 로고 검색 가능
• 카테고리 필터: 기술, 회사, SNS 등으로 분류
• 테마 지원: 라이트/다크 버전 자동 제공
• import 가이드: 바로 사용 가능한 import 문 제공

주요 파라미터

• queries: 로고를 찾을 회사명 목록 (예: ["discord", "github", "slack"])
• format: 출력 형식 - "JSX", "TSX", "SVG" 중 선택

반환 정보

// 컴포넌트 이름: GitHubIcon
// 컴포넌트 코드: [완성된 React 컴포넌트]
// Import 방법: import { GitHubIcon } from '@/components/icons'
// 사용 예시: <GitHubIcon className="w-6 h-6" />

💡 활용 방법
포트폴리오 사이트나 기술 스택 페이지 만들 때 특히 유용하다. "React, TypeScript, Tailwind 로고 넣어줘" 하면 금방 완성된다.
- 파트너 로고 섹션을 만들 때
- 소셜 미디어 아이콘이 필요할 때
- 기술 스택 소개 페이지를 만들 때

● 로고를 검색해서 추가하겠습니다.

● magic - logo_search (MCP)(queries: ["react","typescript","tailwind"], format: "TSX")
  ⎿  {
       "icons": [
         {
     … +48 lines (ctrl+o to expand)

● React, TypeScript, Tailwind CSS 로고를 찾았습니다!

  ---
  📦 로고 컴포넌트

  1. React Icon (Preact 스타일)

  const PreactIcon: React.FC = () => (
    <svg viewBox="0 0 256 296" width="256" height="296" xmlns="http://www.w3.org/2000/svg">
      {/* Purple hex with white atom symbol */}
    </svg>
  )

  2. TypeScript Icon

  const TypeScriptIcon: React.FC = () => (
    <svg viewBox="0 0 256 256" width="256" height="256" xmlns="http://www.w3.org/2000/svg">
      {/* Blue square with "TS" text */}
    </svg>
  )

  3. Tailwind CSS Icon

  const TailwindCSSIcon: React.FC = () => (
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 54 33">
      {/* Cyan wave pattern */}
    </svg>
  )

  ---
  🎯 사용 방법

  1단계: 아이콘 컴포넌트 생성
  각 로고를 별도 파일로 저장 (예: PreactIcon.tsx, TypeScriptIcon.tsx, TailwindCSSIcon.tsx)

  2단계: Import 후 사용
  import { PreactIcon, TypeScriptIcon, TailwindCSSIcon } from '@/icons';

  // 사용 예시
  <div className="flex gap-4">
    <PreactIcon />
    <TypeScriptIcon />
    <TailwindCSSIcon />
  </div>

  이 로고들을 프로젝트에 추가하시겠습니까? 파일을 생성해드릴까요?

 

언제 Magic MCP를 쓰면 좋을까?

프론트엔드 개발하다 보면 비슷비슷한 컴포넌트를 계속 만들게 된다. 버튼 하나 만들어도 기본 스타일, 호버 효과, 반응형, 접근성까지 신경 써야 하고, 간단한 카드 컴포넌트도 만들다 보면 생각보다 시간이 오래 걸린다.

Magic MCP는 이런 반복 작업을 자동화해준다. AI한테 "이런 버튼 만들어줘"라고 하면 실제로 쓸 수 있는 코드를 바로 생성해주기 때문에, 프로토타입 만들 때나 UI 빠르게 구성해야 할 때 특히 유용하다.

도구 선택 가이드

상황에 따라 어떤 도구를 쓸지 이 표를 참고하자:

상황	사용할 도구	명령어 예시
새 컴포넌트가 필요해	component_builder	/ui create a hero section
로고를 추가하고 싶어	logo_search	/logo Google Microsoft
디자인 아이디어가 필요해	component_inspiration	/21st show pricing tables
기존 컴포넌트를 개선하고 싶어	component_refiner	/ui refine with animations

 

활용 예시

시나리오 1: 새 프로젝트 시작하기

상황

랜딩 페이지를 급하게 만들어야 한다. 히어로 섹션, 기능 카드, CTA 버튼이 필요하다.

해결 과정

1. 영감 찾기: "Show me modern hero section examples" → Component Inspiration으로 좋은 디자인 찾기
2. 컴포넌트 생성: "/ui create a hero section with headline, description, and CTA button" → Component Builder로 생성
3. 로고 추가: "/logo React, TypeScript, Tailwind" → Logo Search로 기술 스택 로고 추가
4. 개선: "Add smooth scroll animation to CTA button" → Component Refiner로 UX 개선

 

시나리오 2: 기존 컴포넌트 업그레이드

상황

예전에 만든 버튼이 있는데 디자인이 구식이다. 접근성도 부족하고 모바일에서 작동이 이상하다.

해결 과정

Refine this button component:
- Add modern hover animation
- Make it fully accessible (ARIA labels, keyboard navigation)
- Ensure responsive sizing for mobile
- Add loading state support
- Implement dark mode variant

Component Refiner가 개선된 코드와 함께 구현 가이드를 제공한다. "왜 이렇게 바꿨는지" 설명이 있어서 배우면서 적용할 수 있다.

 

시나리오 3: 디자인 시스템 구축

상황

회사 디자인 시스템을 만들어야 하는데 기본 컴포넌트가 20개 넘게 필요하다.

전략

1. Component Inspiration: 유명 디자인 시스템(Ant Design, Material-UI) 스타일 검색
2. Component Builder: 각 컴포넌트 베이스 생성 (Button, Input, Card, Modal 등)
3. Component Refiner: 회사 브랜드 컬러와 타이포그래피로 일괄 적용
4. Logo Search: 파트너사 로고 컴포넌트 자동 생성

 

팁

💡 효율적으로 쓰는 법

1. 명령어를 잘 쓰기
• 명확하고 구체적으로: "버튼"보다 "큰 파란색 버튼"
• 효과를 명시: "애니메이션", "호버 효과", "그림자"
• 맥락을 제공: "히어로 섹션용", "CTA용"
• 상태를 언급: "disabled 상태", "로딩 상태"

2. 4가지 도구를 단계적으로 활용
① Inspiration으로 방향 잡기
② Builder로 빠르게 생성하기
③ Refiner로 세밀하게 다듬기
④ Logo Search로 브랜딩 완성하기

3. 3가지 변형 활용하기
• Component Builder는 항상 3가지 디자인을 제공한다
• A/B 테스트용으로 활용하거나
• 팀원들에게 보여주고 투표로 결정하자

4. 학습 도구로 활용
• Component Refiner의 구현 가이드를 꼭 읽자
• "왜 이렇게 바꿨는지" 이해하면 실력이 는다
• 생성된 코드의 Tailwind 클래스 의미를 파악하자

5. 성능 최적화
• 애니메이션이 많은 페이지는 lazy loading 고려
• React.memo로 불필요한 리렌더링 방지
• 큰 컴포넌트는 code splitting 적용

 

트러블슈팅 & FAQ

Q: API 키를 넣었는데 안 된다

A: 이것들을 확인해보자:
• API 키에 공백이나 이상한 문자가 없는지
• Magic Console에서 키가 활성화되어 있는지
• IDE를 완전히 재시작했는지
• 인터넷 연결이 안정적인지

Q: 4가지 도구 중 일부만 보인다

A: Magic MCP 버전을 확인하자:
• npx @21st-dev/magic@latest로 최신 버전 설치
• IDE를 재시작한 후 다시 확인
• 설정 파일의 args에 @latest가 있는지 체크

Q: Component Refiner가 원하는 대로 안 개선해준다

A: 요청을 더 구체적으로 하자:
• Before: "이 컴포넌트 개선해줘"
• After: "이 버튼에 hover 시 scale 1.05 애니메이션, focus-visible 링, WCAG AA 색상 대비 적용해줘"
• 현재 파일 경로를 정확히 알려주자

Q: Logo Search에서 원하는 로고가 안 나온다

A: SVGL 라이브러리에 있는 로고만 검색된다:
• SVGL 웹사이트에서 미리 확인 가능
• 없는 로고는 직접 SVG 파일을 찾아야 한다
• 비슷한 이름으로 검색해보자 (예: "MS Office" → "Microsoft Office")

Q: 생성된 컴포넌트를 상업적으로 써도 되나?

A: MIT 라이선스니까 상업적 사용이 가능하다:
• 프로덕션 배포 전엔 꼭 코드 리뷰와 테스트를 해야 한다
• 생성된 코드는 자유롭게 수정 가능하다
• 라이선스 고지는 필요 없지만 권장한다

Q: 베타가 끝나면 가격이 어떻게 되나?

A: 아직 공식 발표된 가격 정책은 없다:
• 21st.dev 공식 발표를 기다려야 한다
• 지금은 API 키만 있으면 완전 무료다
• 베타 사용자에게 할인 혜택이 있을 가능성이 있다

 

마무리 하며

Magic MCP는 "코드를 어떻게 작성할까?"가 아니라 "무엇을 만들까?"에 집중할 수 있게 해주기 때문에 도움이 될 것 같다. 특히 4가지 도구를 단계적으로 활용하면 더 강력하다.

• Component Inspiration: 영감을 얻고 방향을 잡는다
• Component Builder: 빠르게 초안을 생성한다
• Component Refiner: 세밀하게 개선하고 완성도를 높인다
• Logo Search: 브랜딩 요소를 손쉽게 추가한다

다만 생성된 코드를 그냥 쓰지 말고, 프로젝트 요구사항에 맞게 검토하고 테스트하는 과정은 꼭 필요하다. Magic MCP는 시작점을 제공하는 도구다. 최종 품질은 여전히 개발자의 판단과 개선에 달려 있다.

 

그리고 MCP를 사용하지 않더라도 해당 공식 페이지에 여러가지 컴포넌트들이 정리되어있으니, 꼭 MCP가 아니더라도 웹상에서도 충분히 사용하기 편하고, 한번 살펴보고 갈만한 도구여서 소개해보게 되었다. 

 

ex) 웹의 채팅에서도 다음과 같이 해볼 수 있을 것 이다: create a button with blue background and white text

 

ex) 여러 UI Components를 살펴보기도 하고 상단에 보면 Inspiration 메뉴도 Beta서비스 중이다. 

 

참고 자료

• Magic MCP 공식 GitHub - 설치, 사용법, 이슈
• 21st.dev Magic 공식 사이트 - API 키 발급, 최신 소식
• Magic UI 컴포넌트 라이브러리 - 컴포넌트 갤러리
• SVGL 로고 라이브러리 - 사용 가능한 로고 목록
• shadcn/ui 공식 문서 - 호환 UI 라이브러리
• Framer Motion 문서 - 애니메이션 라이브러리