사례

무료 와이파이 지도

프로젝트 시작9월 18일 오전 04:24바로 개발 시작

개발 내용

무료 와이파이 지도를 만들거야
지도에 표시할 무료 와이파이 리스트는 내가 파일 업로드 해줄거야
네이버 지도 위에 위치 마커 표시해주고 클릭하면 주소, 이름 안내해줘야돼
바로 시작하지 말고 내가 파일업로드 하면 그거 확인하고나서 만들어

🧭 이렇게 이해했어요: 와이파이 리스트 파일 업로드를 기다리느라 아직 시작하지 않았어요. 오른쪽 "파일 업로드" 탭에 올린 뒤 알려주시면 파일을 확인하고 만들겠습니다.

미리 알려드려요 — 네이버 지도는 iframe 임베드가 차단돼 있어 공식 지도 JS SDK 로 붙여야 합니다.
미리 알려드려요 — 네이버 클라우드 플랫폼에서 지도 API 키 발급과 서비스 도메인(미리보기·배포 주소) 등록은 사용자 계정으로만 할 수 있습니다.

실행결과 · 20초 소요

사용자에게 보낼 답변입니다.

알겠어요. 와이파이 리스트 파일을 받고 나서 시작할게요. 아직 files/ 폴더에 올라온 파일이 없어서 예시 데이터로 대신 만들지 않고 기다리고 있어요.

① 파일 업로드 위치: 워크스페이스 오른쪽 패널의 "파일 업로드" 탭에 올려 주세요(채팅에는 첨부할 수 없어요). 올리면 files/ 폴더에 저장돼요.
② 파일 형식: CSV 나 엑셀, JSON 중 편한 걸로 주시면 되고, 각 행에 이름 / 주소 / 위도 / 경도가 들어 있으면 좋아요. 위도·경도가 없으면 마커를 찍을 수 없으니, 주소만 있는 경우엔 알려주세요(그 경우 좌표 입력 방법을 따로 의논해요).
③ 올린 뒤 "올렸어, 시작해줘" 라고 말해 주시면 파일을 먼저 확인하고 화면부터 만들겠습니다.

미리 알려드릴 점: 네이버 지도는 웹페이지를 그대로 끼워 넣는 방식(iframe)이 막혀 있어서, 네이버 클라우드 플랫폼에서 지도 JS SDK 키를 발급받아야 지도에 마커를 올릴 수 있어요. 키 발급과 서비스 도메인 등록은 사용자 계정으로만 할 수 있는 일이라, 파일과 함께 키를 주시면 바로 연결하고, 없으면 우선 키 자리를 비워 둔 상태로 만들어 두겠습니다.

287.1원 사용

와이파이 리스트 업로드했고, 네이버 지도 클라이언트ID는 l9ng02aeyk이다. 개발시작해

9월 18일 오후 02:35

🧭 이렇게 이해했어요: 업로드된 CSV 를 확인한 뒤 Go API 로 와이파이 목록을 제공하고, 네이버 지도 JS SDK 위에 마커·클릭 시 이름·주소 표시까지 만들도록 지시했어요.

미리 알려드려요 — 네이버 지도는 iframe 으로 삽입할 수 없어(X-Frame-Options) 공식 Maps JS v3 SDK 스크립트로만 띄웁니다.
미리 알려드려요 — 지도가 "인증 실패"로 안 나오는 경우가 있어, 네이버 클라우드 플랫폼 콘솔에서 미리보기 주소와 배포 주소를 Web 서비스 URL 로 등록하셔야 합니다 — 이건 사용자님 계정에서만 할 수 있는 작업이에요.

실행과정24개 작업

파일부터 확인할게요.

파일 목록

명령 실행

CSV 확인했습니다. 헤더 없이 데이터만 95,659행이고, 컬럼 순서는 `시도 / 시군구 / 주소 / 이름 / 위도 / 경도`입니다. 위도·경도 컬럼이 있어 마커를 찍을 수 있습니다.

프로젝트 구조를 파악할게요.

파일 목록

파일 읽기

구조 파악 완료. 계획을 세우고 진행합니다.

계획

파일 수정

이제 프론트를 작업합니다. 먼저 index.html에 네이버 지도 SDK를 붙이고, App.jsx를 작성합니다.

파일 수정

계획

파일 수정

파일 읽기

파일 수정

이제 Go API를 재시작하고 응답을 확인합니다.

앱 재시작

명령 실행

로그 확인

명령 실행

계획

record_decision

🔎 완료 검토: 합격

확인이 필요해요 — 네이버 클라우드 콘솔에 미리보기/배포 도메인을 Web 서비스 URL 로 등록해야 지도가 계속 표시된다는 점(감독 해석 ④)의 사용자 안내 여부는 diff 로 확인 불가.

실행결과 · 6분 2초 소요

완료했어요. 요약하면:

