(주)스마트M2M

환자신호처리시스템 (대구 ETRI)

기술 스택

프로젝트 소개

디바이스에 연결된 환자 신호를 받아 모니터링할 수 있는 시스템을 구축했습니다. 최대 64명의 환자를 확인할 수 있으며, 실시간 1초에 10Hz 데이터를 표출하고 이후 고도화 작업을 통해 30, 60, 70Hz까지 순차적으로 처리할 수 있도록 개선했습니다.

상세 내용

디바이스에 연결된 환자 신호를 받아 모니터링할 수 있는 화면을 구축했습니다. 최대 64명의 환자를 확인할 수 있습니다. 실시간 확인하는 부분은 1초에 10Hz의 데이터를 표출하였고 이후에 고도화 작업을 진행하여 30, 60, 70Hz까지 순차적으로 올릴 수 있었습니다. 모니터링 차트는 라이브러리 사용 시 무거워 표현에 어려움이 있어 Canvas로 직접 제작하여 진행했습니다.

담당 기능 (FrontEnd)

- Super, Admin, 수간호사, 간호사, 보안관리자 각 권한별 화면 제작 - 모니터링 chart 직접 제작 (Canvas) — 라이브러리 사용 시 무거워 직접 개발 진행 - 1초에 10Hz 데이터 처리 (각 그래프당) - 대용량 데이터 처리 - 저장되어 있는 데이터를 영상처럼 표현하는 화면 및 기능 제작 - 고도화 작업 진행 — 1초에 30, 60, 70Hz 처리 가능하게 로직 구현 - 렌더링 최적화 - Performance로 메모리 누수 확인

깨달은 점

Interval을 사용하여 독립적인 컴포넌트를 관리할 때 초 단위가 마이크로초이고 여러 개의 컴포넌트에서 실행되면 정확하지 않은 움직임이 나타나는 걸 확인하게 되었습니다. JavaScript에서 setTimeout과 setInterval이 정확하지 않은 걸 알고 있었지만 여러 Interval을 실행했을 때 병목현상이 나타나는 걸 확인할 수 있었습니다. JavaScript는 싱글 스레드 환경에서 동작하여 모든 비동기 작업이 이벤트 리스너, 타이머 등이 동일한 스레드 자원을 경쟁하게 되고 각각의 Interval 처리에 필요한 시간이 길어질 수 있다는 걸 깨닫게 되었습니다. requestAnimationFrame과 WebWorker를 활용하여 최적화를 진행하려 하였으나 requestAnimationFrame은 CPU 부하가 심하게 발생하였고 WebWorker는 메모리 누수가 발생했습니다.