내용이 매우 기니까 실사용 영상만 보고싶으면 쭉 내려



저번에 반도 완성 못 한 어플의 글이 하필 올라가 버려서 당황했지만 지금은 완성했으니 진지하게 글을 써볼게


저번에 봤던거에 비해서 다른 기술이 들어갔을꺼야



내 처음 목적은 자동차 차량용 태블릿을 내맘대로 커스텀 하고 싶어서 계획을 잡고 있었어.


와중 테마를 잡아야 하는데 내 뇌에는 프리코네 밖에 생각하지 않았다. 그러므로 프리코네를 주제로 런처(블루투스, 뮤직, 네비 등등) 을 진행할꺼야


대충 이런 느낌으로 할 꺼다 라는 느낌을 잡았으니 회사에서 기획서 작성하던 것중 매우 간소화 해서 계획을 짜보도록 하자



a67a38aa180ab3559234116058c12a3a17cda701cd8017d9e5f5eac8


마인드맵 짜는 실력 ㅎㅌㅊ



대충 메인 런처 앱이 필요하고 거기에 블루투스 연동, 네비게이션, 뮤직 플레이어 앱 등이 중요 타이틀을 차지하도록 할꺼야


이 부분에서 어플을 하나로 통합할지, 앱을 따로 두고 움직일지는 제작하면서 고민하도록 했어


마인드맵이 충분하게 짜졌으면 다음은 컨셉아트를 짜야지


a16618aa003b782a8c735a72f2917573f56743c7a9869213e225bf70d97271


포토샵 할줄알면서 초기 컨셉은 손으로 직접 그리는게 더 편하더라


이 컨셉 아트에서 중점을 둔 게 있어


프리코네 이미지를 무조건 활용한다. 다만 불가피할경우 다른 이미지를 조금 섞어도 된다.

프리코네 게임 테마를 적극 수용한다. 게임 이미지를 충분히 다시 보고 작업 하도록 한다.

프리코네 인게임 이미지는 다음과 같아.



a14008ac373eb4588aee98bf06d604033752e9ac384d473360d62d


a14008ac373eb4588aed98bf06d60403dc88f2f077161e3deb0a54


사진은 좀 찍은지 된 걸 올렸네


이정도 준비를 했으니 기기 준비를 해야 한다. 사실 차에 안드로이드 장치가 없어서 이번에 설치 할 꺼야



a05e2cad3d26b360b1ff5a57da5de3d93860e43dc6086ee793e8cc52f305ae14


알리 익스프레스에서 산 9인치 안드로이드 올 인 원 을 사용 할 예정이야.


그 외에


a14b04ad0923b542beff5a48c25ae2d97aec0ec88a2ac8960ccdfd03c1e27e53ab4492


당연 차량에 사용하도록 제작되어있으니 12V 5A 어댑터 를 구매하고 선 따서 땜질로 연결 후 수축튜브를 넣어서 집에서도 사용 할 수 있도록 했어.


이때 까지가 6월 초 쯤이야.



작업할 준비가 끝났으니 본격적으로 어플 제작을 시작한다.

크게 4가지 작업을 할 꺼야.

1. 메인화면
2. 블루투스
3. 뮤직플레이어
4. 네비게이션

이중 네비게이션은 기존 파일에 간단한 수정만 하면되니 가장 나중에 하도록 했어.


1. 메인화면


a14838ad162eb36792332b619d22d87d422bc558d1dad1f8fb03574c650da82a73bbf0db2f6d3527c96b521d8bcac6ba81968bebc069d409ceaac26a963eeee91d


첫째로 기획안 중 다른 기능을 어떻게 실행 시킬지 작업을 할 꺼야.


먼저, 앞에서 여러 기능을 하나의 어플로 통합 할 껀지 아니면 다른 어플로 제작 하고 호출 시킬지 고민을 했어.


그런데 하나의 앱으로 제작하면 앱이 너무 무거워 지더라. 차량용 안드로이드 태블릿이 성능이 그렇게까지 좋지 않으니 다른 어플을 호출 하도록 결정했어.



a14a00ac3702782dbe765a5eeb5dd3cda0cd209aa2cb4c81c0be4fa63e9c5c6ce922ab8fa6e0d71d758cff49d287


이 부분은 intent 를 이용하여 해당 어플리케이션의 패키지명을 입력 시킨 뒤에 start 시켜서 다른 어플리케이션을 실행 시키도록 했어.


