독학으로 코딩 공부하기! 첫번째 앱 출시ㅣ앱 제작과정 & 플레이 스토어 등록 (Teachable Machine + React Native = Android APP)
본문 바로가기
프로그램-코딩

독학으로 코딩 공부하기! 첫번째 앱 출시ㅣ앱 제작과정 & 플레이 스토어 등록 (Teachable Machine + React Native = Android APP)

by 신기한나라엘리삼 2022. 12. 20.

올해 4, 내가 만든 웹페이지, 애플리케이션,게임을 인터넷에서 즐길 수 있으면 좋겠다는 생각에서 코딩 공부를 시작했다.

계속해서 공부하고 싶었던 분야이지만 어떻게 시작해야 하는지, 공부해할지 몰라서 미뤄왔었다. 그리고 컴퓨터 프로그래밍은 대학교 4년 정규과정에 있는 만큼 문과생이 취미로 접하기에는 어려울 것 같아 공부를 한다는 것이 겁났었다.

그러다 이런저런 잡스런 고민은 제쳐두고 해 보자는 결심을 했고 5개월 안에 간단한 앱이라도 1개를 만들어 보고자 목표를 잡았다.

결과 처음 목표했던 5개월을 넘기게 되었지만 공부한 지 7개월 만에 앱을 출시하게 되었다.

 

초기 구상

프로그램을 공부하면서 먼저 만들고 싶었던 것은 나만의 정보 편집기였다.

인터넷상에서 내가 원하는 정보를 크롤링해서 카톡으로 받아보거나 블로그에 정보를 올릴 목적이었다. 이를 진행하면서 두 가지 문제점이 있었는데 첫째, 정보의 저작권 문제였고 두 번째는 일부 원하는 정보가 보안으로 겹겹이 둘러싸여 크롤링을 할 수 없다는 것이었다. 

그래서 작동하는 원리만 살짝 들여다본 정도로 마무리했다. 이는 나중에 좀 더 실력을 키워 정보를 마음껏 사용할 수 있는 공공데이터에서 제공하는 API를 활용해 만들어볼 생각이다. 

 

 

웹 애플리케이션 제작 과정

이후 휴대폰 카메라 장치로 할 수 있는 앱을 만들어보고자 했다.

또다시 어떻게 어떤 공부를 해야 하는지 감을 잡기 위해 검색하며 시간을 보냈고 조코딩 채널에서 구글 Teachable Machine 이라는 인공 신경망 알고리즘 사이트를 알게 되었다. 

 

 

티쳐블머신에서 내가 원하는 조건으로 AI를 학습시키고 학습된 결과물(학습모델)이 웹 화면에서 조건에 반응하여 나타나도록 하면 된다. 

학습모델을 만든 뒤에는 사이트에서 코드를 가져와 HTML 넣으면 구현이 된다. 그리고 화면에 보이는 화면 구성을 가다듬는 CSS 작업을 하면 웹 애플리케이션이 완성된다. 

이 HTML 파일을 온라인상에서 다른 사용자도 접속해 24시간 작동할 수 있게 도메인을 구입하고 그곳에 올린다. 

여기까지의 제작과정을 통해 만들어진 첫 번째 앱을 조심스레 아래에 소개해본다.  

 

천재 바보 판독기 (rocodic.shop)

 

rocodic 천재 바보 판독기

천재 바보 판독기 앱 입니다.

www.rocodic.shop

 

티쳐블머신이 직관적이고 쉽기 때문에 여기까지는 크게 어려움은 없었다. 

이렇게 만든 웹 애플리케이션을 휴대폰 앱으로 만들고 싶어서 다음 단계로 넘어가 본다. 

 

 

Android 앱 제작 과정

위에서 만들어본 웹 애플리케이션을 스마트폰용 앱으로 만들기 위해서는 여러 방법이 있다. 여러 방법 중에서 추천한, 가장 쉽다는 웹뷰(webview)방식으로 진행하기로 한다. 

웹뷰(webview)란? 

WebView 란 프레임워크에 내장된 웹 브라우저 컴포넌트로 View의 형태로 앱에 임베딩하는 것을 말한다.
이 말인즉 앱 화면에 지정한 URL 주소의 웹 페이지를 그대로 띄우는 것을 의미한다.
웹 페이지를 보기 위해서 혹은 앱 안에서 HTML을 호출하여 앱을 구현하는 하이브리드 형태의 앱을 많이 사용된다.

쉽다고는 해도 관련된 공부를 해본 적도 없고 처음 해보는 것이라 안 되는 그렇지만 꾸역꾸역 구글링하고 책도 구매해 보고 끝까지 만들어 본다.

 

웹뷰 방식으로 개발하기로 방향을 정하고 하이브리드 앱 개발용 라이브러리인 React Native를 사용한다. 그리고 React Native 개발을 더욱 쉽게 도와주는 도구인 Expo를 사용하기 위해서 Node.js를 설치해 디벨롭하였다. 

 

앱 개발 순서 

Node.js 인스톨 -> Expo cil 인스톨 (App.js / app.json 파일 생성) -> React Native webviw 인스톨 (App.js / app.json 수정 / 파비콘 / 아이콘 만들기) -> Expo Development 실행 (앱 번들 APK/AAD 생성)   

이렇게 해서 스마트폰에 설치할 수 있는 APK 파일을 만들고 다운로드하여 테스트해 볼 수 있다.

 

 

구글 플레이 스토어 개발자 등록 & 앱 출시 

이후 구글 플레이 스토어에 정식으로 출시하기 위해서는 구글 플레이 콘솔에 $25을 내고 개발자로 계정을 만들어야 한다. 

개발자 계정을 만들고 나서는 개발자 콘솔에 APK 파일을 업로드하고 대시보드에 있는 앱에 대한 세부 정보와 설정 등을 작성해  검토받은 뒤 승인이 되어야 최종 출시가 완료된다. 

 

필자는 데이터 보안에서 작성한 내용과 앱 동작이 다른 부분이 있다고 하여 '앱 거부'가 되었다. 

수정하고 제출해 보았지만 계속해서 거부되어 이의를 제기해 보았다. 

 

이의제기에 대한 답장에도 데이버 보안에 문제가 있어서 거부되었다는 동일한 내용이었다. 내 앱에서 다뤄지는 데이터 종류에는 전부 그렇다고 해서 다시 검토 요청을 했고 다행히도 통과가 되어 공개 테스트에 들어갔다. 

 

 

처음 만들어 본 앱

여기까지 비전공 개발자로서 독학으로 코딩 공부를 시작해 처음으로 개발한 앱을 구글 플레이 스토어에 등록하기 과정을 담아보았다. 

 

해당 앱이 유익한 정보를 제공하거나 게임처럼 많은 재미를 주는건 아니지만 내가 원하는 것을 구상해 어려움을 거치며 출시까지 하게 되었다는데 의미가 크다. 

이렇게 작게 시작해보며 살을 붙이고 범위를 넓혀 나가며 많은 사람들에게 유용하고 쓸모 있는 무언가를 만들 수 있지 않을까 꿈꿔보며 글을 마친다. 

 

 

댓글