네이버 지도 API를 이용하여 GPTs 앱을 만들어보았다. (ft. Vercel 웹서버 배포)
아주 애정하는 유튜브 채널 10X AI CLUB
따라해본다 따라해본다 말만 했었는데, 최근에 GPT 유료 구독 하게 되면서 드디어 진짜 따라해보았다.
이게 뭐라고 설레었는지.
자세한 설명은 위 영상에서 아주 상세하고 친절하게 되어있으니, 공부하면서 배운 점 위주로 기록해본다.
1. 네이버 지도 API
https://guide.ncloud-docs.com/docs/ko/maps-overview
동적 지도 API도 있지만, 일단 갖다 쓰기 편한 REST API 종류는 다음과 같다.
- REST API
- Static Map API : 다양한 지도 이미지를 생성( 지도 크기, 유형, 형식, 줌 레벨, 마커, 대중교통 정보 등 요청가능)
- Directions 5 API : 경로 데이터를 조회
- Directions 15 API : 경로 데이터를 조회 (5보다 15가 더 상세한 경로 조회 가능)
- Geocoding API : 지번주소, 도로명 주소를 지도 좌표로 변환
- Reverse Geocoding API : 지도 좌표를 지번주소, 도로명주소, 법정동, 행정동 정보로 변환
건 당 0.1원인데, 대략 몇 만 건까진 무료 이용 가능하기 때문에 그냥 편하게 다 신청해보았다.
이중 이번에 활용할 건 Directions 5 API.
입력한 정보(출발지, 경유지, 목적지 등)를 기반으로
자동차 경로 및 통행 정보(소요 시간, 거리, 예상 유류비, 통행 요금 정보, 분기점 안내)를 조회 가능하다.
모든 경로는 실시간 교통 정보를 반영하므로 출발지, 목적지, 옵션이 동일하더라도 동일 경로를 보장하지 않는다고 한다.
대략적인 요청 예시 코드는 다음과 같다.
curl --location --request GET 'https://naveropenapi.apigw.ntruss.com/map-direction/v1/driving?goal=129.075986%2C35.179470&start=127.1058342%2C37.359708' \
--header 'x-ncp-apigw-api-key-id: {API Key ID}' \
--header 'x-ncp-apigw-api-key: {API Key}'
요청한 경로를 지도에 표기하여 시각화하는 것까지 언젠가 해보고 마리라.
2. Vercel
Vercel = 앱을 하나 배포하고 싶을 때, 쉽게 배포할 수 있도록 도와주는 웹사이트
Express.js = node.js중 서버를 잘 구축해주는 패키지
Vercel에 대한 심도 깊은 설명글을 ChatGPT에 물어보았다.
정리하면 서버리스 아키텍처 덕분에 인프라나 서버 관리에 대해 신경 쓰지 않고 웹 서버를 배포할 수 있다는 것.
코드는 깃허브 레포지토리 연결시켜서 관리할 수 있었다.
Vercel은 웹 애플리케이션을 배포하고 호스팅하는 플랫폼으로, 특히 프론트엔드 개발자들이 빠르고 쉽게 웹 애플리케이션을 배포할 수 있도록 도와줍니다. Vercel은 서버리스(Serverless) 아키텍처를 기반으로 작동하며, 주로 React, Next.js와 같은 현대적인 JavaScript 프레임워크와 잘 통합되어 있습니다. 아래에서 Vercel의 역할과 특장점에 대해 상세히 설명하겠습니다.
1. Vercel의 역할
Vercel의 주요 역할은 웹 애플리케이션을 배포하고 호스팅하는 것입니다. Vercel은 개발자가 코드를 작성하고 푸시(push)하는 순간, 자동으로 해당 애플리케이션을 빌드(build)하고 배포(deploy)합니다. 이는 개발자가 인프라나 서버 관리에 신경 쓰지 않고, 애플리케이션 개발에만 집중할 수 있도록 돕습니다.
2. Vercel의 특장점
1) 자동화된 배포 및 CI/CD 지원
Vercel은 GitHub, GitLab, Bitbucket과 같은 Git 저장소와 쉽게 통합됩니다. 개발자가 코드를 변경하고 커밋하면, Vercel이 자동으로 빌드하고 배포하는 과정이 시작됩니다. 이 자동화된 과정 덕분에 개발자는 배포 과정에서 발생할 수 있는 실수나 번거로운 설정 없이 빠르고 안전하게 애플리케이션을 배포할 수 있습니다.
2) 서버리스 아키텍처
Vercel은 서버리스(Serverless) 플랫폼을 제공합니다. 서버리스는 서버를 관리하거나 유지할 필요 없이 애플리케이션을 실행할 수 있게 해줍니다. 서버리스를 사용하면 애플리케이션이 요청에 맞게 자동으로 확장되므로, 트래픽에 관계없이 안정적인 성능을 보장할 수 있습니다.
3) Next.js와의 완벽한 통합
Vercel은 Next.js의 창시자들이 만든 플랫폼으로, Next.js와의 통합이 매우 뛰어납니다. Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 기능을 제공하여 빠르고 효율적인 웹 애플리케이션 개발을 돕습니다. Vercel은 Next.js를 최적화된 방식으로 지원하므로, Next.js 애플리케이션을 배포할 때 최고의 성능과 편의성을 제공합니다.
4) 전 세계 CDN(Content Delivery Network)
Vercel은 전 세계 여러 데이터 센터에서 애플리케이션을 호스팅합니다. 이는 전 세계 어디서든 빠른 속도로 콘텐츠를 제공할 수 있다는 것을 의미합니다. Vercel의 CDN은 애플리케이션의 정적 파일을 캐시하여, 사용자가 웹사이트에 접속할 때 빠르게 로딩되도록 합니다.
5) 개발자 친화적인 환경
Vercel은 개발자 친화적인 도구와 인터페이스를 제공합니다. 예를 들어, Vercel 대시보드에서는 애플리케이션 배포 상태, 트래픽 통계, 로그 등을 쉽게 확인할 수 있습니다. 또한, 배포 후 실시간으로 로그를 모니터링하고, 오류를 신속하게 추적할 수 있는 기능도 제공합니다.
6) 커스터마이징 가능한 도메인
Vercel은 커스터마이징 가능한 도메인 기능도 제공합니다. 개발자는 원하는 도메인을 연결하여 자신의 웹 애플리케이션에 맞는 URL을 사용할 수 있습니다. 이를 통해 브랜드 아이덴티티를 강화하고, 더욱 전문적인 인상을 남길 수 있습니다.
7) 확장성
Vercel은 작은 프로젝트부터 대규모 애플리케이션까지 모두 지원합니다. 서버리스 아키텍처 덕분에 Vercel은 트래픽이 급증하는 상황에서도 자동으로 확장되며, 개발자는 이에 대해 신경 쓸 필요가 없습니다. 또한, 서버리스 환경은 비용 효율적이며, 필요한 자원만 사용하기 때문에 운영 비용을 절감할 수 있습니다.
3. Vercel을 사용하는 이유
- 빠르고 간편한 배포: 코드 푸시만으로 자동으로 빌드 및 배포가 이루어져, 개발자는 배포 과정에서 생길 수 있는 실수를 방지할 수 있습니다.
- Next.js 최적화: Next.js 애플리케이션의 빠르고 효율적인 배포와 서버리스 환경을 제공하여 최고의 성능을 보장합니다.
- 자동 확장: 트래픽 증가에 맞춰 자동으로 확장되므로, 별도의 인프라 관리가 필요 없습니다.
- 개발자 친화적인 도구와 대시보드: 로그, 배포 상태, 트래픽 통계 등을 쉽게 모니터링할 수 있어 개발자가 더욱 효율적으로 작업할 수 있습니다.
4. 결론
Vercel은 웹 애플리케이션의 배포 및 호스팅을 간편하게 만들어주는 훌륭한 플랫폼입니다. 자동화된 배포, 서버리스 아키텍처, 글로벌 CDN 지원 등 여러 강력한 기능을 통해 개발자는 보다 효율적이고 안전하게 웹 애플리케이션을 배포할 수 있습니다. 특히 Next.js와의 최적화된 통합은 Vercel을 사용하는 또 다른 큰 이유입니다. Vercel을 활용하면 개발자는 배포와 인프라 관리를 걱정하지 않고, 애플리케이션 개발에 집중할 수 있습니다.
Vercel 플랫폼에 웹서버를 하나 만들고,
웹서버를 호출하여,
그 서버에서 네이버 지도 api를 호출하는 코드를 작성하고
이 과정을 GPTs에 연동 시켜 앱으로 만드는 것이 목표이다.
웹서버 배포하는 과정은 아래 링크를 참고하였고,
Vercel 계정 생성, Node js 설치가 선행되어야 한다.
https://vercel.com/guides/using-express-with-vercel
How to Deploy an Express.js Application to Vercel
Learn how to deploy an Express.js application to Vercel using Serverless Functions.
vercel.com
API 요청할 때 axios라는 패키지를 이용하였는데
짧게 얘기하면 웹사이트 자체에서 사용자가 서버한테 호출을 보내면, 그 호출을 받아서 실제로 돌려주고, 사용자에게 결과값을 알려주는데 도움이 되는 패키지라고 볼 수 있다.
별도의 포스팅을 통해 정리해볼 예정
.env 파일에 저장한 인증 키를 연결할 때는 dotenv 패키지를 사용하였다.
알아야 할 게 너무 많아...
3. GPTs 연결
프롬프트 엔지니어링을 통해 나만의 ChatGPT 앱을 만들 수 있는 건 알고 있었는데,
스키마라는 걸 구성하여 보다 명료한 로직을 수행하게 만들 수 있다는 것을 알았다.
ActionsGPT
여기에 API 요청 문구를 그냥 갖다 붙이면, GPT 앱 만드는데 동작 시킬 수 있는 스키마, 혹은 액션을 그냥 짜준다.
원클릭으로 스키마를 작성해주니,
내 vercel 웹의 도메인 주소나, 인증 키와 같은 정보만 수정해주면 된다.
4. 느낀 점
단순히 네이버 지도 API의 빠른 경로 찾기만 사용하였지만
가고 싶은 지역 근처 맛집 추천이라던가,
현재 시각, 현재 지역 근처의 약국이나 응급실 안내라던가
추가적인 데이터를 바탕으로 보다 목적 지향적인 앱으로 고도화하여
시각화까지 해보는 시도를 해보고 싶다 (아직 안했다는 얘기다)
다른 시도를 해보기 이전에, 일단 새로운 개념을 받아드리는데 시간 많이 쏟기도 했고
서버 띄우고 GPT에 연결하는 것에 약간 진이 빠지긴 했다.
이런 거 해보는 게 아주 즐거운데 나도 개발 체질이려나