AI로 만들기 · AI APP

AI로 앱 만들기

웹으로 만든 게임을 안드로이드·아이폰 앱으로 내고, 결제·광고·홈페이지까지 붙인 과정을 정리했어요.

← KOBONGAI 홈으로
AI APP · 1편

웹 게임을 안드로이드 앱으로: 주소창 없는 앱 만들기

등대의아이는 처음에 웹 게임으로 만들었어요. 홈페이지 주소만 열면 바로 할 수 있게요. 그런데 사람들은 「앱」을 찾아요. 다시 만들지 않고 같은 게임을 Google Play 앱으로 내는 방법이 TWA(Trusted Web Activity)예요.

01TWA가 뭐예요?

TWA는 크롬 브라우저를 주소창 없이 앱처럼 띄우는 방식이에요. 게임은 웹에 그대로 있고, 앱은 그 웹을 여는 「틀」이에요. 그래서 웹에서 게임을 고치면 앱도 따로 업데이트하지 않고 바로 바뀌어요.

02만드는 순서

  1. 게임을 PWA로 만들어요. 앱 이름, 아이콘, 시작 주소를 적은 manifest 파일이 필요해요.
  2. PWABuilder에 주소를 넣고 Android 패키지를 받아요. 패키지 이름은 한 번 정하면 못 바꾸니 신중하게(예: com.회사.게임이름).
  3. 함께 나온 서명 키는 절대 잃어버리면 안 돼요. 다른 곳에 따로 보관하고, 채팅이나 공유 폴더에 올리지 않아요.
  4. Play Console에 앱을 만들고 AAB 파일을 올려요.
  5. 웹사이트에 /.well-known/assetlinks.json 파일을 올려 「이 앱과 이 웹은 같은 주인」임을 증명해요. 이게 맞아야 주소창이 사라져요.

03실제로 겪은 실수

처음 만든 패키지로 콘솔에 앱을 만든 뒤, 이름을 바꾸려고 패키지를 다시 만들었어요. 그런데 콘솔은 처음 키만 받아 줬어요. 결국 처음 패키지를 그대로 쓰고, assetlinks 파일에는 업로드 키와 Play가 다시 서명한 키의 지문을 둘 다 넣어서 해결했어요. 교훈은 하나예요. 「첫 업로드 전에 이름과 키를 확정하자」.

04스토어 그림

스토어에는 아이콘(512px), 그래픽 이미지(1024×500), 스크린샷이 필요해요. 그래픽 이미지는 게임 첫 화면에서 로고와 등대만 살려 만들었어요. AI로 만든 그림은 콘솔에서 「AI로 생성」 표시를 했어요.

등대의아이 로고와 빨간 등대, 바위 위 아이가 그려진 가로 그림
플레이 스토어 그래픽 이미지 1024×500
게임 첫 화면, 홈, 1층, 움직이는 발판, 강풍 구간, 28층 스크린샷 여섯 장
스크린샷 후보 여섯 장

다음 편 2편. 구글 플레이 출시 순서: 내부 테스트부터 정식 출시까지 →

AI APP · 2편

구글 플레이 출시 순서: 내부 테스트부터 정식 출시까지

앱 파일을 만들었다고 바로 출시되는 건 아니에요. Play Console에는 채워야 할 칸이 많고, 테스트 트랙을 순서대로 거쳐야 해요. 등대의아이가 지나온 길을 날짜 순서로 정리했어요.

0110월 7일 · 개발자 계정

Google Play 개발자 계정을 만들어요. 개인 계정은 신분 확인이 필요하고, 판매를 하려면 결제 프로필과 계좌 인증도 해야 해요(등대의아이는 10월 10일에 끝냈어요).

0210월 8일 · 등록정보와 설문

03세 개의 테스트 트랙

  1. 내부 테스트: 10월 8일 저녁 8시에 열림. 최대 100명, 심사가 빨라요. 내 폰에 깔아 보는 용도.
  2. 비공개 테스트: 같은 날 밤 10시에 열림. 개인 계정은 여기서 12명 × 14일을 채워야 해요(게임 연재 8편).
  3. 프로덕션: 10월 27일 권한이 나오고, 28일에 정식판 1.0을 제출했어요.

