[번역] React와 Next.js를 위한 완벽한 Cursor AI 설정

출처: https://www.builder.io/blog/cursor-ai-tips-react-nextjs

소프트웨어 개발에서 AI 혁명은 양날의 검입니다. 기술 스택을 제대로 이해하지 못한 채 대형 언어 모델(LLM)에 너무 의존하면, '바이브 코딩(vibe-coding)’에 빠지기 쉽습니다. 반대로 AI 도구를 거부하는 것을 고집한다면, 여러분이 열심히 코딩하는 동안 동료들은 여러분보다 10배 빠르게 일하게 될 겁니다.

사실 지금 Cursor 같은 AI 기반 코드 편집기를 사용하지 않고 있다면, 여러분은 빠르지도, 똑똑하게 일하고 있지도 않은 것입니다.

이 가이드는 Cursor를 처음부터 완벽하게 사용할 수 있도록 도와줄 것입니다. 이 단계를 따르면 코드 작성 효율과 실력을 급격히 끌어올릴 수 있습니다. 특히 이 가이드는 React, Next.js, Tailwind CSS 작업에 최적화된 Cursor AI 설정에 초점을 맞추지만, 대부분의 설정은 어떤 기술 스택에도 적용할 수 있습니다.

Cursor AI 설정 조정하기

아래 체크리스트를 따라만 가도, 이 가이드 전체를 읽지 않아도 될 만큼 거의 완벽한 Cursor 설정을 만들 수 있습니다.

설정 + 규칙 (Settings + Rules)

우측 상단의 톱니바퀴 아이콘을 눌러 Cursor 설정을 엽니다. 그 다음 아래 항목들을 설정해 주세요.

• Features 탭에서 다음을 활성화하세요
  • Cursor 탭
    1. Cursor Tab 활성화
       → 왜 필요한가요? Cursor의 핵심 기능입니다. 탭 자동완성이 획기적으로 향상됩니다.
    2. Suggestions in Comments 활성화
       → Cursor Tab이 주석 및 문서화도 작성할 수 있게 합니다.
    3. Auto import 활성화
       → 필요한 import 문을 자동으로 추가합니다. 시간을 절약해줍니다.
  • 채팅 (Chat)
    1. 기본 채팅 모드를 Agent로 설정
       → 복잡한 작업 및 코드 생성에 최적화된 모드입니다.
    2. Auto-refresh chats 활성화
       → 맥락이 바뀔 때 채팅 창을 자동으로 업데이트합니다.
    3. Auto-scroll to bottom 활성화
       → 최신 AI 메시지를 항상 볼 수 있게 해줍니다.
    4. Auto-apply to files outside context in edit mode 활성화
       → @로 명시하지 않아도 관련 파일까지 수정됩니다. 리팩토링에 매우 유용합니다.
    5. auto-run mode(자동 실행 모드) 활성화
       → AI가 일부 작업(도구 호출 등)을 사용자 확인 없이 자동으로 실행할 수 있습니다. 매우 크게 효율성이 향상됩니다.
    6. auto-run 내 보호 옵션들 활성화: Delete file protection(파일 삭제 보호), MCP tools protection(MCP 도구 보호), Dot files protection(숨김 파일(.파일) 보호), Outside workspace protection(작업 외부공간 보호)
       → 자동 실행 중 실수로 중요한 파일을 삭제하거나 잘못된 위치를 건드리는 일을 막아줍니다.
    7. Large context 활성화
       → AI가 더 많은 코드 및 정보를 이해할 수 있게 합니다. 복잡한 작업에 도움됩니다.
    8. Iterate on lints(lint 반복 실행) 활성화
       → AI가 린트 오류를 자동으로 수정 시도합니다.
    9. Web Search Tool(웹 검색 도구) 활성화
       → AI가 웹에서 최신 정보나 문서를 검색할 수 있게 합니다.
  • 코드베이스 인덱싱 (Codebase Indexing)
    1. Index new folders by default(새 폴더 자동 인덱싱) 활성화
       → 프로젝트에 새 코드를 추가하면 AI가 자동으로 인식하여 컨텍스트에 추가합니다.
    2. Git graph files relationships(Git 그래프 파일 관계 설정)을 기본값으로
       → Git 기록을 사용해 AI가 파일 관계를 이해하고 더 관련성 높은 컨텍스트를 제공합니다.
  • 문서(Docs)
    1. + Add new doc를 클릭해서 React 공식 문서 링크 추가
       → AI가 React 공식 문서를 즉시 참고할 수 있게 합니다.
    2. + Add new doc를 클릭해서 Next.js 공식 문서 링크 추가
       → AI가 Next.js 문서를 빠르게 참고할 수 있게 합니다.
    3. + Add new doc를 클릭해서 Tailwind CSS 공식 문서 링크 추가
       → AI가 Tailwind 관련 정보를 더 정확히 제공합니다.
  • 에디터(Editor)
    1. Show chat/edit tooltip(채팅/편집 툴팁 표시) 활성화
       → AI 채팅 또는 편집 가능 여부를 시각적으로 알려줍니다.
    2. Auto select for Ctrl/Cmd + K input(Ctrl/Cmd + K 입력 시 자동 선택) 활성화
       → 입력창의 프롬프트 텍스트를 자동 선택해 수정이 편리해집니다.
    3. Use themed diff backgrounds(테마가 적용된 diff 배경 사용) 활성화
       → AI가 생성한 변경사항을 더 쉽게 읽을 수 있게 합니다.
  • 터미널(Terminal)
    1. Terminal hint(터미널 힌트 표시) 활성화
       → 터미널에서 AI가 직접 제안할 수 있게 해줍니다.
    2. Show terminal hover hint(터미널 호버 시 힌트 표시) 활성화
       → 관련된 터미널 콘텐츠에 마우스를 올리면 힌트를 보여줍니다.
