원자를 3D로 시각화하는 인터랙티브 주기율표 앱
An interactive periodic table app to visualise atoms in 3D
핵심 요약
조카의 화학 학습을 돕기 위해 React와 Three.js로 제작한 3D 원자 시각화 주기율표 앱.
- 기술 스택 — React 19, TypeScript, Vite, Three.js를 활용하여 개발함.
- 학습 목적 — 조카의 화학 공부를 돕기 위해 직관적인 3D 원자 모델을 구현함.
- 주요 기능 — 주기율표에서 원소를 클릭하면 상세 정보와 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
이미지는 위키미디어와 원소 이미지를 사용했습니다.
앱은 여기서 체험해보세요: https://www.perplexity.ai/computer/a/atomic-visualizer-dist-5sF62pUBSgqqJgBWNmtumw
