실제 동작 영상만 보고싶다면 아래로 쭉 내려서 영상만 보길 바랄게

 

반갑다.

이번에 만들게 된 계기는 운전하다가 과속 안하려고 계기판 보고 운전하고 반복하다보니 이러다간 언젠간 사고날 수도 있겠다 생각났어.

 

그래서 정면을 보면서 속도를 보는건 어떤가 생각하다가 HUD 로 구현해볼까? 라는 생각에 진행을 하게 되었어.

 

그냥 기성품 사서 쓰면 되겠지만 내가 캬루 넣어서 만들 수 있는데 살 이유가 없지

 

그리고 양해를 하나 구하고싶은데.. 코로나 걸린 후 격리는 끝났는데 아직 컨디션이 좋지 않아서 글쓴게 조금 난해한 부분이 있을수도 있어.

 

이부분 정말 미안하고 양해를 구할게.

 

 

이번 개발 이야기는 다음의 순서로 정리 할거야.

 

1.     구성안

2.     소프트웨어 개발

3.     하드웨어 제작

4.     실제 구동

 

크게 보면 별거 없어 보이지만 여태 제작중에 가장 복잡 했던거 같아.

 

1.     구성안

 

구성안을 작성할땐 브레인스토밍을 해서 생각 나는것 다 적어놓도록 배워와서 복잡 해 보일거야.

 

요약하자면

 

HUD 를 제작하기 위하여 아크릴 판을 준비하고

 

빛반사로 안 보이는걸 방지하기 위해 썬팅필름, HUD 필름을 준비하고

 

안드로이드를 이용하여 어플리케이션을 개발하고

 

속도 측정을 위하여 GPS 기본 기능을 사용하고

 

네비와 실시간 도로기능을 쓰기위하여 SK TMAP API 를 이용하고

 

모든 스마트폰에 호환되도록 하는게 목표야

2. 소프트웨어 개발

앞에서 말했지만 내 일하는 분야, 특기가 안드로이드 프로그래밍 분야라 안드로이드를 쓸거야.

 

이 경우 내가 개발한걸 공유해도 많은 사람들이 수정하거나 사용하기 좋은 장점이 있어.

 

아이폰 유저는 못 쓴다는게 단점이네

 

 

먼저 레이아웃부터 짜고 보자.

 

 

1) 메인 레이아웃

 

 

1. 시계와 날짜 이미지야. 해당 시간은 년, 월, 일, 시, 분, 초 까지 나타낼 예정이야.

2. 도로 속도 제한 이미지야.. 인터넷이 연결 안될경우 자동차 : 100, 자전거 : 30 제한으로 표시할거야.

3.  네비 주소 버튼이야. 네비 주소 검색으로 넘어가는 버튼이야.

4. 설정 화면으로 넘어가는 버튼이야. 캐릭터와 세부설정을 할 수 있게 할거야.

5. 속도 표시 이미지야. GPS 값을 가져와서 표시 할거야.

6. 캐릭터 표시 이미지야. GPS 값과 실시간 도로 최대 표시에 따라서 모션이 바뀔거야.

 

2) 네비게이션 레이아웃 이미지

 

1. 네비게이션 종료 버튼이야. 네비게이션 안내를 멈추고 기존 메인화면으로 넘어가게 할 수 있어.

2. 시계와 날짜를 표시 할거야. 해당 시간은 년, 월, 일, 시, 분, 초 까지 나타낼 예정이야.

3. 속도 제한 버튼이야. 네비모드에서는 지나가는 도로의 속도제한을 표시해줘

4. 설정 화면으로 넘어가는 버튼이야. 캐릭터와 세부설정을 할 수 있게 할거야.

5. 네비게이션 이미지야. gps좌표에 따른 도로 안내를 할거야.

6. 속도 표시 이미지야. GPS 값을 가져와서 표시 할거야.

7. 캐릭터 표시 이미지야. GPS 값과 실시간 도로 최대 표시에 따라서 모션이 바뀔거야.

 

3) 캐릭터 선택 레이아웃

 

1. 캐릭터 선택 화면에 넘어와서 이미 눌림 처리되어있음 처리 했어.

2. 세부 설정 버튼이야. 세부설정으로 넘어갈 수 있어.

3. 원하는 캐릭터 선택을 위한 버튼이야. 총 82명의 캐릭터를 준비할거야.

4. 취소 버튼이야. 누르면 설정값 무시하고 메인화면 으로 넘어갈거야.

5. 확인 버튼이야. 누르면 설정값을 가지고 메인화면 으로 넘어갈거야.

 