• 모델 탭(Models Tab)
  • Cursor Pro 계정이 아니라면, Gemini, Claude 3.5 Sonnet 등의 모델 API 키를 여기에 추가할 수 있습니다.
  • 주의: 자체 모델을 Cursor에서 사용할 경우 비용이 매우 빨리 올라갈 수 있습니다. Cursor를 많이 사용할 예정이라면 Cursor Pro 구독이 훨씬 저렴할 수 있습니다.
• 규칙(Rules) 탭
  • + Add new rule(새 규칙 추가) 클릭
    → AI에게 지침을 주기 위한 규칙 생성 시작
  • React, Next.js, Tailwind CSS를 위한 규칙 복사하여 붙여넣기
    → AI가 이 기술 스택에 맞는 코드 스타일을 자동으로 따르도록 합니다.

노트패드(Notepads)

Cursor 설정을 닫고, 사이드바의 "Notepads" 섹션에서 + 버튼을 눌러 새 노트패드를 추가합니다 (또는 명령어 팔레트 사용).

1. Notepad를 생성하여 React 컴포넌트 개발 기준 붙여넣기
   → AI가 참고할 수 있는 React 기준 저장
2. Notepad를 생성하여 Next.js 개발 기준 붙여넣기
   → App Router 패턴 등 저장
3. Notepad를 생성하여 Tailwind CSS 사용 가이드 붙여넣기
   → Tailwind 규칙을 AI가 참조할 수 있음

ESLint 추가

ESLint가 설치되고 활성화되어 있어야 합니다.
→ ESLint는 코드 품질 문제를 찾아냅니다. Cursor의 Iterate on lints 기능과 함께 사용하면, 이런 문제를 AI가 자동으로 고쳐주어 코드 품질이 향상됩니다.

Visual Editor CLI 사용

Cursor + Builder.io의 Visual Editor CLI를 사용하여 전문적인 UI 디자인을 추가합니다.
→ Figma 디자인을 가져와 Cursor 안에서 바로 완성도 높은 UI로 구현할 수 있습니다. 디자인과 개발 간의 연결고리 역할을 해주는 도구입니다.

Cursor 코드 에디터에서의 핵심 기능 설정과 활용

위 단계들을 모두 따라왔다면, 이제 꽤 탄탄한 Cursor 설정을 갖추게 되었을 것입니다. 이제부터는 Cursor의 기능들을 좀 더 깊이 있게 살펴보겠습니다.

우선 코드 에디터의 핵심 설정과 기능을 어떻게 활용하면 워크플로우를 극적으로 향상시킬 수 있는지 알아보고, 그 다음 완벽한 Cursor AI 설정을 위한 마지막 단계를 진행해봅시다.

