대강 어떤 분위기인지 보여주기 위한 대표 사진과 움짤



a65130ab142e782a8c735a72f29f2e2d84ef484a7ddfed210fa837bb64

대표사진


a65130ab142e782a955f5a72d29f3338bfd98829927bc8054abe053c4b25442d

대표움짤




안녕? 크리스마스는 다들 잘 지냈나 모르겠다.


나는 크리스마스때 여자친구가 없어서 프로그래밍 하다가 파일 다 깨지고 복구 후 열심히 코딩만 했어.



a76418aa2236782a88535a5fd291a8df8d59229de6c631bf338eb304f20b60970a61eab911d73a9ed14150



다행히 백업이 있어서 작업을 끝낼 수 있었어. 담부턴 깃허브랑 연동을 꼭 해야겠다.



다름이 아니고 저번에 프리코네 관련 자동차 어플을 한번 개발한 적이 있었어.


그런데 날씨가 추워지니 차량용 태블릿에 손을 갖다대기 귀찮아 지더라.


그래서 버그 난 것도 수정할겸 어플을 다시 개발하기로 했어.



잡소리가 길어졌네


이번 어플 개발 방향은 음성인식 시스템 기반 차량용 콧코로 비서 개발이야.


계획은 콧코로를 부르고 해당 명령을 말하면 동작 할 수 있도록 만드는거야.



개발 이야기는 크게 6가지로 진행 될 꺼 같아.



1. 어플 개발 계획표


2. 콧코로 디자인 변경


3. 음성인식 시스템 구축


4. 음성인식 메뉴 및 동작 명령


5. 기타 내용 추가


6. 완성 및 시연



혹시 관심없고 소스를 보고 싶거나 동작만 어떻게 되는지 확인 하고 싶다면 쭉 내리길 바랄게



1. 어플 개발 계획표


이번 어플은 저번에 만들었던 차량용 프리코네 어플을 기반으로 구축 해 나갈 예정이야.



39b5d928eec531b56bf1c6bb11f11a398c87ce042ac95787



이미지와 같이 기존 어플에서 버그났던 내용을 고치고 음성인식 시스템을 구축 해 나가기로 했어.


기한은 2021년 10월 말 ~ 2021년 12월 마지막 날 까지 잡고 할 예정이야.



계획 잡는데 약 일주일 소요한거 같네. 정리 다할때 쯤에 11월 1일이 되었어.



2. 콧코로 디자인 변경


기존 콧코로도 충분히 귀여운데 눈매가 날카로워서 난 별로 선호하지 않는 편이야.


눈매가 가장 편하게 보이고 귀여운 정도로 따지자면 프린세스 버전 콧코로 (인데 아래부턴 프코로 라고 부를게) 가 가장 편하게 보이더라.


그래서 음성인식 버전은 프코로 디자인으로 시작 하기로 했어.



a66e30ac370fb35692ff5b41f25df9c97d01a423d20ba17411e53246afef5c95fe52b9953f6286d3ae11009d9ae2

좌측이 구버전 / 우측이 신버전



하는김에 뒤에 배경도 같이 바꿔줬다. 이건 작업 금방하니까 일주일 내로 정리 다했고 11월 7일이 되었어.



3. 음성인식 시스템 구축


음성인식 시스템 구축은 이전 어플 개발할때부터 정말 해보고 싶었던 부분이었어.


회사에서 일할때 이부분 관련 내용 프로젝트가 하나 진행 되고 있긴 했는데 협력 업체랑 같이 하는거라 기술을 받아서 적용하기에는 무리라고 싶어서 오픈 소스 등 스스로 찾아서 음성인식 구축을 해보기로 했어.


현재 안드로이드로 작업 할 수 있는 음성인식 API 라던가 음성인식 시스템은 많은데 가장 보편화 되어있는 음성인식 방법은 구글 어시스턴트 API를 가져오거나, speechrecognizer 클래스를 사용 하는 방법이야.


여기서 문제가 발생 하는데


콧코로를 부르고 뭐가 필요하냐고 물어보고 알겠다고 말해주는 시스템을 구축하고 싶었는데 구글 어시스턴트 api는 hey google, ok google 밖에 안될뿐더러 부르고나서 호출 효과음도 반드시 고정되어 있더라.


