BioPlayground

🧬
목록으로

BioPlayground는 어떻게 만들었을까 — 연구자가 개발자가 된 이야기

생명공학 연구자가 BioPlayground 바이오 도구를 만든 실전 경험기. 코딩 입문부터 웹 배포까지.

입문
|
30분
|
검증 완료 (2026-06)
BioPlayground웹 개발바이오 도구시각화실전 경험
트랙 진행률0/8 (0%)

BioPlayground는 어떻게 만들었을까

이 글은 코딩 튜토리얼이 아닙니다. "왜 시작했고, 어떤 벽에 부딪혔고, 어떻게 넘었는지"에 대한 이야기입니다.

코드를 한 줄도 모르던 연구자가 어떻게 바이오 도구를 만들게 되었는지 — 이 경험이 DevBench를 시작하는 여러분에게 용기가 되기를 바랍니다.

시작: "이 그래프, 매번 손으로 그려야 해?"

모든 건 반복 작업에서 시작했습니다.

매주 실험 결과를 Excel로 정리하고, 같은 형태의 그래프를 반복해서 만들고, 동료에게 이메일로 보내는 과정. "이걸 자동으로 할 수 없을까?"라는 질문이 BioPlayground의 씨앗이었습니다.

처음에는 Python 스크립트 하나였습니다:

python
import matplotlib
matplotlib.use("Agg")
import matplotlib.pyplot as plt


data = [23.5, 45.2, 67.8, 89.1, 12.3]
labels = ["Sample A", "Sample B", "Sample C", "Sample D", "Sample E"]


fig, ax = plt.subplots(figsize=(8, 5))
ax.bar(labels, data, color="#2d5a3d")
ax.set_ylabel("Expression Level")
ax.set_title("Gene Expression Comparison")
fig.savefig("expression.png", dpi=150, bbox_inches="tight")
plt.close(fig)


print("차트 저장 완료: expression.png")
assert len(data) == len(labels)

이 스크립트 하나가 매주 30분을 절약해줬습니다. "코딩이 이렇게 쓸모있구나."

첫 번째 벽: "다른 사람도 쓸 수 있게 하려면?"

Python 스크립트는 나만 쓸 수 있었습니다. 동료에게 "Python 설치하고, 이 스크립트 실행해봐"라고 하면 돌아오는 대답은 항상 같았습니다.

"그냥 결과만 보내줘."

웹 앱이 답이었습니다. URL 하나면 누구나, 어떤 기기에서든 쓸 수 있으니까.

python
tech_stack = {
    "프론트엔드": "React (Next.js)",
    "스타일링": "Tailwind CSS",
    "백엔드": "Supabase",
    "배포": "Vercel",
    "차트": "Recharts",
}


for category, tool in tech_stack.items():
    print(f"{category}: {tool}")


assert len(tech_stack) == 5

처음 본 기술 이름들이 외계어처럼 느껴졌습니다. 하지만 하나씩 배워가며 깨달은 것이 있습니다 — 프레임워크는 도구일 뿐, 중요한 건 풀고 싶은 문제라는 것.

두 번째 벽: "이 코드, 왜 어제는 됐는데 오늘은 안 되지?"

Git 없이 코딩하던 시절의 악몽입니다.

  • app_v1.py
  • app_v2_final.py
  • app_v2_final_진짜.py
  • app_backup_20260315.py

Git을 배우고 나서 이 문제가 완전히 사라졌습니다. 모든 변경 이력이 남고, 언제든 과거로 돌아갈 수 있으니까.

python
git_lessons = [
    "커밋은 자주, 작게",
    "커밋 메시지는 '왜'를 쓴다",
    "main 브랜치에 직접 push하지 않는다",
    "코드 리뷰는 내 실수를 잡아주는 안전망",
]


for i, lesson in enumerate(git_lessons, 1):
    print(f"교훈 {i}: {lesson}")


assert len(git_lessons) == 4

세 번째 벽: "데이터가 너무 커서 브라우저가 멈춰요"

바이오 데이터는 큽니다. GTEx 데이터셋 수만 행, TCGA 임상 데이터 수천 환자. 이걸 전부 브라우저에 로딩하면 탭이 죽습니다.

해결책은 서버에서 요약하고, 브라우저에는 결과만 보내는 것이었습니다:

python
strategies = {
    "서버 사이드 필터링": "전체 데이터 중 필요한 부분만 API로 전송",
    "페이지네이션": "한 번에 100행씩만 보여주기",
    "사전 계산": "통계량을 미리 계산해서 저장",
    "지연 로딩": "스크롤할 때 추가 데이터 로드",
}


for strategy, desc in strategies.items():
    print(f"- {strategy}: {desc}")


assert "서버 사이드 필터링" in strategies

돌아보며: 코딩을 배운 연구자가 얻는 것

코딩을 배운다고 개발자가 되는 것은 아닙니다. 하지만 연구자로서 더 강력해집니다.

python
gains = {
    "자동화": "반복 작업에서 해방 → 연구에 집중",
    "재현성": "스크립트 = 완벽한 실험 노트",
    "소통": "개발팀과 같은 언어로 대화",
    "독립성": "원하는 도구를 직접 만들 수 있음",
    "커리어": "바이오인포매틱스, 데이터 사이언스 확장",
}


for gain, desc in gains.items():
    print(f"✓ {gain}: {desc}")


assert len(gains) == 5

DevBench를 시작하는 당신에게

완벽하게 배우고 시작하려 하지 마세요. 불완전한 코드라도 문제를 푸는 코드가 좋은 코드입니다.

BioPlayground의 첫 커밋은 부끄러울 정도로 엉망이었습니다. 하지만 그 엉망인 코드가 오늘의 도구를 만들었습니다.

당신의 첫 print("Hello, Biology!") 가 어디로 이끌지 아무도 모릅니다.

이 글에서 다룬 도구들의 사용법은 DevBench의 다른 토픽에서 하나씩 배울 수 있습니다. 공통 기초부터 시작하세요.