만약 React와 Next.js 개발 환경 세팅의 마지막 단계를 바로 보고 싶다면, 아래에 있는 “Cursor의 테스트 기반 코드 생성 루프 설정하기” 섹션으로 건너뛰어도 좋습니다.

코드 에디터에서의 Cursor AI 'Tab' 기능

Cursor는 탭 자동완성(Tab Completion) 기능을 제공합니다. 이 기능은 일반적인 자동완성보다 훨씬 강력하게 작동하며, 똑똑한 코드 제안을 생성하고 여러 줄에 걸친 편집도 수행할 수 있습니다. 심지어 최근 코드 변경 사항이나 린트 오류까지 고려해서 자동완성을 제안해 줍니다.

이 기능은 Cursor 설정의 Features > Tab Completion 항목에서 활성화할 수 있으며, 주석에 대해서는 비활성화하는 등 세부 설정도 가능합니다.

사용 방법은 간단합니다. Tab 키를 눌러 제안을 수락한 후 다음 편집으로 이동할 수 있습니다. Esc 키로 제안을 무시할 수 있고, Ctrl/⌘ + →로 제안을 단어 단위로 수락할 수 있습니다.

코드 생성을 위한 Cursor AI 'Chat' 기능

Cursor Chat은 사이드바에 내장된 AI 어시스턴트로, 여러분의 코드베이스에 대해 자연어로 대화할 수 있습니다. 프로젝트에 대한 질문을 하거나, 여러 파일에 걸친 코드 생성을 요청하거나, 전체 코드베이스를 이해하는 데 도움을 받거나, 터미널 명령어에 대한 지원을 요청할 수도 있습니다.

별도의 복잡한 설정 없이 바로 사용할 수 있습니다. Mac이라면 ⌘+L 단축키로, Windows/Linux라면 Ctrl+L 단축키로 이용할 수 있습니다. 챗창이 열리면, 자연어로 프롬프트를 입력하고, 복잡한 코딩 작업에는 'Agent' 모드, 단순한 질문에는 'Ask' 모드를 선택하세요. 그러면 Cursor AI가 강력한 코드 생성 기능으로 도와줍니다. 주어진 맥락을 바탕으로 유용한 코드 제안을 하거나 선택한 코드 블록을 똑똑하게 리팩터링할 수 있습니다.

React, Next.js, Tailwind CSS를 사용할 때의 예시는 다음과 같습니다.

• Agent 모드 예시
  자연어로 이렇게 말할 수 있습니다.
  "PrimaryButton이라는 이름의 재사용 가능한 React 컴포넌트를 만들어줘. children과 일반적인 버튼 props를 받을 수 있어야 해. Tailwind 클래스를 사용해서 파란 배경, 흰색 텍스트, 패딩, 둥근 모서리, 은은한 hover 효과가 있도록 스타일링해줘. 이 컴포넌트의 코드를 생성해줘."

• Ask 모드 예시
  자연어로 다음과 같이 물어볼 수 있습니다.
  "app/posts/[id]/page.tsx 안의 Server Component에서 특정 블로그 게시글 데이터를 가져올 때 data fetching이 어떻게 작동하는지 설명해줘. 그리고 게시글의 '게시 상태(published status)'에 따라 제목에 조건부 Tailwind 클래스를 적용하려면 가장 좋은 방법은 무엇인지 알려줘. 관련 코드를 분석해줘."

Cursor 규칙

Cursor Rules 기능을 사용하면 AI에게 지속적인 지침을 줄 수 있습니다. 예를 들어 코딩 컨벤션이나 프로젝트별 가이드라인 같은 규칙을 정해두면, 매번 똑같은 말을 반복할 필요 없이 AI가 자동으로 이를 따라주게 됩니다. 이 규칙들은 마치 AI에게 붙여두는 포스트잇처럼 동작하며, 자동으로 적용되거나 수동으로 호출해서 사용할 수 있어 코드베이스에 대한 이해도를 높여줍니다.

프로젝트 전용 규칙은 프로젝트 내 .cursor/rules 폴더에 .mdc 파일을 만들어 추가할 수 있고, 전역 규칙은 Cursor 설정에서 설정할 수 있습니다. 규칙은 항상 자동으로 적용되도록 설정하거나 코드 생성 시에 @ruleName 형식으로 수동 호출할 수 있습니다.

