저는 코딩알못입니다만...어쩌다보니 제가 안드로이드 앱을 만들어 봤습니다.

저처럼 초보자라도 이런게 가능하구나..하는 도움이 될 수 있을거라 생각해서 글을 남겨 봅니다.

1. 호기로운 시작

오래전부터 스스로 만든 안드로이드 앱이나 게임을 출시해보고 싶은 생각을 갖고 있었습니다.

근데 이미 앱들은 차고 넘치기 때문에 ...

저한테만 필요한 그런 앱..누군가 만들어줬으면 좋겠지만 결코 아무도 만들지 않을 그런 앱이라도 내손으로 만들어 보면 어떨까 하는 생각이 예전부터 있었습니다.

그렇게 만들고 싶은 앱도 생각해 놨었습니다.

만들고 싶은 앱은 이런겁니다.

평소에 FlashCardsDeluxe라는 단어 암기장 앱을 사용해서 영어 단어를 외우고 있는데요.

카드의 앞면에는 영어단어를 적어두고 뒷면에는 그 단어의 뜻을 적어둔뒤,인공지능을활용한안드로이드앱개발withChatGPT클리앙 앞면의 단어를 보고 뜻을 모르겠으면 뒷면을 확인하면서 단어를 외울수 있게 도와주는 흔한 플래시카드 앱입니다.

이 FlashCardsDeluxe 앱은 카드를 HTML 태그를 사용해서 꾸미기가 가능합니다.

저는 뭔가를 정리할 때 저만의 방식으로 정리해야 직성이 풀리는 병적인 성향이 있습니다.

단어장 정리의 경우 그냥 단어 뜻만 덩그러니 작성하기보단 단어 뜻을 요약하여 정리한 것과 같이 보여져야 마음이 편합니다.

아래는 그 예시로 rational 이라는 단어를 정리한 결과입니다.

백그라운드는 검은색으로 하여 스마트폰의 배터리도 신경썼고 여러 가지 정보가 담겨질 수 있고 가독성도 우수하고 군더더기 없도록 하였고, 무엇보다 제 맘에 드는 구조로 정리된 HTML 코드 규칙을 만들기 위해 많은 시행착오를 거쳤습니다.

오른쪽에 정리된걸 보면 간단한 듯 보이는 구조이지만 생각보다 복잡한 기준이 적용된 결과입니다.

간단하게 정리하면 아래와 같습니다.

1.  제목은 핑크색으로 하되, 앞에는 단어의 활용도에 따라 *을 1개에서 3개로 표현한다.
2.  단어의 음절 단위를 중점을 이용하여 표시한다.
3.  품사는 하이픈을 앞에 붙여 표시하고, 연두색 색상으로 나타낸다.
4.  줄번호는 빨간색 숫자로 표시하고 유사한 뜻은 한줄안에서 나열한다.
5.  단어의 뜻은 자주 사용되는 3~4가지만 요약하여 정리한다.
6.  단어의 뜻 중에서 대표적으로 사용되는 뜻에는 노란색으로 강조표시를 한다. (이 외에도 정리에 일관성을 주기 위해 여러가지 세부 규칙이 있습니다.)

기본 구조를 위와 같이 한 다음에는 단어마다 태그를 사용하여 정리해서 작성해 왔으나 그 작업은 무척 괴로운 작업입니다.

왜냐하면 위 스크린샷과 같이 표시하기 위해서는 아래와 같이 작성해야 되거든요.

2. 좌절과 포기

다시 말씀드리지만 규칙에 맞게 정리하는 것은 상당한 고통스러운 과정이었습니다.

기본적으로는 이지윅에디터를 이용해서 작성하곤 있지만 데스크탑이 있어야만 작업이 가능한데다가  FlashCardsDeluxe는 데스크탑 전용 프로그램이 없기 때문에 데스크탑에서 작업한 결과물을 다시 스마트폰으로 옮겨담는 과정도 굉장히 번거롭습니다.

스마트폰만 사용 가능한 야외에서는 급하게 정리하고픈 단어가 있어도 정리할 수 없었습니다.

그래서 제가 정한 규칙대로 단어장 코드를 정리하는 것을 앱으로 한번 만들어볼까..하는 생각을 했던겁니다.

