[7기 노코드B] 네이버 지도 랜딩페이지에 임베드하기 (Framer)

네이버 지도API 개발가이드를 학습시켜서 원하는 지도 형식의 코드를 만들어 웹페이지에 임베드하는 과정입니다.

프레이머로 웹페이지를 제작했고, 일잘러 장피엠 장병준님이 많은 도움주셨습니다.

1. 준비

  • GPT ADA > Link Reader 플러그인

  • 웹 빌더 : Framer

  • Naver Map API 개발 가이드

    • 튜토리얼

    • Geocoder 서브 모듈

      • 주소→좌표 검색(geocode) / 좌표→주소 검색(reversegeocode) API를 호출


2. GPT가 만든 코드를 Framer에 입력

  • Naver Map API 개발 가이드 학습

  • 코드에 Client ID와 주소 입력

    • Client ID

      • <script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&submodules=geocoder"></script>

    • 주소

      • geocodeAddress('불정로 6')

  • Framer에 코드 넣기

  • 임베드가 잘 안될 때, 프롬프트로 수정요청

    • ‘정상 작동 안되는데 오류 수정해줘!’

  • 원하는 지도 형식의 프롬프트 입력

    • 1. 마커만 생성

    • 2. 마커 클릭 시, 인포윈도우 생성(주소 포함)

      • ‘마커를 클릭할 때, 주소를 포함한 인포윈도우를 생성하게 해줘.’

    • 3. 마커와 인포윈도우 기본 생성(주소 포함)

      • ‘기본적으로 지도에 마커와 주소를 포함한 인포윈도우를 생성해줘’

    • 4. 마커와 인포윈도우 기본 생성(주소 포함) + 마커 클릭 시, 해당 주소의 네이버 지도 웹/앱으로 이동

      • ‘기본적으로 지도에 마커와 주소를 포함한 인포윈도우를 생성해주고, 마커를 클릭하면 해당 주소의 네이버 지도 웹페이지로 이동하게 만들어줘. 그리고 인포윈도우 안에 들어갈 주소는 볼드체로 만들어줘’

    • 5. 마커와 인포 윈도우 기본 생성(지명/주소/대표 이미지) → ‘실패’


6
9개의 답글

(채용) 콘텐츠 마케터, AI 엔지니어, 백엔드 개발자

지피터스의 수 천개 AI 활용 사례 데이터를 AI로 재가공 할 인재를 찾습니다

👉 이 게시글도 읽어보세요