ARESA Mobile App
부동산 전세안전진단 하이브리드 앱
2024.01 - 2024.05
프론트엔드 개발
4인
프로젝트 소개
주거형 부동산 데이터를 기반으로 전세안전진단 및 DSR 계산 서비스를 제공하는 하이브리드 모바일 애플리케이션입니다.
주요 기능
- Naver Maps API 기반 부동산 위치 시각화 및 GPS 연동
- 서버리스 환경 DSR(총부채원리금상환비율) 계산 서비스
- 전세안전진단 서비스 및 진단 결과 리포트
- 공용 데이터와 운영 데이터 전처리 및 일원화
- PWA 지원 및 오프라인 기능
- iOS/Android 네이티브 앱 배포
기술 스택
Development Process
문제 발견부터 성과까지의 여정
Problem Discovery
부동산 전세 사기 예방을 위해 사용자가 전세 계약 전 해당 물건의 안전도를 진단하고, 자신의 DSR을 계산하여 대출 가능 여부를 확인할 수 있는 모바일 플랫폼이 필요했습니다.
공공 데이터와 내부 운영 데이터의 형식 불일치로 인한 데이터 전처리 복잡도
DSR 계산 로직의 다양한 대출 유형별 분기 처리
네이버 지도에서 다수의 부동산 마커 렌더링 시 성능 저하
다양한 디바이스 환경에서의 일관된 UI/UX 제공
Requirements
Functional
- 전세안전진단 주소 검색 및 진단 결과 조회
- 지도 기반 부동산 위치 시각화 및 상세 정보 조회
- DSR/DTI 계산기 (대출 유형별 원리금 계산)
- 사용자 연봉 기반 대출 한도 계산
- 진단 이력 관리 및 결제 시스템 연동
Non-Functional
- 모바일 최적화 반응형 UI
- 오프라인 모드 지원 (PWA Service Worker)
- iOS/Android 동시 배포
- 대출 계산 결과의 정확성 보장
Technical Challenges
Challenge
공용 데이터(공공 부동산 API)와 운영 데이터(내부 DB)의 데이터 형식 불일치
Solution
인터페이스 기반 데이터 정규화 레이어 구축. 공통 DTO 타입을 정의하고 데이터 변환 파이프라인을 통해 일관된 데이터 구조로 전처리하여 프론트엔드에서 통합 사용
Challenge
DSR 계산 시 대출 유형별(주택담보, 신용대출, 전세보증금담보 등) 복잡한 분기 처리
Solution
CalculatorService에서 대출 유형별 전략 패턴 적용. Cookie 기반 상태 유지로 비로그인 사용자도 계산 결과 보존. DSR 포함/미포함 대출 분류 체계 구축
Challenge
네이버 지도에서 다수 마커 렌더링 시 성능 저하 및 사용자 경험 문제
Solution
Supercluster 라이브러리를 활용한 마커 클러스터링 구현. 뷰포트 기반 동적 로딩으로 화면에 보이는 영역의 마커만 렌더링. InfoWindow를 통한 상세 정보 제공으로 초기 로딩 시간 최적화
Achievements
Metrics
- Angular 16 + Ionic 7 기반 모바일 최적화 웹앱 아키텍처 구축
- DSR 계산기 서비스 기획부터 배포까지 풀사이클 개발
- 10개 이상의 대출 유형별 계산 로직 구현
- PWA Service Worker 적용으로 오프라인 캐싱 지원
Qualitative
- NGXS 상태 관리 도입으로 전역 상태(인증, 진단 로그) 체계적 관리
- Capacitor 활용 iOS/Android 동시 배포 파이프라인 구축
- Standalone Component 아키텍처로 모듈 독립성 확보
- 다음 우편번호 API 연동 주소 검색 시스템 구현
Learnings
- Angular Zone 메커니즘과 변화 감지 전략 심화 이해
- 금융 도메인(DSR/DTI) 계산 로직 설계 및 구현 경험
- 하이브리드 앱 개발 및 네이티브 기능(GPS, 지도) 연동 경험
- 부동산 도메인 데이터 모델링 및 전처리 역량 강화
Screenshots