네이버나 다음사이트 등 포털사이트의 사전서비스에서 단어를 표시하는 규칙을 찾아내서 웹크롤링/파싱 이란 것들을 공부하면 어찌어찌 할 수 있는 것 같기도??이런 생각이었습니다.

일단 제일 먼저는 플러터에서 사용되는 Dart라는 언어를 배워야 한다고 해서 인프런 등 인터넷 강의나 유튜브를 통해 공부하기 시작했습니다만..공부를 하면 할수록 난이도가 점점 올라가는데..제 머리로 따라가기 벅차더군요..

이해도 잘 안되고..공부할 의욕도 점점 사라지더군요.;;

어찌어찌 기초 강의를 끝냈지만 기초적인 화면 구성 하는 정도를 간신히 낑낑대면서..하는 정도는 되었는데...

그런데 공부를 하면 할수록 웹크롤링 같은건 초보자인 제게 넘사벽 영역인걸 알게 됩니다..

그리고 가만 생각해보니 단순히 웹에 있는 정보를 긁어 와서 ‘단어의 재배치’를 하는게 아니라..제가 원한건 ‘정보의 요약’이었습니다.

웹크롤링으로 정보들을 가져온다고 해도 그 정보들을 요약 할 수 있는 알고리즘을 만들어야 하는거였습니다.

그런 걸 만들 수나 있는것인지 감조차 들지 않아 좌절하고 있던 그때..(사실상 포기상태였던...)

3. 희망과 재도전

세상에는 갑자기 ChatGPT라는 인공지능이 등장하더니 비슷한 인공지능들이 연이어 등장하더군요.

처음에는 인공지능과 대화를 해보거나, 이것저것 재미있는 것들을 시켜보면서 단순히 가지고 노는 장난감쯤으로 생각했습니다.

그러다가 ChatGPT에서 API를 제공한다는 소식을 듣게 됩니다.

API라는것은 데이터를 지닌곳에서 본인들의 데이터를 활용하라고 규칙을 정해준 것입니다.

이것은 아주 굉장한 소식이었습니다.

그러니까 ChatGPT에서는 단순히 다른곳에서 제공하는 API처럼 데이터베이스의 자료를 받아오고 정리하는게 전부가 아니고, 스스로 창작을 해서 제공해 준다는 것이었습니다.

이것을 앱 개발에 사용한다면 만드려고 하는 앱에 따라서는 가장 핵심이라고 할 수 있는 알고리즘 구현 과정을 인공지능에게 떠넘길 수 있게 된다는 겁니다.

제가 만들고 싶었던 앱에 대입해 본다면 단어를 영어사전 웹사이트에서 어렵게 크롤링/파싱하고 그것을 요약하는 알고리즘을 구현할게 아니라, 단어를 어떻게 정리할지에 대한 규칙만 ChatGPT에게 전달 하면 되는것입니다.

4. 제작과정

* 이 부분 때문에 팁과 강좌 게시판에 넣었습니다. 이게 무슨 팁이고 강좌냐고 할까 두렵습니다..

앱을 만드는 과정은 아래와 같습니다.

먼저 앱을 어떻게 만들것인지 구체적으로 구상합니다.

구상에 맞춰 기본적인 레이아웃을 만듭니다. 

배운지 오래되어서 첫화면 레이아웃조차도 버거워서 이것조차도 AI에게 시켰습니다.

예를 들어, 첫 화면에는 단어를 입력할 수 있는 칸과 확인 버튼을 만들어줘 라고 요청하면, 인공지능은 다음과 같은 코드를 작성해주고 대략적인 설명도 해줍니다.

아주 기본적인 구조라 코드를 잘 모르시는 분들이 보시더라도 바로 이해 가능할 수 있을겁니다.

다만 이제 여기서 기능들을 추가하면서 코드가 길어지면 이게 점점 헷갈려 집니다.

코드는 기본적으로 괄호라는 덩어리로 이루어져 있습니다. 괄호가 열려있으면 반드시 어느 부분엔 닫는 괄호가 존재하게 되고 그것이 한 덩어리라고 보시면 됩니다.

덩어리 개념은 우리가 수학시간에 배웠던 부분집합의 개념처럼 덩어리 안의 덩어리가 존재할 수 있는 구조인것만 유의하시면 됩니다.