04스크린샷은 실제 화면으로

처음 스크린샷에는 「3층 / 100층」처럼 테스트판과 맞지 않는 숫자가 보였어요. 스토어 그림은 실제 출시판 화면으로 찍어야 심사에서 문제가 없어요. 출시 직전에 정식판 화면으로 다시 찍었어요.

플레이 스토어용 게임 스크린샷 여섯 장
스토어 스크린샷 후보

구글 정책과 화면은 자주 바뀌어요. 이 글은 2026년 10월 기준이에요.

다음 편 3편. 맥(Mac) 없이 아이폰 앱 내기: GitHub Actions로 TestFlight까지 →

AI APP · 3편

맥(Mac) 없이 아이폰 앱 내기: GitHub Actions로 TestFlight까지

아이폰 앱은 원래 맥 컴퓨터와 Xcode가 있어야 만들 수 있어요. 등대의아이는 맥 없이 아이폰 앱을 냈어요. GitHub Actions의 맥 서버를 빌려 쓰는 방법이에요.

01아이폰은 TWA가 없어요

안드로이드처럼 웹을 그대로 감싸는 방식은 애플 심사에서 「웹사이트를 감싼 것뿐」이라는 이유로 거절되기 쉬워요. 그래서 Capacitor라는 도구로 게임 파일을 앱 안에 함께 넣었어요. 인터넷이 없어도 기본 화면이 뜨고, 아이폰에 맞는 설정도 할 수 있어요.

02준비물

03빌드 흐름

  1. GitHub Actions에서 「iOS TestFlight」 작업을 눌러 실행해요.
  2. 클라우드 맥이 게임 파일을 앱에 넣고 Xcode로 빌드해요.
  3. API 키로 인증서와 프로필을 만들어 서명하고 App Store Connect에 올려요.
  4. TestFlight 내부 테스터에게 자동으로 배포돼요.

10월 12일에 첫 TestFlight 빌드가 올라갔어요. 맥 서버는 사용 시간이 비싸서(일반 서버의 10배) 꼭 필요할 때만 눌러요.

04그동안은 웹으로

아이폰 앱이 나오기 전까지는 사파리에서 웹 버전을 「홈 화면에 추가」해서 앱처럼 쓰는 방법을 안내했어요. 설치 안내 페이지에 세 단계로 적어 두었어요.

설치 안내 페이지. 아이폰에서 사파리로 열고 공유 버튼, 홈 화면에 추가를 누르는 세 단계
아이폰 사용자 안내 (10월 12일)

05애플 심사: 정보 요청

10월 28일에 1.0을 제출했고, 다음 날 「가이드라인 2.1 정보 필요」 답장이 왔어요. 새 계정이라 앱 설명이 더 필요하다는 뜻이었고 버그나 위반은 아니었어요. 실제 아이폰에서 앱을 처음부터 켜는 화면 녹화, 앱의 목적과 사용법, 쓰는 외부 서비스를 정리해 회신했어요.

다음 편 4편. 웹 게임에 구글 플레이 결제 붙이기 →

AI APP · 4편

웹 게임에 구글 플레이 결제 붙이기

TWA로 만든 앱도 Google Play 결제를 쓸 수 있어요. 웹 페이지 안에서 크롬의 Digital Goods API를 부르면 플레이 스토어 결제 창이 떠요. 등대의아이는 진주(게임 안 유료 재화)와 펫 칸 열기를 이렇게 팔아요.

01팔 상품 정하기

종류예특징
소모성진주 60 · 330 · 700, 시작 꾸러미사면 쓰고, 다시 살 수 있어요
비소모성바다 펫 칸 · 육지 펫 칸 열기한 번 사면 계속. 폰을 바꿔도 되살려요

