방문자가 찾는 장소나 현재 위치한 곳의 지도를 보이는 웹페이지

Mira Kwak

6/21/2024

우리는 웹사이트를 만들어 방문자에게 달력을 보여 주고 날짜를 선택하도록, 그리고 장소 목록을 보여 주고 그 중 한 항목을 선택하도록 해보았습니다.
방문자로부터 직접 정보를 입력받는 작업이었습니다.

방문자가 타이핑하거나 화면에 보이는 내용에서 무언가를 선택하는 등의 직접적인 입력 작업을 하지 않더라도
그 방문 흔적으로부터 방문자의 IP주소 등을 알아낼 수 있음도 확인했습니다.

이 자료에서는 방문자가 직접 입력하는 정보, 방문자가 직접 입력하지 않아도 우리가 알아낼 수 있는 정보, 방문자의 명령을 함께 사용해 보려 합니다.

그 예로 화면에 지도를 표시한 후 방문자로부터 특정 장소 정보나 현재 위치 정보를 입력 받아 그 위치가 중심에 오도록 지도를 업데이트하는 웹페이지를 작성하였습니다.
이를 위해 Mapbox, 자바스크립트, 대형언어모델 기반 생성형 인공지능 서비스들 중 하나인 클로드를 사용하였습니다.

웹페이지에 지도를 삽입하기 위해 Mapbox를 사용하였습니다.

Mapbox GL JS의 사용 예에서 Accept coordinates as input to a geocoder라는 예의 코드를 사용하였습니다.
이 예는 Mapbox Geocoding API를 사용하여 방문자가 장소를 검색할 수 있도록 하며
검색 결과에서 지리적 좌표값을 취합니다.

먼저 웹페이지 방문자의 IP 주소를 알아내고 이를 바탕으로 방문자의 지리 좌표값을 구하는 자바스크립트 작성을
앤스로픽(Anthropic)이 개발한 대형언어모델(LLM)인 클로드(Claude) 기반 인공지능 조수(이하 클로드)에게 부탁했습니다.

클로드는 이에 대해 아래와 같이 답을 주었습니다.

1 지리 좌표값 입력에 반응하는 지도를 웹페이지에 삽입

2 웹페이지 방문자의 IP 주소를 구하고
이를 바탕으로 지리 좌표값을 도출하는 자바스크립트 작성

이 때
방문자가 입력하는 좌표, 입력하는 장소 이름, 입력에 따라 나타나는 후보 위치 목록에서 방문자가 선택하는 항목은
방문자가 직접 입력하는 값입니다.
이 예에서 자바스크립트가 방문자가 타이핑 하는 동안 이 값의 입력을 살피며 방문자에게 해당 목록을 업데이트하며 보여주다가, 방문자가 엔터키를 누르거나 목록에서 항목을 클릭하면 결정된 좌표값을 지도 중심 변경에 사용합니다.

방문자의 IP 주소는
방문자가 직접 입력하지 않아도 웹페이지가 구할 수 있는 값입니다.
이 예에서 이 값은 방문자가 단추를 클릭함으로써 자신의 위치를 지도에 사용하라 명령할 때 웹페이지의 자바스크립트에 의해 파악되어 사용(화면에 출력하거나 다른 계산에 사용하는 등) 할 수 있게 됩니다.

3 방문자가 명시적으로 지시하면
방문자의 위치로 지도의 중심이 이동하도록 수정

이 코드를 그대로 로컬시스템(내가 사용 중인 컴퓨터)에 .html 파일로 저장하고 실행하니 다음과 같이 작동하였습니다.

자바스크립트만 작성해 주었는데 이것을 활용할 수 있도록 완전한 HTML 코드를 작성해 달라 하였습니다.
이에 아래와 같이, 위의 자바스크립트를 약간 변형하여 방문자가 단추를 누르면 그 자바스크립트가 작동하는 HTML 코드 전체를 작성해 주었습니다.

이 코드와 Mapbox 예제 코드를 알맞게 결합하여
방문자가 Mapbox 지도 내부 오른쪽 위의 검색창에 특정 장소의 이름이나 좌표를입력하여 해당 위치로 지도를 줌인할수도 있고,
방문자가 자신이 위치한 곳의 지도를 보고자 하면 그 위치로 Mapbox 지도가 줌인하도록 하고 싶습니다.

그래서 클로드에게 1의 Mapbox 예제 코드를 복사해 보여주고 그 코드와 클로드가 작성한 2의 코드를 결합하여 이렇게 동작하도록 하고 싶으니 이에 해당하는 완전한 HTML 코드를 작성해 달라 하였습니다.

입력한 프롬프트는 아래와 같습니다:

(이 부분에 1의 Mapbox 코드 전체를 붙여 넣음)

I want to integrate the code you wrote with this code so that the web page works as follows:

When the visitor clicks the ‘get my location’ button, the visitor’s coordinate data is handed over to the map, and the map shows the visitor’s location.

Can you write the full HTML code for this?

이에 클로드가
제가 부탁한 대로 정확히 동작하는 코드를 아래와 같이 생성했습니다.

그리고 이 코드를 로컬시스템에 저장하여 실행해 보니 제가 원하는 대로 동작하였습니다.

그런데 이 파일을 웹서버에 업로드하여 실행하니 아래 화면과 같이 오류 메시지를 보이며 내 위치로 지도 줌인 기능은 동작하지 않습니다.

방문자의 자기 위치로 지도 줌인이 되지 않는문제는 2의 파일을 웹서버에 업로드하고 실행했을 때에도 아래 화면과 같이 마찬가지입니다.

4 클로드에게 코드가 가진 문제를 해결하도록 지시

이 코드가 로컬 시스템에서는 원하는 대로 정상 작동하지만 웹호스팅 받는 서버에 업로드하여 내 위치로 지도 이동하기를 실행하면 오류가 발생하는데 이것을 어떻게 해결하겠느냐 클로드에게 물었습니다.

도움이 되도록 더 자세한 오류 메시지가 발생한 내용("Error getting location: Only secure origins are allowed (see: https://goo.gl/Y0ZkNV)")을 함께 적었습니다.

그렇게 하니 클로드가 다음과같이
문제의 원인과 해결방법을 설명한 후 개선한 코드를 작성해 보여주었습니다.

이 코드는 3의 코드 중 function getVisitorCoordinates()의 정의 부분만 고친 것입니다.
웹 서버에 저장한 3의 코드에서 function getVisitorCoordinates()의 기존 정의 부분을 이 코드로 대체하고 저장하여 실행하니 정상 작동합니다.

이 코드와 실행 결과를 https://codepen.io/phaidalos/pen/LYomoMm/e72eab83fbc4a2a4767b0e6ad1541887에서 확인하실 수 있습니다.

5 원하는 대로 약간 편집

예제나 클로드가 작성한 코드에서 한국어로 바꿀 부분들을 바꾸고
장소 검색의 경우나 방문자 위치를 찾는 경우나 지도의 줌(zoom) 정도(level)가 같도록 수정하였습니다.
페이지 상단에 사용방법을 안내하는 문단을 추가하고
버튼에 모양을 내었습니다.

버튼을 꾸미기 위해 스타일시트를 사용하였는데, 버튼의 스타일을 정의하는 내용을 .html 파일 안에 적지 않고 .css를 따로 생성해 그 안에 적었습니다.
이 코드와 실행 결과를 https://codepen.io/phaidalos/pen/jOoKZeO/b16e4b1861d6e1fcbf63e8f952cf9429에서 확인하실 수 있으며
아래에서도 확인하실 수 있습니다.