앱 제작 (3) 네이버지도 유틸 앱

안녕하세요 Loner 입니다. 

예전에 일 진행이 너무 답답했었던 탓에 메인 프로젝트에서 만들었던 유틸성 앱을 공개하려고 합니다.

쓰게 되는 경우가 얼마나 있을지는 모르겠으나, 필요한 분은 쓰도록 블로그를 통해서 올려놓겠습니다.

 

다운 링크 

https://drive.google.com/file/d/1o6zX6TZSmC4GSGc0RiuHCpPiuynUP7r_/view?usp=sharing 

naverMapCheck.apk

1. 앱을 만들게 된 배경 

위치 관련 서비스 앱을 제작하던 중에 네이버지도를 사용했었고, 이용자의 경로선을 목표지점까지 그려줘야하는일이 있었습니다. 국내의 경우 도보 길찾기 기능이 지원되지 않기 때문에 해외로 등록해 구글 서비스를 이용하거나 유료 api를 사용해야하는 경우가 많은데 

 

진행 했던 프로젝트는 국내 사용자만 타겟을 한것이기도 했고 고객사가 지리쪽으로 전문가 였어서 임의로 좌표를 찾아 찍어서 개발자에게 넘겨주면 개발측에서 좌표에 맞는 경로선을 그려줘야 했습니다. 하지만 문제는.. 리소스를 넘겨줘야할 고객사가 it문외한이었다는게 단점이었습니다.

고객사 측이 구글 사이트에서 직접 좌표를 찍어서 우리 개발자들에게 넘겨줘야 하는식 이었는데 항상 리소스를 기다리다가 작업하는 순서로 돌아가는 상황이 되었습니다. 

(미리 앱에서 필요한 틀이나 기능들은 다 구현했지만) 

 

어떻게하면 빨리 끝낼까 하다가 차라리 좌표를 찍었을 때 앱에서 어떻게 네이버지도로 표현이 되는지 확인할 수 있는 앱을 만들기로 해서 만들게 되었습니다. 

 

2. 앱의 기능 

매우 단순합니다. 좌표들을 드래그해서 해당 앱에 텍스트를 옮겨 적는다면 네이버지도 화면에서 이를 어떻게 그려주는지 확인 할 수 있습니다.

"," 이나 " " 띄어쓰기 같은 필요 없는 부분들을 필터링해서 좌표만 추출해내기 때문에 

간단하게 복사 붙여넣기 해서 사용 할수가 있습니다. 

위의 텍스트는 경로선을 그려줄 좌표입니다.

아래의 텍스트는 마커를 찍을 좌표를 넣어줍니다. 

경로선 좌표만 넣어서 사용 할 수 있고, 마커 좌표만 넣어서 사용할 수도 있습니다.

좌표를 선택한 뒤  아래 버튼을 누른다면 

(머트리얼 디자인에서 버튼 text 길게 하지말라고 했는데 괜히 눈에 띄네요.. )

다음 화면에서 이렇게 경로선 표시가 된다는걸 확인 할 수 있습니다.

마커도 마찬가지로 드래그를 해서 붙여넣기만 한다면 

위에는 경로선 좌표, 아래는 마커 좌표 둘다 채워져 있습니다. 

그래서 두개다 표시가 되는걸 확인할 수 있습니다.

아래는 기능 사용 영상입니다. 

 

3. 앱 제작 과정

간단한 Util 성 앱이라서 앱 자체에 적용할 아키텍쳐는 따로 없었습니다. 

전역 객체 남발이고 액티비티 두개로 모든 비즈니스로직까지 해결했습니다. 

 

중점을 둔것은 문자에서 어떻게 좌표를 추출할 수 있을것인가에 대한 중점이었습니다. 

 

    private fun setReplace(newList: String, list: MutableList<LatLng>) {

        val filterString = newList.replace(" ", "")
        val cleanString = filterString.replace(",", "")
        val finalString = cleanString.replace("\n", "")
        val max = finalString.length/19
        repeat(max) {
            val markerLat =
                cleanString.subSequence(firstPointStart, firstPointEnd).toString().toDouble()
            val markerLong =
                cleanString.subSequence(secondPointStart, secondPointEnd).toString().toDouble()
            list.add(LatLng(markerLat, markerLong))

            firstPointStart = secondPointEnd
            firstPointEnd = secondPointEnd + 10
            secondPointStart = firstPointEnd
            secondPointEnd = secondPointStart + 10

        }
        firstPointStart = 0
        firstPointEnd = 9
        secondPointStart = 9
        secondPointEnd = 19
    }

(유틸성으로 빠르게 만들었던 앱이라서 변수명이 막장.)

1)

replace를 활용해서 필터 처리를 했습니다. 첫번째로 긴 문자열을 받으면 여백 제거 하고 ,

특수문자 제거, 띄어쓰기를 제거 한 뒤 output으로 나오는 String의 length를 기준으로 /19를 나눴습니다.

19를 나눈 이유는 

36.335852 -> .를 포함해서 9글자

127.461620 -> .를 포함해서 10글자 

총 19글자가 나옵니다. 그래서 19개씩 나눈다면 해당 위도 경도를 한 묶음 셋트로 구별할 수가 있습니다. 

이것을 1개의 아이템으로 취급합니다. 

 

2) 그렇게 19로 나눈 정수를 기준으로 반복문 횟수를 돕니다. 그 다음 subSequnece를 통해 위도 와 경도를 한번더 나눕니다.

0부터 9번째가 위도, 10부터 19까지 가 경도 입니다.

두개를 나눈뒤의 하나의 좌표로 만들어서 최종 결과 리스트에 .add를 해서 리스트에 값들을 차곡차곡 추가해줍니다.

 

그렇게 좌표 목록으로 필터링해서 다음 화면으로 넘어가면 리스트 데이터에 맞게 경로선이나 마커들을 표시해줍니다. 

 

4. 정리 

-간단한 유틸성 앱은 유지보수 신경안쓰고 마음 편히 만들수 있어서 편했음 

-사람들을 위한 소프트웨어는 불필요한 반복적인 일들을 제거해주는 것도 빠질 수 없는 덕목, 이런거 만들때가 가장 즐거움

- 핵심 알고리즘을 풀고 작업을 한다면 개발은 쉽게 풀림 

 

이상 과거를 되짚어본 추억의 앱이었습니다.