콘텐츠로 건너뛰기
supastack
문서 둘러보기
웹Next.js

For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /ko/docs/web/before-you-start.md (or send Accept: text/markdown).

시작하기 전에

Node.js, Git 및 편집기를 설치하고 저장소 초대를 수락한 후 키트를 다운로드하고 컴퓨터가 첫 실행 준비가 되었는지 확인하세요.

이 가이드에 대해 질문하기
다음에서 열기

1. 실행하고 싶은 것을 선택하세요

인터넷에 연결된 Windows, macOS 또는 Linux 컴퓨터를 사용하십시오. 브라우저는 웹 앱을 실행합니다. 전화기는 모바일 앱을 실행합니다. 데스크톱 앱이 자체 창에서 열립니다. 귀하의 휴대폰만으로는 아래 설치 단계를 수행할 수 없습니다.

저장소는 GitHub를 통해 받은 파일의 폴더입니다. 웹, 모바일 및 데스크탑 구매는 각각 해당 키트 저장소를 제공합니다. 모든 플랫폼 번들은 세 가지 앱이 모두 포함된 폴더인 모노레포를 제공합니다. 구매한 저장소에 대한 초대를 수락합니다. 모바일 또는 데스크톱 결제에는 여전히 접근 가능한 웹 백엔드, 즉 계정과 데이터를 처리하는 서버가 필요합니다. 해당 클라이언트 저장소에는 웹 서버가 포함되어 있지 않습니다.

이러한 도구를 한 번 준비하십시오. 도구 다운로드 및 첫 번째 기본 컴파일에는 5분보다 훨씬 오래 걸릴 수 있습니다. 이러한 준비 후에 5분 가이드가 시작됩니다. 로컬로 실행하면 앱이 인터넷에 게시되지 않습니다.

2. Node.js 설치

아래의 공식 Node.js 다운로드 페이지를 엽니다. 번호가 22 이상인 LTS 버전과 컴퓨터용 설치 프로그램(Windows의 경우 .msi, macOS의 경우 .pkg)을 선택하세요. 다운로드한 설치 프로그램을 열고 기본값을 유지한 후 설치를 완료합니다. Node.js를 사용하면 컴퓨터에서 앱의 JavaScript를 실행할 수 있습니다. npm가 함께 설치됩니다.

설치 후 터미널을 닫았다가 다시 엽니다. Windows에서 시작을 열고 PowerShell를 입력하여 엽니다. macOS에서는 Command + Space를 누르고 Terminal을 입력한 후 Enter를 누르세요. Linux에서는 애플리케이션 메뉴에서 터미널을 엽니다. 아래 명령을 붙여넣은 후 Enter를 누르세요. v22.x.x 또는 v24.x.x와 같은 결과는 Node를 사용할 수 있음을 확인합니다. 명령을 찾을 수 없거나 인식되지 않는 경우 터미널을 다시 열거나 PATH 옵션이 활성화된 노드를 다시 설치하세요.

node --version
npm --version

3. Git 및 텍스트 편집기 설치

아래 Git 다운로드 페이지를 열고 운영 체제를 선택한 후 설치 프로그램을 따르세요. Git은 개인 저장소를 다운로드하고 파일 변경 사항을 기록합니다. macOS에서 아래 명령을 실행하면 Apple의 명령줄 도구가 설치될 수 있습니다. 이를 승인하고 완료된 후 명령을 다시 실행하십시오. Linux에서는 Git 페이지에 배포판에 표시된 설치 명령을 사용합니다.

공식 다운로드 페이지에서 Visual Studio Code를 설치하세요. 프로젝트를 열고 구성 파일을 저장하기 위한 텍스트 편집기입니다. 파일을 열고 파일 → 폴더 열기(macOS에서는 파일 → 열기)를 선택한 다음, 나중에 다운로드한 supastack 폴더를 선택하세요. 첫 번째 로컬 데모를 완료하기 위해 코드를 작성할 필요는 없습니다.

새로 열린 터미널에서 아래 명령어를 실행해 보세요. git 버전으로 시작하는 결과는 Git이 준비되었음을 의미합니다. 명령이 누락된 경우 설치 프로그램을 완료하고 터미널을 다시 엽니다.

git --version

4. GitHub 초대를 수락하세요.

구매할 때 제공한 계정을 사용하여 브라우저에서 GitHub에 로그인하세요. GitHub 초대 이메일을 열고 초대 보기를 선택한 후 액세스를 수락하세요. 그런 다음 초대된 저장소를 엽니다. 해당 파일과 녹색 코드 버튼이 표시됩니다. 404는 일반적으로 초대가 수락되지 않았거나 다른 GitHub 계정에 로그인되었음을 의미합니다.

