Atlas 설정하기 — 렌터카 관리 SaaS

Hostinger 호스팅

Atlas 코드는 무료이고, 호스팅은 유료 플랜입니다. 라이브 웹사이트가 여기서 실행됩니다.

Hostinger 플랜 선택하기

Unlimited 플랜이나 Web App 배포가 가능한 Cloud 플랜을 사용하세요.

Claude Desktop

설정을 맡을 AI 어시스턴트입니다. 기술적인 작업은 Claude가 Code 탭에서 처리합니다.

Claude Desktop 다운로드하기

https://claude.ai/download

Node.js

20.19 이상 버전. 나머지는 Claude가 처리합니다.

Node.js 다운로드하기

https://nodejs.org/en/download

Git

Atlas 사본을 게시하는 데 사용합니다. Git 명령은 Claude가 대신 실행합니다.

Git 다운로드하기

https://git-scm.com/

Supabase 계정

시작하는 데는 무료 플랜이면 충분합니다. 새 프로젝트는 Claude가 요청할 때 만듭니다.

Supabase 계정 만들기

https://supabase.com/dashboard

GitHub 계정

무료입니다. 나만의 비공개 Atlas 사본을 보관하며, Hostinger는 여기서 배포합니다.

GitHub 계정 만들기

https://github.com/signup

Atlas 다운로드하기

Atlas는 MIT 라이선스의 무료 오픈 소스입니다.

GitHub에서 Atlas 열기

https://github.com/salhiworks/atlas-car-rental-saas

Code를 클릭한 다음 Download ZIP 클릭하기 다운로드한 파일 압축 풀기 atlas-car-rental-saas-main 폴더를 문서 폴더처럼 찾기 쉬운 곳에 두기

이미 Git을 사용하시나요? 대신 저장소를 클론해도 됩니다. Claude의 설정은 어느 쪽이든 작동합니다.

Claude Desktop에서 Atlas 열기

Claude Desktop Code Local Select Project Folder Open Trust Workspace

README.md가 들어 있는 Atlas 폴더 자체를 선택하세요.

Claude에게 Atlas 설정 요청하기

Atlas 폴더를 연 상태에서 Code 탭에 다음 메시지를 보내세요:

Atlas 설정 프롬프트

Atlas에 내장된 설정을 시작합니다. 기술적인 작업은 Claude가 대신 처리합니다.

Set up Atlas for me.

Claude는 Atlas에 내장된 설정 스킬을 따릅니다. 컴퓨터를 확인하고, Atlas에 필요한 것을 설치하고, 기술적인 작업을 직접 진행합니다. Claude는 사용자가 필요할 때만 멈추며, 그 순간 하나하나가 이 가이드의 작업입니다.

Supabase 프로젝트 만들기

Claude가 가장 먼저 요청하는 것입니다. Atlas는 항상 새로운 빈 프로젝트에 설치됩니다.

Supabase 대시보드 열기

https://supabase.com/dashboard

New project 클릭하기 — Free 플랜이면 충분합니다 이름을 정하고 데이터베이스 비밀번호를 안전한 곳에 저장하기 준비되면 Project ID를 복사해 Claude에 붙여넣기

Supabase Project Settings General

Claude가 Supabase 로그인이나 프로젝트 연결을 요청하면, Claude가 알려 주는 안내를 그대로 따르세요.

설치 승인하기

Claude가 프로젝트의 이름, 리전, 생성 날짜를 보여 주고 Atlas를 설치해도 되는지 묻습니다. 방금 만든 프로젝트가 맞는지 확인한 뒤 yes라고 답하세요. 그 한 번의 yes로 나머지가 모두 진행됩니다:

Atlas 데이터베이스 생성 (마이그레이션 54개, 먼저 미리 보기)

Atlas의 Edge Functions 4개 배포 및 검증

Publishable key만으로 앱 구성

Atlas의 자동 빌드와 검사 실행

몇 분 정도 걸리며, 직접 열거나 테스트할 것은 없습니다. 프로젝트가 비어 있지 않으면 Claude는 멈추고 아무것도 변경하지 않습니다.

비어 있는 비공개 저장소 만들기

GitHub에 있는 나만의 Atlas 사본입니다. Hostinger는 여기서 웹사이트를 배포합니다.

GitHub 저장소 만들기

