MLZ-Advanced
토지 및 부동산 매매를 위한 엔드투엔드 플랫폼: 공개 리드 수집, 지도 기반 고객 여정, 재고·매출·결제·승인을 총괄하는 대규모 내부 콘솔.
Next.js 16
React 19
TypeScript
Prisma + MongoDB
Mapbox GL
SCSS
Recharts
개요
MLZ-Advanced는 부동산 매매 비즈니스를 뒷받침하는 운영 플랫폼입니다. 한쪽은 대고객 및 일반 공개용으로, 랜딩 페이지, 프로젝트 및 필지를 탐색할 수 있는 지도 기반 브라우저, 전화번호 인증을 포함한 구매 의향 접수 플로우를 갖추고 있습니다. 다른 한쪽은 직원이 재고, 고객, 구매 요청, 결제, 승인, 보고 및 커뮤니케이션을 포함한 전체 영업 운영을 관리하는 심층 내부 콘솔입니다. 프로그레시브 웹 앱(PWA)으로 배포되며 아랍어와 영어의 이중 언어로 구동되는 장기 대규모 애플리케이션입니다.
문제점
토지 및 필지 판매는 명확하게 관리하기 어려운 수많은 상태를 수반합니다. 각 필지마다 가격 책정, 면적 및 규격, 향, 소유권, 기반시설 인프라뿐 아니라 판매 단계에 따라 계속 변화하는 상태 값이 존재합니다. 고객은 단순 리드에서 가망 고객을 거쳐 최종 구매자로 전환되고, 결제 대금은 일시불, 할부, 은행 대출 등 다양한 형태로 유입되어 각각 승인이 필요하며, 재판매, 계약 취소, 권한 변경 등 수많은 작업에 결재 절차가 요구됩니다. 이를 스프레드시트나 단편화된 도구들로 처리하는 것은 확장에 한계가 있습니다. 기업에는 부동산 운영의 핵심인 감사 추적 및 결재 승인 체계를 갖추고, 대고객 서비스 여정과 내부 운영 프로세스를 한곳에서 통합 관리할 수 있는 단일 시스템이 필수적이었습니다.
내 역할 및 접근 방식
장기간에 걸쳐 확장된 대규모 팀 프로젝트로, 저는 프런트엔드 엔지니어로 참여했습니다. 일반 방문자, 고객, 내부 직원이라는 서로 다른 타깃 층이 단일 배포 환경을 공유하면서도 라우트 그룹과 권한에 따라 깔끔하게 격리되도록 코드베이스를 구조화했습니다. 제 프런트엔드 작업의 상당 부분은 지도, 대량 편집기, 차트, 그리고 직원들이 실제 업무를 처리하는 데이터 밀집형 상세 뷰 등 인터랙션이 많은 화면에 집중되었으며, 이는 서버 렌더링 및 접근 제어가 적용된 데이터 기반의 클라이언트 컴포넌트로 구축되었습니다.
기술 스택
주요 기능
갤러리
도전 과제 및 해결 방안
단일 애플리케이션으로 세 가지 타깃 층을 지원하는 구조는 자칫 복잡해지기 쉽습니다. 이 아키텍처는 Next.js 라우트 그룹을 활용하여 퍼블릭 사이트, 고객 여정, 내부 대시보드가 단일 배포 환경을 공유하면서도 기능과 권한별로 명확히 격리되도록 설계되었습니다. 대시보드 레이아웃 자체에서 현재 사용자를 불러와 소속 부서의 모듈을 도출하고 이에 맞춰 내비게이션 메뉴를 필터링합니다.
실제 데이터 규모에서의 성능 유지 또한 지속적인 도전 과제였습니다. 토지 매물 인벤토리는 방대한 목록, 무거운 지도, 데이터가 밀집된 상세 페이지를 의미하므로, 애플리케이션은 데이터 페칭과 권한 확인을 서버에서 처리하고 클라이언트 컴포넌트는 지도, 대량 그리드 편집기, 차트, 모달 등 실질적인 인터랙션 영역에만 한정하여 사용합니다. 가상화 목록을 통해 대용량 테이블의 반응성을 유지하며, 지도 데이터는 GeoJSON 변환을 거쳐 필지가 정적 이미지가 아닌 실제 공간 객체로 렌더링되도록 했습니다.
결과
MLZ-Advanced는 일반 방문자 유입부터 승인 및 결제가 완료된 최종 판매에 이르기까지 부동산 비즈니스 전 과정을 아우르며, 현장 운영에 필수적인 인벤토리 세부 정보, 심층 CRM, 승인 이력 추적을 지원하는 포괄적인 시스템입니다. 수년간 활발하게 유지보수되어 온 코드베이스의 역사와 규모는 이 시스템이 단순한 프로토타입을 넘어 실제 비즈니스를 안정적으로 이끌어온 플랫폼임을 입증합니다.
유사한 프로덕트 문제가 있으신가요?
현재 프로덕트 현황, 필요한 결과, 직면한 제약 사항을 공유해 주세요. 이를 바탕으로 합리적인 첫 번째 마일스톤을 정의해 드립니다.
풀스택 개발자 채용