생명과학 개념을 3D 시뮬레이션으로 구현해 봤습니다.
웹의 링크
https://chominjun-127.github.io/molecular-dynamics-web/
깃허브 링크
https://github.com/CHOMINJUN-127
X링크
https://x.com/MINjun0818
웹 사진
학교에서 생명과학을 공부하면서 그리고 교과서나 그림으로만 보던 것을 시각화하여 움직여 볼 수 있다면 좋지 않을까라는 생각에 대해서 만들어 보았다. 예전에는 암세포를 가지고 CSV를 파이썬으로 활용을 해서 시각화하고 기록에서 API key를 받아와서 웹을 만들었던 적도 있었다. 그런 경험 들을 통해서 내가 해보지 못했지만 해보고 싶었던 방식으로 시각화를 하는 웹을 만들고 싶었다. 이 웹에서는 브라우저 안에서 생명과학의 구조와 현상을 직접 조작하고 관찰할 수 있는 형태로 구현해보자는 방향으로 프로젝트를 만들어 보았다.
생명과학에서는 DNA, RNA, 단백질, 세포막과 같은 구조를 배우지만 실제로는 대부분 2차원 그림이나 정적인 모식도를 통해 이해하게 된다. 특히 DNA의 구조나 단백질의 입체 구조, 세포막을 통한 물질 이동처럼 3차원적인 구조와 동적인 변화가 중요한 개념은 정적인 그림으로만 이해하기 어렵다고 느꼈다.
1. DNA / RNA / 3D 시뮬레이터
첫 번째 페이지에서는 JavaScript와 Three.js를 이용해서 DNA와 RNA를 3차원 공간에 표현하였다.
- DNA / RNA 전환
- DNA 염기서열 직접 입력
- 무작위 염기서열 생성
- A, T, G, C, U 염기 선택
- 특정 염기만 필터링
- B-DNA / A-DNA / Z-DNA 형태 선택
- RNA의 mRNA / tRNA / rRNA / miRNA 형태 선택
- 전사
- 번역
- DNA 복제
- 돌연변이
- 분자 구조 회전 / 확대 / 이동
- 특정 염기를 클릭했을 때 해당 구조 확대
등을 구현 하였다.
특히 DNA의 A, T, G, C와 RNA의 A, U, G, C를 각각 구분해서 표시하고, 사용자가 특정 염기를 직접 선택할 수 있도록 하였다.
이 부분에서 중요하게 생각했던 것은 "생명과학 개념을 읽는 것" 과 "생명과학 구조를 직접 관찰하는 것" 의 차이였다.
예를 들어 A와 T가 수소결합으로 연결된다는 내용을 글로 익는 것과, 실제 3D 공간에서 두 염기의 관계를 확인하는 것은 학습 방식 자체가 다르다고 생각하였다.
2. 단백질 구조 시각화
두 번째 패이지에서는 단백질을 중심으로 구성하였다.
단백질은 단순히 하나의 덩어리가 아니라 수많은 원자와 아미노산이 결합해 만들어지는 복잡한 3차원 구조를 가지고 있기 때문에, 이글 웹에서 직접 탐색할 수 있도록 만들어 보았다.
원소 수준에서는
- 탄소(C)
- 수소(H)
- 산소(O)
- 질소(N)
- 황(S)
- 셀레늄(Se)
등을 구분해서 볼 수 있도록 했고, 아미노산 역시 비극성, 극성 등의 화학적 특성에 따라 분류하여 특정 아미노산이나 그룹을 선택해서 확인할 수 있도록 구성했다.
이 부분을 만들면서 단백질의 기능은 단순히 아미노산의 종류만으로 결정되는 것이 아니라, 화학적 성질과 3차원적인 구조가 함께 작용한다는 점을 시각적으로 표현해보고 싶었다.
3. 세포막 물질 수송 시뮬레이터
세 번째 페이지에서는 세포막을 통한 물질 이동을 구현하였다.
여기서는 단순한 애니메시션보다는 물질의 이동을 비교하고 관찰 할 수 있는 시뮬레이션을 만드는 데 초점을 맞췄다.
구현한 주요 내용
- 선택적 투과성
- 단순 확산
- 촉진 확산
- 수송 단백질을 이용한 물질 이동
- 확산 속도 비교
- 삼투
- 삼투압
- 물질별 이동 특성 비교
- 시뮬레이션 속도 조절
- 재생 / 일시정지
- 시간 변화 확인
- 그래프를 통한 분석
등이다. 특히 산소와 이산화탄소, 물, 포도당, 이온 등 서로 다른 특성을 가진 물질을 구분해서 표현하였다.
이를 통해 왜 어떤 물질은 세포막을 통과하기 쉽고 어떤 물질은 수송 단백질이나 별도의 이동 메커니즘이 필요한가? 라는 질문을 시각적으로 확인할 수 있도록 구성하였다.
4. 왜 이런 방식으로 만들었나?
이 프로젝트를 만들면서 가장 크게 생각했던 것은 "생명과학을 컴퓨터로 표현하면 어디까지 표현할 수 있을까?" 였다.
생명과학에는 눈으로 직접 관찰하기 어려운 현상이 상당히 많다.
DNA의 염기쌍, 단백질의 입체 구조, 세포막에서 일어나는 분자의 이동처럼 실제 생물학적 시스템에서는 매우 작은 규모에서 일어나는 현상을 웹 브라우저에서 직접 조작할 수 있도록 만들어보고 싶었다.
그래서 단순히 생명과학 내용을 HTML에 정리하는 방식이 아니라
생명과학 개념 → 수학적 논리 모델 → JavaScript 코드 → 3D 그래픽 → 사용자 인터랙션
이라는 과정을 거쳐 하나의 시뮬레이션으로 만들어보려고 했다.
5. 개발하면서 생각했던 부분
이 프로젝트를 만들면서 단순히 화면을 예쁘게 만드는 것보다
“어떤 생명과학 개념을 어떤 데이터와 규칙으로 표현할 것인가”를 더 많이 고민했다.
예를 들어 DNA에서는 염기서열을 문자열 데이터로 저장하고 각각의 염기를 3D 객체와 연결했다.
A, T, G, C, U를 서로 다른 객체로 구분하고, 사용자가 특정 염기를 선택하면 해당 염기의 정보를 표시하도록 했다.
또한 사용자의 마우스 입력을 이용해 3D 구조를 회전 / 이동 / 확대할 수 있도록 하면서 정적인 이미지가 아니라 탐색 가능한 생명과학 모델을 만들려고 했다.
세포막 시뮬레이션에서는 시간에 따른 상태 변화를 구현하고, 사용자가 속도를 조절하거나 재생과 일시정지를 할 수 있도록 하여 생명과학 현상을 시간에 따라 관찰하는 방식을 시도했다.
6. 사용한 기술
주요 기술은 다음과 같다.
- HTML
- CSS
- JavaScript
- Three.js
- WebGL
- Canvas
- DOM 이벤트 처리
- 3D 객체 및 카메라 제어
- 사용자 인터랙션
- 시뮬레이션 상태 관리
- 데이터 시각화
특히 3D 분자 구조를 구현하기 위해 Three.js를 사용했다.
7. 이 프로젝트의 한계
다만 이 프로젝트를 실제 생물학 연구용 시뮬레이터라고 생각하고 만든 것은 아니다.
실제 분자 수준의 생물학적 시스템은 훨씬 복잡하며, 분자역학이나 단백질 구조 예측과 같은 실제 연구에서는 물리 법칙, 에너지 함수, 분자 간 상호작용, 실험 데이터 등 훨씬 많은 요소가 필요하다.
따라서 이 프로젝트는 실제 생물학적 현상을 완벽하게 재현하는 연구용 모델이라기보다는, 생명과학 개념을 컴퓨터 기반의 3D 인터랙티브 모델로 표현해보는 교육·탐구 목적의 프로젝트에 가깝다.
오히려 이 한계를 확인한 것이 프로젝트를 만들면서 얻은 중요한 부분이었다.
처음에는 “3D로 만들면 생명과학을 시뮬레이션할 수 있겠지”라고 생각했지만, 실제로 구현해보니 현실의 생명현상을 컴퓨터 모델로 옮기기 위해서는 생물학적 지식뿐만 아니라 수학적 모델링, 물리학, 알고리즘, 데이터 구조, 그래픽스까지 필요하다는 것을 알게 되었다.
마무리
이 프로젝트는 생명과학을 공부하면서 생긴 “교과서에서 배우는 개념을 직접 조작할 수 있는 형태로 만들면 어떨까?”라는 생각에서 시작했다.
처음에는 단순한 3D 분자 시각화에서 시작했지만, 이후 DNA/RNA, 단백질, 세포막으로 범위를 확장하면서 생명과학의 여러 영역을 하나의 웹 기반 시뮬레이션으로 표현해보았다.
완성된 결과물 자체도 의미가 있지만, 개인적으로는 이 프로젝트를 통해 생명과학의 개념을 컴퓨터가 이해할 수 있는 구조와 규칙으로 바꾸는 과정을 경험했다는 점에서 의미가 있었다. (코드는 GitHub에 공개해두었습니다.)
관심 있으신 분들은 코드 구조나 구현 방식에 대한 의견, 개선할 부분이 있다면 편하게 알려주시면 감사하겠습니다.
현재는 고3입니다
