앱인토스 제작기 – 프로젝트 소개
앱인토스는 토스 앱 안에서 열리는 미니앱을 만들어 올릴 수 있는 플랫폼입니다. 저는 이 미니앱을 AI와 같이 만들고 있고, 이 블로그의 앱인토스 제작기는 그 과정을 앱 하나씩 기록하는 글입니다.
이 글은 그 첫 글로, 프로젝트 소개입니다. 어떤 앱을 만드는지, AI에게 무엇을 맡기고 무엇을 제가 하는지, 앞으로의 글이 어떻게 구성되는지를 적습니다.
앱인토스로 무엇을 만드나
지금 새로 기획하는 것은 게임이 아니라 실생활 도구입니다. 출퇴근길이나 일상 중에 3분 안에 고민 하나를 해결하는 앱이 기준입니다.
물을 마신 만큼 기록하는 앱, 이번 달 카드값을 페이스로 보여주는 앱, 사소한 결정을 대신 뽑아주는 앱 같은 것들입니다. 화면은 적게, 입력은 짧게 만드는 것을 원칙으로 합니다. 위 스크린샷에는 개편 작업 중인 화면도 섞여 있습니다.
만드는 도구는 앱인토스 웹 프레임워크와 React, 토스 디자인 시스템입니다. 웹으로 만든 화면이 토스 앱 안에서 열립니다.
새 앱을 만들기 전에 거르는 기준
아이디어가 떠올랐다고 바로 만들지 않습니다. 제작 전에 아래에 걸리면 멈춥니다.
- 이미 만든 앱과 첫 행동이나 검색어, 핵심 결과가 겹치면 새로 만들지 않고 기존 앱을 고칩니다.
- 한 번의 입력으로 30초 안에 결과가 보여야 합니다.
- 저장, 비교, 다음 알림 중 하나는 있어야 합니다. 다시 올 이유가 없는 앱은 만들지 않습니다.
- 금융, 건강, 감정에 관한 결과는 계산과 기록을 돕는 데까지만 합니다. 조언이나 진단처럼 읽히는 문구는 쓰지 않습니다.
기준이 하나 더 있습니다. 주제가 플랫폼 정책에 맞는지를 가장 먼저 봅니다. 금융·송금이나 부동산처럼 제한이 있는 영역은 기능을 어떻게 만들든 주제로 판단되기 때문에, 만들기 전에 확인하는 게 순서예요.
AI 하네스 – 미니앱 제작에 적용한 방법기획하는 AI와 만드는 AI를 나눴다
작업은 역할을 나눠서 합니다. 기획하는 AI 세션과 만드는 AI 세션을 따로 띄웁니다.
| 역할 | 하는 일 | 하지 않는 일 |
|---|---|---|
| 기획자 | 사용자 흐름, 화면 구성, 광고 위치, 재방문 이유를 계획 문서로 작성 | 코드 작성과 수정 |
| 제작자 | 승인된 계획만 구현 | 기획 변경, 새 앱 번호 정하기 |
| 저 | 무엇을 만들지 결정, 계획 승인, 최종 출시 |
기획자는 코드를 건드리지 않고, 제작자는 승인된 계획만 구현합니다. 제작자가 보기에 계획이 이상하면 고치지 않고 멈춘 뒤 저에게 알립니다.
계획 문서가 따로 남기 때문에 결과물이 계획과 맞는지 나중에 대조할 수 있습니다.
앱 하나의 정본은 파일 하나로
앱마다 이름, 카테고리, 검색 키워드, 광고 위치, 재방문 구조를 설정 파일 하나에 적어 둡니다. 콘솔에 올리는 앱 이름, 설명, 키워드, 카테고리가 이 파일에서 나갑니다. 무엇이 맞는 값인지 헷갈릴 때 볼 곳이 하나로 정해집니다.
출시 전에 거치는 점검
만든 뒤 바로 올리지 않고 점검 전담 AI 에이전트를 거칩니다.
- 기획 단계: 제품 방향, 약속과 실제의 일치, 디자인을 보는 에이전트 셋을 한꺼번에 돌립니다.
- 제작 단계: 계산 로직을 먼저 검증하고, 코드가 끝나면 실제 동작, 앱 설명과의 일치, 출시 조건을 보는 에이전트 셋을 한 번에 돌립니다.
점검을 돌리는 방식에도 규칙을 뒀습니다.
- 기획 점검은 한꺼번에 돌립니다. 하나씩 차례로 돌리면 지적이 나올 때마다 계획서를 다시 쓰게 되거든요.
- 제작 단계의 마지막 세 점검은 기록이 없으면 출시용 검사 명령이 막습니다. 점검을 빠뜨리고 넘어가는 일이 없게 하려는 장치예요.
- 알려진 수정을 다 끝낸 뒤에 점검을 부릅니다. 점검을 다시 돌리는 것이 가장 큰 비용이라서요.
출시는 번들 업로드, 기기 테스트, 검수 제출 순서입니다. 번들을 올리고 제 기기로 테스트 버전을 보내는 것까지는 AI가 합니다. 제가 직접 써본 뒤에 검수를 제출하고, 승인 뒤 출시 버튼은 콘솔에서 직접 누릅니다.
앱인토스 소개 – 어떤 플랫폼이고 왜 해볼 만한가여러 앱이 같이 쓰는 공통 코드
날짜, 연속 기록, 광고 안내, 알림 동의처럼 앱마다 똑같이 필요한 부분은 공통 모듈로 만들어 새 앱이 그대로 가져다 쓰게 했습니다. 한 번 제대로 만들어 두면 모든 앱이 같은 품질을 갖게 돼요.
대표적인 것이 날짜입니다. 오늘 날짜를 구할 때 흔히 쓰는 방법이 한국에서는 아침마다 틀립니다.
const KST_DATE_FORMAT = new Intl.DateTimeFormat('en-CA', {
timeZone: 'Asia/Seoul',
year: 'numeric',
month: '2-digit',
day: '2-digit',
});날짜는 한국 시간으로 직접 구하세요
new Date().toISOString()에서 날짜를 잘라 쓰면 UTC 기준이라, 한국 시간 0시부터 8시 59분 사이에는 어제 날짜가 나옵니다. 출석이나 연속 기록이 아침마다 하루씩 밀립니다.en-CA형식은 결과가YYYY-MM-DD로 나와서 따로 조립할 필요가 없습니다.- 기기 시간대를 따르는 방식도 해외에 나간 기기에서 어긋납니다. 시간대를 서울로 고정합니다.
앞으로 쓸 앱인토스 제작기
제작기는 앱 하나에 글 하나로 씁니다. 글마다 아래 순서를 따릅니다.
- 어떤 앱인지와 실제 화면, 직접 써보는 짧은 영상
- 화면과 흐름을 왜 그렇게 짰는지
- 핵심 코드 두세 조각과 그 이유
- 출시 뒤에 일어난 일과 다음에 고칠 것
전체 소스 코드는 싣지 않습니다. 대신 실제로 쓰고 있는 코드에서 중요한 몇 줄을 골라 왜 그렇게 썼는지 설명합니다. 첫 번째 앱은 물 마시기입니다. 앱인토스 미니앱 1 – 물마시기에서 이어집니다.
앱인토스 제작기 자주 묻는 질문
앱인토스 미니앱은 무엇으로 만드나요?
저는 앱인토스 웹 프레임워크와 React로 만듭니다. 웹 기술로 만든 화면이 토스 앱 안에서 열리는 방식입니다.
AI가 전부 만드나요?
기획 문서 작성과 코드 구현은 AI 에이전트가 하고, 무엇을 만들지 정하고 기획을 승인하는 일과 최종 출시는 제가 합니다.
이 제작기에서는 무엇을 볼 수 있나요?
앱마다 화면을 어떻게 짰는지, 핵심 코드 몇 조각, 검수와 운영에서 배운 것을 적습니다. 전체 소스 코드는 싣지 않습니다.
앱인토스는 토스 앱 안에서 미니앱을 서비스하는 플랫폼이고, 공식 안내는 앱인토스 개발자센터에 있습니다.
이 글은 직접 만들고 운영하며 남긴 기록입니다. 적힌 수치는 작성 시점의 제 계정 기준이며, 같은 결과나 수익을 보장하지 않습니다.
13 Comments