CH01시뮬레이터 시작하기

학습 목표#

• 이동상 · 정지상 · 분배라는 말로 HPLC가 물질을 분리하는 원리를 설명할 수 있습니다.
• 역상 C18 컬럼에서 극성이 낮은 물질이 더 늦게 나오는 이유를 말할 수 있습니다.
• 시료가 지나가는 길(용매병 → 탈기 → 펌프 → 오토샘플러 → 컬럼 → 검출기 → 폐액)을 순서대로 적을 수 있습니다.
• 크로마토그램에서 머무름 시간(tR) · 피크 면적 · 피크 높이 · 베이스라인을 찾아 읽을 수 있습니다.
• 시뮬레이터를 실행하고 3D 장비 뷰 · 상태 패널 · 크로마토그램 · 이벤트 로그 · Python Playground가 어디에 있는지 찾을 수 있습니다.

이론#

1교시 — HPLC는 무엇을 하는 장비인가#

고성능 액체 크로마토그래피(High-Performance Liquid Chromatography, HPLC) 는 섞여 있는 여러 물질을 분리하고, 각 물질이 얼마나 들어 있는지 재는 장비입니다. 커피 속 카페인, 약 속 유효 성분, 물 속 오염 물질 등을 분석할 때 씁니다.

원리는 세 단어로 정리됩니다.

물질마다 정지상을 "좋아하는 정도"가 다릅니다. 정지상에 오래 머무는 물질은 컬럼을 늦게 빠져나오고, 이동상에 주로 머무는 물질은 빨리 빠져나옵니다. 이렇게 나오는 시간의 차이로 물질이 분리됩니다. 이 정도를 숫자로 나타낸 것이 머무름 계수(retention factor, k) 입니다.

• tR = t0 × (1 + k) — t0 는 정지상에 전혀 붙지 않는 물질이 컬럼을 빠져나오는 시간(불감 시간, dead time)입니다.
• k = 0 이면 t0 에 바로 나오고, k 가 클수록 늦게 나옵니다.

역상(Reversed-Phase) C18 컬럼#

가장 많이 쓰는 방식은 역상 크로마토그래피입니다. "역상"이라는 이름은 옛날 방식(극성 정지상 + 비극성 이동상)과 극성이 반대라서 붙었습니다.

• 정지상: 실리카 입자 표면에 탄소 18개짜리 사슬(옥타데실, C18)을 붙인 것 → 비극성(기름 같은 성질)
• 이동상: 물 + 유기 용매 → 극성

비슷한 것끼리 잘 어울리므로(like dissolves like), 극성이 낮은(기름에 가까운) 물질은 C18 사슬에 오래 붙어 있어 늦게 나오고, 극성이 높은(물에 잘 녹는) 물질은 이동상과 함께 빨리 나옵니다. 이동상에 유기 용매 비율을 높이면 이동상 자체가 덜 극성이 되어 모든 물질이 빨리 나옵니다 (이동상 조성을 바꾸는 방법은 ch03에서 다룹니다).

# 머무름 계수 k 와 머무름 시간: tR = t0 * (1 + k)
t0 = 1.0   # 머무르지 않는 물질이 컬럼을 빠져나오는 시간 (min, 가정값)

# 가상의 물질 3개. k 가 클수록 정지상(C18)에 오래 붙어 있습니다.
compounds = {
    "A (극성 큼)":   0.8,
    "B (중간)":      2.5,
    "C (극성 작음)": 6.0,
}

for name, k in compounds.items():
    tR = t0 * (1 + k)
    in_stationary = k / (1 + k) * 100     # 정지상에 머문 시간 비율 (%)
    print(f"{name:<12} k = {k:4.1f}  tR = {tR:4.1f} min  정지상 체류 {in_stationary:4.1f} %")

실행하면 극성이 작은 C가 7.0 min으로 가장 늦게 나오고, 시간의 약 86 %를 정지상에 붙어 보낸다는 것을 확인할 수 있습니다.

시료가 지나가는 길#

크로마토그램 읽기#

검출기 신호를 시간에 따라 그린 그래프가 크로마토그램(chromatogram) 입니다.

정성(무엇인가)은 tR로, 정량(얼마나인가)은 주로 면적으로 판단합니다. 면적으로 농도를 구하는 검량선은 ch07에서 다룹니다.

import numpy as np