코드 → 로컬 → HTTPS를 선택하고 표시된 주소를 복사하세요. 다음 단계에서 정확한 주소를 사용하세요. 꺾쇠괄호가 포함된 주소의 예는 템플릿입니다. 괄호를 붙여넣는 대신 꺾쇠괄호를 바꾸세요. 조직 이름을 추측하거나 개인 저장소를 공개할 필요가 없습니다.

5. 프로젝트를 컴퓨터에 다운로드

문서와 같은 프로젝트의 폴더를 선택합니다. 파일 탐색기 또는 Finder에서 해당 폴더를 엽니다. Windows에서는 빈 공간을 마우스 오른쪽 버튼으로 클릭하고 터미널에서 열기를 선택한 다음 필요한 경우 PowerShell를 선택합니다. macOS에서 터미널을 열고 cd와 공백을 입력한 후 폴더를 터미널로 드래그하고 Enter 키를 누릅니다. 이제 터미널이 해당 폴더에서 작동 중입니다.

아래 첫 번째 명령에서 YOUR_COPIED_HTTPS_ADDRESS를 방금 복사한 HTTPS 주소로 바꿉니다. 한 번에 한 줄씩 실행합니다. 첫 번째 줄에서는 supastack이라는 새 폴더를 만듭니다. 두 번째 줄이 들어갑니다. Git에서 로그인을 요청하면 브라우저 로그인을 완료하세요. GitHub 계정 비밀번호를 Git 비밀번호로 사용하지 마십시오. 브라우저 로그인이 불가능한 경우, 아래 링크된 GitHub의 HTTPS 인증 가이드를 따르세요.

성공: supastack 폴더에는 package.json, pnpm-workspace.yaml, 앱 및 패키지가 포함되어 있습니다. 이는 저장소 루트입니다. Git에서 대상이 이미 존재한다고 말하면 다른 빈 폴더를 사용하거나 기존 복제본을 엽니다. 작업을 삭제하지 마십시오. 다음 단계를 위해 이 터미널을 열어두세요.

git clone YOUR_COPIED_HTTPS_ADDRESS supastack
cd supastack

6. Corepack 및 고정된 패키지 관리자를 확인하세요.

아래의 첫 번째 명령을 실행하세요. Corepack는 package.json에 기록된 pnpm 버전을 선택합니다. pnpm는 프로젝트에서 사용하는 라이브러리를 다운로드합니다. Corepack가 해당 버전을 다운로드할 수 있는 권한을 요청하면 y를 입력하고 Enter를 누르세요. 이 체크아웃 핀은 pnpm 11.19.0입니다. 다른 패키지 관리자를 선택하는 대신 핀을 유지하세요.

corepack이 누락된 경우 npm install --global corepack를 실행하고 터미널을 다시 열고 다시 시도하세요. PowerShell에서 npm.ps1 또는 corepack.ps1 스크립트를 실행할 수 없다고 표시되면 corepack.cmd pnpm install를 포함하여 해당 명령에 npm.cmd 또는 corepack.cmd를 사용하세요. 컴퓨터의 실행 정책을 변경할 필요는 없습니다.

필터링된 첫 실행 명령은 Corepack를 직접 호출합니다. corepack pnpm dev와 같은 Turbo 명령을 사용하는 경우 Turbo에는 PATH에도 pnpm 명령이 필요합니다. 아래 Windows 설정에서는 사용자가 쓸 수 있는 폴더에 해당 명령을 생성합니다. PATH 변경 사항은 현재 터미널에서만 지속됩니다. pnpm가 누락된 경우 새 터미널을 연 후 이 블록을 다시 실행하세요. macOS/Linux에서는 corepack enable를 실행합니다. 권한 오류가 보고되면 필터링된 첫 실행 명령을 대신 사용하세요.

corepack --version
corepack pnpm --version

# Windows PowerShell only, for Turbo commands:
$kitShimDir = Join-Path $env:LOCALAPPDATA 'supastack/corepack-shims'
New-Item -ItemType Directory -Path $kitShimDir -Force | Out-Null
corepack enable --install-directory $kitShimDir
$env:PATH = "$kitShimDir;$env:PATH"

7. 플랫폼을 계속 사용하세요

