LIVE · Doosan Enerbility 시운전 준비도 관리 시스템

커미셔닝 컨트롤 센터 (CCC)

플랜트 시운전(Commissioning) 과정에서 펀치·보존관리·일정·인수인계 데이터를 한곳에 모으고, 시스템별 "인도 준비 완료 여부"를 사람이 아니라 규칙 엔진이 매번 같은 기준으로 계산해주는 웹 애플리케이션입니다.

URL ccc-doosan.pages.dev Phase 10 / 10 완료 언어 한국어 · English
01

목적

왜 이 시스템이 필요했는가

시운전 단계에서는 "이 시스템이 인수인계 가능한 상태인가?"라는 질문에 매번 여러 팀(시공/시운전/운영)의 주관적 판단과 엑셀·메일 취합이 필요했습니다. CCC는 그 판단에 들어가는 4가지 근거 (펀치 처리율, 보존관리 상태, 일정 진행, 인수인계 승인 여부)를 실시간 데이터로 직접 관리하고, 준비도 점수를 사람이 입력하는 게 아니라 시스템이 매번 동일한 규칙으로 자동 계산하도록 만들어 "누가 봐도 같은 결론이 나오는" 상태로 만드는 것이 목적입니다.

02

무엇으로 만들었나

프론트엔드 · 백엔드 · 개발 방식(에이전트) 세 축으로 구성했습니다

Frontend

사용자가 보는 화면

브라우저에서 동작하는 웹앱. 별도 설치 없이 링크만으로 접속하며, Cloudflare의 전세계 서버망에 정적 파일로 배포되어 있어 특정 PC가 꺼져도 항상 접속 가능합니다.

React + TypeScript Vite Tailwind CSS Cloudflare Pages
Backend

데이터와 보안 규칙

모든 데이터와 접근 권한(누가 뭘 보고 승인할 수 있는지)은 화면 코드가 아니라 DB 자체의 보안 규칙(RLS)으로 강제합니다. 화면을 조작해도 권한 없는 데이터는 서버가 원천적으로 내려주지 않습니다.

Supabase PostgreSQL Row-Level Security Auth
개발 방식

AI 에이전트 협업 개발

Claude Code(AI 코딩 에이전트)가 요구사항 문서를 기준으로 DB 설계→보안 규칙→화면을 단계별로 만들고, 매 단계마다 실제 브라우저에서 클릭해가며 검증한 뒤 다음 단계로 넘어가는 방식으로 진행했습니다.

스펙 기반 개발 10단계 순차 빌드 매 단계 실사용 테스트
03

핵심 기능

사이드바 메뉴 순서대로, 총 10개 모듈

개요 (Overview)

프로젝트 전체 준비도 현황, 시스템별 매트릭스, 모듈별 KPI, 전체 차단항목을 한 화면에 압축한 관제실형 대시보드.

시스템 준비상태 핵심 엔진

시스템별로 4개 영역(인수인계 35%·펀치 25%·보존관리 20%·일정 20%) 가중 점수를 계산해 Ready/At Risk/Not Ready/Not Assessed를 자동 판정. 차단항목·위험항목·예외(Waiver)를 구분해서 표시.

펀치 센터

하자/미결 항목(Category A/B/C) 등록부터 배정→진행→검증→종결까지 워크플로우 관리. 엑셀 파일 업로드로 대량 등록 가능.

보존관리 센터

설비별 보존관리 계획·점검 주기·이상 발생 처리·탈보존(De-preservation) 요청까지 전체 이력 관리.

일정 및 리스크

기준일정(Baseline) 버전관리, 액티비티 진행률, 지연 등록부, 복구계획, 간트 차트로 전체 일정을 시각적으로 확인.

인수인계 센터

시스템별 인수인계 패키지와 체크리스트 진행률 관리, 제출→검토→승인/반려/인수 워크플로우.

문서 / 보고서 / 알림

참조 문서 링크 등록, 5종 리포트(CSV·인쇄/PDF 내보내기), 승인·반려 등 주요 이벤트의 인앱 알림.

관리(Administration)

프로젝트·마스터데이터(블록/유닛/설비 등)·사용자 역할·준비도 가중치 규칙을 관리자가 직접 설정.

04

설계 원칙

기능보다 먼저 지키기로 정한 5가지 규칙

보안은 DB에서

권한 체크를 화면 코드가 아니라 PostgreSQL Row-Level Security로 강제. 화면을 우회해 직접 API를 호출해도 권한 없는 데이터는 조회·수정 자체가 불가능합니다.

자동 계산, 수동 입력 없음

시스템 준비도(Ready/At Risk/Not Ready)는 사람이 상태를 고르는 게 아니라, 펀치·보존관리·일정·인수인계 데이터가 바뀔 때마다 규칙 엔진이 즉시 재계산합니다.

본인 승인 금지

등록·작업한 사람과 승인·검증하는 사람은 반드시 다른 사람이어야 합니다 — 이 규칙은 화면이 아니라 DB 트리거로 강제되어 우회할 수 없습니다.

삭제 대신 버전관리

승인이 끝난 기록(기준일정, 인수인계 패키지 등)은 물리적으로 삭제하지 않고 새 버전으로 대체 — 과거 이력이 항상 추적 가능합니다.

한국어 · 영어 이중언어

모든 화면 문구와 DB에서 생성되는 알림·차단항목 메시지까지 i18n 구조로 번역해, 두 언어를 실시간 전환할 수 있습니다.

05

어떻게 만들었나

10개 Phase를 순서대로 — DB·보안 규칙을 먼저 만들고, 화면은 그 위에 얹는 방식으로 진행

01–02기반 구축

로그인/권한 구조, 마스터 데이터(블록·유닛·설비), 다국어 골격.

03–064대 핵심 모듈

펀치·보존관리·일정·인수인계 모듈을 하나씩, 매번 DB 마이그레이션 → 실제 화면 클릭 테스트 순서로 완성.

07준비도 엔진

4개 모듈 데이터를 가중합산해 시스템별 준비도를 자동 계산하는 규칙 엔진 구현.

08대시보드

전체 현황을 한 화면에 압축한 Overview 관제실 화면.

09알림 · 문서 · 보고서

인앱 알림, 문서 링크 등록, 리포트 5종 + 엑셀 일괄 업로드, 일정 간트 차트.

10다중 계정 검증 · 배포

실제 두 번째 계정으로 벤더 격리·승인 권한을 검증하고, Cloudflare Pages에 배포.

06

현재 상태

지금 바로 접속해서 쓸 수 있는 상태입니다

빌드 상태
Pass
완료 Phase
10 / 10
지원 언어
KO / EN
배포 상태
Live
ccc-doosan.pages.dev
Administration → Users & Roles에서 이메일로 팀원을 초대하면 바로 접속 가능합니다.
사이트 열기