1) 문제점

- 대규모 노드 배치 시 동기적 렌더링으로 인한 화면 프리징 현상 발생 (초기 로딩 약 9초 소요)
- 실시간 센서 시각화 도구가 외부 파일로 분리되어 데이터 동기화와 수업 흐름의 단절 발생
- 복잡한 객체 배열 구조의 상태 관리로 인한 조회 성능 저하 및 실시간 데이터 업데이트 지연

2) 프로젝트 목표

- 렌더링 최적화: Batch Rendering 시스템 도입을 통해 로딩 시간을 2초대로 단축하여 쾌적한 사용 환경 구축
- 시스템 통합: 파편화된 외부 도구를 내부 위젯으로 내제화하여 서비스 내 실시간 데이터 동기화 기반 마련
- 고성능 상태 관리: 자료구조 리팩토링(Array→Map)을 통해 데이터 조회 및 업데이트 성능 극대화

3) 주안점

- 고빈도 실시간 스트리밍 데이터의 시각화 품질 및 캔버스 렌더링 부하 최소화
- 협업 환경을 고려한 다중 사용자 간 노드 상태 및 상호작용의 완벽한 실시간 동기화
- 서비스 안정성 확보를 위한 런타임 에러 모니터링 체계 및 엄격한 타입 가드 설계

1) 포트폴리오 소개

- 에듀테크 / 실시간 협업 플랫폼
- 교사와 학생이 무한 캔버스 위에서 실시간으로 상호작용하며 학습 데이터를 공유하는 양방향 교육 플랫폼 개발

2) 작업 범위

- Front-end 개발: 플랫폼 핵심 아키텍처 설계, 데이터 시각화 엔진 전담 개발
- 기능 내제화: 외부 레거시 모듈의 컴포넌트화 및 시스템 통합 개발
- 지원 환경: 반응형 웹 (PC, 태블릿, 모바일 전 환경 최적화)

3) 주요 업무

- 실시간 협업 캔버스: 다중 사용자 접속 및 실시간 상태 동기화(WebSocket) 시스템 구축
- 데이터 시각화: Web Serial API와 Chart.js를 연동한 실시간 IoT 센서 데이터 스트리밍 위젯 개발
- 대화형 학습 위젯: 재귀적 노드 구조의 마인드맵, 실시간 퀴즈, 탭 복제 및 휴지통 등 10여 종의 상호작용 도구 구현
- 관리 인터페이스: 학습 데이터 대시보드 및 권한/설정 고도화 페이지 개발

4) 주안점

- 대규모 렌더링 최적화: 1,000개 이상의 위젯이 동시 로드되는 환경에서 Batch Rendering 기술을 적용해 UI 프리징을 방지하고 초기 로딩 성능 극대화
- 실시간 데이터 안정성: 고빈도로 수집되는 로우(Raw) 데이터를 차트 엔진에 부하 없이 렌더링하기 위한 데이터 처리 파이프라인 최적화
- 상태 관리 아키텍처: 복잡한 노드 관계를 효율적으로 다루기 위해 Zustand와 Map 자료구조를 결합하여 탐색 및 업데이트 속도 개선(O(1)) 및 운영 안정성 확보 (Sentry 모니터링 체계 도입)