# 첫 제품 연결하기

이 튜토리얼을 마치면 제품 하나가 allob 에 연결되고, 사용자가 제품을 쓸 때마다 allob 에 이벤트가 쌓여요. 이벤트는 "가입했다", "결제 화면을 봤다"처럼 사용자가 한 행동 하나하나를 말해요.

시작하기 전에 [설치와 로그인](/docs/setup)을 마쳐 주세요.

## 전체 흐름

1. 계정과 제품 만들기
2. 코드 폴더 연결하기
3. 측정할 이벤트 정하고 코드 넣기
4. 배포하고 이벤트 확인하기

## 1. 계정과 제품 만들기

계정은 사업 하나, 제품은 그 사업에서 운영하는 앱이나 웹사이트 하나예요. 처음 로그인하면(프라이빗 베타 동안은 받은 초대 링크를 열고) 계정 → 제품 → 사업자 형태 순서로 정하는 화면이 나와요. 제품 화면에서는 제품 이름과 플랫폼만 정하면 돼요. 플랫폼은 제품이 돌아가는 곳(웹·iOS·Android·macOS)이고, 여러 개 고를 수 있어요. 웹을 고르면 사이트 주소도 입력할 수 있어요. 입력하지 않아도 되고, 나중에 제품 › 설정에서 입력해도 돼요. 주소와 명령에 쓰는 영문 이름은 제품 이름에서 자동으로 만들어요. 이름에 영문이나 숫자가 없어 만들 수 없으면 영문으로 직접 정해요. 첫 제품을 추가하면 사업자 형태(개인사업자·법인·아직 없음)를 고르고 **내 사업** 화면으로 넘어가요. 내 사업에는 사업자 정보와 등록 서류(사업자등록증·통신판매업 신고증 등)를 둬요. 사업자 등록·스토어 계정·세금 같은 절차는 사업마다 달라서 화면에서 따라가지 않고, [사업 가이드](/docs/journey)를 보고 해당하는 것만 에이전트와 함께 해요. 다른 제품은 나중에 왼쪽 메뉴 **제품** 아래의 **제품 추가**에서 추가하면 돼요.

![제품 추가 화면](/docs/img/onboarding-product.png)

에이전트에게 맡겨도 돼요. 이름은 원하는 대로 바꾸세요.

:::prompt
allob 에 계정과 제품을 만들어 줘.
- 계정: allob account create --slug my-studio --name "My Studio" --invite "<받은 초대 링크>"
  계정이 이미 있거나 초대 없이 가입할 수 있으면 --invite 는 빼. 초대 링크는 내가 알려 줄게.
- 제품: allob product add diary --name "Diary" --platform ios,android
--platform 은 이 프로젝트가 돌아가는 곳을 web, ios, android, mac 중에서 하나 이상 골라 쉼표로 이어 줘.
웹사이트가 이미 열려 있으면 --site 로 주소도 넣어 줘(예: --site example.com). 웹 제품이면 내가 폰에서 승인하면 제품 주소가 되고, 앱만 있는 제품이면 앱 소개 사이트 주소로 바로 저장돼.
:::

`slug` 는 주소와 명령에 쓰는 이름이라 영문 소문자, 숫자, `-` 만 쓸 수 있어요. 제품의 `slug` 는 정한 뒤에는 바꿀 수 없어요. 계정의 `slug` 는 계정 설정이나 `allob account edit --new-slug` 로 바꿀 수 있고, 옛 이름을 가리키는 `allob.json` 은 한동안(바꿀 때 알려 주는 날까지) 그대로 쓰여요. 플랫폼(`--platform`)은 `web`, `ios`, `android`, `mac` 중 하나 이상이에요. 첫 이벤트 스키마를 만들 때 쓰고, 코드 폴더만 봐서는 어떤 SDK 를 받을지 알 수 없을 때도 써요. 나중에 바꾸려면 웹의 제품 › 설정이나 `allob product edit diary --platform web,ios` 를 써요.

제품 로고는 웹의 제품 › 설정에서 그림을 고르거나 `allob product logo diary --file logo.png` 로 넣어요. PNG·JPEG·WebP, 512KB 까지예요. 메뉴와 제품 이름 옆에 보여요.