그래서 나는 speechrecognizer 클래스를 사용 하는 방식을 채택했어.



3eadd523e6da2aa36db0d1bb1fcb212f927c18b3f91275952734585045eaad7f1a09118a9e3f28a8200d4329810d4b97164cb7bf8ed073bae83c7d38fc82304b640cb6d70c03b0cadcdaadfa



해당 부분이 speechrecognizer로 음성을 호출 하는 부분 중 음성을 받았을때 시작하는 부분이야.


speechrecognizer도 구글에서 기본으로 제공해주고 세팅이 되어 있기 때문에 작업이 수월하게 가능해.


그런데 이 음성호출은 해당 트리거가 발동 되는 조건에서만 음성 읽기를 하도록 되어 있어.


이러면 상시 음성호출을 대기했다가 특정 음성이 입력 될 경우 동작 하도록 할 수가 없어.


그래서 서비스 + 포그라운드를 이용 할 꺼야.


서비스는 스레드에서 항상 동작 하도록 할 수 있게 해주고 포그라운드는 어플이 시스템에서 강제 종료되지 않는 한 홈버튼을 눌러도, 다른 앱으로 이동해도 계속 동작 할 수 있게 해줘.



a1592cad3c36b44caaff5d5aef5ddacc0ccd84bbf314a3975f511059403368b99677da9fbe2847ce1f77784ae7d2e93941b893a13e89433c1acc



그래서 위의 사진과 같이 서비스 + 포그라운드로 동작 시키게 할 꺼야


여기까지 11월을 전부 사용하고 12월 1일이 되어버렸네



4. 음성인식 메뉴 및 동작 명령



이제 상시 음성을 듣도록 해놨으니 콧코로를 호출 시킬 수 있도록 해야해


안녕 콧코로와 하이 콧코로 중 하나를 선택해서 콧코로를 호출 시킬 수 있도록 할껀데 안녕 콧코로가 더 낫다는 의견이 있어서 진행을 할꺼야.



a16017aa3826b36792ff5a48fa5dc0ec14ac294317e7b6a5df19d50e6e4a44d18f88d9d9b7fc0290f030efea8727e32056f2e9d4bb4ea0c63f9b547b2e5353fbbf6b



이렇게 한뒤 동작 하면서 혹시 음성 인식이 제대로 되었나 확인 해 볼 수 있도록 테스트를 한번 해야겠어



a16017aa3826b36792ff5a48fa5dc0ec14ac294317e7b6a5df19d50e6e4a44d6593874345064c90b30dd757d807b4483f15a4cb115188f243c5a45d03b010f6317a13b81a3

프린세스커넥트 리다이브 라고 제대로 듣고있음을 확인했다.



음성 호출이 잘 되긴 했는데...


음성 인식에서 콧코로 인식을 잘 못하고 코코로 로 인식을 하더라. 다른 게임 캐릭터로 인식을 하고 있어


이건 구글 네스트 허브 맥스 에서 테스트 해봐도 마찬가지야. 뒷 받침이 들어가는 단어의 경우 이런 오류가 생긴다고 하더라.


원래 이름이 나츠메코코로 도 맞으니까 어쩔수 없이 콧코로, 코코로 둘다 인식 하게되면 동작 하도록 했어.



이제 호출 했으니 콧코로가 어떻게 답변할껀지 디자인을 해야해.


디자인은 아래 이미지를 기반으로 했어. 콧코로가 집중되서 보이도록 할 수 있어서 좋은것 같아.



a17f30666926e32a986b5d48ca9f2e2db0fffef58d640e337ceba2d9d7

난 출근해야 하니 출근전 퇴근전 이렇게 총 2번 샤워한다.



이제 디자인을 짜 볼 꺼야.


원래 코딩이라면 새로운 액티비티를 화면위에 띄우거나 프래그먼트를 이용하여 화면에 띄우거나 하면 좋아.


하지만 나만 쓸 목적으로 개발 하고있고 사실.. 프래그먼트 쓰는법이 아직 익숙치않아서 무식한 방법을 쓰도록 할 꺼야.