덩어리마다 어떤 역할을 하는지 대략적으로나마 이해하는 게 중요합니다.

예를 들어 위 코드에서는 앱 바를 만드는 부분의 덩어리가 있고, 그 밑에는 화면의 중앙에 단어 입력하는 덩어리, 확인 버튼이 위치하는 덩어리가 또 다른 큰 덩어리에 의해 묶여 있습니다.

저는 주로 ChatGPT대신 BingAi를 사용했는데, 단일 질문에 입력 가능한 텍스트량이 4000글자 제한이 있습니다.

작업을 하다보면 코드가 길어져 전체 코드의 텍스트량이 AI에서 받아들일 수 있는 한계 텍스트 이상을 넘게 되므로 덩어리 단위로 질문하는게 필수가 됩니다.

덩어리 단위로 질문해도 대체로 잘 알아듣는 편입니다. 하지만 가끔 맥락을 이해하지 못하는 경우가 있습니다. 전체코드가 아직 짧을때는 전체 코드를 입력하고 물어봐도 되지만, 길이가 많이 길어져 그럴 수 없을 때는 질문과 연관 없는 코드를 ‘생략’ 처리하고 질문하면 됩니다.

예를 들어, 다음과 같이 코드를 간략히 하여 질문할 수 있습니다.

이런 식으로 코드가 구성되어 있으니 어쩌구저쩌구 해줘...라는 식으로 코드를 덩어리 단위로 이해한 다음 덩어리마다 수정하거나 추가할 부분을 인공지능에게 요청해 가면서 진행해 나갔습니다.

5. 완료 

그렇게 ChatGPT를 사용하니 앱만들기는 수월했습니다.

가장 중요한 연산과정은 ChatGPT가 해주고 앱에서는 단순히 요청하고, 받아온 내용을 출력하는게 전부였으니까요.

최종 목표로 한 영어단어 코드생성기를 바로 도전하기 전에 ChatGPT API 사용법을 공부하기 위해 간단한 앱을 먼저 만들고 최종적으로 목표로 한 앱을 만들다보니 앱이 2개가 되었네요.

⒧ 먼저 제작한건 인공지능 소설 생성기입니다.

https://youtu.be/vTQE139cvxQ 

공부하는 과정에서 부산물로 만들어진 앱으로  인공지능으로 소설을 써줍니다.

간단한 정보를 입력한뒤 소설 작성하기 버튼을 누르면 인공지능이 지맘대로 소설을 씁니다..

소설의 설정에 약간 개입하는게 가능하여..답정너 소설을 만들어도 됩니다.(아래와 같이 말이죠..)

⑵ 인공지능 영어단어 HTML코드 생성기입니다.

https://youtu.be/AqfWZnuLNzg 

인공지능이 짜준  코드를 하단의 미리보기를 통해 즉시 확인도 가능하고, 미리보기 화면을 보면서 코드를 직접 수정하는것도 가능합니다.

주요 태그들을 단축키로 만들어 놔서 코드를 수정하기 편리합니다.

6. 출시 

apk를 만들어서 스마트폰에 설치하여 잘 되는 것을 확인한 순간에 사실상 목적한 바는 다 이룬셈입니다만, 서두에서 말씀드렸다시피 구글 플레이스토어에 출시를 해보는 것이 오랜 꿈이었기에 거기까지 해보기로 합니다.

apk만 만들어 놓으면 99%는 다 끝낸거지 라고 막연히 생각했었는데 그게 잘못된 생각이었음을 깨달았습니다.

일단 아이콘도 만들어야 했습니다. 

이 과정 역시 이미지 생성 ai(Bing 이미지 크리에이터 )의 도움을 받아서 만들었습니다.;;

한번에 딱 나오진 않았는데...키워드를 이리저리 바꿔가며 여러번 만들다보면 맘에 드는게 한두개 나오더라고요.

그리고 출시를 위해서는 apk빌드가 아닌 aab번들파일을 빌드해서 올려야 한다고 하는데, 이게 apk와는 달리 여러 세팅파읠을 설정해 놔야하고 앱서명이라는 것도 해야 되는것이더군요.

