앱으로 돈벌기 2편 - 첫 수익성 앱 개발부터 출시까지

지난편에서 어떤 앱을 만들지 선정했고 첫 번째로 그라데이션 추천 앱을 만들기로 했다. 오늘은 앱을 만들고 배포 심사 단계까지 완료하였다. 그리고 그 과정을 보여줄 것이다.

크로스 플랫폼 앱 vs 네이티브 앱

나는 Android, iOS 모두 네이티브로 개발할 수 있었고 그렇게 계속 개발해왔다. 하지만 다음번의 확장성을 위해서 Flutter, React Native와 같은 크로스 플랫폼 프레임워크를 사용하여 개발할 것이다.

두 프레임워크 모두 어느정도 찍먹 정도는 해봤다. 결론은 React Native를 선택하기로 했다.

React Native는 React에 기반을 두기 때문에 HTML, CSS, JavaScript를 사용한다. 나는 웹개발을 해봤기 때문에 React Native가 배우기 쉬웠다.

또, Flutter는 코드 짜는 스타일이 내 스타일과 맞지 않아서 선택하지 않은 이유도 있다.

혼자서 모바일, 서버 등을 다 만드는데
막 모바일은 Dart언어(Flutter)를 웹은 Vue언어(Vue)를 서버는 Java언어(Spring)로 사용하려는 것보다 그냥 전부 TypeScript를 써서 모바일은 React Native, 웹은 React, 서버는 Express같은 걸 쓰는 게 편하고 빠르다.

앱이름 선정하기

Chat GPT한테 그라데이션 추천 앱의 이름을 추천해달라고 했다.

Chat GPT가 추천한 이름 중 첫 번째 이름인 Gradify가 마음에 들어 앱 이름은 Gradify로 선정했다. Chat GPT도 GPT 4o가 나오면서 많이 똑똑해진 것 같다.

그라데이션 데이터 수집하기

Chat GPT한테 이쁜 그라데이션 100개를 json형식으로 name과 hex값을 포함하여 만들어달라고 했다.

그러니 Chat GPT가 정말 그라데이션 100개를 만들어주었다.

그러나 내가 프롬프트에 hex변수 하나만 입력해서 Chat GPT가 ‘,’(콤마)로 구분해 두 hex를 나타내고 있었다. 나는 start_color, end_color로 나누어서 출력하라고 부탁했다.

이제 그라데이션 데이터가 충분히 모였다.

이 json데이터를 TypeScript로 파싱한 다음 화면에 그려주기만 하면 된다.

앱 개발 시작

우선 그라데이션을 불러오는 것은 import구문 하나만으로 해결할 수 있었다. 다른 언어는 따로 파싱을 해야하는데 이 부분은 JavaScript가 엄청 편한 것 같다.

불러온 json데이터를 갖고서 그라데이션을 화면에 그렸다.

이게 Chat GPT가 생각해낸 그라데이션이었구나.

그닥 만족스럽지 않은 색깔도 있었지만 일단 완성을 목표로 하고 개발을 재개했다.

그라이데이션의 이름, 그라데이션 색깔의 hex값 글자를 추가했다.

또, 그라데이션 부분에 곡선을 줘서 이쁘게 만들었다.

hex글자를 터치하면 클립보드에 복사도 되게 만들었다. 지금은 hex값 밖에 복사를 못하지만 나중에 RGB나 HSL같은 값도 얻을 수 있도록 해야겠다.

이제 어느정도 앱의 모습을 갖춘 것 같아 마음에 든다.

앱 아이콘 만들기

IT관련 대회를 나가서 수상을 했는데 후속지원으로 어도비 1년치를 끊을 수 있었다. 그렇게 얻은 어도비 프로그램 중 포토샵을 사용해서 앱 아이콘을 만들것이다.

내가 직접 만드냐고? 아니. 포토샵 AI를 사용해서 그라데이션 앱 아이콘을 만들어달라고 했다.

‘앱 아이콘’을 만들어 달라고 하니 너무 억지로 만들어주는 것 같아서 그냥 그라데이션을 만들어 달라고 했다. 그리고 그 중 가장 마음에 드는 것을 선택했고 아래의 그림이 그것이다.

앱 미리보기 이미지 만들기

한국 뿐 아니라 글로벌하게 앱을 출시할 것이기 때문에 언어는 일단 영어를 사용했다.

이런 그래픽적인(?) 앱은 처음 만들

어봐서 어떻게 디자인을 해야 할지 잘 모르겠다..ㅎㅎ

그래도 미리보기 이미지 3개 정도를 만들었고 그래픽 이미지도 만들었다.

앱 출시하기

아이폰을 위한 App Store 출시는 나중으로 미뤘다. 안드로이드용 앱이 대충 만들어도 심사가 통과되고 수익성도 좋기 때문이다. 그래서 일단 Play Store에 출시하기로 했다.

만든 앱 아이콘을 앱에 적용시키고 .aab파일을 빌드하기 위해 Keystore도 만들어주었다. 대충 앱의 무결성을 위해 보안키를 하나 만들었다고 보면 된다.

Play Store에 출시하기 위해서는 개발자 계정이 필요한데 1년 전 쯤 3만원 주고 개발자를 등록했기 때문에 이 부분은 건너뛸 수 있었다.

개인정보는 수집하지 않기 때문에 노션에다가 대충 개인정보 처리 방침을 만들었다.

기타 뭐 출시 국가, 앱 카테고리, 앱 이름 등을 입력한 뒤 심사 요청을 했다.

짜잔.

아직 프로토타입 수준이라 앱에 기능도 별로 없고 많이 부족하다!
그래서 다음 시간에는 앱에 기능도 더 추가하고 광고도 달아야겠다.

마케팅은 잘 모르겠다. 애초에 이런 앱이 마케팅이 가능한지.
검색으로 승부를 봐야할 것 같은데 우선Play Store검색 엔진에 대해 공부하고 적용 시켜봐야겠다.

그리고 그라데이션 말고 단색을 추천해준다든지 추후 앱의 확장성도 조금 고려해봐야겠다.

함께 읽으면 좋은 글

자동화 블로그 1편 - 돈 벌려면 티스토리가 딱입니다

자동화 블로그 1편 - 돈 벌려면 티스토리가 딱입니다

유튜브 구독자 3000명으로 120만원 수익 달성 후기

유튜브 구독자 3000명으로 120만원 수익 달성 후기

고딩 개발자 첫 외주를 받다

고딩 개발자 첫 외주를 받다