이동을 위한 메뉴는 다음과 같아

블루투스
인터넷
음악 플레이어
지니 뮤직
네비게이션
디씨
유튜브
트위치



a14b04ab113e782d865b5d70c25aede96abede541b7c858f0e24d46c89044fd31747dc8f82ae022460cb02dabb5b7b716eb3ca3bb0


매우 작동이 잘 됨을 알 수 있다.



이 다음은 이제 프리코네 테마화 작업을 시작할꺼야.


원하는 캐릭터는 페코린느, 콧코로, 캬루 정도로 할꺼야. 그런데 캐릭터를 한곳에 다 넣어서보기엔 복잡해 보이므로 원하는 캐릭터를 설정해서 보게 하도록 할 꺼야.


그렇게 하기 위해서는 fragment(하나의 화면 안에 여러 캐릭을 구현 후 골라쓰기) 를 써서 화면을 나누거나 무지성으로 activity(하나의 화면당 하나의 캐릭을 구현) 를 쓰는 방식중 골라야 하는데 난 바보니까 activity로 다 구현할꺼야



a05328aa3826b360be343c455680a8d90a26bc344da58569bc01bc0cac0d59e871d3


a1671cad261a78f7e25b07fb06df231d970feaceb3dc1d4ce0ca53e8


a05328aa382678f7e25b07fb06df231daca04133183206683cc2f820


성공적으로 페코린느, 캬루, 콧코로를 개별 화면에 나오도록 디자인은 끝났어.


그 다음, 각 캐릭터를 연결 시키는 버튼을 구현하는데 3성 영상도 넣고 싶으니 영상도 넣도록 하자.



7e3134f7a559eb46e3462ef59a2ac4b1947e0dd973d2414daea1dbef7f33aa4ca508e3


아주 잘 된다.


이제 개인적인 욕망을 위해 버튼을 누를 때 표정변화와 이모티콘을 넣도록 할꺼야.



a16017aa3826b36792ff5d67f25ccee1b9e02e6fc8bf9e3b94ada5ee86e587b8b57d8067013a6f9a62959c


a1671cad261a782dbc5b5b5fca91aee825886df1760c57ae176e34722798a27cc257ccc317883592


a05328aa3826782dbc5b5b5fca91aee8389c286db3c08efe17514fa7f82f3825b20930a239963e4d



각 캐릭터마다 표정과 이모티콘이 잘 동작한다.



추가로 캐릭터의 가슴 부위를 만진다면?


a16017aa3826b36792ff5c65f65dcee970bf0c737b544ef9da0927d1981cccd83c0fa6742789da35


a1671cad261a782cbe5f5a5fc291a9d9f49ce6bf1b2a0e8bec4b0dd03c116e4196e978d0b8


a05328aa3826782cbe5f5a5fc291a9d9aae85e6998e6486372d8172110769b79135f717020


캐릭터들이 좋아 죽는다!



그런데, 여기까지 구성하니 더 많은 기능을 넣고 싶어. 그래서 오른쪽 구석에 시간 기능을 구현하도록 한다.


대신 단순 텍스트로 뿌리는게 아닌 프리코네 숫자 이미지 폰트를 사용해서 적용 시킬 예정이야.


a05200ab0f0a782a936b5d7ace5de3ddd28cf5f729ea9624c877e8aaa8b0e79d


시간이 흘러가는걸 적용하기 위해 현재 시간을 받아온 후 int형으로 변수에 저장을 할꺼야.


그 저장한 값을 타이머를 이용하여 1초마다 갱신시키고 switch~case 문을 이용하여 맞는 값에 이미지를 출력하게 했어.


a05e30aa1806b36eb6ff5d5aef5ddacce45d1ac323db2a78b9ed76e8f1f6e9266520b6ae2368b7



그리고 시간이 흘러가기 시작하니 시간에 따른 배경을 위해서 낮, 저녁, 밤 이미지를 따로 넣기로 했어.
낮은 4시까지 저녁은 8시까지 밤은 아침 6시까지 구현하도록 할꺼야.

a17d30ad0033b4519e333249565af4f9db2849edf95a2997a01eee98d4ea542d526babfb75f8


a65f1eaa1222b44292ff5a75f65ac1dc92a4488ddd6fba15a3fbc7f33ce02526b396f618b6a0


a66d14aa1222b44292ff5a40f25dfdf59c6beae9d3f097e05f9619f476f440b8cd38a7a35590