# 가상의 크로마토그램: 가우스 모양 피크 2개 + 약간의 잡음
dt = 0.01                                  # 0.01 min 간격으로 기록
t = np.arange(0, 6, dt)                    # 0 ~ 6 min
rng = np.random.default_rng(0)

def peak(t, tR, height, sigma):
    return height * np.exp(-0.5 * ((t - tR) / sigma) ** 2)

baseline = 0.5                             # 베이스라인 (mAU)
signal = (baseline
          + peak(t, 1.8, 40.0, 0.05)       # 극성이 큰 물질: 먼저 나옴
          + peak(t, 3.6, 25.0, 0.08)       # 극성이 작은 물질: 늦게 나옴
          + rng.normal(0, 0.2, t.size))

def measure(t0, t1):
    m = (t >= t0) & (t < t1)
    y = signal[m] - baseline               # 베이스라인을 빼고 잽니다
    i = np.argmax(y)
    return t[m][i], y[i], np.sum(y) * dt   # tR, 높이, 면적(mAU*min)

for name, (t0, t1) in {"피크 1": (1.4, 2.2), "피크 2": (3.1, 4.1)}.items():
    tR, h, a = measure(t0, t1)
    print(f"{name}: tR = {tR:.2f} min, 높이 = {h:.1f} mAU, 면적 = {a:.2f} mAU*min")

# 글자로 그린 크로마토그램 (1.0 ~ 4.4 min, 0.1 min 마다 한 줄)
print("\n t(min)  신호")
for k in range(100, 440, 10):
    bar = "#" * int(max(signal[k], 0))
    print(f"{t[k]:5.1f}  {bar}")

두 피크의 높이는 40과 25로 다르지만 면적은 둘 다 약 5.0 입니다. 늦게 나온 피크는 넓게 퍼지기 때문입니다. "높이가 크면 양이 많다"고 단정하면 안 되는 이유가 여기에 있습니다.

애질런트 1260 Infinity II 모듈 스택#

애질런트(Agilent) 1260 Infinity II 는 기능별 모듈을 위아래로 쌓아(stack) 하나의 시스템으로 씁니다. 이 시뮬레이터는 아래 구성을 기본으로 모사합니다. 실제 실험실 장비는 모듈 종류(예: DAD 검출기, 다른 펌프)가 다를 수 있으니 장비 앞판의 라벨로 확인합니다.

최대 압력 · 유속 범위 같은 세부 사양은 모델과 옵션에 따라 다르므로 이 차시에서는 외우지 않습니다. 필요할 때 정보 카드와 아래 참고자료의 공식 사용자 설명서를 확인합니다 (펌프 사양은 ch03, 샘플러 · 컬럼 · 검출기 사양은 ch04).

시뮬레이터로 익히는 것, 실물에서만 익히는 것#

2교시 — 시뮬레이터 실행과 화면 구성#

이 단원에서 할 일#

강좌 사이트를 열고, 시뮬레이터 화면의 네 영역과 Python Playground의 위치 · 조작법을 익힙니다.

사이트 접속 또는 로컬 실행#

배포된 강좌 사이트 주소가 있으면 브라우저로 바로 접속합니다. 내 PC에서 실행하려면 다음 순서를 따릅니다.

1. Python 3 가 설치되어 있는지 확인합니다. 명령 프롬프트(<kbd>Win</kbd>+<kbd>R</kbd> → cmd → <kbd>Enter</kbd>)에서 python --version 을 입력합니다.
2. 강좌 저장소 폴더(맨 위에 build.py 가 있는 폴더)로 이동합니다.
3. 아래 명령을 실행합니다. Windows에서는 저장소에 start.bat 이 있으면 더블클릭해도 같습니다.
4. 미리보기: http://localhost:8000 (Ctrl+C 로 종료) 라는 줄이 나오면 브라우저 주소창에 http://localhost:8000 을 입력합니다.
5. 다 쓴 뒤에는 명령 창에서 <kbd>Ctrl</kbd>+<kbd>C</kbd> 를 눌러 서버를 끕니다.

cd 강좌저장소폴더
python build.py --serve

미리보기: http://localhost:8000  (Ctrl+C 로 종료)

화면 구성#

3D 뷰 조작#