사이트 주소는 제품 추가 화면, 제품 › 설정, `allob product edit diary --site example.com` 중 어디서 입력해도 같아요. `https://` 는 빼고 적어도 돼요. allob 은 주소를 한 번 열어 보고, 열리지 않으면 저장하지 않아요. 에이전트(CLI·MCP)가 입력한 주소는 내가 폰에서 승인해야 제품 주소가 돼요. 내가 대화에서 직접 시킨 일이거나, 계정 설정에서 "제품 주소 정하기·바꾸기"를 확인 없이 하도록 바꿨다면 바로 적혀요. 이 주소는 사업 가이드 웹 출시의 "배포하기" 할 일에 적는 주소와 같아서, 입력하면 그 할 일도 끝난 것으로 보여요.

웹 없이 앱(iOS·Android·macOS)만 만드는 제품이면 같은 자리에 **소개 사이트 주소**를 입력해요. 앱을 소개하는 웹사이트(랜딩 페이지)예요. 입력하면 검색 노출에서 구글·네이버·AI 답변이 그 사이트를 어떻게 읽는지 점검하고, 사이트 아이콘을 로고로 가져와요. 웹 출시 할 일은 생기지 않아서 플랫폼에 웹을 추가하지 않아도 돼요. 에이전트가 입력해도 승인 없이 바로 저장되고, 지우려면 제품 › 설정에서 비우고 저장하거나 `allob product edit diary --remove-site` 를 써요.

로고를 넣지 않았다면 allob 이 찾아서 넣어요. 사이트 주소를 입력하면 그 사이트의 아이콘을, App Store·Google Play 앱을 연결하면 스토어 앱 아이콘을 가져와요. 사이트에서는 정사각형 아이콘을 apple-touch-icon, 웹 매니페스트, PNG·SVG 아이콘, `favicon.ico` 안의 PNG 순서로 찾아요. 128px 이상을 먼저 쓰고, 없으면 64px 이상 중 가장 큰 것을 써요. 32px 파비콘뿐이면 흐리게 보여서 가져오지 않아요. 스토어 아이콘은 128px 이상만 써요. 직접 넣은 로고는 바꾸지 않아요. 사이트 주소를 바꾸면 사이트에서 가져온 로고도 새 사이트에서 다시 가져와요. 다시 찾으려면 제품 › 설정의 "사이트에서 찾기"·"스토어에서 가져오기"나 `allob product logo diary --from site`(또는 `--from store`)를 써요.

## 2. 코드 폴더 연결하기

제품 코드 폴더에서 `allob folder init` 을 실행하면 폴더 연결부터 측정 코드 준비까지 한 번에 끝나요.

:::prompt
이 폴더를 allob 제품 diary 에 연결해 줘.
1. allob folder init diary 를 실행해.
2. 무엇을 만들었는지 알려 줘.
:::

`allob folder init` 은 이런 일을 해요.