이전 단계에서 이미 React, Next.js, Tailwind CSS에 맞춘 예시 규칙을 연결해 두었습니다. 더 많은 규칙이 궁금하다면 커뮤니티가 만든 최고의 규칙들이 모여 있는 cursor.directory를 참고해 보세요. 정말 유용한 자료가 많습니다.

Cursor의 @docs 기능

Cursor의 @docs 기능을 사용하면, 프로젝트에서 사용하는 라이브러리나 프레임워크의 외부 문서를 AI에게 제공하여 AI의 이해도와 답변 정확도를 높일 수 있습니다. Cursor는 문서의 내용을 다운로드하고 인덱싱하여, AI가 질문에 답하거나 코드를 작성할 때 해당 문서를 직접 참고할 수 있게 합니다.

설정 방법도 간단합니다. Settings > Features > Docs로 이동한 뒤, 추가하고 싶은 문서의 URL을 입력하세요. 이후 AI와 채팅할 때 프롬프트에 @docs를 포함하면, AI가 지정한 문서를 참고하여 더 정확하고 맥락 있는 답변을 제공합니다.

아래는 앞서 추가한 React, Next.js, Tailwind 문서와 관련된 예시입니다.

• React 훅 관련 질문 예시
  "@docs를 참고해서 React의 useMemo와 useCallback의 차이를 설명해줘. 그리고 각 훅을 실제 컴포넌트 라이브러리에서 어떻게 활용할 수 있을지 예시를 들어줘."

• Next.js API 라우트 예시
  "Next.js의 @docs를 참고해서 slug 파라미터를 받는 동적 API 라우트를 만드는 방법을 보여줘. 그리고 해당 데이터를 어떻게 가져오는지도 설명해줘."

• Tailwind 레이아웃 예시
  "Tailwind를 사용해서 반응형 3열 그리드 레이아웃을 만들고 싶어. 모범 사례를 참고해서 @docs 기반으로 알려줘."

Cursor AI의 '@web' 기능

Cursor의 @web 기능을 사용하면, AI가 채팅창에서 직접 인터넷 검색을 수행할 수 있습니다. 이 기능은 실시간 정보가 필요한 상황에서 특히 유용합니다. 예를 들어, 새로 나온 라이브러리 버전을 확인하거나, 문서에 아직 반영되지 않은 최신 API 변경 사항을 알아볼 때 큰 도움이 됩니다.

활성화하려면 Settings > Features > Chat에서 Web Search Tool 옵션을 켜주세요. 이후 채팅창에서 @web 다음에 검색할 내용을 입력하면, AI가 해당 주제에 대해 웹 검색을 수행하고 답변을 제공합니다.

React / Next.js / Tailwind 스택에 관련된 예시는 다음과 같습니다.

• 최신 버전 확인 예시
  "@web을 사용해서 framer-motion 라이브러리의 최신 안정 버전을 찾고, React 18과의 호환성을 확인해줘."

• 신기능 조사 예시
  "최근 출시된 Next.js canary 릴리즈에 Server Components와 관련된 새로운 실험적 기능이 있는지 @web으로 검색해줘."

• Tailwind 플러그인 탐색 예시
  "복잡한 그라데이션을 만들 수 있는 Tailwind 플러그인이 필요해. @web으로 인기 있는 옵션과 사용법을 찾아줘."

Cursor AI의 'Notepads' 기능

Cursor는 현재 베타 기능으로 Notepads를 제공합니다. Notepads는 에디터 내에서 사용할 수 있는 전역 문서로, 프로젝트의 맥락, 가이드라인, 코드 스니펫 등을 저장하고 공유할 수 있습니다. 단순한 규칙(Rules)보다 더 유연하며, 파일을 첨부하거나 여러 정보를 조합해 하나의 문서로 만들 수 있어, 팀 단위 혹은 개인 워크플로우에 재사용 가능한 리소스로 활용됩니다.

새로운 노트패드를 만들려면, 사이드바의 Notepads 섹션에서 + 버튼을 클릭하고 이름을 지정하면 됩니다. 이후 AI 채팅이나 다른 기능에서 해당 노트패드의 내용을 사용하려면 @my-react-patterns 처럼 @노트패드이름 형식으로 참조하면 됩니다.

우리는 앞서 React 컴포넌트와 Next.js의 App Router 패턴 그리고 Tailwind CSS 사용 가이드에 대한 노트패드를 이미 연결해 두었습니다.