1. 3D 장비 뷰(A) 안에 마우스 포인터를 올립니다.
2. 왼쪽 버튼을 누른 채 끌면 장비 둘레로 시점이 회전합니다. 좌우로 끌어 측면 · 후면을 봅니다.
3. 오른쪽 버튼을 누른 채 끌면 화면이 평행 이동합니다. 배관이 화면 밖으로 나갔을 때 씁니다.
4. 마우스 휠을 굴려 확대/축소합니다. 피팅 연결부를 가까이 볼 때 씁니다.
5. 시점이 엉켰으면 상단 도구 막대의 뷰 초기화 버튼을 눌러 정면 시점으로 돌아옵니다.
6. 모듈을 클릭하면 정보 카드(모델 번호 · 역할 · 주요 사양)가 열립니다. 카드의 닫기(×)로 닫습니다.
7. 모듈을 선택한 상태에서 앞판 열기/닫기를 누르면 앞 덮개가 열려 안쪽 부품(예: 펌프 헤드, 샘플러 니들, 컬럼)을 볼 수 있습니다.

3D 시뮬레이터 열기

3D 뷰어 열기

Python Playground#

Playground는 브라우저 안에서 Python(Pyodide)을 실행하는 편집기입니다. 이 강좌의 계산 실습과, 시뮬레이터를 코드로 조작하는 실습에 씁니다.

1. 사이드바 또는 차시 머리의 Python 버튼을 누르거나, 코드 블록의 Playground에서 열기 버튼을 누릅니다.
2. 처음 열 때 Python 실행 환경을 내려받느라 몇 초 ~ 수십 초 걸립니다. ▶ 실행 버튼이 눌리는 상태가 될 때까지 기다립니다.
3. 편집기에 코드를 쓰고 ▶ 실행(<kbd>Ctrl</kbd>+<kbd>Enter</kbd>)을 누릅니다. 결과는 출력 창에 나옵니다.
4. 오래 도는 코드는 ■ 정지 버튼으로 멈춥니다. 시간 제한(초) 이 지나도 자동으로 멈춥니다.
5. 위쪽 타깃 목록에서 Simulator 를 고르고 오른쪽 상태 표시를 확인합니다. 시뮬레이터가 준비되지 않았으면 "찾을 수 없음"이 표시되며, 이 차시의 numpy 실습은 타깃과 관계없이 실행됩니다.

Python Playground 열기

브라우저 권장 사양#

• Chrome 또는 Edge 최신 버전을 권장합니다. 3D 화면은 WebGL 을 사용합니다.
• 노트북은 전원을 연결하고, 3D 화면이 끊기면 다른 탭을 닫습니다.
• 학교 · 회사 PC에서 하드웨어 가속이 꺼져 있으면 3D 화면이 비어 보일 수 있습니다(아래 오류 1번).

실습 (시뮬레이터)#

# 시료가 지나가는 길: 6단계 순서 확인하기
answer = ["용매병", "탈기", "펌프", "오토샘플러", "컬럼", "검출기"]

# TODO: 유로 애니메이션을 보며 받아 적은 순서로 아래 리스트를 고치세요
my_notes = ["용매병", "펌프", "탈기", "컬럼", "오토샘플러", "검출기"]

for i, (a, b) in enumerate(zip(answer, my_notes), start=1):
    mark = "OK" if a == b else "XX"
    print(f"{i}단계 [{mark}] 정답={a:<8} 내 기록={b}")

score = sum(a == b for a, b in zip(answer, my_notes))
print(f"\n맞힌 단계: {score}/6")

answer = ["용매병", "탈기", "펌프", "오토샘플러", "컬럼", "검출기"]
my_notes = ["용매병", "탈기", "펌프", "오토샘플러", "컬럼", "검출기"]

score = sum(a == b for a, b in zip(answer, my_notes))
print(f"맞힌 단계: {score}/6")
print(" -> ".join(my_notes + ["폐액"]))

import numpy as np

dt = 0.01
t = np.arange(0, 8, dt)
baseline = 1.0

def peak(t, tR, height, sigma):
    return height * np.exp(-0.5 * ((t - tR) / sigma) ** 2)

signal = (baseline + peak(t, 1.5, 60, 0.04)
                   + peak(t, 3.2, 30, 0.10)
                   + peak(t, 5.8, 20, 0.20))

windows = {"피크 1": (1.0, 2.0), "피크 2": (2.6, 3.8), "피크 3": (4.8, 6.8)}