4) 세부설정 레이아웃

 

1. 캐릭터 선택 화면 버튼이야. 캐릭터 선택 화면으로 넘어 갈 수 있어.

2. 세부설정에 넘어와서 이미 눌림 처리되어있음 처리 했어.

3. 세부 설정 안내사항과 버튼이야. 화면방향, 화면밝기, 좌우반전, 도로 안내, 자가용 설정, 시계 설정 등을 설정 할 수 있어.

4. 취소 버튼이야. 누르면 설정값 무시하고 메인화면 으로 넘어갈거야.

5. 확인 버튼이야. 누르면 설정값을 가지고 메인화면 으로 넘어갈거야.

 

4) 네비게이션 검색 레이아웃

 

1. 주소 입력 칸이야. 가고싶은 장소를 입력해서 넣을 수 있어.

2. 검색 버튼이야. 가고싶은 장소를 입력해서 넣으면 주소 리스트에 나올거야.

3. 주소 리스트야. 검색 결과를 표시할거야.

4. 취소 버튼이야. 아무것도 안하고 메인 화면으로 넘어 갈 수 있어.

5. 확인 버튼이야. 선택한 주소를 가지고 네비게이션 모드로 넘어 갈 수 있어.

 

레이아웃은 이렇게 구성했어.

 

레이아웃을 짰으니 프로그래밍을 해야지.

 

1) 액티비티와 프래그먼트 설정

 

예전까진 개발할 때 액티비티만 쓰는걸 고집했는데 static 변수가 너무 많아져서 프래그먼트를 쓰기로 결정했어.

 

이렇게 될 경우 액티비티 <-> 프래그먼트 사이에 데이터 전송을 위한 인터페이스를 하나 넣어놓는게 설정하기 좋아.

 

 

위의 사진처럼 중간에 데이터 전송을 위한 통로를 만드는거야.

 

 

인터페이스가 구현 되어있으니 프래그먼트로 데이터를 put 시킬꺼야.

 

프래그먼트로 이동해서 데이터를  get 해서 변수에 저장시키면 기존값을 옮기는데 성공한거야.

 

네비 주소 입력 프래그먼트로 마찬가지로 이와 같이 사용할거야.

 

프래그먼트에서 프래그먼트는 인터페이스를 통해 메인액티비티로 전송 후, 설정된 프래그먼트로 가도록 해야하더라.

 

 

이후, 설정완료한 데이터는 전송 뒤 기존변수로 바꿔치기 하면 끝이야.

설정하면서 액티비티가 재시작된거나 다름없으니 초기화 한번 해주는게 좋아.

2) 메인 액티비티

 

메인 액티비티에선 실제 구동되는 기능을 넣었다고 했으니 구동 부분을 소개할게

 

 

이번 개발에서 가장 기초적인 부분이야.

휴대폰의 gps기능을 이용하여 현재 좌표를 구하는 부분이야.

핸들러를 넣어서 1초마다 반복적으로 현재 좌표값을 가져오도록 하고있어.

안타깝게도 터널에선 수신이 안되니 이건 감안해야 해.

 

이부분은 속도 구하는 부분이야.

1초기준 거리와 거리 사이를 이용하여 속도값으로 계산하는 방식을 사용하고 있어.

하지만 이렇게 출력시키면 m/h 로 출력되니까 반드시 3.6을 곱하여 km/h로 나타내도록 마무리하도록 해야해.

 

 

속도값을 구했으니 이 값으로 캐릭터를 움직이게 할거야.

 

현재 국내 도로는 시속 30, 50, 60, 80, 100, 110 정도로 제한이 되는거 같아서 해당 속도에 따른 4단계 모션을 넣기로 했어.

 

모션은 캐릭터 단계당 20프레임이 들어가도록 했어.

 

 

캐릭터가 점점빨라지는건 속도에 따른 핸들러 딜레이를 조정하는 방식을 이용하기로 했어.

각 20프레임씩 속도에 따라 단계적으로 대기모션, 걷는모션, 뛰는모션, 아카네 미미 스킬1모션 (다급히 뛰는 포즈) 를 재생시키는거야.

 

 

캐릭터 이미지 추출은 spine 데이터를 조합시켜서 재생시켜주는 사이트가 있길래 거기서 모든 캐릭터의 필요 모션을 따와서 구성하도록 했어.

 

원래라면 모션을 하나의 이미지로 만들어서 잘라서 쓰는 방식을 쓰면 좋겠지만.. 이상하게 구현하니 이미지좌표가 들쑥날쑥해서 포기했어.

 

