에이전시 운영 관리 시스템

개요

이 프로젝트는 프로젝트 관리, 고객·견적서 관리, 고객 문의 관리, 자사 홈페이지 콘텐츠 관리 등으로 구성된 내부용 백오피스 서비스입니다. 기존의 PHP 기반 프로젝트 관리용 게시판을 Next.js, MongoDB 기반으로 리뉴얼하고, 사내에서 필요한 도구들을 확장하며 유지보수했습니다.

운영진과 영업팀 PC에 개별 관리되던 고객·견적 데이터, 구두로 물어가며 찾던 데이터와 프로젝트 히스토리를 웹에서 공유하도록 했으며, 분산 관리되던 4개의 자사 홈페이지 콘텐츠 관리를 한 곳으로 통합했습니다.

작업범위

• UI/디자인, FE, DB 설계, 마이그레이션, 배포 및 유지보수
• Next.js 13 기반 신규 구축, Next.js 15·shadcn/ui 기반 리뉴얼
• MySQL 레거시 데이터 MongoDB 마이그레이션
• Ubuntu, Nginx Proxy Manager 기반 운영 환경 구축

주요기능

• 역할 기반 접근 제어
• 프로젝트 정보, 진행 단계, 담당자, 댓글 관리
• 고객 정보 관리, 엑셀 대량 업로드·다운로드
• 견적서 작성, 실시간 미리보기, PDF 출력, 견적서 템플릿 관리
• 자사 홈페이지 포트폴리오·문의 통합 관리

설계 포인트

견적서 작성 실시간 프리뷰 및 PDF 렌더링

견적서 작성 화면에 실시간 프리뷰를 구현하고, 프리뷰가 그대로 PDF로 출력되도록 했습니다. PDF 생성은 이전 프로젝트에서 인지된 해상도 문제로 html2pdf.js 대신 Puppeteer 서버 렌더링을 선택했습니다. 서버 의존성과 브라우저 실행 비용은 사용 빈도를 고려하면 감수할 만하다고 판단했습니다.

목록·사이드시트 패턴 화면 구조 설계

백오피스는 도메인(프로젝트·고객·견적·회원 등)마다 목록·상세·작성 화면이 반복됩니다. 최초 버전에서는 사내 디자인 톤에 맞춰 폼, 테이블, 사이드시트 등 주요 UI를 직접 구현했는데, 운영이 길어지면서 유지보수와 신규 화면 개발 부담이 커졌습니다. V2에서 Tailwind CSS와 shadcn/ui 기반 공통 컴포넌트로 재정리하면서, 모든 도메인 화면을 테이블 목록에서 사이드시트로 상세·작성을 여는 구성으로 통일했습니다. 새 도메인 화면은 기존 패턴에 컬럼 정의와 폼 스키마를 채우는 방식으로 추가할 수 있어, 디자인 요구사항을 유지하면서 화면 개발 비용을 줄였습니다.

사내 환경 및 유지보수 인력 특성에 따른 데이터베이스 선택

당시 요구사항이 계속 바뀌었고, 전담 백엔드 없이 이후 유지보수도 JS 개발자가 맡을 가능성이 높았습니다. 필드 추가·변경이 잦은 업무 환경에서 관계형 모델을 엄격하게 운영하는 부담보다, 러닝커브가 낮고 스키마 변경에 유연한 MongoDB가 적합하다고 판단했습니다. 이후 기능이 늘면서 고객·견적·프로젝트 사이의 관계가 강해졌고, 이런 영역에는 관계형 모델이 더 적합하다는 점도 확인했습니다.