Muhammad Arslan
고용하기
프로젝트로 돌아가기

VCM

소유자, 입주민, 재무, 예약, 요청, 리포팅 등 주거 커뮤니티에 필요한 모든 기능을 하나의 인터페이스에 통합한 역할 기반 웹 앱입니다.

역할: Lead front-end engineer일정: 2025-2026유형: Web app (B2B SaaS)

React 19

React Router 7

Vite

TypeScript

SCSS

Jotai

SWR

Firebase Cloud Messaging

데모 커뮤니티, 샘플 잔액 및 서비스 요청이 표시된 VCM 소유자 대시보드

개요

VCM은 동일한 코드베이스에서 완전히 다른 두 대상에게 서비스를 제공하는 부동산 및 커뮤니티 관리 플랫폼의 프론트엔드입니다. 관리자는 이를 통해 부동산, 입주민, 재무, 인시던트, 리포팅 및 커뮤니케이션 등 전반적인 운영을 관리합니다. 소유자와 입주민은 결제, 서비스 요청, 편의시설 예약, 문서, 커뮤니티 정보 등 개인 업무를 처리하는 데 사용합니다. 이 프로덕트는 여기저기 흩어져 있던 수작업 워크플로를 하나의 일관된 공간으로 통합합니다.

문제점

주거 커뮤니티를 운영한다는 것은 입주민 및 소유자 기록, 유지보수 및 서비스 요청, 편의시설 예약, 민원 처리, 결제 내역, 명세서, 점검 및 사고 보고서, 공지사항 등 수많은 유동적인 업무를 동시에 조율해야 함을 의미합니다. 이러한 데이터가 스프레드시트, 이메일 스레드, 서로 단절된 툴에 분산되어 있으면 누락이 발생하기 마련입니다. 핵심 과제는 운영팀과 그들이 관리하는 입주민이라는 근본적으로 서로 다른 두 사용자 경험을 단 하나의 인터페이스로 지원하면서, 워크플로가 늘어나더라도 빠르고 일관되며 유지보수 가능한 제품 품질을 지켜내는 것이었습니다.

내 역할 및 접근 방식

저는 애플리케이션 아키텍처, 공유 데이터 레이어, 재사용 가능한 UI 패턴, 그리고 이 모든 것을 통합하는 역할 기반 구조 등 프론트엔드 구축 전반을 이끌었습니다. 코드베이스의 최다 기여 개발자로서 후속 작업들이 따를 수 있는 개발 표준과 규칙을 수립했습니다. 제 최우선 과제는 이러한 유형의 앱들이 흔히 겪는 함정, 즉 새로운 엔터티마다 동일한 테이블, 필터, 폼 로직을 매번 처음부터 다시 만드는 비효율을 방지하는 것이었습니다. 대신 강력한 기본 프리미티브 세트와 권한 인식 셸을 설계하여, 새로운 워크플로 추가가 매번 새로 만드는 작업이 아닌 조합의 과정이 되도록 했습니다.

기술 스택

프레임워크React 19 with React Router 7
BuildVite
언어TypeScript
스타일링SCSS, organised per feature
StateJotai for app-wide state (auth, sidebar, selected property, notifications)
데이터SWR over a shared Axios client, with automatic auth handling
NotificationsFirebase Cloud Messaging
ReportingRecharts for dashboards; @react-pdf/renderer and CSV utilities for exports

주요 기능

역할 기반의 두 가지 사용자 경험사용자를 알맞은 경로로 안내하고 접근 권한을 제어하는 분리된 관리자 및 소유자 셸.
권한 인식 내비게이션사이드바는 각 사용자의 실제 권한을 기반으로 구성되므로, 사용자는 자신이 사용할 수 있는 권한이 있는 항목만 보게 됩니다.
공유 데이터 레이어단일 요청 파이프라인이 인증 및 디바이스 헤더를 주입하고, SWR로 캐싱하며, 세션 만료 시 사용자를 로그인 화면으로 안정적으로 리디렉션합니다.
재사용 가능한 기능 프리미티브페이지네이션이 포함된 목록 테이블, URL에 바인딩된 필터 입력창, 모달 폼, 차트 카드, 파일 업로드, 내보내기 버튼 등 전체 앱을 구성하는 기본 요소들입니다.
운영 업무 범위 커버리지서비스 요청, 편의시설 예약 및 커뮤니티 캘린더, 재무 화면(결제, 명세서, 청구서, 리마인더), 사용자 및 세대 관리, 리포팅.
푸시 알림인앱 토스트 알림을 지원하는 Firebase 메시징.
PDF 및 CSV 내보내기오프라인 보관이나 공식 제출용 결과물이 필요한 재무 및 리포팅 워크플로를 지원합니다.

갤러리

결제, 문서 및 커뮤니티 이벤트가 포함된 VCM 샘플 소유자 워크스페이스
가상 데이터가 반영된 VCM 서비스 요청 및 이슈 차트

도전 과제 및 해결 방안

가장 큰 난제는 방대한 기능 영역의 규모였습니다. 수십 개의 엔터티 타입이 존재했고, 각각 두 가지 사용자 역할 전반에 걸쳐 목록 조회, 필터링, 생성, 수정, 내보내기 기능이 필요했습니다. 기능마다 이를 일일이 다시 개발했다면 유지보수가 불가능한 앱이 되었을 것입니다. 저는 재사용 가능한 프리미티브와 설정 가능한 권한 기반 내비게이션 모델로 이 문제를 해결했습니다. 이를 통해 메뉴를 하드코딩하거나 로직을 중복 작성하지 않고도 백엔드 권한에 따라 인터페이스가 유연하게 적응하도록 만들었습니다.

또 다른 반복적인 요구사항은 실제 사용 환경에서도 안정적으로 유지되는 상태 관리였습니다. 저는 URL 쿼리 스트링을 통해 목록 페이지네이션과 필터링을 제어하도록 구성하여, 뷰를 쉽게 공유할 수 있게 하고, 브라우저의 뒤로 가기/앞으로 가기가 자연스럽게 동작하도록 하며, 새로고침 시에도 테이블 상태가 유지되도록 했습니다. 인증 로직은 공통 상태 및 요청 계층으로 일원화하여 기능 컴포넌트들을 가볍게 유지했고, 세션 만료 시 에러 바운더리, 로딩 상태, 자연스러운 리디렉션을 적용해 복잡한 대시보드에서도 오류가 감지되지 않고 조용히 넘어가는 일이 없도록 했습니다.

결과

VCM은 커뮤니티 관리의 양측 요구사항을 실질적으로 모두 충족하는 단일 프론트엔드입니다. 운영팀은 단일 관리자 워크스페이스에서 부동산 수명 주기 전체를 운영하고, 입주민은 결제, 요청, 예약, 문서를 셀프서비스로 처리합니다. 공유 프리미티브와 권한 인식 셸을 기반으로 구축되었기 때문에, 새로운 워크플로가 추가되어도 코드베이스가 무거워지지 않고 안정적으로 확장됩니다.

유사한 프로덕트 문제가 있으신가요?

현재 프로덕트 현황, 필요한 결과, 직면한 제약 사항을 공유해 주세요. 이를 바탕으로 합리적인 첫 번째 마일스톤을 정의해 드립니다.

SaaS 개발 서비스
프로젝트 브리프 시작하기
전체 프로젝트다음 프로젝트ZED (My Islamic Reminders)
VCM: 부동산 및 커뮤니티 관리 플랫폼 (React 프론트엔드) | Muhammad Arslan