최신 웹 기술 및 화학정보학 라이브러리를 활용한 화학교육 웹앱 구축 실습
학생들이 분자의 평면적인 구조식을 입체적인 3D 구조로 이해하고, 결합 길이, 극성, 배향 등 물리화학적 성질을 직관적으로 학습할 수 있는 환경이 필요합니다.
본 강의에서는 RDKit을 통해 분자구조를 분석하고, 3Dmol.js를 사용해 웹 브라우저에서 직접 분자구조와 상호작용하는 반응형 웹앱을 구현합니다.
SMILES (Simplified Molecular-Input Line-Entry System)은 화학 물질의 구조를 짧은 문자열로 표현하는 선형 표기법입니다.
CCCOO=C=Oc1ccccc1 (고리형 표현)프론트엔드와 백엔드가 분리된 경량 구조로, 분자구조 파싱 및 3D 회전 제어를 실시간으로 처리합니다.
RDKit은 오픈소스 화학정보학(Cheminformatics) 파이썬 라이브러리로, 화학식 파싱, 2D/3D 좌표 생성, 분자 기술자(Descriptor) 계산을 수행합니다.
# Python 가상환경에 RDKit 설치 pip install rdkit # 설치 및 기본 라이브러리 로드 확인 python -c "import rdkit; print(rdkit.__version__)"
from rdkit import Chem
from rdkit.Chem import Descriptors
def analyze_molecule(smiles_str):
# SMILES를 분자 객체(Mol)로 변환
mol = Chem.MolFromSmiles(smiles_str)
if not mol:
raise ValueError("유효하지 않은 SMILES입니다.")
return {
"formula": Chem.rdMolDescriptors.CalcMolFormula(mol),
"mw": Descriptors.MolWt(mol),
"logp": Descriptors.MolLogP(mol),
"hbd": Descriptors.NumHDonors(mol),
"hba": Descriptors.NumHAcceptors(mol),
}
화학 시각화를 하려면 평면 구조인 SMILES로부터 3D 좌표를 3차원 공간 상에 생성해야 합니다.
from rdkit.Chem import AllChem
def generate_3d_coordinates(mol):
# 수소 원자 부가
mol_with_h = Chem.AddHs(mol)
# Distance Geometry 알고리즘으로 3D Conformer 생성
AllChem.EmbedMolecule(mol_with_h, AllChem.ETKDGv3())
# MMFF94 힘장(Forcefield)을 이용한 구조 최적화
AllChem.MMFFOptimizeMolecule(mol_with_h)
# SDF 또는 Mol 블록 형식의 문자열로 변환 (3D 시각화에 필요)
return Chem.MolToMolBlock(mol_with_h)
비동기 프레임워크인 FastAPI를 사용하여, 사용자가 입력한 SMILES에 대한 분자 정보 및 3D 모델 파일을 반환하는 API 엔드포인트를 구축합니다.
# FastAPI 및 CORS 미들웨어 설치 pip install fastapi uvicorn pydantic
from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
app = FastAPI()
# React/Next.js 교차 출처 리소스 공유 허용(CORS)
app.add_middleware(CORSMiddleware, allow_origins=["*"], allow_methods=["*"], allow_headers=["*"])
class MoleculeRequest(BaseModel):
smiles: str
@app.post("/api/analyze")
async def analyze(req: MoleculeRequest):
try:
mol = Chem.MolFromSmiles(req.smiles)
mol_block = generate_3d_coordinates(mol) # 3D 좌표 변환
stats = analyze_molecule(req.smiles)
return {"success": True, "mol_block": mol_block, "stats": stats}
except Exception as e:
raise HTTPException(status_code=400, detail=str(e))
사용자가 분자를 입력하고, 실시간 통계를 표로 확인하며, 3D 구조를 마우스로 조작할 수 있는 직관적인 웹 대시보드를 구축합니다.
# Next.js 애플리케이션 생성 npx -y create-next-app@latest molecule-viewer --typescript --eslint --tailwind --src-dir --app
npm install 3dmolimport { useEffect, useRef } from "react";
import * as $3Dmol from "3dmol";
export default function MoleculeViewer3D({ molBlock }) {
const containerRef = useRef(null);
useEffect(() => {
if (!containerRef.current || !molBlock) return;
// 3D 뷰어 인스턴스 생성
const viewer = $3Dmol.createViewer(containerRef.current, { backgroundColor: "white" });
viewer.addModel(molBlock, "sdf"); // SDF/MOL 포맷 로드
viewer.setStyle({}, { stick: { radius: 0.2 }, sphere: { scale: 0.3 } }); // 스틱&볼 스타일
viewer.zoomTo();
viewer.render();
return () => viewer.clear();
}, [molBlock]);
return <div ref={containerRef} style={{ width: "100%", height: "400px", position: "relative" }} />;
}
CC(=O)Oc1ccccc1C(=O)O - 아스피린)를 입력하는 칸.탄소 고리 구조(방향족)나 거울상 이성질체(카이랄성)가 있는 분자의 경우 3차원 공간 배치와 정합성 판단이 매우 중요합니다.
Chem.AssignStereochemistry를 호출하여 R/S 이성질체 코드를 자동 매핑합니다.dynamic(() => import(...), { ssr: false }) 로딩 필수.우리가 만든 분자구조 분석 웹앱과 RDKit 연동 코드를 AI 개발 에이전트가 완벽히 이해하고, "이 분자를 3D 뷰어로 띄워줘"라고 말할 때 백그라운드에서 바로 작동하도록 Workspace Skill을 디자인합니다.
.agents/skills/molecule-analyzer/ 폴더를 생성합니다.SKILL.md 및 scripts/analyze.py를 작성합니다.--- name: molecule-analyzer description: SMILES 문자열을 분석하여 3D SDF 좌표 파일 및 물리화학 디스크립터를 생성하는 화학정보학 전문 에이전트 스킬 --- # 분자 구조 시각화 및 분석 스킬 ## 사용 조건 화학적 구조 분석이 요구되거나, SMILES 3D 좌표화 요청이 있을 때 자동 기동. ## 실행 가이드 1. 다음 파이썬 헬퍼 스크립트를 사용하여 3D SDF 파일을 생성합니다. `python .agents/skills/molecule-analyzer/scripts/analyze.py --smiles--output ` 2. 생성된 SDF를 웹앱의 3Dmol.js 뷰어 컴포넌트로 전달하여 시각화할 수 있도록 지원합니다.
import argparse
from rdkit import Chem
from rdkit.Chem import AllChem
parser = argparse.ArgumentParser()
parser.add_argument("--smiles", required=True)
parser.add_argument("--output", required=True)
args = parser.parse_args()
mol = Chem.MolFromSmiles(args.smiles)
mol_h = Chem.AddHs(mol)
AllChem.EmbedMolecule(mol_h, AllChem.ETKDGv3())
AllChem.MMFFOptimizeMolecule(mol_h)
with open(args.output, "w") as f:
f.write(Chem.MolToMolBlock(mol_h))
print("SDF 3D coordinate generation complete.")
C(=O)(O)c1ccccc1OC(=O)C (아스피린) 입력 후 3D 렌더링 검증.O)과 아미노산 계열 분자의 분자량 통계가 정확한지 API 테스트.molecule-analyzer 스킬을 호출해 임의의 분자를 시각화 디렉토리에 잘 주입하는지 모의 실행.우리는 화학 구조 데이터를 정규화한 SMILES를 이용하여 백엔드(FastAPI + RDKit)에서 3D 공간 좌표를 산출하고, 이를 프론트엔드(Next.js + 3Dmol.js) 상에 WebGL로 렌더링하는 풀스택 분자 시각화 모듈을 구현하였습니다.
이 도구를 활용하여, 다음 2부 강의에서는 학생들에게 화학 구조 퀴즈를 출제하고 대화형으로 힌트를 주며 자율 학습을 보조하는 튜터 에이전트를 조립하겠습니다.
Q&A 및 분자 시각화 실습