VCM
소유자, 입주민, 재무, 예약, 요청, 리포팅 등 주거 커뮤니티에 필요한 모든 기능을 하나의 인터페이스에 통합한 역할 기반 웹 앱입니다.
React 19
React Router 7
Vite
TypeScript
SCSS
Jotai
SWR
Firebase Cloud Messaging

개요
VCM은 동일한 코드베이스에서 완전히 다른 두 대상에게 서비스를 제공하는 부동산 및 커뮤니티 관리 플랫폼의 프론트엔드입니다. 관리자는 이를 통해 부동산, 입주민, 재무, 인시던트, 리포팅 및 커뮤니케이션 등 전반적인 운영을 관리합니다. 소유자와 입주민은 결제, 서비스 요청, 편의시설 예약, 문서, 커뮤니티 정보 등 개인 업무를 처리하는 데 사용합니다. 이 프로덕트는 여기저기 흩어져 있던 수작업 워크플로를 하나의 일관된 공간으로 통합합니다.
문제점
주거 커뮤니티를 운영한다는 것은 입주민 및 소유자 기록, 유지보수 및 서비스 요청, 편의시설 예약, 민원 처리, 결제 내역, 명세서, 점검 및 사고 보고서, 공지사항 등 수많은 유동적인 업무를 동시에 조율해야 함을 의미합니다. 이러한 데이터가 스프레드시트, 이메일 스레드, 서로 단절된 툴에 분산되어 있으면 누락이 발생하기 마련입니다. 핵심 과제는 운영팀과 그들이 관리하는 입주민이라는 근본적으로 서로 다른 두 사용자 경험을 단 하나의 인터페이스로 지원하면서, 워크플로가 늘어나더라도 빠르고 일관되며 유지보수 가능한 제품 품질을 지켜내는 것이었습니다.
내 역할 및 접근 방식
저는 애플리케이션 아키텍처, 공유 데이터 레이어, 재사용 가능한 UI 패턴, 그리고 이 모든 것을 통합하는 역할 기반 구조 등 프론트엔드 구축 전반을 이끌었습니다. 코드베이스의 최다 기여 개발자로서 후속 작업들이 따를 수 있는 개발 표준과 규칙을 수립했습니다. 제 최우선 과제는 이러한 유형의 앱들이 흔히 겪는 함정, 즉 새로운 엔터티마다 동일한 테이블, 필터, 폼 로직을 매번 처음부터 다시 만드는 비효율을 방지하는 것이었습니다. 대신 강력한 기본 프리미티브 세트와 권한 인식 셸을 설계하여, 새로운 워크플로 추가가 매번 새로 만드는 작업이 아닌 조합의 과정이 되도록 했습니다.
기술 스택
주요 기능
갤러리


도전 과제 및 해결 방안
가장 큰 난제는 방대한 기능 영역의 규모였습니다. 수십 개의 엔터티 타입이 존재했고, 각각 두 가지 사용자 역할 전반에 걸쳐 목록 조회, 필터링, 생성, 수정, 내보내기 기능이 필요했습니다. 기능마다 이를 일일이 다시 개발했다면 유지보수가 불가능한 앱이 되었을 것입니다. 저는 재사용 가능한 프리미티브와 설정 가능한 권한 기반 내비게이션 모델로 이 문제를 해결했습니다. 이를 통해 메뉴를 하드코딩하거나 로직을 중복 작성하지 않고도 백엔드 권한에 따라 인터페이스가 유연하게 적응하도록 만들었습니다.
또 다른 반복적인 요구사항은 실제 사용 환경에서도 안정적으로 유지되는 상태 관리였습니다. 저는 URL 쿼리 스트링을 통해 목록 페이지네이션과 필터링을 제어하도록 구성하여, 뷰를 쉽게 공유할 수 있게 하고, 브라우저의 뒤로 가기/앞으로 가기가 자연스럽게 동작하도록 하며, 새로고침 시에도 테이블 상태가 유지되도록 했습니다. 인증 로직은 공통 상태 및 요청 계층으로 일원화하여 기능 컴포넌트들을 가볍게 유지했고, 세션 만료 시 에러 바운더리, 로딩 상태, 자연스러운 리디렉션을 적용해 복잡한 대시보드에서도 오류가 감지되지 않고 조용히 넘어가는 일이 없도록 했습니다.
결과
VCM은 커뮤니티 관리의 양측 요구사항을 실질적으로 모두 충족하는 단일 프론트엔드입니다. 운영팀은 단일 관리자 워크스페이스에서 부동산 수명 주기 전체를 운영하고, 입주민은 결제, 요청, 예약, 문서를 셀프서비스로 처리합니다. 공유 프리미티브와 권한 인식 셸을 기반으로 구축되었기 때문에, 새로운 워크플로가 추가되어도 코드베이스가 무거워지지 않고 안정적으로 확장됩니다.
유사한 프로덕트 문제가 있으신가요?
현재 프로덕트 현황, 필요한 결과, 직면한 제약 사항을 공유해 주세요. 이를 바탕으로 합리적인 첫 번째 마일스톤을 정의해 드립니다.
SaaS 개발 서비스