시간도 정상적으로 흘러가고 배경 자동변경도 되니 아주 만족스럽다.


마무리로 선택한 캐릭터를 껐다 켰을때도 유지하기 위해 sharedpref 를 추가해주고


메인 화면으로 쓸꺼니 런처 설정까지 하면 메인화면은 끝이야.


이때까지 7월 초 까지 작업했어.



2. 블루투스


블루투스는 시작 하기 전에 문제가 발생했어. 여러가지 태블릿을 가지고 스마트폰을 연결하니 전화 수신 및 음악재생 블루투스가 작동하질 않는거야.


뒤늦게 안 결과 태블릿과 스마트폰 연결에는 a2dp, avrcp, hfp 프로필이 없다더라...


이로 인해서 xda 등 외국 사이트를 뒤져서 찾은 결과 제조사에서 시스템 앱으로 만들어 놨더라.


루팅을 해야 하는 상황이었어. 다행히 외국 형님들이 해당 기기의 루팅이 성공적으로 된 펌웨어를 공유해줘서 다행이야. 고마워요!



a0533caa1e1ab450baff5b4ce25aede968b6cea432d3b34c973d05c15410fffc8b20af34


펌웨어 변경하니 런처 마저 다 바뀌었다.



그 외에 명령어로 시스템앱 갈아끼우기 등이 가능함을 알았고 해당 시스템앱도 마침 위국 형님들이 깃허브에 풀어줘서 수정이 가능했다.


이부분은 시스템 앱 자체가 복잡해서 겨우 이해하고 수정할 수 있는 정도야. 그렇게 수정 후 완성된 블루투스 앱은 프리코네 캐릭터의 아메스를 바탕으로 완성했다.


그나마 a2dp, avrcp, hfp 프로파일은 확실하게 지원되는거 알아서 다행이야



블루투스 연결


a66524ad261ab54ea2333c71565dd3ed17ef9e9f1da0356113de769274bb68c8584b5314dff677745c4c


a66524ad261ab54ea2333c71565dd3ed17ef9e9f1daf20662cc3769274bb68c85ff9b13cf4321b29b689


블루투스 연결 후 무슨 기기와 연결되어있는지, 연결 전, 후 상태확인과 연결, 해제를 가능한 화면이야.

블루투스 상태는 마침 어울리는 유이 사진이있어서 포토샵으로 잘린부분 새로 그려서 작업 했어.


전화 걸기


a65614aa1806b450b2ff5b4ce25aede91d49c7db062069469e3f40b8de50691d


a05e30aa1806b450b2ff5a4bf35ae4f8063300bedab4469837408d8e753282e8


이 부분은 안드로이드 기기에서 번호를 누르고 통화를 누르면 스마트폰으로 해당전화로 전화걸게 시도하는 부분이야.


숫자는 프리코네 폰트 이미지를 사용했고 프리코네 이모티콘을 적극 활용했어.


다른 이미지가 조금 섞여들어가긴 했지만 이정도는 ok



그리고


a17d34ab1c26782dbe435a5ed69f2e2d2bd920483c6689f233335059eb


실제 전화가 가능하다.



a17d34ab1c26782a974b5a43c25ddec93da313cd98992f9775dcd9d221b32f2c


a17d34ab1c26782dbe445a40ee5dd2e969832ab68546fbe4700ffb373b5fafabe86e0c


실제로 전화도 받아진다.



전화번호부



a17d34ab1c26b37486322e6d9d07c473f442bc1268be74b9a0ec4e62d4fbae


이 부분은 안드로이드 기기에서 전화번호부 권한을 얻어서 다운로드 할 수 있는 부분이야.


하지만 받아오면 협력회사 연락처와 개인정보가 퍼지니 있는것만 알아두자.



전화 기록



a17d34ab1c26782cb66f5d74eb9f2e2dbf2ad675cf1969ece56ffa0277


이부분도 마찬가지로 안드로이드 기기에서 전화 기록 권한을 얻어서 다운로드 할 수 있는 부분이야.


하지만 개인정보 때문에 리스트는 못보여주겠다.



블루투스 뮤직


a66524ad261ab54ea2333c71565aeaf9585e885e5fd1a2cc736815150942397f989af0


이부분은 스마트폰 음악 재생을 컨트롤 할 수 있어.


안타깝게도 해당 음악의 앨범아트 가져오는 기능은 안되고 제목, 가수, 앨범명 정도는 가져올 수 있더라.


