첫 제품 연결하기

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

시작하기 전에 설치와 로그인을 마쳐 주세요.

#전체 흐름

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

#1. 계정과 제품 만들기

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

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

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 을 실행하면 폴더 연결부터 측정 코드 준비까지 한 번에 끝나요.

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

allob folder init 은 이런 일을 해요.

• 폴더에 allob.json 을 만들어 제품과 연결해요. 이 폴더에서는 명령마다 제품 이름을 적지 않아도 돼요. SDK 를 받을 폴더도 이 파일의 "sdk" 에 적혀요.
• 제품에 이벤트 스키마가 없으면 첫 스키마(allob.schema.json)를 만들어 올려요. 이벤트 스키마는 무엇을 측정할지 적어 두는 파일이에요. 처음에는 이 제품만의 이벤트 없이 시작해요. 웹사이트라면 가입, 로그인, 결제처럼 어느 제품에나 있는 표준 이벤트를 스키마에 적지 않아도 웹 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 작업 규칙을 추가해요. 덕분에 다음부터는 에이전트가 배포할 때마다 알아서 변경을 기록해요.

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

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

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

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

이 제품의 첫 이벤트를 정하고 코드에 넣어 줘.
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 를 읽고, 이벤트가 실제로 일어나는 곳에서 보내도록 코드를 고쳐 줘.
고친 파일과 각 이벤트를 어디서 보내는지 알려 줘.

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

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

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

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

#다음 단계

• 핵심 개념: 지금 만든 것들이 무엇인지 정리해요.
• 릴리스와 마케팅 변경: 배포와 광고 변경을 기록해요.
• 지표 보기: 퍼널과 리텐션을 봐요.

마크다운으로 보기 · llms.txt · 개인정보 처리방침 · 이용약관