🌳 언어 계통도 & 연결 구조 — Python·JS·C·WASM 한눈에 보기 | 코딩스타랩 Part 7-1
🌳 언어 계통도 & 연결 구조 — Python·JS·C·WASM 한눈에 보기 | 코딩스타랩 Part 7-1
안녕하세요 코러입니다 😊
오늘은 “언어는 왜 이렇게 많고, 서로 어떻게 이어질까?”를 한 번에 정리합니다.
Python → JavaScript → C로 이어지는 뿌리와, 브라우저/Node 런타임, 그리고 WebAssembly(WASM)까지!
이 지도를 이해하면 앞으로 배우는 모든 기술의 위치가 선명해져요.
1️⃣ 큰 숲: 언어 계통도의 빠른 지도
C → Python (사람 친화 문법 + 과학/AI 생태계)
C → Rust/Go/Swift (현대적 시스템 언어) → WebAssembly(브라우저 속 네이티브급)
결론: “C는 뿌리, JS는 웹의 언어, Python은 사고력/AI, WASM은 성능 다리.”
2️⃣ 연결 구조: “언어 ↔ 런타임 ↔ 플랫폼”
| 언어 | 주요 런타임/VM | 주 사용 플랫폼 | 특징 |
|---|---|---|---|
| Python | CPython, PyPy | 데스크톱/서버 | 가독성·풍부한 라이브러리(데이터/AI) |
| JavaScript | V8(Chrome/Node), SpiderMonkey(Firefox) | 브라우저/서버(Node) | 웹 표준 · 인터랙션 최강 |
| C/C++ | 네이티브(컴파일) | OS/엔진/임베디드 | 고성능 · 엔진의 세계 |
| Rust/Go | 네이티브(컴파일) | 시스템/네트워크 | 안전·동시성·현대적 |
| WASM | 브라우저 VM | 웹 | C/C++/Rust 코드를 웹에서 고속 실행 |
🧠 포인트: 언어는 혼자가 아니고 “어디에서 실행되는가(런타임)”가 함께 따라다녀요.
3️⃣ JS의 두 얼굴: 브라우저 vs Node
- 브라우저 JS: DOM 제어, 이벤트, Canvas/웹 API 사용
- Node.js: 파일·네트워크·서버, 빌드 도구, 패키지 관리(npm)
// 브라우저: 화면 글자 바꾸기
document.body.innerText = "Hello in Browser";
// Node: 파일 만들기
const fs = require("fs");
fs.writeFileSync("hello.txt","Hello from Node");같은 JS라도 “플랫폼 권한”이 달라서 가능한 일이 달라요.
4️⃣ Python ↔ JS ↔ C가 만나는 다리: WebAssembly
WASM은 브라우저 속 가상 CPU 같은 존재. C/C++/Rust로 만든 고성능 코드를 웹에서 돌릴 수 있게 해요. 게임 엔진·물리 연산·이미지 처리 같은 무거운 작업에 쓰여요.
5️⃣ “언어 선택”의 진짜 기준
- 결과가 어디서 돌아가야 하나? (웹/모바일/PC/서버)
- 속도가 얼마나 필요한가? (JS vs WASM/네이티브)
- 팀/생태계는 어디에 많은가? (라이브러리/튜토리얼/도구)
❓ Q&A 코너
Q1. Python도 브라우저에서 돌릴 수 있나요?
👉 네! Pyodide/Transcrypt 같은 프로젝트로 가능하지만, 실전 게임은 JS/WASM이 일반적이에요.
Q2. C를 꼭 배워야 하나요?
👉 엔진 구조를 이해하고 성능을 다루려면 도움이 커요. 초등·중등은 개념 맛보기만 해도 충분!
Q3. 인디 게임엔 어떤 조합이 좋아요?
👉 JS(Canvas)로 빠른 프로토타입 → 필요 시 WASM(물리/경로 탐색) 혼합이 효율적입니다.
📘 다음 단계 예고
다음 Part 8에서는 브라우저 이벤트 루프를 파고들어 클릭·키보드·애니메이션이 동시에 부드럽게 동작하는 원리를 게임 개발 시각으로 설명합니다.
Leave a Comment