[개발이야기] 멀리 돌아가는 경로를 알려주는 내비게이션 앱

"해커톤 참가"

Posted by 예띠 on November 2, 2019

해커톤 참가

와들 개발자들이 참가한 해커톤의 기록을 공유한다.

kOOk 해커톤 참가

지난 11월 1일부터 2일, 아델리 팀의 이즈님, 센님과 카이스트 프로토타입 동아리 kOOk이 주최한 해커톤에 참가했다. 해커톤의 이름은 무쓸모톤, 생활에 쓸모없는 앱을 만드는 개발 대회였다. 항상 고객 중심적인 기능을 개발하자고 다짐하고 실천하는 우리로서는 색다른 아이디어으로 머리를 채울 수 있는 기회였다. 어떤 앱을 만들까 고민하다가 최단경로를 알려주지 않는 네비게이션 웹페이지를 만들기로 했다. 최적의 경로를 알려주며 우리의 이동 시간을 단축해주는 기존의 네비게이션과 달리 빙빙 돌아가는 길을 알려주는 앱을 만드는 것이 우리의 목표였다.

이 앱은 출발지와 도착지를 검색하는 페이지와 그리고 두 장소 간의 비효율적인 경로를 알려주는 페이지로 구성했다. 이 세 가지 기능을 구현하면서 네이버 Maps Enterprise API를 적극적으로 활용하였다. 먼저 출발지와 도착지를 입력하는 검색창은 Search Places라는 서비스를 이용하였다. 사용자가 특정 건물, 도로 등을 입력하면 입력값과 가장 유사한 5개의 정확한 주소를 띄워주었다. 그리고, 주소들의 Geocoding이라는 서비스를 사용해 (경도, 위도) 형태의 좌표값으로 변환했다. 비효율적인 경로를 제시하기 위해서는 출발지와 목적지 사이에 제3의 경유지를 만들어야 했다. 대한민국 내에서 임의의 경유지를 설정하기 위해 무작위로 한국 주소를 뽑아주는 사이트의 주소들을 크롤링하여 경유지로 설정하였다. 그리고 이 주소 역시 좌표값으로 바꿔주었다. 좌표들은 Directions 5라는 서비스를 통해 3개의 경로를 얻는 데 사용되었다. 경로는 수 천 개의 좌표로 이루어진 Path라는 리스트로 제공되는데, 이 좌표들을 네이버 지도에 하나씩 점을 찍어 도로 위에 선을 그렸다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// 네이버 Maps Enterprise API에 개발자 등록을 하면 KEY를 받을 수 있다.
headers = {
    'X-NCP-APIGW-API-KEY-ID': '******',
    'X-NCP-APIGW-API-KEY': '******',
}

// 네이버 지도를 받아오는 HTML 코드.
<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=******"></script>


// 네이버 지도 객체를 만들고 지도 위에 경로를 그리는 JavaScript 코드
var map = new naver.maps.Map("map", {
    maxBounds: korea,
});

let polylines = [];

for (let j = 0; j < 3; j++) {
    let strokeColor = '';

    switch (j) {
        case 0:
            strokeColor = '#2196F3';
            break;
        case 1:
            strokeColor = '#00FF00';
            break;
        case 2:
            strokeColor = '#DC143C';
            break;
    }

    polylines.push(new naver.maps.Polyline({
        map: map,
        path: arr[j].route.traavoidtoll[0].path,
        strokeColor: strokeColor,
        strokeWeight: 4
    }));
}

이 앱을 만들면서 겪은 가장 큰 어려움은 데이터를 전송하는 것이었다. 앞서 언급한 Search Places, Geocoding, 그리고 Directions 5는 HTML 파일에서 스크립트로 실행하면 접근이 불가했다. 네이버 API를 이용하는데 사용되는 고유한 키가 불법 복제될 수 있기 때문에 네이버가 막아두느 것이다. 그래서, 앱을 실행시키려면 HTML 파일로부터 수신해 데이터로 API에 접근한 뒤 결과값을 송신하는 서버가 필요했다.

서버를 한 번도 개발해본 적이 없는 나와 이즈님은 크게 당황했다. 다른 팀들은 일찍이 앱을 다 만들고 쉬고 있는데 우리만 너무 어려운 개발툴을 선택했나 후회되기도 했다. 하지만, 열정적인 구글링과 센님의 도움 덕에 파이썬의 Flask 라이브러리로 로컬 서버를 구축할 수 있었다. Flask 객체는 HTML파일의 GET Request가 오면 Request을 보고 대응되는 API에 데이터를 전송해 결과값을 다시 웹페이지로 전송하는 역할을 했다. 우리가 앞으로 개발할 서버보다 훨씬 간단한 형태의 서버였지만 서버의 개념을 이해하는데 무척이나 의미있는 경험이었다.

1
2
3
4
5
6
// Flask가 실행하는 함수의 일부
@app.route('/coordinate/find')
def route2():
    text = request.args.get('text')
    response = requests.get('https://naveropenapi.apigw.ntruss.com/map-place/v1/search?query='+text+'&coordinate=127.360226,36.372888', headers=headers)
    return response.json()

밤을 새서 쓸데없는 기능을 만듦에도 불구하고 하나도 힘들지 않았다. 새로운 개발 지식을 알아가는 과정이 참 뿌듯했다. 물론, 회사로 돌아가면 우리가 배운 지식이 이 앱보다 세상 더 많은 곳에 닿길 바란다.