AI Studio 앱을 앱인토스용으로 바꿀 때, 무엇을 남기고 무엇을 분리했을까요?

한 장면을 가정해볼게요.

가상 예시입니다. 서비스를 만드는 사람은 웹에서 동작하던 앱을 미니앱으로 옮기면서 화면뿐 아니라 실행 환경과 제출용 패키지도 맞춰야 합니다. 특히 기존 기능 중 무엇이 앱 안에서 그대로 동작하고, 어떤 기능은 별도 서버가 필요한지 구분하지 않으면 출시 범위를 판단하기 어렵습니다.

*이 장면은 설명을 돕기 위해 구성한 가상 예시이며, 실제 경험이나 인터뷰 사례가 아닙니다.*

📌 먼저 보는 핵심 답변 (30초 요약)

• **퍼스널 아우라는 React/Vite 앱을 앱인토스 WebView 실행 규격에 맞춘 미니앱으로 구성했습니다.**: 퍼스널 아우라는 React/Vite 앱을 앱인토스 WebView 실행 규격에 맞춘 미니앱으로 구성했습니다.
• **기존 화면과 로컬 진단 흐름을 유지했고, 업로드용 번들 생성과 타입체크·빌드 검증을 마쳤습니다.**: 기존 화면과 로컬 진단 흐름을 유지했고, 업로드용 번들 생성과 타입체크·빌드 검증을 마쳤습니다.
• **AI Studio의 Express/Gemini 서버는 번들에 포함되지 않으며, 콘솔 카테고리와 연령 등급 확인은 제출 정보 단계에 남아 있습니다.**: AI Studio의 Express/Gemini 서버는 번들에 포함되지 않으며, 콘솔 카테고리와 연령 등급 확인은 제출 정보 단계에 남아 있습니다.

1. 전환할 때 먼저 나눌 것은 무엇이었을까요?

React/Vite 웹 앱을 앱인토스에서 실행하려면 화면만 옮겨서는 부족합니다. 앱인토스 WebView 실행 규격에 맞게 앱을 구성하고, 화면에 보이는 기능과 서버에서 처리하는 기능을 구분해야 합니다.

퍼스널 아우라는 Google AI Studio에서 만든 React/Vite 앱을 앱인토스용으로 전환해 배포·출시한 제품입니다. 기존 화면과 로컬 진단 흐름은 유지했지만, AI Studio의 Express/Gemini 서버 기능은 앱 번들에 포함하지 않았습니다. 이 구분을 바탕으로 실제로 보존한 범위와 별도 연동이 필요한 부분을 살펴보겠습니다.

2. 기존 앱에서 무엇을 보존했을까요?

앱인토스용으로 전환한 뒤에도 기존 화면과 로컬 진단 흐름을 이용할 수 있도록 구성했습니다. 다만 기존 웹 앱의 모든 처리 방식이나 서버 기능까지 옮긴 것은 아닙니다.

제출 자료는 앱 코드와 별도로 준비했습니다. 앱 로고와 다크모드 로고는 각각 600×600, 썸네일은 1932×828 크기로 마련했고, 한국어·영어·중국어·일본어 번역도 완료했습니다. 제출용 스크린샷 8장이 확인되며, 변경 기록에는 636×1048 크기의 실제 앱 화면 캡처 5장도 기재돼 있습니다.

화면과 로컬 기능은 앱 안에 보존했지만, 서버 기능은 별도로 살펴봐야 합니다. 다음으로 번들에 포함된 동작과 별도 연동이 필요한 동작을 구분해 보겠습니다.

3. 앱 번들에 포함된 기능과 분리한 기능은 무엇일까요?

앱인토스 번들에는 React 화면과 기존의 로컬 진단 흐름을 담았습니다. 개인 진단 이력과 케미·그룹 궁합 기록을 확인할 때 전면 광고가 노출되도록 했고, 광고는 쿨다운 게이트를 거칩니다. 즉, 기존 웹 화면을 옮기는 데 그치지 않고 앱인토스 WebView 실행 규격에 맞춘 업로드용 번들로 구성했습니다.

