지금까지 상황 - 아파트 실거래가 트리맵 사이트

그동안 회사 집 회사 집 반복 생활을 하면서 집에 있는 기간 동안에는 계속해서 쭉 트리 맵을 만들고 있었습니다. 중간중간 트리 맵 프로젝트 포스트 이외에 다른 포스팅도 올려야 했지만, 멀티가 안 되는 성격에 트리 맵 프로젝트가 어느 정도 정리되면 이 블로그를 부동산 쪽에 특화된 포스팅으로 계속해서 올려볼 생각입니다. 그렇게 부동산 쪽 유입을 일으켜서 앞으로 만들 트리 맵에도 자연스레 유입이 되도록 할 예정입니다.

 

지금까지 해온 것들

일단, 저번까지는 최소한의 데이터를 가져와서 맵에 띄우기 까지의 테스트 기간이었다면, 지금까지는 스크래피에서 자동화시켜 데이터를 추출하는 데까지 세팅을 중점을 두었으며 웹 페이지에서 위치별로 데이터를 볼 수 있는 기능을 넣어서 테스트를 진행했었습니다.

 

위의 이미지를 참고하면 전국 전체 맵 데이터부터 경기도권 그리고 더 안으로 들어가 고양시까지 유저가 선택해서 맵 데이터를 추출 가능하게 기초적인 세팅을 한 상태입니다. 

 

 

데이터 최적화 필요

현재 트리 맵은 echart를 이용해서 표시를 하고 있습니다. 전체 전국 아파트들을 표시할 때 딜레이가 어느정도 발생하고 있는 상황입니다. 아무래도 모든 데이터를 표시하기에는 좀 버벅일 수도 있겠다 싶지만 트리맵 형식상 작게 안 보이는 부분들까지 렌더하면서 계산할 필요는 없으니 안보이는 부분은 최대한 줄여볼 생각입니다.

 

지역별 선택 시 매번 서버에서 계산된 데이터를 받아 표시하는 게 아닌, 애초에 가지고 온 전체 데이터에서 필터링을 프런트엔드에서 무식하게 계산하는 방식이라 약간의 딜레이가 발생합니다.  하지만 아예 못쓸 정도의 딜레이는 아니지만 다른 환경에서 잘 도착하느냐에 따라 이 부분도 변경될 여지가 보입니다.

 

트리 맵은 마우스 휠을 이용해서 확대 또는 드래그를 할 수 있는데, 이 또한 표시를 해야 하는 노드가 많아질수록 버벅거림이 좀 심한 편이라 어떻게 부드럽게 바꿀 것이지 고민을 해봐야 할 것 같습니다. 마음 같아서는 echart 라이브러리를 좀 내 걸로 만들어서 이 트리 맵에 특화된 세팅을 해보고 싶습니다. 하지만 일단은 할 수 있는 데까지 해보고 그 이후에 생각해볼 수 있을 것 같네요. 

 

 

앞으로 추가해야 할 기능

• 아파트별 표시 기능뿐만 아니라 지역 동별 표시 기능 추가
• 기간별 평당가 증감 기능 추가
• 트리 맵 각 노드별 표시하는 라벨 부분 가독성과 디테일 추가
• 웹 페이지 디자인 개선

 

일단 바로 당장의 목표는 최소한으로 이 페이지가 동작이 잘되게끔 하는 게 우선입니다. 그러고 난 후에는 트리 맵뿐만 아니라 타깃을 부동산 공인중개사에 특화된 히트맵 같은 것도 아이디어로 생각하고 있지만 이것도 역시나 먼저 트리 맵이 동작이 된 후입니다. ㅜㅜ 

 

사실 웹 개발 쪽은 아직 기초단계이고 초보인지라 만들면서 공부하고 벽에 부딪히고 있는 실정이지만, 그래도 무언가 회사 끝나고 집에 와서 생산적으로 하고 있다는 게 마음에 놓입니다. 약간 건전한 취미생활을 하고 있다는 느낌이랄까.. 실상은 직장인 생활을 대체할 나만의 안전장치들을 만들고 있긴 하지만 말이지요.