for name, (t0, t1) in windows.items():
    m = (t >= t0) & (t < t1)
    y = signal[m] - baseline
    # TODO: tR(꼭대기 시간), height(꼭대기 높이), area(면적 = 합 x dt)를 구하세요
    tR = 0
    height = 0
    area = 0
    print(f"{name}: tR={tR:.2f} min  높이={height:.1f}  면적={area:.2f}")

import numpy as np

dt = 0.01
t = np.arange(0, 8, dt)
baseline = 1.0

def peak(t, tR, height, sigma):
    return height * np.exp(-0.5 * ((t - tR) / sigma) ** 2)

signal = (baseline + peak(t, 1.5, 60, 0.04)
                   + peak(t, 3.2, 30, 0.10)
                   + peak(t, 5.8, 20, 0.20))

windows = {"피크 1": (1.0, 2.0), "피크 2": (2.6, 3.8), "피크 3": (4.8, 6.8)}
result = {}
for name, (t0, t1) in windows.items():
    m = (t >= t0) & (t < t1)
    y = signal[m] - baseline
    i = np.argmax(y)
    tR, height, area = t[m][i], y[i], np.sum(y) * dt
    result[name] = area
    print(f"{name}: tR={tR:.2f} min  높이={height:.1f}  면적={area:.2f}")

print("면적이 가장 큰 피크:", max(result, key=result.get))

# 모듈 정보 카드에서 찾은 모델 번호를 표로 정리하기
modules = [
    # (스택 위치, 모듈 이름, 모델 번호, 역할)
    ("1층(맨 아래)", "Quaternary Pump",          "G7111B", "용매 혼합 + 송액, 탈기 내장"),
    ("2층",          "Vialsampler",              "TODO",   "TODO"),
    ("3층",          "Multicolumn Thermostat",   "TODO",   "TODO"),
    ("4층",          "Variable Wavelength Det.", "TODO",   "TODO"),
]

print(f"{'위치':<10}{'모듈':<28}{'모델':<8}역할")
print("-" * 70)
for pos, name, model, role in modules:
    print(f"{pos:<10}{name:<28}{model:<8}{role}")

todo = sum(row.count("TODO") for row in modules)
print(f"\n남은 TODO: {todo}개")

modules = [
    ("1층(맨 아래)", "Quaternary Pump",          "G7111B", "용매 혼합 + 송액, 탈기 내장"),
    ("2층",          "Vialsampler",              "G7129A", "바이알 시료 자동 주입"),
    ("3층",          "Multicolumn Thermostat",   "G7116A", "컬럼 온도 유지"),
    ("4층",          "Variable Wavelength Det.", "G7114A", "UV 흡광도 측정"),
]

print(f"{'위치':<10}{'모듈':<28}{'모델':<8}역할")
print("-" * 70)
for pos, name, model, role in modules:
    print(f"{pos:<10}{name:<28}{model:<8}{role}")

import numpy as np

def rot_y(deg):
    r = np.radians(deg)
    return np.array([[ np.cos(r), 0, np.sin(r)],
                     [ 0,         1, 0        ],
                     [-np.sin(r), 0, np.cos(r)]])

camera = np.array([0.0, 0.3, 2.0])   # 장비 정면 2 m 앞, 0.3 m 위

# TODO: 각 면을 보는 회전 각도(deg)를 채우세요
views = {"정면": 0, "오른쪽 측면": None, "후면": None, "왼쪽 측면": None}

for name, deg in views.items():
    if deg is None:
        print(f"{name}: TODO")
        continue
    x, y, z = np.round(rot_y(deg) @ camera, 2) + 0.0
    print(f"{name:<8} {deg:3d} deg -> 카메라 x={x:5.2f}, y={y:4.2f}, z={z:5.2f}")

import numpy as np

def rot_y(deg):
    r = np.radians(deg)
    return np.array([[ np.cos(r), 0, np.sin(r)],
                     [ 0,         1, 0        ],
                     [-np.sin(r), 0, np.cos(r)]])

camera = np.array([0.0, 0.3, 2.0])
views = {"정면": 0, "오른쪽 측면": 90, "후면": 180, "왼쪽 측면": 270}

for name, deg in views.items():
    x, y, z = np.round(rot_y(deg) @ camera, 2) + 0.0
    print(f"{name:<8} {deg:3d} deg -> 카메라 x={x:5.2f}, y={y:4.2f}, z={z:5.2f}")

자주 나는 오류와 해결#