https://github.com/new

저장소 이름 정하기 Private 선택하기 README, .gitignore, license는 끈 상태로 두기 Create repository 클릭하기 저장소 URL 복사하기

게시 승인하기

Claude가 요청하면 저장소 URL을 Claude에 붙여넣으세요. Claude는 Git을 준비하고, 비밀 정보가 포함되지 않았는지 확인한 뒤, 저장소와 main 브랜치를 담은 짧은 요약을 보여 줍니다. 내 저장소가 맞는지 확인한 뒤 yes라고 답하세요.

Claude는 원본 Atlas 저장소에 절대 push하지 않습니다. Git이 로그인을 요청하면 Claude는 push를 직접 실행해 달라고 요청합니다. GitHub는 그곳에서 계정 비밀번호를 받지 않으므로 브라우저로 로그인하세요.

저장소 가져오기

아직 호스팅이 없나요? 먼저 준비물에서 플랜을 마련하세요.

Hostinger Websites Add Website Web App Import Git Repository

GitHub를 연결하고 Only select repositories 선택하기 Atlas 저장소와 main 브랜치 선택하기 무료 임시 도메인이나 내 도메인 선택하기

빌드 설정 및 배포하기

Hostinger가 감지한 Vite 프레임워크 프리셋 유지하기 Node.js 22 또는 제공되는 최신 버전 선택하기 빌드 명령을 npm run build로 설정하기 출력 디렉터리를 dist로 설정하기

다음 두 환경 변수만 추가하세요. 두 값 모두 Claude가 보여 주므로 다른 제안은 무시해도 됩니다:

VITE_SUPABASE_URL VITE_SUPABASE_PUBLISHABLE_KEY

VITE_SUPABASE_URL

프로젝트 URL

VITE_SUPABASE_PUBLISHABLE_KEY

Publishable key

이 값들은 Supabase에서 확인하세요

Connect 열기

https://supabase.com/dashboard/project/_?showConnect=true

보안

여기에는 Publishable key만 넣습니다. Secret 키나 service_role 키를 VITE_ 변수에 절대 넣지 마세요. VITE_로 시작하는 값은 모두 브라우저에서 보입니다.

Deploy를 클릭하고 빌드가 끝날 때까지 기다리기 웹사이트 주소를 복사해 Claude에 붙여넣기

Claude가 라이브 웹사이트가 HTTPS로 열리고 Supabase 프로젝트에 연결되어 있는지 확인합니다.

라이브 주소를 Supabase에 추가하기

가입 및 비밀번호 이메일은 이 주소들로 연결됩니다. Claude가 Hostinger 도메인에 맞는 정확한 Site URL과 Redirect URLs 4개를 보내 주니, Claude의 메시지에서 복사하세요.

Supabase Authentication URL Configuration

Site URL을 https://로 시작하는 라이브 주소로 설정하기 Redirect URLs 4개를 하나씩 추가하기 Save를 클릭한 다음 완료했다고 Claude에 알리기

각 Redirect URL은 라이브 주소 뒤에 다음 경로 중 하나를 붙인 것입니다:

/auth/callback

/accept-invite

/auth/reset-password

/confirm-email

에이전시 만들기

Claude가 준 가입 링크 열기 — 라이브 주소 뒤에 /sign-up을 붙인 주소 Supabase 계정과 같은 이메일로 에이전시 만들기 같은 브라우저에서 확인 이메일 열기 로그인한 뒤 대시보드에 에이전시가 보이면 Claude에 알리기

같은 이메일을 쓰는 이유: Supabase의 기본 이메일은 Supabase 팀 주소로만, 시간당 약 2통까지 전송됩니다. 그다음 Claude가 사용자를 Owner로 하는 에이전시가 있는지 확인합니다. 직접 테스트할 것은 없습니다.

이제 Atlas가 라이브 상태입니다. 이제 main 브랜치에 push할 때마다 Hostinger에 다시 배포되므로, 이름, 로고, 색상을 포함해 원하는 변경을 Claude에 요청한 뒤 push해 달라고 하세요.

실제 고객을 받기 전에

Supabase 팀 외부의 고객이나 직원이 가입하기 전에 자체 이메일 제공업체(Custom SMTP)를 연결하세요:

Supabase Authentication Emails SMTP Settings