이게 약 한달이 걸릴 정도의 노가다더라.

 

속도 표시 숫자 방식도 같은 방식이야. 대신 hud에선 초록계열 색이 반사가 잘 되길래 초록색으로 구현한 정도 차이가 있네.

 

다음은 시계 구현이야.

시계는 yyyy.MM.dd HH.mm.ss 를 이용하여 년.월.일 시.분.초 데이터를 가져올 수 있어.

이 데이터를 string 값으로 한번 변환 한 후 int 값으로 변환하면서 데이터를 분리한 뒤 숫자 이미지와 연결 시키는 과정을 거치면 비교적 쉽게 구현 가능해.

 

실시간 도로 속도 제한 기능부터는 api 가 필요해 보였어.

나는 sk api (tmap)을 사용하기로 했어.

 

하지만 무료사용에는 제한이있고 유료는 요금이 엄청세니 이걸 감안해서 해야 할 듯 싶다.

 

이 api는 필요한 기능을 링크로 전송하여 GeoJson 방식으로 받아온걸 파싱하여 동작시키는데 필요한 데이터를 수집 할 수 있도록 해놨어.

 

이 부분에선 road api 를 이용하여 여러 좌표를 연결하여 현재 도로가 어디인지 알 수 있도록 할거야.

 

 

기존 좌표를 100m 마다 저장하도록 하고 좌표가 3개 정도 쌓이면 api 에 요청하도록 하는 방식이야. 

Api는 개인이 사이트에 들어가서 신청하면 주니까 입력하면 될꺼야.

 

 

요청 결과는 다음과 같은 포맷으로 올거야.

이걸 파싱해서 필요한 데이터만 뽑아낼거야.

 

해당 데이터에서 현재 도로의 제한속도 만 파싱해서 속도제한에 따른 캐릭터 모션수정을 실시간으로 구현하게하면 기능 구현은 끝이야.

 

다음 api는 네비게이션 api야.

 

 

네비 api는 요청해야할게 많아.

현재 위도, 현재 경도, 목표 위도, 목표 경도, 자동차 타입, 하이패스 유무 등등 다양한 기능을 다 넣을수 있어.

 

 

네비 api의 경우에는  linestring, point 두가지 타입으로 나뉘는데 난 point 타입만 쓸거야.

이거만 있어도 네비안내가 가능한데다가 linestring 방식은 현재 지나가는 도로의 모든 좌표를 다 쓰기 때문에 다루기가 쉽지않아.

 

파싱은 포인트 타입만 추출해서 현재 위치와 목표위치에 따른 거리표현을 할거야.

또한 잘못된 거리로 100m 정도 갈 경우 네비게이션 재탐색을 시키는 기능도 넣어놨어.

이부분은 사진으로 보여주기엔 너무 코딩한게 길어서 깃허브에 올려놓을거니 거길 참고하길 바랄게

 

메인 액티비티에서 보여줄건 이정도가 전부인거 같아.

이제 캐릭터 선택 프래그먼트로 들어갈게

캐릭터 선택 프래그먼트는 사실상 보여줄게 하나뿐이야. 캐릭터 리스트를 배열로 지정한 다음에 클릭한 위치의 배열 좌표를 구해서 선택할 수 있도록 하는 정도야.

 

이래서 캐릭터 선택 프래그먼트는 레이아웃을 집중적으로 보는걸 권장할게.

 

바로 세부설정 프래그먼트로 넘어갈거야.

 

화면 방향을 가로, 세로로 설정할 수 있는 기능을 넣었어.

 

 

간단하게 portrait, landscape 설정을 한 뒤 이 기능 관련 레이아웃을 짜서 정리하면 돼.

 

 

기존 화면 밝기를 저장 한 뒤, 항상 최대 밝기로 유지하거나 저장한 밝기로 돌아가게 하거나 하는 설정이야.

기존 밝기 저장에 자동 밝기 설정도 같이 자동 저장되는건 신기하더라.

 

좌우반전 기능은 hud를 쓰기위해 넣어놨어.

화면이 hud 판에 반사되서 시야에 보일때는 좌우가 반전되니 좌우 반전은 필수야.

좌우반전이 없는건 다음 메뉴에서 필요해보여서 넣어놨어.

 

결과적으론 이렇게 반대로 나올거야.

 

도로안내 활성화, 비활성화는 앞에서 레이아웃 설명과 네비게이션 기능 설정하면서 보여줬으니 이건 넘어갈게

 

