레거시 설문 엔진의 React 전환 및 데이터 표준화
1. 개요: 플랫폼 구축 과정에서의 기술적 도전
최근 수행한 PROMs 플랫폼 구축 프로젝트의 핵심은 병원 내 산재되어 있던 다양한 환자 보고 결과(PROMs) 서식을 디지털화하고, 이를 표준화된 데이터 체계로 통합하여 임상 및 연구 활용성을 극대화하는 것이었습니다. 이 과정에서 기존 레거시 시스템의 핵심이었던 '설문 및 이벤트 관리 엔진'을 리액트(React) 기반의 모바일 친화적 플랫폼으로 안정적으로 이식하는 작업이 가장 큰 기술적 도전 과제로 떠올랐습니다.
2. 기술적 배경 및 직면한 한계
2.1. React 가상 DOM과 레거시 스크립트의 구조적 충돌
기존 엔진은 자바스크립트 주입을 통한 직접적인 DOM 조작에 의존했으나,
상태(State) 기반의 가상 DOM을 사용하는 리액트(React) 환경에서는 이러한 방식이 구조적으로 불가능했습니다.
에디터 내의 컴포넌트들은 성능 최적화를 위해 useCallback과
memo로 캡슐화되어 있어
외부 스크립트의 개입이 차단되는 특성을 가집니다.
2.2. 데이터 식별 체계의 불안정성
기존 데이터는 절대 좌표나 디자인 그룹 중심의 구조로 되어 있어 명시성이 부족했습니다. 특히 질문 번호의 비일관성과 식별자 중복 문제는 FHIR 등 국제 표준 데이터 연계와 통계 자동화를 가로막는 결정적인 병목 구간이었습니다.
3. 해결 전략: 데이터 표준화(L-Q-O)
보안상 민감한 로(raw) 데이터 노출을 피하면서 시스템 안정성을 확보하기 위해 L-Q-O 표준화 모델을 정립했습니다. 아래 표와 같이 기존 방식의 한계를 극복하고 객체지향적 구조로 전환하였습니다.
| 구분 | 레거시 방식 (As-Is) | 표준화 방식 (To-Be) | 기대 효과 |
|---|---|---|---|
| 관리 구조 | 좌표(X, Y) 기반 배치 | L(라벨)-Q(질문)-O(옵션) 구조 | 요소별 독립적 관리 및 확장성 확보 |
| 식별 체계 | 디자인 그룹 중심 (명시성 부족) | 불변의 고유 식별자(Item ID) 부여 | 데이터 무결성 및 표준(FHIR) 데이터 연동 |
| 제어 로직 | 외부 스크립트 직접 주입 | 상태(State) 기반 Rule 정의 | React 렌더링 사이클과의 충돌 방지 |
4. 아키텍처 설계: 계층형 에디터 컴포넌트 구현
표준화된 데이터를 효율적으로 제어하기 위해, 비즈니스 로직과 UI 렌더링을 철저히 분리한 컴포넌트 아키텍처를 설계하였습니다.
| 계층 (Layer) | 주요 컴포넌트 / 모듈 | 수행 역할 및 특징 |
|---|---|---|
| Container | TemplateEditorContainer | 전체 편집 흐름 제어 및 API 데이터 주입의 최상위 진입점 |
| Logic (앱) |
FormMapping (요소 지정) FormGrouping (그룹 만들기) RuleMaking (규칙 만들기) |
각 단계별 비즈니스 로직 제어 및 Single Source of Truth(SSOT) 기반 상태 관리 |
| View (UI) |
~Mapper (좌측 조작부) ~Form (우측 표시부) |
사용자 인터랙션 처리 및 실제 UI 렌더링의 완벽한 분리 |
5. 주요 성과 및 인사이트
- 운영 프로세스 개선: 비개발자도 직관적인 UI(Mapper) 상에서 '적용(Confirm) → 저장(Save)' 프로세스를 통해 복잡한 이벤트와 계산 규칙을 안전하게 설정할 수 있게 되었습니다.
- 데이터 무결성 강화: 서식 재불러오기 시에도 기존 규칙이 유지되도록 설계하였으며, 항목 변경 시 반드시 버전업을 수행하는 정책을 확립하여 운영 리스크를 최소화했습니다.
이번 프로젝트는 기술적 제약(React 환경)을 단순히 우회하는 것이 아니라, 이를 계기로 데이터 표준화 체계를 수립하여 플랫폼의 장기적인 안정성을 확보한 성공적인 사례입니다. 기술적 난제를 정책적 대안과 체계적인 구조 개편으로 풀어내어, 의료 데이터의 가치 창출을 위한 지속 가능한 기술적 기반을 마련했다는 점에서 큰 의미가 있습니다.