실사용자 관점에서 개선한 네이버 부동산 매물 스크래핑 서비스
소개
네이버 부동산 데이터를 스크래핑하여, 저에게 필요한 핵심 매물 정보를 한눈에 보여주는 웹 서비스를 구현하고 있습니다. 🏘️
https://www.gpters.org/dev/post/naver-real-estate-so-7wxXcN6pYy99jTV
기존 버전은 스크랩에 초점이 맞춰서 개발했었습니다(어차피 혼자쓸거니까!) 그런데 개발하다보니 욕심이 점점 나서 이것저것 추가되고 있습니다 그 개선 과정을 공유하겠습니다!
진행 방법
1. 지역 코드 도입으로 ‘입지’ 핵심 정보 강화
문제점
기존에 데이터를 끌고 올때는 매물에 지역코드가 없어, 행정구역이나 지하철역 기준 필터링 불가했습니다.
개선 내용
cortar_no우연한 계기로 필드 수집 추가할 수 있는 방법 확인지역코드 기준으로 자동 그룹핑 → 필터·정렬 UI 제공
효과
지역 매물 빠르게 탐색 가능
2. 카카오 지도 연동으로 시각적 위치 정보 제공
문제점
텍스트 주소만으로는 실제 위치 파악이 어려움
개선 내용
카카오 지도 JS SDK 연동
위·경도 기반 마커, 인근 지하철역 표시
효과
지도 위에서 직관적 확인 가능
화면 전환 없이 ‘역세권 매물’ 탐색 가능
추후 개선 사항
점선으로 도보 이동로 표현 , 카카오 모빌리티 API 연동시 구현 가능 확인
3. 모바일 전용 실거래가 데이터 활용
문제점
실거래가 수집시 기존 Web 버전에서 Puppeteer로 탭 클릭 등 반복 액션이 많아 속도 저하 및 개발의 까다로움
개선 내용
네이버 모바일 버전 API에서 JSON 형태로 실거래가 일괄 수집
효과
스크랩 속도 3배 이상 향상 및 개발 구현의 편리함
4. UI/UX 개선 (탭 구조 정리)
문제점
평면도/사진/ 기본정보 등이 한 화면에 섞여 있어 가독성 저하
개선 내용
종합 / 상세정보 / 실거래가 / 교통 / 공간 / 매물 탭으로 분리
효과
정보별 집중도 상승,
추후 개선 사항
종합 탭에서 해당 매물의 평가를 AI에 판단하여 종합 정보를 제공, 해당 지역에 대한 기사 RAG 하여 호재 요소까지 분석
5. 호가·실거래가 '평형별 체크박스' 필터 추가
문제점
다양한 평형대 비교가 어렵고 화면이 복잡
개선 내용
모든 평형 정보를 한번에 제공,추가적으로 체크박스로 보고 싶은 평형만 선택 가능
효과
관심 평형대만 빠르게 비교, 가독성 향상
6. 모바일 전용 인터페이스 제공
문제점
실제로 외부에서 사용하면 좋겠다는 니즈가 생김, 기존에는 호스팅하지 않았음.
개선 내용
반응형 웹UI 구현
효과
들고 다니면서 보기 좋음
결과와 배운 점
네이버 모바일 API의 실거래가 데이터를 활용하면 복잡한 자동화를 대체할 수 있다는 걸 새롭게 알게 되었습니다 🤓
실제로 내가 직접 사용하는 서비스를 만들었다는 점이 가장 큰 동기 부여였습니다
부끄럼쟁이라서 다른 사람한테 뭐 만들었다고 잘 공유하지 않았는데, 무엇보다 부끄러움을 무릅쓰고 처음으로 주변 사람들과 공유해봤는데…! 예상외로 많은 공감을 받았고, 피드백과 아이디어도 많이 받을 수 있었습니다 🙌
이때 깜짝 아이디어! 윤누리 님의 개선안, 네이버 링크 넣는거 너무 귀찮다.
귀찮으면 직접 구현해주세요,,,, 하고 깃헙 초대를 드렸습니다. 곧 있다 PR이 하나 날라왔습니다.
네이버 부동산에서 동작할 수 있도록 크롬 확장 프로그램을 추가가 되었습니다. 1시간 30분만에...!!!
기존에 URL을 직접 입력하는 부분에서 개선되어, 네이버 부동산 자체에서 관심 단지를 추가할 수 있으며, 우측 사이드 판넬에서 직접 스크랩된 정보를 볼 수 있도록 구현해주셨습니다.