- **CSV 확인**: `공공와이파이_20260916_033104_utf8.csv` — 헤더 없이 **95,659행**, 컬럼은 `시도/시군구/주소/이름/위도/경도` 순서. 위도·경도가 있어 그대로 마커로 찍을 수 있었어요.
- **Go API** (``): 앱 시작 시 CSV를 읽어 메모리에 올리고 `GET /api/wifi`로 `[{name, address, lat, lng}]` 전체를 반환해요 (위경도 파싱 실패 행은 건너뜀). curl로 95,659개가 정상 반환되는 것 확인.
- **프론트** (``, ``): 네이버 Maps JS v3 SDK(`ncpKeyId=l9ng02aeyk`)를 붙여 지도를 띄우고, `/api/wifi`를 불러 마커를 찍어요. 마커 클릭 시 이름·주소가 InfoWindow로 뜨고, 다른 마커를 클릭하면 이전 창은 닫혀요. 지도 이동·확대 시 현재 화면 영역 안의 지점만 다시 그려서(최대 3000개) 수만 개 마커로 인한 멈춤을 막았어요.

미리보기 오른쪽에서 지도가 보이는지 확인해 보세요.

⚠️ **한 가지 확인이 필요해요**: 네이버 클라우드 콘솔에서 이 클라이언트 ID(`l9ng02aeyk`)의 **Web 서비스 URL(도메인) 등록**이 안 되어 있으면 지도 타일이 안 뜨고 콘솔에 인증 오류가 나요. 미리보기 화면이 회색으로만 보인다면 네이버 클라우드 플랫폼 → Application 설정에서 미리보기 도메인(그리고 나중에 배포할 공개 도메인)을 Web 서비스 URL로 추가해 주세요.

✅ 파일 7개 수정 · 명령 3개 실행 · 앱 재시작

1,233.6원 사용

지도 최초 위치는 서울 시청역으로 해주고
마커 개수는 지도 중심의 가까운순으로 최대 50개까지만 출력하게해줘

9월 18일 오후 02:52

실행과정8개 작업

현재 코드를 확인할게요.

파일 읽기

요구사항 반영을 위해 두 파일을 수정합니다. 먼저 App.jsx의 마커 필터링 로직과 초기 중심을 바꿉니다.

파일 수정

변경이 정상 반영됐는지 파일을 확인하고 로그를 봅니다.

파일 읽기

로그 확인

실행결과 · 58초 소요

완료했어요.

- **초기 위치**: 지도 중심을 서울 시청역(37.5657, 126.9770)으로 고정했어요.
- **마커 개수**: 기존 "화면 영역 안 지점 최대 3000개" 방식을 걷어내고, **지도 중심 좌표에서 가까운 순으로 정렬해 최대 50개**만 찍도록 바꿨어요. 지도를 이동하거나 확대하면 그때의 중심 기준으로 다시 가까운 50개가 갱신돼요. 거리 계산은 경도 차이를 위도로 보정한 대략 등거리 방식이고, 정렬용이라 제곱근은 생략했습니다.

미리보기에서 시청역 주변 마커 50개가 뜨는지 확인해 보세요.

✅ 파일 4개 수정

147.1원 사용

마커 개수가 11~16개 사이로만 뜨는것 같은데 50개 노출되게 수정해줘

9월 18일 오후 02:56

실행과정8개 작업

코드를 확인해볼게요.

파일 읽기

마커가 11~16개만 보이는 원인을 데이터에서 확인해볼게요. 시청역 주변에 데이터가 얼마나 있는지 봅니다.

명령 실행

파일 읽기

명령 실행

원인을 찾았어요. 데이터를 보니 **같은 좌표에 여러 지점이 겹쳐** 있어요. 시청역 기준으로 가까운 50개를 뽑아도, 그중 같은 좌표(예: `37.5664106, 126.977878`에 5개, `37.56661, 126.9784`에 7개 등)가 서로 위에 겹쳐 그려져서 실제로는 11~16개 위치만 보이는 거예요.

좌표로 묶어서 **서로 다른 위치를 가까운 순으로 50개** 뽑고, 클릭하면 그 위치의 모든 지점을 보여주도록 수정할게요.

파일 수정

로그 확인

HMR 반영됐고 오류 없어요. 50번째 서로 다른 좌표가 시청역에서 얼마나 떨어져 있는지 확인해볼게요 (지도 화면 안에 다 들어오는지).

명령 실행

실행결과 · 3분 25초 소요

완료했어요.

**원인**: 데이터를 보니 같은 좌표에 지점이 여러 개 겹쳐 있었어요. 예를 들어 `37.5664106, 126.977878`에 5개, `37.56661, 126.9784`에 7개처럼 한 자리에 여러 마커가 겹쳐 그려져서, 50개를 그려도 실제로는 11~16개 위치만 보였던 거예요.

**수정**:
- 좌표(소수 6자리 ≈ 0.1m)를 기준으로 지점을 묶고, **서로 다른 좌표를 가까운 순으로 50개** 고르도록 바꿨어요.
- 겹치는 지점은 한 마커로 표시하고, 클릭하면 "이 위치에 N개 지점" 제목과 함께 그 위치의 모든 이름·주소를 리스트로 보여줘요 (많으면 스크롤).
- 확인 결과 50개 마커가 모두 시청역 반경 약 0.63km 안에 있어서 지도 화면에 전부 들어옵니다.

미리보기에서 마커가 50개 보이는지 확인해 보세요.

✅ 파일 2개 수정 · 명령 3개 실행

234.9원 사용

이 프로젝트는 AI 에이전트와의 대화만으로 만들어졌습니다

freewifimap.glidev.ai

↗