Node 및 Git 인쇄 버전이 준비되면 Corepack는 고정된 pnpm를 선택할 수 있고 터미널은 package.json이 포함된 폴더에 있습니다. 아래에서 튜토리얼 하나를 선택하세요. Docker는 웹 데모의 선택 사항입니다. 실제 계정에는 나중에 데이터베이스가 필요합니다. Desktop에는 Rust 및 기본 빌드 도구도 필요합니다. 튜토리얼에서는 실행 명령 전에 이에 대해 설명합니다.

자주 묻는 질문

질문 14개

supastack이란 무엇인가요?

supastack은 AI SaaS 제품을 구축하기 위한 모듈식 기반입니다. 공통 인프라를 모아두어 제품 고유의 기능에 집중할 수 있습니다.

웹과 모바일을 지원하나요?

네. supastack에는 웹과 모바일 경험의 출발점으로 Next.js 앱과 Expo 앱이 포함되어 있습니다.

어떤 인증이 포함되어 있나요?

Better Auth가 이메일/비밀번호, OTP, 소셜 로그인을 커버합니다. 개인 워크스페이스는 계정과 함께 프로비저닝되어 첫날부터 레코드가 경계 안에 유지됩니다.

AI는 어떻게 지원되나요?

supastack에는 구성 가능한 멀티 프로바이더 AI, 사용량 추적, 예산, 암호화된 자체 키(BYOK) 지원이 포함되어 있습니다.

구독은 어떻게 관리되나요?

이 키트 위에 구축된 제품에서는 Stripe 결제, 구독, 권한이 유료 액세스의 기반을 형성합니다. 프로바이더 시크릿은 서버 측에 유지됩니다.

제품 고유 코드는 어디에 두나요?

제품 고유 기능은 별도의 코드베이스에 두고, 제품이 supastack 기본 모듈을 구성하고 통합합니다.

supastack 가격은 어떻게 되나요?

키트는 평생 업데이트가 포함된 일회성 구매입니다: 단일 프레임워크 $249(기간 한정 출시 가격 — 정가 $349에서 $100 할인) 또는 모든 프레임워크(Next.js, iOS, Android) $499(기간 한정 출시 가격 — 정가 $599에서 $100 할인), 추가 개발자 시트당 $75. 키트 구독은 없습니다. 이 사이트의 체크아웃은 라이선스 키를 이메일로 전달하고 GitHub 초대로 리포지토리 액세스를 제공합니다.

워크스페이스는 내 데이터를 어떻게 경계 짓나요?

사용자 레코드는 workspaceId로 범위가 지정됩니다. 신원, 권한, AI 사용량, 결제 이벤트, 감사 항목은 개인 워크스페이스 경계 안에 유지됩니다.

백그라운드 작업은 어떻게 작동하나요?

Trigger.dev가 명시적인 작업 런타임입니다. JobRunner 계약은 enqueue, status, cancel만 약속하며 — 워크플로 의미는 Trigger.dev 고유이고 명시적입니다.

이메일과 아웃리치는 어떻게 다른가요?

트랜잭션 이메일은 작업 완료 알림 같은 제품 워크플로를 커버합니다. 콜드 아웃리치와 캠페인은 제품 자체에 속하며 이 키트의 이메일 모듈 밖입니다.

모바일 구매는 어떻게 작동하나요?

모바일은 RevenueCat 네이티브 구매와 복원을 지원하며 서버에서 접근 권한을 검증합니다. 출시 전에 스토어 계정을 설정하고 기기 테스트를 완료하세요. 웹 결제는 별도로 관리합니다.

AI 프로바이더 키는 어디에 있나요?

BYOK 자격 증명은 암호화되어 서버 측에 유지됩니다. 키는 로그에서 삭제되며, 사용량과 예산은 워크스페이스 수준에서 확인할 수 있습니다.

체크아웃에서 어떤 결제 수단을 지원하나요?

Stripe 호스팅 체크아웃은 카드를 받으며, Stripe 계정에서 지갑을 활성화하면 Alipay와 WeChat Pay도 제공할 수 있습니다 — 중국 구매자에게 유용합니다. 지갑 승인은 비동기로 확정되므로 결제가 완료되는 즉시 라이선스 페이지가 갱신됩니다.

환불을 받을 수 있나요?

저장소 접근 권한을 얻은 후에는 supastack이 영구적으로 귀하의 소유가 되므로 환불이 불가능합니다. 하지만 안심하세요. 평생 업데이트가 포함된 전체 소스 코드를 받아 자신이나 고객을 위한 제품을 무제한으로 구축하고 출시할 수 있습니다. 단, 코드를 재판매하거나 저장소를 스타터 키트 또는 템플릿으로 재배포할 수는 없습니다.

KO
테마