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/local-setup.md (or send Accept: text/markdown).
로컬 설정
정확한 Windows 및 macOS 명령, 유료 공급자 자격 증명 없이 실제 데이터베이스 지원 계정에 대한 명확한 경로를 사용하여 컴퓨터에서 웹 데모를 실행하세요.
1. 컴퓨터를 준비하고 프로젝트를 엽니다.
먼저 완료 시작하기 전에: GitHub 초대를 수락하고 Node.js 22 이상, Git, 편집기 및 Corepack를 설치한 다음 웹 저장소 또는 모든 플랫폼 모노레포를 복제합니다. 편집기에서 supapack 폴더를 열고 터미널 → 새 터미널을 선택합니다. 편집기의 최상위 파일 목록에 package.json이 표시되어야 합니다. 아래의 모든 명령은 이 저장소 루트에서 실행됩니다.
그러면 AI, 청구 또는 이메일 제공업체의 계정이 없고 Docker 없이 로컬 데모가 시작됩니다. 최초 종속성 다운로드에 추가 시간을 허용하십시오. 다음 단계에서는 Windows 블록만 따르거나 macOS/Linux 블록만 따르십시오. 둘 다 실행하지 마십시오.
2. 구성 파일 생성 — macOS / Linux
터미널에서 아래의 각 줄을 실행하세요. 첫 번째 복사본은 이후 마이그레이션 명령을 위해 .env를 생성합니다. 두 번째는 웹 서버가 실제로 읽는 apps/web/.env.local를 생성합니다. 둘 다 예제의 로컬 설정을 포함합니다. 대상 파일이 이미 존재하는 경우 해당 파일을 유지하고 해당 복사 명령을 건너뜁니다. 저장된 설정을 덮어쓰지 마십시오. Windows 사용자는 대신 다음 섹션을 사용하세요.
corepack pnpm install는 앱에 필요한 라이브러리를 다운로드합니다. Corepack가 pnpm 다운로드를 요청하면 y로 대답하세요. 완료되고 터미널 프롬프트가 돌아올 때까지 기다리십시오. 오류가 없는 최종 Done 메시지는 계속할 수 있다는 의미입니다.
cp .env.example .env
cp .env.example apps/web/.env.local
corepack pnpm install2. 구성 파일 생성 — Windows PowerShell
package.json이 포함된 폴더의 PowerShell에서 다음 명령을 사용하세요. .env 또는 apps/web/.env.local가 이미 존재하는 경우 복사 줄을 건너뛰고 설정을 유지하세요. 서버를 시작하기 전에 설치가 완료될 때까지 기다리십시오. 스크립트 실행이 차단된 경우 시작하기 전에 설명된 대로 corepack 대신 corepack.cmd를 사용하세요.
Copy-Item .env.example .env
Copy-Item .env.example apps/web/.env.local
corepack pnpm install3. 웹 서버를 시작합니다. 이 터미널을 열어두세요.
저장소 루트에서 아래 명령을 실행하십시오. 웹 앱만 시작하므로 웹 전용 저장소와 모든 플랫폼 모노 저장소 모두에서 작동합니다. 터미널에 Local: http://localhost:3000 및 Ready가 표시될 때까지 기다립니다. 첫 번째 페이지를 컴파일하는 데 시간이 조금 더 걸릴 수 있습니다. 터미널은 계속 실행되어야 합니다. 그건 예상됩니다.
모든 플랫폼 모노레포에서 corepack pnpm dev는 사용 가능한 개발 작업 공간을 함께 시작합니다. apps/docs가 있는 경우 별도의 문서 앱은 http://localhost:3001.를 사용합니다. 읽고 있는 공개 가이드는 http://localhost:3000/docs. 웹 앱의 일부입니다. 이 튜토리얼을 따르기 위해 포트 3001이 필요하지 않습니다.
corepack pnpm --filter @supastack/web dev4. 앱을 열고 로컬 작업 하나를 완료하세요.
브라우저의 주소 표시줄에서 http://localhost:3000를 열어 홈페이지를 확인하세요. 그런 다음 http://localhost:3000/dashboard.를 엽니다. 미리 채워진 이름과 이메일을 유지하거나 자체 테스트 값을 입력하고 Start local reference flow를 클릭합니다. 그러면 메모리 내 데모 작업 공간이 생성됩니다. 영구 계정을 생성하거나 실제 이메일을 보내지 않습니다.
데모에서는 사이드바에서 AI task를 열고 로컬 승인 기준 요약과 같은 간단한 요청을 입력한 후 Queue local task를 클릭합니다. 상태가 대기열에 있으면 Run local task를 클릭한 다음 View result를 클릭합니다. 완료된 출력과 Email queued 상태가 표시되어야 합니다. AI 응답은 의도적으로 가짜이며 반복 가능합니다. 대기 중인 이메일은 로컬입니다. 서버를 다시 시작하면 이 데모 데이터가 지워집니다.
실제 가입에 /auth를 사용하려면 먼저 Postgres를 시작하고 데이터베이스 및 마이그레이션 가이드를 사용하여 마이그레이션을 적용하세요. 그 후에는 EMAIL_PROVIDER=local에서 보낸 가입 또는 OTP 메시지를 http://localhost:3000/mail-preview;에서 검사할 수 있으며 외부 받은 편지함에 도달하지 않습니다. 모바일 로그인에서도 데모 세션 대신 이 데이터베이스 기반 인증을 사용합니다.
5. 일반적인 첫 실행 문제를 중지하고 다시 시작하고 수정합니다.
성공은 홈페이지가 로드되고, 로컬 작업 공간이 열리고, 대기 중인 작업이 완료되었음을 의미합니다. 완료되면 서버 터미널을 클릭하고 Ctrl + C를 누르십시오. 나중에 다시 시작하려면 저장소 루트에서 터미널을 다시 열고 3단계의 서버 명령을 반복하십시오. 매번 종속성을 다시 설치하지 않습니다.
localhost:3000이 열리지 않으면 서버 터미널이 계속 실행 중이고 Ready가 표시되는지 확인하세요. 포트 3000을 사용 중이라면 Ctrl + C를 눌러 다른 개발 서버를 중지하고 다시 시도하세요. /auth를 연 후 데이터베이스 오류가 표시되면 데모를 위해 /dashboard로 돌아가거나 데이터베이스 가이드를 완료하세요. 로컬 데모가 누락된 경우 apps/web/.env.local에서 APP_ENV=local, AI_PROVIDER=fake, BILLING_PROVIDER=local, EMAIL_PROVIDER=local 및 JOB_PROVIDER=local를 확인한 다음 다시 시작하세요.
이름과 마케팅 텍스트를 맞춤설정하려면 편집기에서 apps/web/src/marketing/site-config.ts를 엽니다. 정확한 필드 및 확인 단계는 Branding을 따르세요. 실제 계정의 외형 설정은 먼저 데이터베이스 설정을 완료한 후 /settings/appearance를 엽니다. 자동 승인 명령은 이 첫 실행 연습보다 시간이 더 오래 걸립니다. 작업 공간 명령에서 찾으십시오.
설정을 계속하려면 데이터베이스 설정 가이드를 읽어보세요.