Son(Hand) Sign 출시!!

 Project Asylum 2019의 사이드 프로젝트 중 3번째로 앱 Son(Hand) Sign을 출시 하였다.

SonSign App 컨셉(ChatGPT 생성)

 

 원래 계획은 ReactJS + Typescript을 이용하여 독서기록 웹앱을 만드는 중이었는데 워낙 손에 익지 않는 환경이었다. 하다보니 너무나 평범해지고 UI를 구성하는 것도 디자이너 없이 깔끔하게 다듬기가 어려운 지경에 이르고 가장 중요한 것은 나조차도 필요 없는 Application을 만들고 있었어서 개발을 중단하고, 그 즈음 오랜만에 Android도 할겸 마침 하나 만들고 싶은 것이 생겨서 빠르게 만들어 보았다. 약 3주 정도 공부하며 오랜만에 앱을 만들어 보았다. 게으름과 오랜만에 해보는 Android 환경이라 그 사이 대격변을 격고 있었던 것을 캐치업하는 시간이었고 실제로 개발을 순수하게 하면 1주일 이내 출시 할 수 있는 Task 이다. 

 

 시작은 뭔가 문서에 싸인을 넣고 싶은데 마침 패드도 손에 없고 스캐너와 연결하기도 너무 귀찮은 상황이라서 뭔가 방법을 찾다가 핸드폰에서 그려서 나에게 공유하면 손쉽게 싸인 이미지를 문서에 넣을 수 있겠다 싶어서 시작하였다. 그래서 캔버스에 싸인을 하고 이것을 PNG(배경이 투명해야 해서)로 저장후 무손실로 전달 하기 위하여 압축하여 공유 하는 프로세스를 간단하게 할 수 있는 App을 만들고자 하였다. 

 

우선 결과로 작성한 앱의 화면이다. 심플한 싱글 스크린 앱이다.

SonSign 구현 화면

 

우선 나는 사이드 프로젝트를 할때는 낮선 환경과 되도록이면 최신의 기술(?)을 적용하는 것을 선호한다. 그래서 4년전 Android 개발을 마지막으로 하였던 Java + XML(UI) + MVVM  을 이용하지 않고 Kotlin + Compose 를 이용해서 프로젝트를 구성하였다.  간단한 Hello world를 띄웠으나 기능을 구현하려니 막막하다. 이때에 구세주로 등장한 것이 Chat GPT 형님 모르는 것을 마구 물어 보고, 코딩도 해달라고 했다. 당시에 질의 하였던 몇개의 Thread를 공유한다. 

  

* Compose를 이용한 버튼 추가 - https://chatgpt.com/c/516a2523-b533-443f-b395-3cbc4094c532

* Canvas에 Drawing을 이미지로 저장 - https://chatgpt.com/c/772ae5d9-e666-4698-a1b8-b97bc3fe95d0

* Zip file  만들기 - https://chatgpt.com/c/7a048ece-f3e3-45e4-8a7d-5a8e259c436b

 

 나의 수준으로는 괜찮게 사용할 수 있는 코드가 작성되어서 해당 코드를 참고하여 앱을 만들어 나갔다. 

 

 그리고 나름데로 만들고자 하는 모든 기능을 다 구현하고, 부가적인 관리를 위하여 Firebase를 연동하였다. Firebase를 연동하는 것은 2가지 정도 이유가 있다. 첫번째는 Analytics 와 Hosting 이다. 

 첫 번째 Analytics는 필수 정말 필수 있다. 앱의 운영을 위한 모든 지표가 잘 정의 된 preset template을 통하여 손쉽게 볼수 있다. 신규 설치 와 Retention, 그리고 스크린별 분석이 기본적으로 제공된다. 다른 광고 관련 3rd Party에서도 지표들을 제공하지만 Firebase는 구글에서 서비스 하지 않는가 정말 꼭 필요한 지표를 깔끔하게 잘 보여 준다. 

 두 번째 Hosting은 앱 등록시 Privacy 관련 고지 페이지가 필요하다. 이때 워드로 작성한 후 html로 저장하여 바로 hosting 에 올려서 deploy 하면 정말 간편하게 고지 페이지를 만들수 있다. 나름 깔끔하게 잘 표현된다. (참고. https://sonsign-bb063.web.app/privacy.html)

 

 파이어베이스 연동 후 Admob을 연동하였다.( No free launch :) ). Admob의 가이드는 잘되어 있지만 문제는 광고를 표시하는 View가 Compose에 딱 맞게 제공되지 않아서 구글링을 통하여 Compose에 맞게 구현한 예시를 찾아서 참고 하였다. 

 

@Composable
fun BannersAds() {
    AndroidView(
    	modifier = Modifier.fillMaxWidth(),
        factory = { context ->
            AdView(context).apply {
                setAdSize(AdSize.BANNER)
                adUnitId = "ca-app-pub-3940256099942544/6300978111"
                loadAd(AdRequest.Builder().build())
            }
        },
        update = { adView ->
            adView.loadAd(AdRequest.Builder().build())
        }
    )
}

 

그 다음 너저분한 코드와 화면들을 정리하는 작업을 하고 출시 작업을 시작하였다. 코드에 대하여 중복된 부분들을 제거하여 나름 위치에 맞게 화면 컴포넌트를 배치하고 컨셉이미지를 추가(GPT로 생성함) 하였고, notibar의 컬러와 화면사이즈에 맞게 전체 컴포넌트를 배치 하고 친절한 문구를 화면에 넣었다. 

 

구글 플레이 콘솔

 

 그리고 앱을 싸이닝하고 구글 플레이 스토어 콘솔에 필요한 과정들(생각보다 입력 및 선택해야 하는 정보들이 많다.)을 거친 후 Production으로 바로 릴리스 하였다. 기능이 단순하고 개발 과정에서 충분히 확인하여서 바로 릴리스를 할수 있었다. 약 3일 후 구글 플레이에 릴리스 되었고 Production 버전을 스토어를 통하여 다운로드 받을 수 있었다. 

 

 이번 과정을 거치면서 새로운 환경에 대하여 LLM을 이용하여 학습된 인공지능의 도움을 받으며 낮선 환경에 대하여 적응하는 시간을 단축 할 수 있었다. 아마 구글링을 통하여서만 개발을 진행 하였다면 1달 정도 걸리지 않았을까? 그리고 Android의 새로운 개발 환경들에 대하여 계속해서 손을 데 봐야겠다고 생각했다. 몇년의 시간이 지나긴 했지만 처음 화면을 구현하려고 했을때의 막막함을 느껴서 1년에 최소 1개 씩은 플랫폼 별(Mobile, Web)로 사이드 프로젝트를 통하여 출시 프로세스를 진행해 보려고 한다. 

 추가적으로 남은 숙제는 App을 어떻게 마켓팅하고 Growth Hacking을 할 수 있는가인데, 이 부분은 계속 공부하며 시도하여 보려고 한다. 이런 가젯앱으로 엄청난 이용을 만들 수 는 없겠지만 이런 저런 실험의 도구로서 사용해 보려고한다. 

 

 마지막으로 Google Play 를 통하여 다운로드 받을 수 있는 링크를 남긴다.

• https://play.google.com/store/apps/details?id=com.asylum.sonsign

결론. 다운받아 주세요 :)