supanova

v0.1.6

Published

2 months ago

Supanova AI Landing Page Builder — CLI & API client

0High
0Medium
0Low

pauljo_secondboost

ai landing-page gemini mcp cli web-design

Supanova

말로 설명하면, 랜딩페이지가 만들어집니다.

npx supanova generate "개발자들이 PR 올리면 AI가 자동으로 코드 리뷰해주는 서비스야. 다크모드로 만들어줘"

10초 후, 전문 디자이너가 만든 것 같은 랜딩페이지가 완성됩니다.

이런 분들을 위해 만들었어요

스타트업 창업자 — 투자 미팅 전날, 랜딩페이지가 급하게 필요할 때
사이드 프로젝트 — 주말에 만든 서비스, 빠르게 세상에 보여주고 싶을 때
마케터 — 캠페인 페이지를 직접 만들고 싶은데 코딩은 어려울 때
프리랜서 — 클라이언트에게 시안을 빠르게 보여줘야 할 때

두 가지 방법으로 사용할 수 있어요

1. CLI — 터미널에서 바로

supanova generate "노션이랑 슬랙 연동해서 회의록 자동 정리해주는 서비스 랜딩페이지 만들어줘"

2. MCP — AI 에이전트와 대화로

Cursor나 Claude에서 자연스럽게 대화하면 됩니다.

"우리 팀이 만든 디자인 시스템 문서 사이트 랜딩페이지 필요해. 깔끔하게 만들어줘"
→ AI가 Supanova를 호출해서 페이지 생성

시작하기

설치

npm install -g supanova

API 키 발급

supanova.dev/settings에서 발급받으세요.

Pro 또는 Elite 플랜이 필요해요.

CLI 사용법

랜딩페이지 생성

가장 기본적인 사용법이에요.

supanova generate "프롬프트"

실제 예시:

# SaaS 서비스
supanova generate "우리 회사는 Flowmate라는 업무 자동화 툴을 만들어. 
반복 작업을 자동화해서 시간을 절약해주는 서비스야. 
스타트업 느낌으로 만들어줘"

# 이커머스
supanova generate "할머니 레시피로 만든 수제 잼 온라인 스토어야. 
자연 재료만 쓰고, 무첨가가 포인트야. 
따뜻하고 정감 있는 느낌으로 해줘"

# 포트폴리오
supanova generate "3년차 프론트엔드 개발자 포트폴리오 사이트 만들어줘. 
React랑 TypeScript 전문이고, 
오픈소스 기여 경험도 보여주고 싶어. 미니멀하게"

# 앱 소개
supanova generate "매일 하루를 기록하는 일기 앱이야. 
AI가 감정을 분석해서 한 달간의 무드 리포트도 만들어줘. 
앱스토어 다운로드 버튼 넣어줘"

# 이벤트
supanova generate "FEConf 2026 컨퍼런스 페이지야. 
프론트엔드 개발자 대상이고 연사 8명이 발표해. 
얼리버드 티켓 구매 버튼 눈에 띄게 해줘"

옵션

| 옵션 | 설명 | 예시 | |------|------|------| | -m, --model | AI 모델 선택 | -m pro | | -t, --template | 템플릿 기반 생성 | -t tmpl_saas_dark | | -o, --output | HTML 파일로 저장 | -o landing.html | | --publish | 생성 후 바로 배포 | --publish |

모델 비교:

| 모델 | 속도 | 크레딧 | 추천 상황 | |------|------|--------|----------| | fast | ~10초 | 10 | 빠르게 여러 시안 확인할 때 | | pro | ~20초 | 10 | 퀄리티가 중요할 때 | | premium | ~40초 | 20 | 최고 품질이 필요할 때 (Pro+ 전용) |

템플릿으로 시작하기

200개 이상의 템플릿 중에서 골라 시작할 수 있어요.

# 템플릿 목록 보기
supanova templates list --category saas

# 템플릿 기반으로 생성
supanova generate "이 디자인 좋은데, 우리 서비스 TeamSync에 맞게 바꿔줘. 
실시간 협업 툴이야" -t tmpl_saas_dark_001

수정하기

생성된 페이지가 마음에 들지 않으면 AI에게 수정을 요청하세요.

supanova nodes edit nd_abc123 "히어로 섹션 배경을 그라데이션 파란색으로 바꿔줘"
supanova nodes edit nd_abc123 "CTA 버튼을 더 눈에 띄게 하고, 텍스트를 '14일 무료 체험' 으로"
supanova nodes edit nd_abc123 "푸터에 서울시 강남구 테헤란로 123 주소 추가해줘"

배포하기

한 줄이면 전 세계에 공개됩니다.

supanova publish nd_abc123

✔ 배포 완료!
  URL: https://supanova.dev/p/nd_abc123

커스텀 URL도 가능해요.

supanova publish nd_abc123 --slug flowmate
# → https://supanova.dev/p/flowmate

내보내기

직접 호스팅하고 싶다면 HTML을 다운로드하세요.

supanova export nd_abc123 -o landing.html
supanova export nd_abc123 --format zip -o bundle.zip

MCP 사용법

Cursor, Claude Desktop 같은 AI 에이전트에서 대화로 사용할 수 있어요.

왜 MCP인가요?

대화로 작업 — "랜딩페이지 만들어줘"라고 말하면 끝
컨텍스트 유지 — AI가 이전 대화를 기억하고 수정
다른 작업과 연결 — 코드 작성하다가 바로 랜딩페이지 생성

Cursor 설정

~/.cursor/mcp.json 파일을 만들거나 수정하세요.