하나의 레이아웃에 이미지 visibility 설정을 해서 보이고 숨기게 할꺼야.



a67d38aa1806b4538a332d56565dc0f9c996ce1ec59c7af1b8865e896fff178c7e2975feeb158b275a27



화면을 이렇게 설정 하고



3bb4c32fe7db34af7aa69639f215a8fd3ceaa66876f24d98852182a45df8677d3c97b979eeecb68357f7bdb0615d



이렇게 해도 프래그먼트에 넘어간 척 할수 있는 효과를 줄 수 있어 그런데 추천 하지 않아.


다른 사람이 보면 무슨 미친생각으로 작업했나??? 라고 바로 말할꺼야.



그리고 이 사이에 글씨 재생 효과를 넣어야 하는데 솔직히 하는 방법을 몰라! 그냥 gif 로 글씨 재생시키게 했어


glide 속성을 추가하고 해당 gif 를 재생 하도록 시킬꺼야.



2ab1d922e092b36792ffd1bc1091aee58071078a49db87cc3f51faaf3b59d2a757ba99aea7df956ec8f0fdafcc5ef33f1629d96ad3ee9ed70cc89b64



기왕 추가 한 김에 눈 깜빡이는 효과용 gif 도 제작하고 말할때 입 움직이는 gif 까지 제작해서 전부 넣자.




2ab1d922e092b36792ffd1bc1091afd57ac4e728effeaf55296630bfc28990614d495d30b34cf8db0603bf352b5f0089e02c225193f99b67259896


2ab1d922e092b36792ffd1bc1091a8c3a7664f40bf11917d54cb53b194e2f017ec0ced736f1d93eac951cefe29306a418fd0b6a8b2484fffdac61b06



참고로 사용 후 캐시 초기화 안하면 gif 미친듯이 꼬이니 반드시 초기화 해주자



마지막으로 인게임 에서 콧코로가 말 했던 내용 중 괜찮은 내용을 찾아서 음성을 추출해서 입힐꺼야.



a16017aa3826b36792ff5a48fa5dc0ec14ab056717e18469a82dbf547ec288bfba429a4035c50df37e4fbcf6d95f65384a85c3f777d9c29149955733fccdb2495a3226afdd00b1dc28199cd44619d5c0ea3489e77d56c7c9


미디어 플레이어 말고 음성만 나오도록 하는 소스도 있는데 난 이게 더 편하더라.



음성이 재생 끝나면 불필요한 이미지는 GONE 설정으로 해당 좌표까지 싹 숨겨버리도록 할 꺼야.



0a92fe03a55edc62e27f23fb06df231d9a35aad07ad75768052f


어쨌든 이렇게 작업을 하고 나면 맨위에 움짤처럼 콧코로가 무엇을 도와드릴까요? 하는 화면이 나오도록 할 수 있어.



콧코로가 무엇을 도와드릴까요? 라고 했으니 해야 할 일을 지정해 줄 시간이야.



a16017aa3826b36792350655565cd1e9451774a961b5f6ac3f5938f2cff67b788da63687a7d2c68a5e0b77067f7449a05fd5246d1f1d100f17c3e0666194f764f94040286100f7047300b61f573631ae1dca72d7fe949cabf5




일단 기존 어플에서 동작하던 시스템은 그대로 사용 할 수 있도록 세팅 할꺼야.


그래서 기존 어플에 있는 내용 실행 하도록 지시 하면



a04804ad0e0b782a986b5b41fa91a8d652c3159abd94e137366bce5f8c39c4d4cc1bfe8cc498ae6a67958da241c537543a



기존 어플처럼 이동 할 수 있어.


이때 콧코로의 자막과 표정을 바꿔줘야하니



a16017aa3826b36792fff99e565cd2d5822520fc5dfc3ac9d993619ba67e4b21e906faacee85fa065662bc6c4603ee7bfa4eacf5a2eed7



위에 처럼 visibility(표시) gone(좌표까지 숨기기) 을 활용해서 콧코로 이미지를 바꿔 줄꺼야.



a16017aa3826b36792ffd9be565ad2e95140b3c5fb27f9301f453d34ec186a44a8c02df34c3701f2e984c32f44bab950154936ead179444333fbf936e458


