> For the complete documentation index, see [llms.txt](https://developers-apps-in-toss.toss.im/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers-apps-in-toss.toss.im/ai-vibe-coding/intro.md). # 미니앱 만들기 "이런 앱이 있었으면 좋겠다"는 아이디어만 있어도 충분해요. 코드를 몰라도 AI에게 원하는 내용을 말로 설명하면, AI가 대신 코드를 작성해 줘요. 이 문서는 Claude, Codex 같은 AI 도구와 대화하면서 아이디어를 실제로 동작하는 앱인토스 미니앱으로 만드는 전체 과정을, 처음부터 끝까지 순서대로 안내해요. {% hint style="info" %} **이런 분께 도움이 돼요** * 코딩을 전혀 해본 적 없는 분 * 앱 아이디어는 있지만 어떻게 시작해야 할지 모르는 분 * AI의 도움을 받아 빠르게 미니앱을 만들어 보고 싶은 분 {% endhint %} 이미 웹 프로젝트가 있다면 [기존 Web 프로젝트 개발 가이드](/ai-vibe-coding/tutorials/webview.md)를, React Native로 개발하고 싶다면 [React Native 개발 가이드](/ai-vibe-coding/tutorials/react-native.md)를 참고해 주세요. *** ### 1. 준비하기 앱을 대신 만들어 줄 AI 도구를 먼저 설치하고, 개발에 필요한 프로그램까지 준비해요. #### 1-1. AI 도구 설치하기 Claude나 Codex 중 더 익숙한 도구를 골라 설치해 주세요. {% tabs %} {% tab title="Claude" %} [Claude 다운로드 페이지](https://claude.com/ko/download)에서 사용 중인 운영체제(macOS·Windows)에 맞는 설치 파일을 내려받아 설치해 주세요. 설치가 끝나면 Claude 앱을 실행하고 로그인해 주세요. 왼쪽 위의 'Code'를 눌러 주세요.
{% endtab %} {% tab title="Codex" %} [Codex 앱 소개 페이지](https://openai.com/ko-KR/index/introducing-the-codex-app/)에서 Codex 앱을 내려받아 설치해 주세요. 설치가 끝나면 Codex 앱을 실행하고 로그인해 주세요.
{% endtab %} {% endtabs %} #### 1-2. Node.js 설치하기 앱을 만들려면 Node.js라는 프로그램이 필요해요. 이게 있어야 이후에 쓸 개발 도구들이 정상적으로 동작해요. Claude나 Codex 채팅창에 아래처럼 요청해 보세요. AI가 설치 여부를 확인하고, 필요하면 알아서 설치해 줘요. AI가 응답으로 버전 정보(예: v22.12.0)를 알려주면 정상적으로 설치된 거예요. ``` Node.js가 설치되어 있는지 확인하고, 없으면 설치해줘. 설치가 끝나면 버전 정보도 알려줘. ```
Node.js 설치하는 모습을 영상으로 확인해요 {% embed url="" %}
*** ### 2. 앱인토스 기능 연결하기 AI가 앱인토스 기능을 정확하게 쓸 수 있도록 MCP를 연결하는 단계예요. MCP는 AI에게 앱인토스에 대한 정보를 미리 알려주는 연결 고리예요. 연결해 두면 AI가 앱인토스 규칙과 사용법을 정확히 알고 시작해요. 연결하지 않으면 AI가 잘 모른 채로 짐작해서 엉뚱하게 만들 수도 있어요. #### 2-1. 앱인토스 MCP 연결하기 앱인토스 MCP를 연결하면 AI가 이 문서에서 안내하는 방법대로 앱을 만들어요. 진행하다가 궁금한 점이 생기면 AI에게 그냥 물어봐도, 앱인토스 문서를 찾아서 답해 줘요. 아래처럼 요청해 보세요. 이후 필요한 프로그램 설치와 연결 과정은 AI가 전부 알아서 처리해 줘요. 중간에 설치를 진행해도 될지 물어보면 확인하고 승인해 주세요. ``` ax CLI를 설치하고 앱인토스 개발 MCP를 연결해줘. 문서 검색을 위해 아래 MCP도 추가해줘. https://developers-apps-in-toss.toss.im/~gitbook/mcp ``` 아래처럼 요청해서 연결이 잘 됐는지 확인해 보세요. AI가 `apps-in-toss`, `apps-in-toss-docs`가 목록에 있다고 알려주면 정상적으로 연결된 거예요. ``` 연결된 MCP 목록을 보여줘 ```
앱인토스 MCP 연결하는 모습을 영상으로 확인해요 {% embed url="" %}
#### 2-2. 콘솔 작업용 MCP 연결하기 콘솔은 앱을 등록하고 관리하는 앱인토스 웹사이트예요. 이 MCP를 연결하면 콘솔 사이트에 직접 들어가지 않고도, AI에게 요청하는 것만으로 앱 등록이나 관리 작업을 진행할 수 있어요. 아래처럼 요청해 보세요. ``` 콘솔 작업을 위한 MCP를 추가해줘. URL: https://mcp.toss.im/adapters/apps-in-toss-console/mcp Client ID: mcp-gateway 연결한 다음에는 인증까지 진행해줘. ``` MCP 연결 후 로그인 창이 뜨면 안내에 따라 인증을 완료해 주세요. 완료되면 아래처럼 확인해 보세요. AI가 정상적으로 연결되고 인증까지 끝났다고 알려주면 완료된 거예요. ``` 콘솔 MCP가 잘 연결됐는지 확인해줘 ```
앱인토스 콘솔 MCP 연결하는 모습을 영상으로 확인해요 {% embed url="" %}
*** ### 3. 개발하기 #### 3-1. 기획하기 만들고 싶은 미니앱 아이디어를 AI에게 설명해 보세요. 아래처럼 요청하면 AI가 앱인토스 정책에 맞는지 확인해 주고, 필요한 화면과 기능을 정리해서 제안해 줘요. 제안이 마음에 들면 그대로 진행하고, 원하는 방향과 다르면 다시 요청해서 다듬어도 돼요. ``` [만들고 싶은 앱 설명]을 만들고 싶어. 1. 앱인토스 오픈 정책에 맞는 아이디어인지 확인해줘 2. 어떤 화면과 기능이 필요할지 정리해서 보여줘 3. 앞으로 개발하면서 앱인토스 가이드에 어긋나는 부분이 있으면 미리 알려줘 ``` 마음에 드는 디자인을 AI에게 알려주면 비슷하게 만들어 줘요. 아래 사이트에서 앱의 핵심 키워드로 검색한 뒤, 마음에 드는 이미지나 링크를 복사해서 AI에게 알려주세요. * 참고하면 좋은 사이트: [Dribbble](https://dribbble.com/shots/popular/mobile), [Mobbin](https://mobbin.com/discover/apps/ios/latest), [Pinterest](https://kr.pinterest.com/search/pins/?q=mobile%20ui\&rs=typed) #### 3-2. 미니앱 만들기 앱인토스에 미니앱을 등록하고, 코드가 담길 공간까지 함께 만들어져요. 아래처럼 요청해 보세요. `{미니앱이름}` 자리에는 원하는 이름을 자유롭게 지어서 넣어 주세요. ``` {미니앱이름} 이름으로 미니앱을 만들어줘. ``` #### 3-3. 원하는 기능 요청하기 이제 AI에게 원하는 기능을 하나씩 요청할 차례예요. 어떤 기능이 필요한지 말만 하면 AI가 알아서 만들어 줘요. 앱인토스에서 제공하는 [기능 문서](/documentation/overview.md)를 참고해도 좋아요. ``` 미니앱 접속하면 유저 식별키를 발급해서 유저별로 데이터를 저장해줘. 유저 식별키 기준으로 닉네임을 임의로 생성해줘. 메인 화면 하단에 배너 광고를 연동해줘. 스테이지가 끝난 후 포인트 지급 프로모션을 추가해줘. ``` {% hint style="info" %} **AI에게 잘 요청하는 방법** * 최대한 구체적으로 말해요 * "버튼 만들어줘" 보다 "화면 중앙에 시작하기 버튼을 만들고, 누르면 보상형 광고가 노출되게 연동해줘"처럼 말하면 더 정확해요. * 한 번에 완벽하지 않아도 괜찮아요 * 마음에 안 드는 부분이 있으면 "이 부분은 이렇게 바꿔줘" 처럼 편하게 다시 요청하면 돼요. AI가 바로 수정해 줘요. {% endhint %}
미니앱을 만드는 모습을 영상으로 확인해요 {% embed url="" %}
#### 3-4. 외부 저장소 서비스 연동하기 미니앱 자체에는 데이터를 계속 저장하는 기능이 없어요. 예를 들어 사용자가 남긴 게시글, 찜한 상품 목록, 저장한 닉네임처럼 다음에 다시 봐야 하는 데이터가 있다면, 외부 저장소 서비스를 연결하면 돼요. 모든 미니앱에 필요한 건 아니에요. 저장할 데이터가 없다면 이 단계는 건너뛰어도 괜찮아요. 대표적으로 아래 서비스를 많이 써요. * [Supabase](https://supabase.com/): 오픈소스 기반이고, 데이터베이스와 로그인 기능을 함께 제공해요. * [Firebase](https://firebase.google.com/?hl=ko): Google이 만든 서비스로, 실시간 업데이트와 푸시 알림 같은 부가 기능이 강점이에요. * [Cloudflare](https://www.cloudflare.com/ko-kr/): 응답 속도가 빠르고, 가벼운 데이터를 저장할 때 적합해요. 원하는 서비스에 가입하고 프로젝트를 만든 뒤, 발급받은 연결 정보(URL, API 키 등)를 AI에게 알려주면 나머지는 AI가 알아서 연결해 줘요. ``` {서비스명}을 연결해줘. {복사한 연결 정보} 그리고 [저장하고 싶은 데이터, 예: 사용자 이름]을 저장하고 불러오는 기능을 만들어줘. ```
Supabase에서 연결 정보 찾는 방법 1. Supabase 대시보드에서 프로젝트를 선택해요. 2. 왼쪽 메뉴의 Settings 안에서 API 관련 항목을 선택해요. 3. Project URL과 Publishable key 값을 확인할 수 있어요. 4. 두 값을 복사해서 AI에게 알려주면 돼요.
{% hint style="warning" %} **보안 설정을 확인해 주세요** 외부 저장소는 기본적으로 아무나 데이터에 접근할 수 있는 상태인 경우가 많아요. AI에게 "보안 설정도 확인해줘"라고 요청하면 안전하게 설정하는 방법을 안내해 줘요. 서비스 대시보드에서 직접 켜야 하는 부분도 있으니, AI가 안내하는 대로 따라가 주세요. {% endhint %} *** ### 4. 테스트하고 출시하기 미니앱은 다 만든 뒤에만 테스트할 수 있는 게 아니에요. 개발하는 중간중간 화면이 궁금할 때마다 언제든 틈틈이 테스트해 봐도 괜찮아요. #### 4-1. 토스앱으로 테스트하기 미니앱을 토스 앱에서 테스트할 수 있어요. 아래처럼 요청해 보세요. AI가 요청을 처리하면 토스 앱으로 푸시 알림이 와요. 알림을 누르면 실제 토스 앱에서 미니앱이 바로 실행돼요. ``` 미니앱을 테스트해보고 싶어. 테스트할 수 있게 푸시를 보내줘. ```
테스트 푸시를 받을 수 있는 조건 * 토스 앱에 로그인되어 있어야 해요. * 워크스페이스 멤버여야 해요. * 만 19세 이상이어야 해요.
에러나 이상한 화면이 보이면 캡처해서 AI에게 보여주세요. AI는 실제 기기 화면을 볼 수 없어서, 캡처와 함께 설명하면 더 정확하게 고쳐줘요. (예: 캡처 화면과 함께 "결제 버튼을 눌렀는데 아무 반응이 없어") 원하는 대로 안 되면 "이 부분은 이렇게 바꿔줘"처럼 편하게 다시 요청하세요. 수정한 뒤 다시 테스트하면 돼요. (예: "메인 화면 배너 광고를 조금 더 아래로 내려줘") 에러를 미리 예방하고 싶다면 [Sentry 연동하기](/ai-vibe-coding/integration/sentry.md)를 요청해 보세요. 에러가 났을 때 AI가 로그를 직접 확인할 수 있어서, 원인을 더 빠르고 정확하게 찾아줘요.
토스앱에서 테스트하는 모습을 영상으로 확인해요 {% embed url="" %}
#### 4-2. 출시하기 미니앱을 출시하려면 먼저 앱인토스팀의 검수를 통과해야 해요. 검수는 미니앱이 정책과 가이드를 잘 지켰는지 확인하는 절차예요. 테스트가 끝나면 검수를 요청해 보세요. ``` 미니앱을 출시하고 싶어. 검수를 요청해줘. ``` 검수 결과는 콘솔과 이메일로 안내해드려요. 검수가 승인되면 콘솔의 '출시하기' 버튼을 눌러야 미니앱이 사용자에게 공개돼요. 출시하면 1시간 후에 토스 미니앱 리스트에 바로 반영돼요. 앱을 만든 뒤에는 사용자에게 다가가기 위해 [마케팅 가이드](https://appsintoss.gitbook.io/appsintoss-docs/guide/marketing)도 함께 참고해 보세요. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://developers-apps-in-toss.toss.im/ai-vibe-coding/intro.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.