1) 3D 뷰가 검은(또는 흰) 화면으로 비어 있음#

THREE.WebGLRenderer: Error creating WebGL context.

• 원인: 브라우저의 하드웨어 가속(WebGL)이 꺼져 있거나, 그래픽 드라이버가 WebGL 을 막고 있습니다. 원격 데스크톱 · 가상 머신에서도 자주 생깁니다.
• 해결:
  1. Chrome: <b>설정 › 시스템 › 가능한 경우 그래픽 가속 사용</b>을 켜고 다시 시작합니다. Edge: <b>설정 › 시스템 및 성능 › 가능한 경우 그래픽 가속 사용</b>.
  2. 주소창에 chrome://gpu (Edge는 edge://gpu)를 입력해 WebGL 항목이 "Hardware accelerated" 인지 확인합니다.
  3. 그래도 안 되면 다른 PC나 브라우저에서 시도하고, 그동안은 Playground 실습으로 진행합니다.

2) 사이트를 고쳤거나 갱신했는데 화면이 예전 그대로이거나 일부가 빈 칸#

• 원인: 브라우저가 이전 파일을 캐시에서 불러왔습니다.
• 해결: <kbd>Ctrl</kbd>+<kbd>F5</kbd> 로 강력 새로고침합니다. 그래도 같으면 개발자 도구(<kbd>F12</kbd>)를 연 상태에서 새로고침 버튼을 길게 눌러(또는 우클릭) 캐시 비우기 및 강력 새로고침을 고릅니다.

3) python build.py --serve 실행 시 포트 오류#

OSError: [WinError 10048] 각 소켓 주소(프로토콜/네트워크 주소/포트)는 하나만 사용할 수 있습니다

• 원인: 8000 번 포트를 이미 다른 프로그램(대개 앞서 켜 둔 같은 서버)이 쓰고 있습니다.
• 해결: 앞서 열어 둔 명령 창을 찾아 <kbd>Ctrl</kbd>+<kbd>C</kbd> 로 끄거나 창을 닫은 뒤 다시 실행합니다. 이미 서버가 켜져 있다면 새로 켤 필요 없이 http://localhost:8000 으로 접속하면 됩니다.

4) 'python'은(는) 내부 또는 외부 명령 ... 이 아닙니다#

'python'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.

• 원인: Python 이 설치되지 않았거나 PATH 에 등록되지 않았습니다.
• 해결: py --version 이 되면 py build.py --serve 로 실행합니다. 안 되면 python.org 에서 Python 3 를 설치할 때 Add python.exe to PATH 에 체크합니다.

5) 페이지를 열었더니 3D 모델 · Playground 가 동작하지 않음 (주소가 file:///...)#

• 원인: HTML 파일을 탐색기에서 더블클릭해 열었습니다. 브라우저는 file:// 페이지에서 모델 파일 · Python 실행 환경을 불러오지 못하게 막습니다.
• 해결: 로컬 서버를 켜고 http://localhost:8000 으로 엽니다.

6) Playground 의 ▶ 실행 버튼이 계속 회색(눌리지 않음)#

• 원인: Python 실행 환경(Pyodide)을 아직 내려받는 중이거나, 인터넷이 막혀 내려받지 못했습니다.
• 해결: 수십 초 기다립니다. 계속 그대로면 인터넷 연결(학교 방화벽 포함)을 확인하고 <kbd>Ctrl</kbd>+<kbd>F5</kbd> 로 새로고침합니다.

과제 / 팀 미션#

참고자료#

• Agilent 1260 Infinity II LC 시스템 제품 페이지: https://www.agilent.com/en/product/liquid-chromatography/hplc-systems/analytical-hplc-systems/1260-infinity-ii-lc-system
• Agilent 1260 Infinity II 모듈별 사용자 설명서(User Manual) — Agilent 문헌 라이브러리에서 모델 번호(G7111B · G7129A · G7116A · G7114A)로 검색: https://www.agilent.com/en/support
• Agilent, The LC Handbook — Guide to LC Columns and Method Development (역상 크로마토그래피 · 머무름 개념): https://www.agilent.com/cs/library/primers/public/LC-Handbook-Complete-2.pdf
• Pyodide (브라우저 Python): https://pyodide.org/
• 이 사이트의 도구: Python Playground · 3D 뷰어 · 3D 시뮬레이터
• 다음 차시: ch02 1260 모듈과 배관 연결 이해