스크랩

학교·역까지 도보 몇 분? 햇빛은? 아파트 주변을 3D로 둘러보는 '아파트 인사이트' 개발기

#아파트인사이트#MapLibre GL JS#3D 지도#공공데이터#부동산 실거래가#1인 개발

학교·역까지 도보 몇 분? 햇빛은? 아파트 주변을 3D로 둘러보는 '아파트 인사이트' 개발기

들어가며

집을 알아볼 때 가격만 보는 사람은 거의 없습니다. 아이가 다닐 학교까지 몇 분이 걸리는지, 역은 가까운지, 근처에 공원이 있는지, 그리고 우리 집에 햇빛이 얼마나 드는지도 궁금하죠. 이런 정보를 현장에 가기 전에 한 화면에서 확인할 수 있으면 좋겠다는 생각에서 출발한 서비스가 있습니다.

GeekNews에 소개된 아파트 인사이트(Apt Insights) 는 한국 아파트의 실거래가와 가격 전망을 보여주는 서비스입니다. 이번에 단지 주변을 입체로 둘러볼 수 있는 '단지 주변 3D' 기능이 추가됐습니다. 프론트엔드와 데이터 시각화를 오래 해온 엔지니어가 AI 에이전트와 함께 혼자 만들었다는 점에서도 눈여겨볼 만합니다.

💡 핵심 요약

  • 500m / 1km / 2km 반경을 고르고 5가지 보기(시설·가격·도보·예측·일조) 로 단지 주변을 살펴볼 수 있습니다.
  • 외부 3D 모델 파일 없이 MapLibre GL JS의 fill-extrusion 만으로 동네 전체를 3D로 그립니다.
  • VWorld, 건축물대장, OpenStreetMap, Valhalla, 국토교통부 실거래가 등 공공·오픈 데이터를 하나로 합쳤습니다.
  • Cloudflare Workers, Vercel, IndexedDB를 활용해 모바일에서도 가볍게 돌아가도록 최적화했습니다.

1. 로그인 없이 먼저 체험해 보기

공유 지도 링크로 들어가면 로그인 없이 주변 건물과 생활시설을 둘러볼 수 있습니다. 공유 링크는 만든 뒤 30일간 유지되고, 가격·예측·일조 같은 추가 기능은 로그인해야 쓸 수 있습니다.

개발자는 아이와 함께 살 집을 알아보면서 가격 말고도 확인하고 싶은 것들이 계속 늘어났다고 합니다. 이 기능은 그런 실제 경험에서 나왔습니다.

2. 목적에 따라 바꿔 보는 5가지 보기

| 보기 | 보여주는 내용 | |---|---| | 🏫 시설 보기 | 지하철역(노선·출구), 학교, 병원, 공원, 쇼핑시설. 송전선·변전소·소각시설·고속도로처럼 계약 전에 꼭 확인해야 할 시설도 표시 | | 💰 가격 보기 | 주변 단지의 최근 12개월 실거래가를 ㎡당 중앙값으로 비교 | | 🚶 도보 범위 보기 | 5·10·15분 도보 범위와 실제 보행 경로, 배정 초등학교 학구 정보 연동 | | 📈 예측 보기 | 최근 5년 실거래 추이와 1년 뒤 예상 가격 및 중앙 50% 범위 (동별 거래 강조) | | ☀️ 일조 보기 | 동지·춘분 시간대별 그림자와 층별 햇빛 시간 계산 (높이가 확인된 건물만 대상) |

특히 시설 보기에서 송전선이나 소각시설 같은 기피 시설까지 보여준다는 점이 실용적입니다. 매물 광고에는 잘 나오지 않는 정보라서 더 쓸모가 있습니다.

볼거리도 신경 썼습니다. 롯데월드타워, 국회의사당, 킨텍스 같은 랜드마크와 교량을 모형으로 만들었고, 도로와 철도 위로 자동차와 열차가 움직이는 애니메이션도 넣었습니다.

3. 3D 모델 파일 없이 동네를 입체로 만드는 방법

가장 흥미로운 부분은 렌더링 방식입니다. 보통 3D 지도라면 .gltf 같은 외부 3D 모델 파일을 불러오기 쉽지만, 이 서비스는 그렇게 하지 않았습니다.

  • React + MapLibre GL JS 환경에서
  • fill-extrusion으로 평면 도형을 위로 올리고
  • 지붕·기둥·교량·철탑 모형을 코드로 조합해서 표현했습니다.

