배경
매수, 임대, 매도, 건설 중인 프로젝트, 에이전트 디렉터리, 자체 저널. 이 모든 것이 하나의 공개 사이트에 모여 있습니다.
부동산 플랫폼 · 2022-2024
AX Capital
AX Capital은 두바이 부동산 시장에서 활동하는 회사입니다. 2022년부터 2024년까지 이곳에서 프론트엔드 팀을 이끌었고, 공개 플랫폼을 혼자 처음부터 만들었습니다. 매물 검색 사이트, Quasar 기반 자체 CMS, 브라우저에서 바로 보는 Three.js 3D 아파트 뷰어입니다.
만든 것
세 부분입니다. 첫째, Nuxt 기반 공개 사이트: 1차·2차 시장과 신축 프로젝트 매물 검색, 유형·침실 수·가격 필터(AED, USD, EUR, GBP, CNY), 지도 위 매물, 에이전트 페이지, 카탈로그, AX Journal, 문의 폼. 둘째, Editor.js 에디터를 쓰는 Quasar 기반 자체 CMS로, 사이트 콘텐츠 전체를 여기서 관리합니다. 셋째, Three.js 3D 뷰어로, 구매자가 브라우저에서 바로 아파트를 입체로 볼 수 있습니다.
아키텍처
사이트는 Nuxt, 관리자는 Quasar, 뷰어는 Three.js입니다. 매물 사이트는 검색 트래픽이 핵심이라 페이지가 빠르게 렌더링되고 색인되어야 합니다. CMS는 별도 앱으로 분리해 편집자가 공개 프론트엔드를 건드리지 않게 했습니다. 3D 뷰어는 필요한 페이지에서만 로드됩니다. Editor.js는 원시 HTML이 아니라 구조화된 JSON을 결과로 남깁니다.
어려웠던 점
사이트에는 두 종류의 콘텐츠가 있습니다. 저널 글, 그리고 필터가 조회하는 매물 데이터입니다. 글은 Editor.js에 잘 맞지만, 매물에는 조회할 수 있는 타입이 정해진 필드가 필요합니다. 그래서 블록 에디터를 유일한 콘텐츠 모델로 쓸 수는 없었습니다.
결과
axcapital.ae는 세 부분을 모두 갖추고 프로덕션에 출시됐습니다. SSR, Sharp 이미지 압축, AWS CDN으로 페이지 로딩이 약 40% 빨라졌습니다. 고객 측 평가로는 성능이 50% 향상됐습니다.