02결제 흐름

  1. 게임이 Digital Goods API로 상품 가격을 가져와요(가격은 콘솔에서 정해요).
  2. 「구매」를 누르면 PaymentRequest로 플레이 결제 창을 띄워요.
  3. 결제가 끝나면 구매 토큰을 우리 서버로 보내 진짜 구매인지 확인해요.
  4. 확인되면 진주를 주고, 소모성 상품은 「소비 완료」 처리를 해요.
펫 칸 열기 창. 진주 300개로 열기 또는 4,900원으로 열기, 플레이 결제 창
펫 칸 열기: 진주로, 또는 결제로

03PC에서도 시험할 수 있게

PC에는 플레이 결제가 없어요. 그래서 PC판에는 돈이 나가지 않는 「PC 시험 결제창」을 띄워서 흐름을 똑같이 확인했어요. 결제를 아직 켜지 않은 곳의 버튼은 「준비 중」으로 바꿔 두었어요.

PC판에서 뜨는 시험 결제창 화면
PC 시험 결제창

04주의할 점

다음 편 5편. 게임을 방해하지 않는 광고: 보상형 광고 설계 →

AI APP · 5편

게임을 방해하지 않는 광고: 보상형 광고 설계

무료 게임은 광고로 운영비를 벌어요. 그런데 게임 중간에 갑자기 뜨는 광고는 사람을 떠나게 해요. 등대의아이는 「보고 싶을 때만 직접 눌러서 보는」 보상형 광고만 쓰기로 했어요.

01광고 자리 세 곳

  1. 홈 「오늘의 광고」: 하루에 별빛 100개 × 3번, 등반권 1장 × 2번. 둘 다 채우면 상자 열쇠 1개.
  2. 떨어졌을 때 이어하기: 그 층에서 하트 3개로 다시 시작. 하루 5번.
  3. 10층 정상 보상 2배: 하루 3번.
홈의 오늘의 광고 버튼, 오늘의 광고 창, 쓰러졌을 때 이어하기, 정상 보상 두 배 화면 네 장
광고 위치 시안 (10월 29일)

02넣지 않은 것

03플랫폼마다 다른 광고

웹과 안드로이드 앱은 Google AdSense의 H5 게임 광고, 아이폰 앱은 Google AdMob을 써요. PC에서는 5초짜리 시험 광고로 흐름만 확인해요. 광고 번호가 비어 있으면 광고가 뜨지 않게 만들어서, 승인 전에도 게임은 그대로 돌아가요.

04켜기 전에 바꿔야 하는 것

다음 편 6편. AI로 홈페이지 만들기: 게임 소개부터 게시판까지 →

AI APP · 6편

AI로 홈페이지 만들기: 게임 소개부터 게시판까지

게임을 알리려면 들어올 곳이 필요해요. 이 홈페이지(kobongai.com)도 AI와 함께 만들었어요. 서버 관리 없이, 비용 거의 없이 운영하는 방법을 정리했어요.

01구조

02카페처럼 왼쪽 메뉴

처음엔 한 페이지를 아래로 길게 내리는 모양이었어요. 메뉴가 늘어나면서 네이버 카페처럼 왼쪽에 메뉴를 고정하고 오른쪽 칸만 바뀌게 바꿨어요. 폰에서는 다시 한 줄로 내려 보는 모양이 돼요.

PC 홈페이지 전체 화면. 왼쪽 메뉴와 오른쪽 게임 소개, 게시판
PC 홈 화면 (10월 13일)

03검색에 잘 나오게

04지금 하고 있는 일

이 「AI로 만들기」 연재도 홈페이지를 게임 홍보만이 아니라 「읽을거리가 있는 곳」으로 만들려는 시도예요. 게임을 만들면서 배운 것을 계속 글로 남길게요. 궁금한 점은 글 아래 댓글이나 자유게시판에 남겨 주세요.

연재 처음부터 1편. 웹 게임을 안드로이드 앱으로: 주소창 없는 앱 만들기 → · 함께 보기 AI로 게임 만들기 →

KOBONGAI 채널

#AI게임개발 #1인개발 #인디게임 #앱출시 #구글플레이 #등대의아이