콧코로가 당연히 해주겠데. 행복해라


1



그런데 앞에서 글 적을때 서비스 + 포그라운드를 이용 했다고 했으니 다른 어플이 나와도 음성인식은 동작 할 수 있다는걸 응용할꺼야.


주행 모드 라는 명령이 실행되면 블루투스 연결 (5초후) + 네비게이션이 실행되는 루틴을 짜놓을꺼야.



a04804ad0e0b782dad775b5ec25dd9e95eb2e827bcb54f92d7f6f3a03b06f46c570792eb45b2c83d3705cc09446648c6a08c76b6a00f2462732f804073d6ec34e202f03fdc94cb10b77b20276573d55ee0


해당 소스를 보면 thread.sleep 을 사용 했는데. 이거 스레드 하나를 5초동안 꿈나라로 보내고 아무일도 안시키는 명령어니까 가급적 타이머를 쓰도록 하자.


이거같은 경우는 다른 어플이 실행되는 케이스라 그냥 써버린거야.


그리고 루틴 동작 및 다른어플에서 어플 동작하는 내용에 관한 건 실사용 영상을 보면 알 수 있으니 뒤에 보여줄게



여기 까지만 할꺼면 지금 소스 개발한 내용이 아깝단 생각이 들어서 추가적인 기능을 넣을꺼야.


그중 하나가 오늘 날씨를 알려주는 기상캐스터 콧코로를 만들 꺼야.


날씨 데이터의 경우 구글 api 를 사용해서 진짜 간단하게 제작 하려고 했는데 유료화 되었다는 소식에 포기했어.


대신 기상청 api 와 오,픈weathermap api 둘중 하나를 쓸 껀데 기상청 api 의 경우 api 사용 기한이 따로 존재해서 포기했어.


그러므로 오,픈weathermap api로 하기위해 해당 사이트에 가입 후 api 발급을 받았어.


이 api 의 경우 다음과 같은 링크로 요청하면 날씨를 받을 수 있도록 해놨어



api.오,픈weathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key}



{lat} {lon}에 위도, 경도를 입력하고 {API key}에 발급받은 API를 입력 하는 거야.



a14335ad2517782b955b96bf05de2a7ddaf93343fd5429d2d84bd1c68d83e518a8e447b8a0e7da44cbb3de7e5ff6079de033b142be0a



json 에서 해당 온도가 어느 부분인지 알았으니 이제 작업 할 수 있어.


해당 날씨 api 에 리퀘스트 요청 을 해야 하는데 이 부분은 volley라고 엄청 간단하게 요청하는 방식을 구현하고있어.


해당 소스 사용방법은 안드로이드 developers 에 알기쉽게 설명 되어있어.



3bb2dc2ae0cb782a88535a5fd291a8d9b77dc417ba9b7dfa84df61b912760ca6df67d0



이 방식으로 url 을 리퀘스트 하고 json 데이터를 파싱 할 꺼야.


회사에서 정부과제로 json 수신 및 파싱을 한달동안 했더니 파싱은 매우 쉽게했어.



a04804ad0e0b782a88535a5fd291a9d15f98f751686679f0aabad5b11d8135b13603ca47a2d435d5f2abc038c19a76b4



이렇게 하다보니 gps 데이터가 필요하니 gps 를 사용하여 위도와 경도를 받아 올 꺼야.



2aadc3ad200e782a936b5a4fdf5cd1c54ea92dfb39cc46049ab98167930aac9162cbcfa606b3cdc318895f40495af14a38e7afce683df8bc5e4e568ccfa5389d6bc5f7567e6b9e



데이터를 받아 왔으니 콧코로가 알려주는 디자인을 꾸밀꺼야.



a76500aa0633782a9b575d57c291a8c003eb2c8c333643d7c574cc4d4c4a7cf554c7e16e59b6db50bf2f

여기서 최소온도와 최대온도는 사용하지 않았음.



어떤 게임 스킨만드느냐 누끼, 도장 하도해댔더니 익숙하게 작업이 끝났어.


위에 말한 내용의 이모티콘을 사용해서 데이터를 수신하여 오늘 날씨를 알 수 있게 할 꺼야.