경계가 분명한 부분은 AI 처리입니다. AI Studio의 Express 서버와 Gemini 기능은 번들에 포함하지 않았어요. 따라서 실제 AI API 호출이 필요한 동작은 현재 앱 안에서 처리되는 것으로 볼 수 없으며, 필요하다면 별도 백엔드나 Supabase Edge Function으로 분리해야 합니다. 웹 앱을 패키징한다고 서버 기능까지 함께 옮겨지는 것은 아니라는 점이 전환 범위를 가릅니다.

제품은 배포·출시 상태이며, `npm run build`로 앱인토스 업로드용 번들도 생성했습니다. 남은 확인은 앱 기능 구현과는 별개로 콘솔 제출 정보를 맞추는 일입니다. 다음으로 카테고리 옵션과 연령 등급을 포함해 출시 상태와 제출 단계의 확인 사항을 살펴보겠습니다.

4. 현재 완료된 것과 콘솔에서 확인할 것은 무엇일까요?

현재 확인된 완료 항목은 제품 출시와 앱인토스용 번들 생성입니다. `npm run build`(`ait build`)가 성공해 업로드용 `.ait` 번들을 만들었습니다. 기록된 최신 빌드의 주 JS 청크는 909.29KB(gzip 276.23KB)입니다. 빌드 기록에는 934.67KB와 906.49KB도 있어, 산출물 크기는 빌드 시점에 따라 달라졌습니다.

다만 출시가 완료됐다고 해서 콘솔 제출 정보까지 모두 확정된 것은 아닙니다. 카테고리는 라이프·운세·심리·운세 테스트 경로를 검토했지만, 3단 드롭다운에 표시되는 정확한 옵션명은 콘솔 화면에서 확인해야 합니다. 이용자 연령 등급도 콘솔에서 제공하는 고정값을 확인한 뒤 확정해야 합니다.

따라서 처음 질문에 대한 답은 이렇습니다. 기존 화면과 로컬 진단 흐름을 유지해 앱인토스 WebView 실행 규격에 맞췄고, 업로드용 번들과 제출용 화면 자료를 준비했습니다. AI API 기능에는 별도 백엔드가 필요하며, 카테고리와 연령 등급은 콘솔에서 확인해야 합니다.

첨부한 실제 화면

• 이미지 1: 01.png (실제 화면 1)
• 이미지 2: 02.png (실제 화면 2)
• 이미지 3: 03.png (실제 화면 3)
• 이미지 4: 04.png (실제 화면 4)

❓ 자주 묻는 질문

Q. 퍼스널 아우라에는 어떤 기능 흐름이 포함되어 있나요?

A. 기존 화면과 로컬 진단 흐름을 유지했습니다. 개인 진단 이력과 케미·그룹 궁합 기록을 확인하는 흐름도 변경 이력에 포함되어 있습니다.

Q. 앱인토스 패키지에서 AI 기능도 바로 사용할 수 있나요?

A. AI Studio의 Express/Gemini 서버 기능은 앱인토스 번들에 포함되지 않습니다. 실제 AI API가 필요하다면 별도 백엔드나 Supabase Edge Function으로 분리해야 합니다.

Q. 앱의 기록을 확인할 때 광고가 노출되나요?

A. 개인 진단 이력과 케미·그룹 궁합 기록 항목을 눌렀을 때 전면 광고가 표시되도록 설정했고, 쿨다운 게이트를 거치게 했습니다.

Q. 현재 제품 작업은 어디까지 완료됐나요?

A. 제품은 배포·출시된 상태이며, 타입체크와 앱인토스 업로드용 빌드를 검증했습니다. 콘솔의 카테고리 경로와 고정 연령 등급은 실제 제출 화면에서 확인해야 합니다.

이 개발기를 참고할 때

이 글은 제가 직접 만든 제품의 개발 과정을 정직하게 공유하는 기록입니다.

• 스크린샷과 설명은 작성 시점의 실제 상태 기준이며, 이후 업데이트로 달라질 수 있습니다.
• "다음 계획"으로 표시한 기능은 아직 완성된 기능이 아닙니다.
• 참고하거나 인용할 때는 이 글의 URL을 출처로 남겨주세요.
• 궁금한 점이나 피드백은 댓글로 남겨주시면 다음 개발과 다음 글에 반영하겠습니다.