Cursor AI의 자동 린트 수정 기능으로 코드 품질 향상하기

Cursor가 생성한 코드에는 가끔 작은 오류가 포함될 수 있습니다. 이때 자동 린트 수정(Auto Linting Resolution) 기능을 사용하면, AI가 코드 변경 또는 새 코드 생성 이후 발생한 린트 오류를 자동으로 탐지하고 수정해줍니다. 이 기능은 AI 에이전트가 코드를 변경한 직후, ESLint와 같은 설치된 린터의 출력을 자동으로 확인하는 방식으로 작동합니다.

설정하기 위해서는 프로젝트에 ESLint 같은 린터가 올바르게 설정되어 있어야 하며, Settings > Features > Chat 메뉴에서 Iterate on Lints 옵션을 활성화하면 됩니다. 이후 Agent 모드를 사용할 경우, Cursor AI는 코드 생성 또는 수정 이후 새로 발생한 린트 경고나 오류를 자동으로 해결하려고 시도합니다. 심지어 기존 코드가 여러 줄, 여러 파일에 걸쳐 있을 때도 이를 정리해주는 능력이 있습니다.

React / Next.js / Tailwind 스택에서 자주 볼 수 있는 예시는 다음과 같습니다.

• React Hook 규칙 위반
  만약 Agent가 조건문 안에서 useState를 호출하는 것과 같은 훅의 규칙을 위반하는 코드를 생성했다면 ESLint가 이를 감지하고 경고를 표시합니다. 그러면 Cursor는 훅을 컴포넌트의 최상단에 올바르게 위치시키도록 자동으로 리팩터링을 시도합니다.

• 사용되지 않는 import / 변수
  Agent가 유틸 함수의 import 문을 추가했지만, 최종 코드에서 사용하지 않은 경우 린터가 이를 경고합니다. Cursor는 해당 import 라인을 자동으로 제거합니다.

• TypeScript 타입 오류
  Agent가 생성한 TypeScript 코드에서 타입 불일치가 발생하고, 이 문제가 TypeScript ESLint 플러그인에 의해 탐지되면, Cursor는 타입이나 로직을 조정하여 오류를 해결하려 시도합니다.

Cursor의 테스트 기반 코드 생성 루프 설정하기

Cursor의 반복 실행 기능을 활용하면, 테스트 주도 개발(TDD) 워크플로우를 구현할 수 있습니다. 즉, 실제 코드를 작성하기 전에 테스트부터 먼저 작성하고, 그 테스트를 통과하는 방향으로 코드를 점진적으로 완성해나가는 방식입니다. 우선, 만들고자 하는 함수나 컴포넌트에 대해 AI 에이전트에게 테스트 케이스 생성을 요청하세요. 이때 입력값과 출력값을 명확히 설명하는 것이 중요합니다.

테스트가 생성되면 (예상대로 TDD에서는 처음에 실패해야 합니다), 그 다음에는 테스트들을 통과할 수 있도록 구현 코드를 작성해달라고 요청하세요. 테스트가 통과할 때까지, Cursor는 자동으로 코드를 반복 수정하며 점점 완성도를 높여갑니다. 초기 코드가 모든 테스트를 통과하지 못하더라도, 에이전트는 코드를 똑똑하게 재작성하고 다듬어서 모든 테스트가 빨간불(실패)에서 초록불(성공)로 전환되도록 합니다.

React + Next.js + Tailwind 스택에서 활용할 수 있는 예시는 다음과 같습니다 (팁: 일반적인 TDD 패턴을 Notepad로 저장해두면 재사용하기 편리합니다).

• 유틸리티 함수 TDD 예시
  "숫자를 받아서 통화 문자열로 포맷해주는 formatCurrency(value: number) 유틸 함수에 대한 Jest 테스트를 작성해줘. 양수, 0, 음수 케이스를 모두 커버해줘."
  → 테스트를 검토한 후
  "이 테스트들을 통과할 수 있도록 formatCurrency 함수를 작성해줘. 모든 테스트가 성공할 때까지 반복해줘."