a65f10aa111a78a77eb69639f41da8c70b48702d74551276433916ba9909c51341ef3bec9a2c49880cdab9


a65f10aa111a78a77eb69639f41da8c70b48773f6c5506428f48130002f43e7dc02370cdd6464fd8383d6caf7d7876


그러면 이런 식으로 날씨 안내를 받을 수 있어



a76500aa0633b47c9e333c719b35f47d8af49c8deacde6b8761a8d6fef6f9799f3b3d194623d48db2dd44df064559da764c92862b6fa2f



신년 콧코로 이미지를 사용해서 매우 만족스러워


그런데 gps수신기 를 빼놔서 현재 위도0 경도0의 기니만이 측정 되고있네



이렇게 작업을 하고 나니 아직 하나를 더 구현하고 싶어졌어.


내 집에는 iot 장비를 구축해놔서 음성으로 불을 키고 끄거나 보일러를 키고 끄거나 전원을 키고 끌 수 있어.


그런데 퇴근하고 돌아갈때쯤이면 집안이 춥거나 다른 작업을 미리 시켜놓게 하고 싶은거야.


그걸 콧코로에게 시키고 싶어서 마지막으로 작업 하나만 더해볼꺼야.



마침 어렵지 않게 해당 작업을 할 수 있는 방법을 찾았어.


IFTTT + WEBHOOK 방식을 사용 할꺼야.


IFTTT는 해당 조건이 실행될때 무언가를 실행 시켜주는 중계 역할을 해주는 사이트고 WEBHOOK은 리퀘스트 할 수 있는 링크를 생성해 주는 역할을 하고 있어.


이 방식을 사용하기 위해선 기존에 구글 어시스턴트로 연결된 iot 가 아니라 삼성 스마트씽스로 새로 연결을 진행 해야해.



a15f0caa0103782a847b5d72fe5ccee5213264b6dac939006018db86e01835037a60d5057b44f9649ffade6419e6b9afa951c8702b8fcdf49de29cf86f



성공적으로 연결 했으니 IFTTT에서 루틴을 만들꺼야.



a67e18ab0e06782da9535d46ea5acec9c31611a5f0934209bde90d6b0beca879822ec0617505fc9fda



WEBHOOK에서 요청 받기 위한 ID를 생성하고



1a98f20ecafd13e6e25c2b39f20064b7dd4af0a55766b0585e5ef52b44a7ca56e2429071e770464383c32d5aeb07



IFTTT에서 삼성 스마트씽스를 선택한 다음에



a15714ad223ab54cb6ff5a41cb5dcef93d55193df45e0210478e6bf6938b92d96a3bf69e742e48de95c9c76ad065d202718e9709e98c7611575fc60b


a14321aa1237782d8c6b5a42db5dd9d92998319d457ec186a59945738d14683dd86bc385be5794a94a2411429633585953b03d


이러면 끝이야. 아래 사진처럼 루틴이 완성 되었어.



a67e18ab0e06782a975b5a51c75ad4c1f89badd6f3bfa7ef02788ea81c28b0db527981184f4417711a




이제 WEBHOOK에서 해당 링크 구성을 볼꺼야.



https://maker.ifttt.com/trigger/{startIot}/with/key/{iftttapi}



위의 링크에서 startslot 부분은 아까 webhook 에서 이름 지었던걸 넣고


iftttapi는 webhook 부분 api를 집어 넣어주면 끝이야. 이 부분을 직접 인터넷 링크로 입력하고 들어가면 성공적으로 동작 했다는 안내와 동시에 iot가 동작해.



이제 구성이 어떻게 되어있는지 알았으니 마무리 소스 코딩을 시작할꺼야.


이부분은 생각보다 간단해. 해당 링크를 리퀘스트 할 수 있도록 하기만 하면 돼


아까 날씨 요청하던것처럼 volley 를 이용하기만 하면 끝이야.



a67b1cab052ab44caa323c6d565cd1c5f410c6aa22c7e846f24501bbf4b42643b2362b2809009ebc97



이러면 이제 콧코로가 iot 제어를 같이 할 수 있어. 실제 동작은 아래 시연 부분에 있으니 아래에서 봐.