자가용 설정은 자동차/오토바이를 쓰는 사람외에 자전거 쓰는 사람을 위해서 추가로 만들었어.

자전거를 타면 최대 시속이 30km/h, 자동차를 타면 100km/h로 설정할 수  있어.

 

대신 네트워크가 연결되었거나 네비모드(도로 안내 기능)이 켜져있으면 해당 기능은 설정 할 수 없도록 막을거야.

 

시계 기능 설정은 온오프하면 위의 레이아웃에서 날짜와 시간만 사라지는 기능이라 따로 설명 안할게.

 

 

그러면 다음과 같은 설정 화면으로 짤 수 있어.

 

그외 기타 기능 몇가지만 더 설명할게

 

이건 어플리케이션 실행할 때 구글 링크 한번 접속하여 성공/실패 여부에따라 네비모드 활성화 설정을 위한 기능이야.

추가로 네트워크가 off->on, on->off 될때도 체크해서 동작하도록 하는 기능도 추가했어.

 

여기까지가 소프트웨어 개발 끝이야. 자세한건 맨 아래 깃허브에 개발한 링크를 올려놓을게.

 

 

3. 하드웨어 개발

하드웨어 개발이라고 거창하게 적었지만 hud 필름 붙히고 각도조절해서 표시하는 작업을 할거야.

 

먼저 hud 반사판을 만들거야.

반사판 제작용 아크릴판은 160mm x 120mm 로 제단하고

선팅 필름은 투과율 15%와 5% 두가지를 이용해서 해볼생각이야.

 

반사 필름을 아크릴 판 크기에 맞게 제단을 한 다음

 

 아크릴판에 세제를 약간 푼 물을 분무기로 뿌린뒤에 시트를 붙힐꺼야.

이래야 기포없이 붙히기 쉽다더라.

 

제대로 붙히면 다음과 같이 깨끗하게 붙혀질거야.

 

이후 hud 필름만 붙혀주면 반사판 제작은 끝이야.

 

하단 판에 스마트폰을 고정시키기 위한 작업을 할거야.

재질은 포멕스를 이용할거야.

 

대충 갤럭시 s20 울트라에 맞도록 길이를 재봤어. 충전기 꽃는 위치는 비우도록 하는게 좋겠더라.

 

포멕스를 자를거야. 이거 힘 많이안주고 그어도 비틀면 끊어지니 힘 세게주다가 손 잘리지 않도록 조심하자.

 

스마트폰에 포멕스 제단한걸 맞춰봤어. 어느정도 맞는거 같아.

마지막으로 hud반사판과 하단 판을 결합할거야. 결합하기 위하여 아크릴 경첩을 붙히고 고정시켜놓을거야.

원래 기구물 만드는데 재능이 업어서 이 정도긴 한데 목업 이라고 생각하고 넘어가자 ㅠㅠ

 

이작업을 한번 더 해서 투과율 5%, 15% 제품을 2개 만들었어.

제품을 2개 만든 이유는 밖에 나갔을 때 햇빛으로 인하여 hud가 얼마나 안 보일지 확신이 안섰기 때문이야.

그래서 테스트해보니 15%는 사실상 거울에 가까울정도의 반사를 가졌지만 외부가 너무 안보이더라.

5%는 적당히 잘 보이면서 외부도 잘보이니 이정도면 충분할 듯 싶다.

 

이정도면 최종 제작은 끝난거 같으니 실제 구동 영상을 보여줄게

 

내가 코로나 격리가 풀린지 얼마 안된상태라서 기침소리가 들릴 수도 있어. 이부분 양해 부탁할게.

또한 도로 상태가 실시간 변화하는데 이게 약간의 딜레이가 있는 부분도있어서 도로 속도가 정확하게 안나올수도 있으니 참고 바랄게.

 길 틀리게 가는건 제대로 길 다시찾는거 되는지 확인차 틀리게가봤어.

 

다행히 작동 잘된다.

 

 

 

글을 읽다보면 알겠지만 이미지만 살짝 바꾸면 다른 게임이나 다른캐릭터로 바꿔서 사용하는데 전혀 문제가 안될거야.

 

MelissaJSM/PCR_HUD_GIT (github.com)

깃허브 링크도 같이 준비해놨으니 내려받아서 사용해도 괜찮아.

마무리로 잔버그 있는지 파악하고나서 스토어에 올려보는것으로 개인적인 마무리가 잘되었음 좋겠다.

 

아직 건강 회복 못한 상태로 깨끗하게 글을 못쓴거 같지만 읽어줘서 정말 고맙고 미안해.

그럼 프바!

 

 

 

 

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