• React 컴포넌트 상호작용 테스트 예시
  "React Testing Library를 사용해서 다음 동작을 테스트해줘. 컴포넌트는 초기 count를 0으로 보여줘야 하고, 'Increment' 버튼 클릭 시 증가, 'Decrement' 버튼 클릭 시 감소해야 해."
  → 그 다음
  "테스트를 만족하는 컴포넌트 구현 코드를 작성해줘. 버튼에는 기본적인 Tailwind 스타일도 적용해줘. 테스트가 전부 통과할 때까지 반복해."

• API 라우트 로직 테스트 예시 (Next.js)
  "email 필드를 body로 받는 POST 요청을 처리하는 /api/validateEmail API 라우트에 대한 테스트를 작성해줘. 유효한 이메일이면 200, 그렇지 않으면 400 상태 코드를 반환해야 해. 기본 정규식을 기반으로 검증해줘."
  → 그 다음
  "지금 작성한 테스트를 통과할 수 있도록 /api/validateEmail 라우트 핸들러를 구현해줘. 모든 테스트가 성공할 때까지 반복해."

Cursor에 MCP 추가하기

MCP(Model Context Protocol)는 Cursor에서 외부 도구나 데이터 소스를 AI 에이전트와 직접 연결할 수 있도록 해주는 일종의 플러그인 시스템입니다. 이러한 깊은 통합을 통해 Cursor AI는 수동으로 정보를 입력하지 않아도 데이터베이스, API, 외부 서비스와 상호작용할 수 있게 됩니다.

MCP 서버는 전역(~/.cursor/) 또는 프로젝트 단위(.cursor/)로 mcp.json 파일을 생성해 설정할 수 있습니다. 이 파일에는 Cursor가 도구에 연결되는 방식(예: 실행할 명령어 또는 SSE 엔드포인트 등)을 정의합니다. 설정이 완료되면, Agent는 관련 MCP 도구를 자동으로 인식해 사용할 수 있고, 직접 명시적으로 요청하여 특정 작업에 활용할 수도 있습니다.

React / Next.js / Tailwind 스택에 관련된 예시는 다음과 같습니다.

• 데이터베이스 스키마 연동 예시
  프로젝트의 데이터베이스에 연결하는 MCP 서버를 구성하세요. 그 후 Agent에게 이렇게 요청할 수 있습니다.
  "데이터베이스 MCP 도구를 사용해서 users 테이블의 스키마를 가져와 줘. 이 스키마 기반으로 ID로 유저를 조회하는 Next.js API 라우트 (/api/users/[id])를 생성하고, 관련된 TypeScript 타입도 함께 정의해줘."

• Headless CMS 연동 예시
  Contentful, Sanity 같은 헤드리스 CMS와 연결된 MCP 도구를 설정하세요. 그런 다음 다음과 같이 요청할 수 있습니다.
  "CMS MCP 도구를 사용해서 blogPost 콘텐츠 모델을 가져오고, 이를 기반으로 pages/blog/[slug].js 파일에서 getStaticProps 함수를 생성해줘. 필요한 데이터를 적절히 전달하도록 해줘."

더 많은 커뮤니티 기반 Cursor + MCP 통합 예시는 cursor.directory에서 확인할 수 있습니다.

결론

지금까지 Cursor AI의 설정을 꼼꼼히 구성하고, Agent 모드, Rules, @docs, @web, Notepads 같은 강력한 기능들을 적극 활용함으로써, React와 Next.js 개발에 최적화된 AI 기반 코드 에디터 환경을 구축하셨습니다. 이 셋업은 복잡한 작업을 간소화하고, 개발 속도를 획기적으로 높이며, 새롭게 작성되는 코드의 품질을 일관되게 유지하도록 돕는 데 중점을 두고 있습니다.

AI 도구를 마스터하는 것은 한 번에 끝나는 작업이 아닌 지속적인 과정입니다. 프롬프트를 계속 다듬고, 코드 변경을 자주 커밋하며, 새로운 AI 모델을 시도하고, 프로젝트에 맞는 적절한 컨텍스트를 사용하는 습관을 들이세요. AI를 협업 파트너로 받아들이면, 이전보다 훨씬 높은 생산성과 개발 숙련도를 경험하게 될 것입니다.

---

AI 코드 에디터에 대해 더 알아보기

• 내가 Cursor를 활용하는 방법(꿀팁 포함)
• Model Context Protocol이란 무엇인가
• 직접 MCP 서버를 만드는 방법
• Figma 디자인을 깔끔한 React 코드로 변환하기