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

대표사진

대표움짤

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

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

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

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

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

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

잡소리가 길어졌네

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

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

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

1. 어플 개발 계획표

2. 콧코로 디자인 변경

3. 음성인식 시스템 구축

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

5. 기타 내용 추가

6. 완성 및 시연

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

1. 어플 개발 계획표

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

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

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

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

2. 콧코로 디자인 변경

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

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

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

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

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

3. 음성인식 시스템 구축

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

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

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

여기서 문제가 발생 하는데

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

이제 디자인을 짜 볼 꺼야.

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

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

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

화면을 이렇게 설정 하고

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

해당 소스를 보면 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를 입력 하는 거야.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5. 기타 내용 추가

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

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

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

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

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

6. 완성 및 시연

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

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

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

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

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

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

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

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

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

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

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

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

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

MelissaJSM/priconavigate (github.com)

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

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

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

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

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

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

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

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

마지막으로

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

콧코로를 화나게 하지 말자