r/GeminiAI•6개월 전•292•22
원자를 3D로 시각화하는 인터랙티브 주기율표 앱
An interactive periodic table app to visualise atoms in 3D
핵심 요약
조카의 화학 학습을 돕기 위해 React와 Three.js를 활용해 만든 3D 원자 시각화 주기율표 앱입니다.
- 기술 스택 — React 19, TypeScript, Vite, Three.js, Zustand를 사용하여 개발함.
- 학습 도구 — 원자 구조를 3D로 시각화하여 화학 학습의 흥미를 높이도록 설계됨.
- 모델링 방식 — 이해를 돕기 위해 고전적인 보어 모델을 채택하여 전자 궤도를 시각화함.
- 사용 환경 — 데스크톱 환경에 최적화되어 있으며 모바일 웹에서는 제한적일 수 있음.
조카가 화학을 흥미롭고 재미있게 배울 수 있도록 이 주기율표 앱/3D 원자 시각화 도구를 만들었습니다. 앱에 기능이 아주 많지는 않습니다. 주기율표 UI가 있고, 원소를 클릭하면 해당 원소의 중요한 정보와 배경에 원소 이미지가 표시되는 페이지로 이동합니다. 거기서 원자의 3D 모델을 볼 수 있습니다. 3D 시각화는 오래되고 구식인 모델 이론을 기반으로 하지만, 학습이 너무 복잡해지지 않도록 선택했습니다. 중심에 핵이 있고 전자가 핵 주위를 도는 모습을 보여줍니다. 해당 원소의 다양한 동위원소(안정적이고 잘 알려진 것들)나 이온에 대한 3D 모델을 시각화할 수 있습니다. 추신 - 모바일 웹보다는 데스크톱에서 사용하는 것이 가장 좋습니다.
이 프로젝트에 사용된 기술 스택은 다음과 같습니다.
Frontend: React 19 + TypeScript
Build tool: Vite
3D / atom animation: Three.js + React Three Fiber + Drei
Postprocessing: @react-three/postprocessing
State management: Zustand
이미지는 위키미디어와 원소 이미지를 사용했습니다.
앱은 여기에서 사용해 보세요.