- 폴더에 `allob.json` 을 만들어 제품과 연결해요. 이 폴더에서는 명령마다 제품 이름을 적지 않아도 돼요. SDK 를 받을 폴더도 이 파일의 `"sdk"` 에 적혀요.
- 제품에 이벤트 스키마가 없으면 첫 스키마(`allob.schema.json`)를 만들어 올려요. 이벤트 스키마는 무엇을 측정할지 적어 두는 파일이에요. 처음에는 이 제품만의 이벤트 없이 시작해요. 웹사이트라면 가입, 로그인, 결제처럼 어느 제품에나 있는 [표준 이벤트](/docs/schema#표준-이벤트)를 스키마에 적지 않아도 웹 SDK 에서 바로 쓸 수 있어요. 앱 SDK 는 스키마에 적은 이벤트만 보내요. 그래서 플랫폼에 iOS·Android·macOS 가 있으면 첫 스키마에 앱 열기 이벤트(`app_open`)가 하나 들어 있어요. 앱에서 보낼 다른 이벤트는 3단계에서 추가해요.
- 스키마에 맞는 측정 코드를 `allob/` 폴더에 받아요. 이 코드를 SDK 라고 불러요. 어떤 SDK 를 받을지는 폴더를 보고 정해요. 웹 화면 코드(`package.json` 의 Vite·Next.js 같은 패키지나 `index.html`)가 있으면 웹 SDK, Expo·React Native 앱이면 앱 SDK, Cloudflare Worker 설정(`wrangler.toml`·`wrangler.json`·`wrangler.jsonc`)이 있으면 서버 SDK(`server.ts`)를 받아요. 서버 SDK 는 결제 웹훅처럼 서버 코드에서 이벤트를 보낼 때 써요. 폴더에서 알 수 있는 게 없으면 제품 플랫폼으로 정해요. 무엇을 왜 골랐는지는 실행 결과에 나와요. 스키마에 서버 이벤트(앱이면 앱 이벤트)가 아직 없으면 그 SDK 는 이번엔 받지 않고 `allob.json` 에 남겨 둬요. 이벤트를 추가해 `allob schema push` 한 뒤 `allob sdk pull` 로 받아요.
- 프로젝트의 `AGENTS.md` 에 allob 작업 규칙을 추가해요. 덕분에 다음부터는 에이전트가 배포할 때마다 알아서 변경을 기록해요.

:::tip
이미 스키마가 있는 제품이면 스키마는 그대로 두고 SDK 만 받아요. 폴더에 직접 써 둔 `allob.schema.json` 이 있으면 그 파일을 첫 스키마로 올려요.
:::

웹·앱·서버 코드가 한 저장소의 여러 폴더에 나뉘어 있으면 `allob.json` 의 `"sdk"` 에 폴더마다 경로를 적고 `allob sdk pull` 을 다시 실행해요. 경로는 `allob.json` 이 있는 폴더를 기준으로 적어요.

```json
{
  "version": 2,
  "account": "my-studio",
  "product": "diary",
  "sdk": {
    "web": "web/src/allob",
    "server": "server/src/allob",
    "app": "app/src/allob"
  }
}
```

| 이름 | 받는 코드 | 가이드 |
|---|---|---|
| `web` | 웹사이트·웹앱용 웹 SDK | [웹사이트에 측정 넣기](/docs/web) |
| `server` | 결제 알림을 받는 서버용 `server.ts` | [결제 기록하기](/docs/payments) |
| `app` | React Native·Expo·웹뷰 앱용 앱 SDK | [앱에 측정 넣기](/docs/app) |

## 3. 측정할 이벤트 정하고 코드 넣기

이제 이 제품만의 이벤트를 스키마에 추가해요. 처음에는 사용자가 제품에서 가장 중요한 일을 하기까지의 단계 3~5개면 충분해요. 일기 앱이라면 "일기 쓰기 → 결제 화면 보기 → 결제 시작 → 결제" 같은 흐름이에요.

:::prompt
이 제품의 첫 이벤트를 정하고 코드에 넣어 줘.
1. 코드를 읽고, 사용자가 핵심 기능을 쓰기까지의 단계를 이벤트 3~5개로 제안해 줘. 내가 확인한 뒤에 진행해.
2. https://allob.app/docs/schema.md 형식대로 allob.schema.json 에 그 이벤트들을 추가하고, 순서대로 묶은 퍼널을 하나 넣어 줘.
3. allob schema push --dry-run 으로 검사하고, 문제가 없으면 allob schema push --note "first events" 로 올려 줘.
4. allob sdk pull 로 SDK 를 다시 받아.
5. 웹이면 https://allob.app/docs/web.md, 앱이면 https://allob.app/docs/app.md 를 읽고, 이벤트가 실제로 일어나는 곳에서 보내도록 코드를 고쳐 줘.
고친 파일과 각 이벤트를 어디서 보내는지 알려 줘.
:::

:::tip
이벤트 이름은 나중에 바꾸면 지난 숫자와 이어지지 않아요. 에이전트가 제안한 이름을 한 번 읽어 보고, 무슨 행동인지 바로 알 수 있는지 확인하세요.
:::

## 4. 배포하고 이벤트 확인하기

평소처럼 제품을 배포한 뒤, 직접 제품을 몇 번 써 보세요. 1분쯤 지나면 이벤트가 보여요.

:::prompt
allob ingest events 를 실행해서 최근 24시간 동안 들어온 이벤트를 보여 줘. 스키마에 있는데 안 들어온 이벤트가 있으면 이유를 찾아 줘.
:::

이벤트 이름 옆에 건수와 기기 수가 나오면 연결이 끝난 거예요. 웹 화면의 제품 › 지표 탭에서도 같은 내용을 볼 수 있어요.

## 다음 단계

- [핵심 개념](/docs/concepts): 지금 만든 것들이 무엇인지 정리해요.
- [릴리스와 마케팅 변경](/docs/releases): 배포와 광고 변경을 기록해요.
- [지표 보기](/docs/metrics): 퍼널과 리텐션을 봐요.