Quickstart

새로온 호스팅에 정적 사이트(HTML·CSS·JS)를 올려 라이브 URL로 발행하기까지의 전체 흐름입니다. IDE의 AI(Claude Code·Cursor 등)와 함께 진행하는 것을 전제로 합니다.

전체 단계는 여섯입니다: 가입 → API 키 발급 → CLI 로그인 → 프로젝트 시작 → 제작 → 배포·발행.

1. 가입

브라우저에서 계정을 만듭니다.

• https://hosting.saeroon.com/register

계정·키·결제처럼 브라우저가 필요한 일만 웹에서 하고, 제작과 연동은 CLI·문서로 진행합니다.

2. API 키 발급

로그인한 뒤 개발자 센터에서 키를 발급합니다.

• https://developers.saeroon.com/keys

키는 두 종류이고, 다루는 방식이 정반대입니다.

• 비밀 키(sk_live_…) — 서버·CLI 인증용. 지금 발급할 키가 이것입니다. 해시로만 저장되어 발급 직후 한 번만 전체 값을 보여주므로 안전한 곳에 보관하세요. 분실하면 조회가 아니라 재발급이 유일한 복구 경로입니다.
• 공개 키(pk_live_…) — 회원·게시판·쇼핑을 붙인 사이트가 브라우저에서 자기 사이트를 알아보는 데 씁니다. 사이트마다 발급하며, 노출을 전제로 설계된 값이라 언제든 다시 볼 수 있습니다. 사이트를 한 번 배포한 뒤 같은 키 화면에서 발급합니다.

자세한 구분은 API 레퍼런스를 참고하세요.

3. CLI 로그인

CLI는 npx 로 바로 실행합니다. 별도 전역 설치가 필요 없습니다.

npx @saeroon/cli login

발급받은 비밀 키(sk_live_…)를 입력하면 인증이 저장됩니다. 확인:

npx @saeroon/cli whoami

4. 프로젝트 시작

정적 트랙이 기본값입니다. 빈 폴더에서 실행하면 시작용 index.html 골격과 AI 컨텍스트 파일이 생성됩니다.

npx @saeroon/cli init

생성되는 AI 컨텍스트 파일(예: CLAUDE.md)은 얇은 포인터입니다 — 핵심 규약과 함께 속성 레퍼런스를 참조하도록 안내하므로, 계약 전문을 로컬에 복제해 낡게 두지 않습니다.

5. 제작

원하는 화면을 IDE의 AI에게 만들게 합니다. 결과물은 그대로 배포되는 정적 파일입니다. 문의 폼·회원·게시판·장바구니 같은 작동은 코드를 새로 짜지 않고 HTML 요소에 data-saeroon-* 속성을 선언해 붙입니다.

• 문의 폼: Forms
• 회원·로그인: Members
• 게시판·댓글: Boards
• 장바구니·결제: Shop

속성 전수표는 Attributes에 있습니다.

6. 배포와 발행

폴더를 배포합니다.

npx @saeroon/cli deploy ./my-site

처음 배포한 사이트는 Draft(비공개, noindex) 상태입니다. 검색에 노출되고 방문자가 볼 수 있게 하려면 발행해야 합니다. 두 경로 중 하나를 쓰면 됩니다.

• CLI: npx @saeroon/cli site publish <slug>
• 웹: hosting 대시보드의 사이트 상세에서 발행하기 버튼

발행하면 <slug>.saeroon.com 에서 라이브로 열립니다.

다음 단계

• 폼·회원·게시판·장바구니 붙이기 → 위 문서 목록의 "기능 붙이기"
• IDE의 에이전트 연결(MCP) → MCP
• 만든 사이트를 템플릿으로 판매 → Marketplace
• 커스텀 도메인 연결: npx @saeroon/cli domain connect … (자세한 명령은 CLI 레퍼런스)

로드맵

아래는 아직 준비 중이며 현재 흐름에는 포함되지 않습니다.

• 예약(booking)·컬렉션(collection) 백엔드 부착 (현재 feature attach 지원 대상은 폼)
• 제휴 크리에이터 정산 (정산 정책 확정 후 공지)