거기에다가 구글 개발자등록, 구글 콘솔플레이에서 콘텐츠 등급설정, 개인정보 처리방침 작성, 설문조사서 작성 등 굉장히 복잡하더군요. 구글링도 하고 ai에 물어도 보면서 어찌어찌 해냈습니다.

7. 팁과 정보.

- 가장 중요!.. 이 방식으로는 공부는 절대 안됩니다. 공부가 목적이라면 이와 같은 방식은 절대 금지.

- 코딩에는 ChatGPT3.5보다는 bing이 좋은 것 같습니다.  ChatGPT3.5 에선 제대로 안되는 경우가 많았는데, bing에서는 척척 잘 해내는 것 같은 느낌이었습니다. (ChatGPT4 는 안써봐서 모르겠는데...3.5보단 똑똑하다고 하네요)

- 대화의 흐름은 일관되게 유지해야 합니다. 예를 들어, api 사용에 대한 질문을 하다가 다른 주제로 넘어갔다가 다시 원래의 질문으로 돌아오는 것은 좋지 않습니다. 새로운 질문은 새창을 띄워서 그 질문을 별도로 해결하는게 좋습니다.

- 인공지능이 헛소리를 하는 경우가 있습니다. 예를 들어, 오류가 발생한 코드를 수정해달라고 했는데, 원본과 동일한 코드를 그대로 돌려주는 경우가 있습니다. 하나의 코드 오류가 해결이 안되고 수정에 수정을 거듭하기 시작하였다면..거의 100% 무한루프에 빠진 것입니다. 계속 수정요청해봐야 같은 코드를 줍니다. 같은 코드였는지 아닌지 매의 눈으로 관찰하는게 필요합니다. . 이때 아무리 화가나더라도 욕을 하면 대화가 종료되니 주의하세요.

- 새로운 대화를 해도 이놈들이 예전 코드의 기억을 기억하는 경우가 많습니다. 인공지능에게 도움을 받아 원본 코드의 많은 것들을 수정한 코드를 잘 쓰다가, 새로운 대화를 시작하며 간단한 수정을 요청하였을 때 내가 제시한 코드에서 수정하는게 아니라 과거의 코드에서 수정해주는 경우가 허다합니다.

7. 마치며.

저같은 코딩알못도 앱을 다 만드네요..껄껄...

뭐...본문을 보시면 아시겠지만 아주 기초적인 수준의 앱일 뿐입니다.

하지만, 누군가 만들어 줬으면 하는게 있는데 아무도 안만들것 같은 그런게 있다면 저처럼 도전을 한번 해보시길 추천드립니다.

이런 방법으로 만든 앱의 수준이 궁금하다? 그렇다면 제가 만든 앱을 한번 깔아보시면 됩니다.....만....

사실 이 앱들은..그냥 다운로드 받아서는 사용할 수 없습니다..;;

앱 자체에 하드코딩으로 api키를 넣는것도 권장할만한 일도 아니기 때문에 설정화면에서 api키를 입력하도록 하였습니다.

즉 openai에서 api키를 발급받은 사람만이 사용 가능합니다.

아니 뭔 앱을 그따구로 만들었어??? 라고 하신다면..아까도 말씀드렸다시피..그냥 앱을 하나 출시해보고 싶었어요...라고 말씀드릴 수 있겠습니다..;;

아래와 같이 개인이 발급받으신 api키를 앱설정화면에서 입력한뒤에 정상적으로 사용이 가능합니다.

아니 그래도 한번 설치해보시고 싶으시다 하는 분들을 위해 혹시나 몰라서 아래 링크를 달아놓긴 하겠습니다.

근데 뭐 쓸모도 별로 없는 앱들이고 API Key도 발급 받아야 사용이 가능한거라..그 누가 설치할까..싶긴 하네요.

어차피 완전 무료앱인데다가  홍보라기보다는 AI의 도움을 받으면 이정도 수준까진 만들수 있다..라는걸 보여주기 위함이라고 생각해 주세요..(근데 혹시 문제가 되는 부분이 있다면 쪽지를 주시면 얼른 수정하겠습니다.)

 1) 인공지능 소설 작성기

https://play.google.com/store/apps/details?id=com.heony.heonynovel 

 2) 영어단어 HTML 코드 작성기

https://play.google.com/store/apps/details?id=com.heony.EngKorHtml