기능 가이드 핸즈온 포함
사용자
기능 정리 — 만들기부터 배포까지
미니앱은 별도 개발 없이, AI에게 말로 요청해서 우리 팀 전용 도구(설문, 신청서 등)를 직접 만들고 배포할 수 있는 기능입니다.
이 유닛을 마치면
- 미니앱을 만들고 배포하는 전체 8단계 흐름을 설명할 수 있다
- 검수 요청부터 승인까지의 과정을 나열할 수 있다
전체 흐름
| 단계 | 내용 | 위치 |
|---|---|---|
| ① 앱 생성 | 사이드바 → 미니앱 메뉴 → 새 만들기 | 미니앱 목록 |
| ② 기본 정보 입력 | 앱 이름, 슬러그, 아이콘, 설명 | 생성 모달 |
| ③ 개발 | 바이브코딩 킷 다운로드 → Claude Code에 연결 | 앱 상세페이지 |
| ④ AI에게 요청 | 원하는 기능을 말로 설명 | Claude Code |
| ⑤ 배포 파일 업로드 | 완성된 .aiapp 파일을 버전 탭에 업로드 | 앱 상세페이지 |
| ⑥ 검수 요청 | 관리자 승인 대기 목록에 등록 | 관리자 화면 |
| ⑦ 승인·게시 | 관리자가 미리보기 확인 후 승인/반려 | 관리자 화면 |
| ⑧ 실사용 | 직원은 미리보기 링크로 접속해 제출, 동료가 만든 앱은 공유받은 앱 탭에서 확인 | 배포된 앱 / 미니앱 목록 |
② 기본 정보 입력
- 슬러그(주소) — 영문 소문자, 숫자, 하이픈만 사용 가능. 3~40자.
- 앱당 아이콘은 이모지 1개까지 지정할 수 있습니다.
③ 개발
- 바이브코딩 킷 = Claude Code 지침 + Vite 스캐폴드가 담긴 zip 파일입니다.
- 진행 순서:
pnpm install→pnpm dev(로컬 미리보기) →pnpm pack(배포 파일 생성) - 개발 토큰은 상세페이지의 "개발 토큰" 탭에서 발급하며, 로컬 개발 서버(
pnpm dev)에서 실제 데이터에 접근할 때만 필요합니다. 빌드·패키징(.aiapp 생성) 자체엔 필요하지 않습니다.
④ AI에게 요청
- 자연어로 요청하면 AI가 화면 구조(컬렉션, 필드)를 먼저 설계안으로 제시하고, 이후 타입체크 → 빌드 → 패키징까지 자동으로 진행합니다.
- 제출자용 화면과 관리자용 화면을 역할별로 분리해서 만들 수 있습니다(권한 요청 시).
⑤~⑦ 배포·승인
- 업로드 직후엔 게시 전 상태 — 만든 사람과 관리자만 미리보기할 수 있습니다.
- 검수 요청을 하면 관리자 화면의 "승인 대기" 탭에 노출됩니다(앱 이름·소유자·요청 버전·현재 버전·최종 업로드 시각 표시).
- 관리자가 미리보기로 확인한 뒤 승인 또는 반려합니다. 승인돼야 실제로 게시됩니다.
- 공개 범위(전체 공개 / 지정 대상만)는 승인 시점에 함께 설정합니다.
⑧ 실사용
- 로그인 정보로 이름이 자동 입력되어 직원이 별도로 타이핑할 필요가 없습니다.
- 제출한 뒤에도 다시 접속해 "수정 저장"으로 내용을 바꿀 수 있습니다.
- 관리자는 전체 제출 수 / 완료 / 미완료 / 완료율을 카드로 확인하고, 이름 검색·상태 필터를 쓸 수 있습니다.
- 동료가 만든 앱은 미니앱 메뉴의 "공유받은 앱" 탭에서 확인할 수 있습니다. 카드에 앱 이름·소유자·상태(게시됨/승인됨)·버전이 표시되며, 카드를 누르면 바로 실행됩니다. 제목·슬러그·소유자로 검색할 수 있습니다.
실습해보기
화면을 한 단계씩 넘겨보며 직접 따라 해보세요.
STEP 1 / 4
화면 캡처 준비 중
1사이드바 → 미니앱 메뉴에서 '새 만들기'를 눌러봅니다.
화면 캡처 준비 중
2앱 이름, 슬러그, 아이콘, 설명 등 기본 정보를 입력해봅니다.
화면 캡처 준비 중
3바이브코딩 킷을 내려받아 구조를 살펴봅니다.
화면 캡처 준비 중
4개발 환경이 있다면 pnpm install → pnpm dev로 로컬 미리보기를 실행해봅니다.
확인 퀴즈
아래 문제를 풀어보면서 배운 내용을 점검해보세요. 틀려도 다시 시도할 수 있어요 (단, 다시 시도할수록 획득 점수는 줄어듭니다).
슬러그(주소)에 쓸 수 없는 것은?
앱을 업로드한 직후 상태는?