그러므로 앨범아트에는 푸치 아메스를 넣어서 귀엽게 만들도록 했어.



여기까지 수정하고 제작하는데 9월초야.



3. 뮤직 플레이어


뮤직 플레이어 부분은 회사 안드로이드 제품에서 참고해서 만들까 했는데 오픈소스화 된게 아니라서 하지 말라더라.

그래서 오픈 소스를 참고해서 제작 하기로 했어.

플레이어 관련은 exoplayer나 mediaplayer 이용해서 제작 하니까 아는 사람은 다들 알꺼야

이 부분의 담당 캐릭터는 프리코네 유니를 사용 하도록 했어.


플레이어 화면


a67314aa2233782b9a535d75fe5dd9e9c7ccee4d07157bed305e0b70a945bb9106de9d32db06c592f3804a8a2dbe9d3b


a67314aa2233782b9a535d75fe5dd9e9c7ccee4d07157bed305ec605b632febb720ba821efdfb389cbe09aa1e086c0e664f0e5444e8bd43e


이 부분은 메인 화면이자 음악 재생을 컨트롤 할 수 있는 부분이야. 랜덤 재생까지 가능하고 seekbar 를 움직여서 음악 위치 이동도 가능하도록 해놨어


그 외에는 에스프레소 마시는 장면이 기억에 남아서 사용하도록 했어



재생 목록



a1431caa062fb36ca7341748565cddc9719b022ec4a397e10373fd89369bcce284a3d3


여기선 내가 미리등록해놓은 음악만 들을 수 있게 설정 해놨어야 했는데 안해놔서 안타깝게도 플레이리스트가 현재는 없다.



아티스트


a14834ab0e02b44caa323c6d58db343a4d7fccfba5db188eb2ec29f0


여기선 아티스트별로 음악 모아놓은거 들을 수 있게 되어있다. 가끔 원하는 가수있을때 쓸 듯 하긴 하다.


노래


a67314aa2233782da4765d74eb9f2e2d903fbcdbc43f05dc35ba373b92


노래 부분에서는 안드로이드 기기에 있는 모든 음악이 다 들어있다.

그런데 버그가 있는지 한글음악 몇개는 리스트에 안뜨더라고 천천히 확인해서 버그 고쳐야겠어.


여기까지 9월 둘째주까지 진행했어.

자가격리 진행중이라 시간이 좀 많아져서 속도가 올랐네


4. 네비게이션


이 부분은 딱히 적을게 생각나질 않는다.

api 부여 받고난후 삽질하다가 이미지 변경후 재구축 및 수정한게 전부야


a65914ad3c36782a936b5d7ace5de3ddad9329d14755ea646c19545acda8e83c



그래서 이미지 작업을 대부분에 시간을 보내고 다음과 같은 결과가 나왔어.




a65914ad3c3676b660b8f68b12d21a1dbe35d0dbcb7fcd



이로서 모든 어플 개발 작업이 끝났어!


여기까지 9월 14일이네


사실 안드로이드 어플 코딩짠걸 더 많이 보여주고 싶었는데...


무작정 올리면 아무것도 모르는 사람은 오히려 짜증부터 날 듯 싶어서 실제 적용 사진을 위주로 올렸어 양해 부탁할게



이제 안드로이드 장치를 차에 설치하고 직접 운전해보면 끝이야.



a0551caa0e0e31be3ff1dca511f11a3944083a8502ab5dbea3df


기존 제품



a0551caa0e0e31be3cf1dca511f11a399b6fc61c6f73178ef6bf


빼고 프런트 케이블 연결 후 동작 테스트



a0551caa0e0e31be3df1dca511f11a39d6a1ed5a2bfa28d8f8d5


후방 카메라 선 연결 작업



a0551caa0e0e31be3af1dca511f11a391459624bb7a4ef60aef2


작업 끝!

모든 준비가 끝났으니 마지막으로 실제 운행 영상 보고가!



저작권 (수익 창출 금지) 떴는데 영상 재생은 되는걸로 파악했어.


수익낼수없는 계정인데 수익경고가 떠버렸네



혹시나 이후에 영상 재생이 안되면 음성 없앤버전이랑 예전에 만들어놓은 네비 프리코네 음성 영상 올려놓을게



진짜 누구 못태우겠다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ


하지만 요번주 금요일 친구들 모인다 태워보고 나중에 후기 적어볼게





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