모델 파일을 따로 관리하지 않아도 되고, 데이터만 있으면 어느 지역이든 같은 방식으로 지도를 만들 수 있다는 장점이 있습니다.

사용한 데이터

  • VWorld: 주소 위치, 건물 외곽선 공간 데이터
  • 건축물대장: 동별 층수·높이·용도 보완
  • OpenStreetMap: 도로·철도·공원·수계·생활시설
  • Valhalla: 보행 경로를 계산하는 오픈소스 라우팅 엔진
  • 국토교통부 실거래가: 주변 단지 시세 비교, 거래 추이

데이터를 합칠 때 생긴 문제

공공데이터를 겹쳐 보면 생각보다 잘 맞지 않습니다. 시설 좌표가 건물 한가운데가 아닌 곳에 찍혀 있거나, 한 부지에 건물 여러 동이 섞여 있는 경우가 많습니다. 그래서 개발자는 건물명·용도·부지 경계를 함께 확인하는 과정을 거쳤고, 실제 외곽선으로 만든 모형과 상징용 모형을 따로 구분해서 그렸습니다.

4. 모바일에서도 가볍게: 아키텍처와 최적화

3D 지도는 무겁기 쉽습니다. 모바일에서도 쓸 만하게 하려고 다음과 같은 방법을 썼습니다.

  1. 필요할 때 생성하고 재사용 어떤 단지의 지도가 처음 요청되면 Cloudflare Workers와 Vercel을 써서 서버에서 비동기로 만들고, 이후에는 만들어 둔 것을 다시 씁니다.

  2. IndexedDB 로컬 캐싱 저장된 지도를 먼저 보여주고 서버의 최신 상태를 확인합니다. 데이터가 같으면 다시 그리거나 다시 저장하지 않습니다.

  3. 상태 분리 건물을 다 그린 뒤에 도보 경로 데이터가 늦게 도착해도 지도 전체가 처음부터 다시 그려지지 않도록, 지도 본체와 보조 데이터의 상태를 나눴습니다. 비동기 데이터가 여러 개 섞인 화면을 만드는 프론트엔드 개발자라면 참고할 만한 방식입니다.

  4. 프레임 렌더링 최적화 사용자가 지도를 조작하지 않을 때는 애니메이션 프레임을 멈춥니다. 실제로 측정한 프레임 간격에 따라 자동차·열차 같은 움직이는 효과의 양도 단계적으로 줄입니다. 배터리와 발열을 신경 써야 하는 모바일 환경에 맞춘 설계입니다.

5. AI 협업 개발과 데이터의 한계

이 서비스는 공공데이터 수집부터 3D 표현, 모바일 성능 개선까지 AI 에이전트와 함께 혼자 만들었습니다. 개발자는 데이터의 한계도 감추지 않고 밝혔습니다.

  • 높이 데이터를 용도별로 분리: 지도를 그릴 때는 추정 높이를, 일조를 계산할 때는 검증된 높이만 씁니다. 높이를 확인하지 못한 건물은 일조 계산에서 빠지기 때문에 오차가 생길 수 있다고 명시했습니다.
  • 공간 데이터 나눠서 수집: 건물이 많은 지역에서는 API 응답 한도에 걸리기 때문에 조회 영역을 나눠서 데이터를 모았습니다.

이렇게 한계를 미리 알려주는 점은 부동산처럼 큰돈이 걸린 결정을 돕는 도구에서 특히 중요합니다.

마치며

아파트 인사이트는 현장에 가기 전에 입지를 빠르게 파악하는 도구를 목표로 계속 다듬어지고 있습니다. 집을 알아보는 분에게는 유용한 서비스이고, 개발자에게는 WebGL 렌더링, GIS 데이터 결합, PWA 최적화 사례로 참고할 만합니다.

개발자는 기술적인 피드백이나 개선 아이디어를 환영한다고 하니, 관심 있다면 직접 써 보고 의견을 남겨 보세요.

출처: GeekNews - Show GN: 아파트 인사이트

원문: https://news.hada.io/topic?id=36642&utm_source=geeknews&utm_medium=rss&utm_campaign=news