여기까지 12월 25일 에 끝났어. 크리스마스때 여자도 없으니 코딩에 집중 할 수 있어서 나름 빨랐네.



5. 기타 내용 추가


마지막 26일은 느긋하게 할 겸 인트로 화면과 어플 실행 시 콧코로가 반겨주는 소스를 구현 할꺼야.


먼저 인트로 화면은 구현이 어렵지 않아. 디폴트 액티비티를 인트로 액티비티로 지정하고 원하는 시간 이후에 메인 화면으로 넘어가게 구현만 하면 끝이야.



a14008ab0f0ab36792ff5b4ce25aede93938959de8624d820ab0a46c182b69f7


a15b3caa0f16782b974b5d7cc29f343346cd3efb548e1338bb38ab3e


이후 콧코로가 환영해주는 소스는 다음과 같이 쉽게 구현했어.



a16017aa3826b36792350655565af4c5cc3d8350d0da38679613357fb0649f0e38945a89a95fde7739a9d0b8fb7dfc3d96b286d1f119


이로써 어플 작업은 끝이야. 계속 사용하면서 버그 발견하면 버그 수정해주는 시간이 필요하겠지만... 나혼자 쓸꺼니 나올때마다 수정 하도록 할꺼야.


이로서 26일까지 총 2개월 정도의 작업이 끝났어.



6. 완성 및 시연


이제 완성된거 어떻게 구동하는지 영상으로 보여줄게


혹시 주변에 목소리듣고 알아보면 2d에 영혼까지 팔아버린 인간으로 보일까봐 목소리는 음성변조 한점 양해 부탁할게


그리고 영상 올리는데 3개 제한이있네.. 영상을 압축해서 보여줄게 안에 자막으로 무엇인지 설명해놨어.





영상 인코딩이라고 안나오면 봐


인트로, 기본어플 동작, 10초 무응답시 화면, 운전모드의 영상이야.



인터넷검색, 포그라운드+서비스 동작, 날씨 안내, IoT 구동 관련 영상이야.



영상 인코딩 중이라고 안나오면 봐



실제로 차에서 한번 구동해본 영상도 있어






결론은 음성으로 콧코로에게 지시하면 딜레이가 조금 있지만 잘 따르는걸 확인 할 수 있어.


나만의 콧코로가 하나 완성 된 기분이야.


내년에는 이 어플을 기반으로 모델링 있는 게임에서 움직임을 녹화 하거나 추출해서 내 방에서 콧코로로 iot, 날씨 등 조작할 수 있는 어플을 만들 예정에 있어.


모델링을 구하는게 관건 일 듯 싶다.



그리고 해당 제작관련해서 소스가 궁금한 사람이 있을지도 몰라서 깃허브 하나 열어놓고 갈게.


MelissaJSM/priconavigate (github.com)


깃허브 : 코딩 하는 사람들이 온라인으로 공유하거나 서로 도움 받기 위해서 사용하는 공간.



콧코로가 아니라 다른 캐릭터로 꾸밀 수도 있긴할꺼야.


하지만 이거하나만 주의해주고 감안해줬으면 좋겠어.


이건 나만 사용 할 목적으로 저번부터 소스 짜고 오픈소스 참고 했던거라 깨끗하게 소스를 정리 안해놨고 이동 메뉴는 몇개 빼놨어. 넣고보니 버전이 그렇더라.


보는데 난감 할 수도 있으니 모르면 방명록이든 물어보면 볼때마다 답변 해 줄 수도 있어.


그리고 디자인 짠것도 framelayout으로 1024x600 5인치 기준의 태블릿 화면에서 나오도록 해놨으니 원하는 해상도로 나오게하려면 싹 수정해야 할꺼야. 아니면 이미지 중구난방으로 보일껄?



혹시나 하는데 이거 음성인식 상시대기하는 부분 speechrecognize 기본적으로 효과음 계속 울려퍼지니 특정 볼륨은 꺼놓는게 좋을꺼야.


난 저거 루팅으로 효과음 제거했다.









마지막으로






영상 인코딩 중이라고 안 나오면 봐


19


콧코로를 화나게 하지 말자




출처: 프린세스커넥트 리다이브 갤러리 [원본 보기]