하나의 프론트엔드 코드로 멀티 환경 운영하기

문제 상황

• 모두싸인 프론트엔드에서 일반용, 공공용, 온프레미스 등 여러 환경을 하나의 코드베이스로 운영해야 하는 상황
• 환경별 요구사항을 if/else로 흩어지게 처리하면 유지 보수성 저하, 온보딩 비용 증가, 리뷰·QA 복잡성 증가 문제 발생
• 별도 프로젝트 분리는 중복 개발과 코드 유지 비용 증가로 지속 운영이 어려운 구조

원인 분석

• 분기 범위가 Route, Component, Logic 전반에 걸쳐 다양하게 발생
• 컴포넌트 수가 2,000개 이상이고 선언 방식도 다양해 일괄적인 수동 관리가 어려움
• 환경별 라우트와 설정이 많아질수록 조건문과 중복 파일이 급증하는 구조

해결 방법

• 분기 대상을 Route, Component, Logic 세 레이어로 구분해 접근
• Route는 YAML 설정과 Glob Pattern으로 중앙집중화하고, 런타임에서 라우트 차단 처리
• Component는 주석 메타데이터, AST 파싱, 캐시, Vite Plugin, ESLint Plugin으로 자동 수집·검증
• Logic은 기존 boolean 플래그 기반의 단순 분기 유지