[프로젝트]CardioLab — 3D 심장과 혈류가 함께 변하는 시뮬레이터를 만들었습니다

심혈관 생리학을 공부하다 보면 압력, 용적, 혈류에 관한 수많은 그래프를 접하게 됩니다. 그런데 그래프에서 나타나는 변화를 실제 심장의 움직임과 연결해서 이해하기는 생각보다 어렵습니다.

그래서 심장 내부의 생리학적 변화를 직접 조작하고, 그 결과를 3D로 관찰할 수 있는 웹 기반 심혈관 시뮬레이터 CardioLab을 만들어봤습니다.

어떤 프로젝트인가요?

CardioLab은 심혈관계의 생리학적 변화를 시각적으로 탐구하기 위한 교육용 웹 애플리케이션입니다.

사용자가 심박수나 심근 수축력, 혈관 저항 등의 변수를 변경하면 수치 모델을 다시 계산하고, 그 결과를 3D 심장 애니메이션과 압력-용적 그래프(PV Loop), 판막 및 혈류 움직임에 동기화해서 보여줍니다.

현재 구현한 기능은 다음과 같습니다.

• 3D 심장 구조 탐색: 심방, 심실, 판막, 주요 혈관 등을 선택하고 회전·확대·단면 보기
• 심혈관 생리 시뮬레이션: 심박수, 수축력, 심실 강성, 혈관 저항 및 혈액량 조절
• 질환 기전 실험: HFrEF, HFpEF 관련 강성 변화, 대동맥판 저항 증가, 승모판 역류 등의 교육용 모델
• 실시간 시각화: PV Loop, 심장 압력·용적·판막 유량 그래프와 3D 움직임 동기화
• 한영 지원: 영어와 한국어 인터페이스 전환

어떤 기술을 사용했나요?

프론트엔드는 React, TypeScript, Vite를 사용하고, 3D 시각화는 Three.js와 React Three Fiber로 구현했습니다.

생리학적 계산에는 8개 구획으로 구성된 폐쇄형 순환 모델과 수치 적분을 사용하며, Web Worker에서 계산을 수행하도록 구성했습니다.

3D 모델은 Human Reference Atlas(HRA)의 해부학 자료를 기반으로 Blender에서 처리했습니다.

개발 과정에서는 Codex, Claude Code와 Blender MCP를 연계할 수 있는 환경도 구성했습니다. 특히 3D 자산을 재현 가능하게 생성하고 검증하는 파이프라인을 만드는 데 신경을 썼습니다.

현재 상태와 한계

현재 브라우저에서 직접 체험할 수 있는 공개 데모를 제공하고 있으며, 소스 코드도 공개했습니다.

다만 아직 전문가의 해부학적·생리학적 검수를 완료하지 않은 교육용 프로토타입입니다. 심장 움직임과 혈류 입자는 이해를 돕기 위한 표현이며, 실제 환자의 생리 상태를 정확하게 재현하거나 임상적 판단에 사용할 수 있는 시뮬레이터는 아닙니다.

직접 사용해보기

라이브 데모: https://carraway-and-gatsby.github.io/cardiac-simulator/

GitHub: https://github.com/Carraway-and-Gatsby/cardiac-simulator

데모는 별도의 설치나 로그인 없이 WebGL 지원 브라우저에서 실행할 수 있습니다.

여러분의 의견이 궁금합니다

특히 다음 부분에 대한 피드백을 받아보고 싶습니다.

1. 3D 심장과 생리학적 그래프를 함께 보여주는 방식이 이해에 도움이 되는지
2. 의학적 배경지식이 없는 사람도 인터페이스를 쉽게 사용할 수 있는지
3. 3D 렌더링 성능이나 사용자 경험에서 개선할 점이 있는지

의료·교육 분야뿐 아니라 Three.js, Blender, AI 코딩 에이전트 등을 활용하는 개발자분들의 의견도 환영합니다.

작은 실험이지만, 전문 지식을 인터랙티브한 소프트웨어로 표현해보려는 시도입니다.