{
  "mcpServers": {
    "supanova": {
      "command": "npx",
      "args": ["-y", "supanova", "supanova-mcp"],
      "env": {
        "SUPANOVA_API_KEY": "sk_live_여기에_API_키"
      }
    }
  }
}

설정 후 Cursor를 재시작하면 바로 사용할 수 있어요.

Claude Desktop 설정

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "supanova": {
      "command": "npx",
      "args": ["-y", "supanova", "supanova-mcp"],
      "env": {
        "SUPANOVA_API_KEY": "sk_live_여기에_API_키"
      }
    }
  }
}

실제 대화 예시

새 랜딩페이지 만들기:

나: 우리 스타트업 랜딩페이지 만들어줘.
    서비스 이름은 ReviewBot이고, GitHub PR 올리면 AI가 자동으로 코드 리뷰해주는 서비스야.
    개발자들이 타겟이라 다크모드로 해주고, 
    "코드 리뷰 시간을 90% 줄여준다"는 걸 강조해줘.

AI: ReviewBot 랜딩페이지를 만들게요.
    
    [generate_landing_page 호출]
    
    완료! 랜딩페이지가 생성됐어요.
    - 히어로: "PR 올리면, 리뷰는 AI가 합니다"
    - 핵심 가치: 리뷰 시간 90% 단축 강조
    - 기능 소개: 자동 리뷰, 코드 품질 분석, Slack 연동
    - 가격표: 무료/Pro/Team 3가지 플랜
    - CTA: "무료로 시작하기"

수정 요청:

나: 좋은데, CTA 버튼이 좀 약해 보여.
    버튼을 초록색으로 바꾸고 더 크게 해줘.
    그리고 "지금 바로 연동하기"로 텍스트 바꿔줘.

AI: 수정할게요.
    
    [edit_node 호출]
    
    완료! CTA 버튼이 초록색으로 바뀌었고 크기도 키웠어요.
    텍스트도 "지금 바로 연동하기"로 변경했어요.

배포:

나: 괜찮은 것 같아. 바로 배포해줘.

AI: 배포할게요.
    
    [publish_page 호출]
    
    배포 완료!
    https://supanova.dev/p/reviewbot-abc
    
    이 URL로 누구나 접속할 수 있어요.
    슬랙이나 SNS에 공유해보세요!

템플릿 활용:

나: 근데 좀 더 세련된 느낌이면 좋겠어.
    SaaS 템플릿 중에 요즘 트렌디한 거 있어?

AI: SaaS 템플릿을 찾아볼게요.
    
    [list_templates 호출]
    
    "Nova SaaS Gradient" 템플릿이 요즘 인기 많아요.
    그라데이션 배경에 글래스모피즘 카드 스타일이에요.
    이걸로 다시 만들어볼까요?

나: 응, 그걸로 다시 만들어줘.

AI: [generate_landing_page 호출]
    
    완료! 훨씬 세련된 느낌으로 만들어졌어요.

사용 가능한 도구

MCP로 연결하면 AI가 이 도구들을 사용할 수 있어요.

| 도구 | 하는 일 | |------|---------| | generate_landing_page | 새 랜딩페이지 생성 | | edit_node | 기존 페이지 수정 | | publish_page | 웹에 배포 | | export_node | HTML/ZIP 다운로드 | | list_templates | 템플릿 검색 | | list_projects | 내 프로젝트 목록 | | get_account | 계정 정보 확인 |

자동화

CI/CD 연동

GitHub Actions에서 랜딩페이지를 자동 생성할 수 있어요.

- name: 랜딩페이지 생성
  env:
    SUPANOVA_API_KEY: ${{ secrets.SUPANOVA_API_KEY }}
  run: |
    npx supanova generate "v2.0 출시 기념 프로모션 페이지. 신규 기능 3가지 소개하고 업그레이드 유도해줘" -o dist/index.html

환경 변수

| 변수 | 설명 | |------|------| | SUPANOVA_API_KEY | API 키 (로그인 없이 사용) |

JSON 출력

스크립트에서 파싱하기 쉽게 JSON으로 출력할 수 있어요.

supanova generate "신규 기능 소개 페이지" -j | jq '.nodeId'

문제 해결

"API 키가 필요합니다"

Error: SUPANOVA_API_KEY environment variable is required.

→ supanova login으로 로그인하거나, 환경 변수를 설정하세요.

"크레딧이 부족합니다"

Error: Insufficient credits.

→ supanova.dev/settings에서 크레딧을 확인하세요.

"플랜 업그레이드가 필요합니다"

Error: This feature requires Pro or Elite plan.

→ CLI/MCP는 API 키가 필요하며, API 키는 Pro 이상 플랜에서 발급됩니다.

MCP가 연결되지 않아요

설정 파일 경로가 맞는지 확인
JSON 문법 오류 확인 (쉼표, 따옴표)
앱 재시작

크레딧

| 작업 | 크레딧 | |------|--------| | 생성 (fast/pro) | 10 | | 생성 (premium) | 20 | | 수정 | 2 | | 배포/내보내기 | 무료 |

플랜

| | Free | Pro | Elite | |------|------|-----|-------| | API 키 | ❌ | ✅ | ✅ | | CLI/MCP | ❌ | ✅ | ✅ | | Premium 모델 | ❌ | ✅ | ✅ | | 배포/내보내기 | ❌ | ✅ | ✅ | | 월 크레딧 | 30 | 300 | 1,000 |

링크

supanova.dev — 웹에서 사용하기
supanova.dev/templates — 템플릿 둘러보기
supanova.dev/pricing — 요금제
supanova.dev/docs — 문서