등록
활용 사례 게시됨

svgapp MCP로 Cursor에서 앱 마스코트 생성하기

Cursor를 svgapp MCP 서버에 연결하고 토큰 인증을 구성하면, 코딩 에이전트를 벗어나지 않고 재사용 가능한 마스코트와 UI에 맞는 포즈를 생성할 수 있습니다.

svgapp MCP로 Cursor에서 앱 마스코트 생성하기

빠른 답변

Cursor를 https://web.svgapp.ai/mcp에 연결하고 svgapp MCP 토큰을 bearer 헤더로 추가하면, 애플리케이션을 빌드하는 동시에 재사용 가능한 제품 마스코트를 만들 수 있습니다. 동일한 통합으로 온보딩, 빈 상태, 오류, 성공 화면, 문서, 출시 페이지에 사용할 일관된 포즈도 생성할 수 있습니다.

MCP 엔드포인트는 Streamable HTTP를 사용하며 POST 요청을 받습니다. 일반 브라우저의 GET은 405 Method Not Allowed를 반환합니다. 이는 정상적인 동작이며, 해당 엔드포인트가 웹 페이지가 아님을 확인해 줍니다.

Cursor에 svgapp 추가하기

리포지토리 전용 연결을 사용하려면 프로젝트에 .cursor/mcp.json을 만들고, 전역 연결을 사용하려면 ~/.cursor/mcp.json을 만드세요:

{
  "mcpServers": {
    "svgapp": {
      "type": "http",
      "url": "https://web.svgapp.ai/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_SVGAPP_MCP_TOKEN"
      }
    }
  }
}

svgapp의 Settings → Integrations → MCP에서 토큰을 생성하고 플레이스홀더를 교체한 다음, 토큰이 Git에 포함되지 않도록 하세요. 프로젝트 설정에 자격 증명을 저장하고 싶지 않다면 전역 파일을 사용하세요.

파일을 저장한 후 다음 단계를 진행하세요:

  1. Cursor Settings를 열고 Tools & MCP를 선택하세요.
  2. svgapp이 활성화되어 있는지 확인하세요.
  3. Cursor에서 확인을 요청하면 프로젝트 서버를 승인하세요.
  4. Cursor Agent에서 무엇이든 생성하기 전에 svgapp 도구 목록을 표시해 달라고 요청하세요.

Cursor CLI에서도 동일한 mcp.json 구성을 사용합니다. 다음 명령으로 연결을 확인할 수 있습니다:

cursor-agent mcp list
cursor-agent mcp list-tools svgapp

Cursor가 프로젝트를 초기화하도록 하기

svgapp MCP는 프로젝트 수준의 시각적 선택 사항을 svgapp.conf.json에 저장합니다. 이 파일에는 선택한 아트 스타일, 색상 팔레트, 활성 마스코트의 ID가 저장되며 MCP 토큰은 저장되지 않습니다.

다음 프롬프트로 시작하세요:

Use the svgapp MCP for this project.

Check the project root for svgapp.conf.json. If it is missing or invalid,
call init_svgapp_config and save the returned configuration there.
Do not store credentials in the file.

Inspect the current UI and summarize the visual style, brand colors, and the
three product moments where a mascot would be most useful. Do not generate yet.

이렇게 하면 생성 작업을 시작하기 전에 Cursor가 에셋을 계획하는 데 필요한 충분한 맥락을 제공할 수 있습니다.

재사용 가능한 마스코트 생성하기

Cursor가 편집 중인 애플리케이션에 어울리는 캐릭터를 만들도록 요청하세요:

Read svgapp.conf.json and inspect the app's existing colors and visual language.
If the config has no suitable colorPaletteId, create a palette from the product's
actual brand colors and merge the returned configPatch into svgapp.conf.json.

Then call create_mascot for a friendly geometric guide used in this app's
onboarding and empty states. Keep it readable at small UI sizes, use simple
shapes, avoid text and logos, and match the current interface.

Merge configPatch.activeMascotId into svgapp.conf.json. Poll
get_generation_status until the mascot is completed, then report the stable URL.
코딩 에이전트 워크플로를 통해 생성된, 여러 인터페이스 상태로 표시된 재사용 가능한 앱 마스코트

Cursor가 만드는 화면에 맞는 포즈 생성하기

기본 마스코트는 정체성을 확립합니다. 제품 화면에는 보통 특정 포즈가 필요합니다. Cursor가 컴포넌트를 살펴보고 해당 화면의 목적에 맞는 에셋을 생성하도록 요청하세요:

Read svgapp.conf.json and use activeMascotId.
Generate three consistent mascot poses with generate_mascot_pose:

1. Empty state: calmly points toward the primary create button.
2. Recoverable error: acknowledges the problem and guides attention to Retry.
3. Success: confirms completion without overpowering the next action.

Poll each generation with get_generation_status. If an asset needs to sit on
arbitrary card backgrounds, remove its background and poll that generation too.
Then add the completed stable URLs to the appropriate components with useful alt text.

에이전트가 프로덕션 UI를 변경하도록 허용하기 전에 생성된 에셋을 검토하세요. 마스코트는 실제 컨트롤을 보완해야 하며, 레이블이나 유효성 검사 또는 접근 가능한 상태 텍스트를 대체해서는 안 됩니다.

기존 작업 복구 및 재사용

프로젝트에서 ID를 잃어버렸다면 Cursor에 list_recent_generations 또는 list_mascots을 사용하라고 요청하세요. 올바른 마스코트 ID를 확인하면 activeMascotId을 업데이트하고, 두 번째 캐릭터를 새로 만드는 대신 일관된 포즈를 계속 생성할 수 있습니다.

마스코트의 연속성이 필요하지 않은 독립적인 히어로 이미지나 다이어그램에는 generate_composition을 사용하세요. 기존 마스코트를 바탕으로 모션을 만들려면 create_mascot_animation을 사용하세요. 모든 생성 작업은 비동기적으로 처리되므로 반환된 생성 ID를 보관하고, 완료될 때까지 get_generation_status을 사용하세요.

문제 해결

Cursor에 인증 오류가 표시됩니다

URL이 정확히 https://web.svgapp.ai/mcp인지, 헤더가 Bearer 으로 시작하는지 확인하세요. 만료된 토큰은 mcp.json에서 새로 고친 다음, Tools & MCP에서 서버를 다시 시작하거나 켰다 끄세요.

서버에는 연결되지만 도구가 표시되지 않습니다

프로젝트 수준의 MCP 서버를 승인하고, JSON을 변경한 후 Cursor를 다시 시작하세요. Cursor CLI를 사용한다면 cursor-agent mcp list-tools svgapp을 실행하세요.

Cursor가 일관되지 않은 캐릭터를 생성합니다

각 생성 전에 에이전트가 svgapp.conf.json을 읽고, generate_mascot_pose과 함께 activeMascotId을 사용하는지 확인하세요. create_mascot을 다시 호출하면 새로운 포즈가 아니라 새로운 캐릭터가 생성됩니다.

관련 설정 가이드

Cursor에서 제품 마스코트 생성하기

svgapp MCP를 한 번 연결하면, 앱을 구축하는 동안 Cursor가 일관된 캐릭터와 인터페이스에 바로 사용할 수 있는 포즈를 생성하도록 맡길 수 있습니다.

svgapp 열기
← 블로그로 돌아가기