Pyodide - Python Interactive Code Editor in Browser
by NyangPolice
Pyodide란?
Pyodide는 Python을 웹 브라우저나 Node.js 같은 JavaScript 환경에서 실행하기 위한 Python Distribution이다. CPython 인터프리터를 WebAssembly(WASM)로 컴파일하여 브라우저에서 Python 코드를 직접 수정하고 실행할 수 있다. Mozilla에서 처음 개발되어, 현재는 오픈소스 프로젝트로 관리되고 있다.
특징
1. 브라우저에서 직접 Python 코드 실행
Python 설치할 필요도 없고 서버 필요 없이 클라이언트 측에서 Python 코드를 실행할 수 있다.
2. 다양한 패키지 지원
Numpy, Pandas, Matplotlib, Scikit-learn, Scipy 등 다양한 패키지를 지원한다. 지원 목록은 Packages built in Pyodide 참조. 단, 외부 패키지를 사용하려면 설치하는 과정이 필요하다. 설치 방법은 Pyodide Loading Packages 참조.
Matplotlib의 plt.show()는 브라우저에서는 HTML <canvas> 요소에 렌더링하는 방식으로 작동한다.
3. Python ⟺ JavaScript 양방향 통신
Python에서 JavaScript 객체 사용 혹은 JavaScript에서 Python 객체 사용이 가능하다. 아래에서는 Python에서 DOM 조작 예시를 보여준다.
예시 1 - 에디터 제목 바꾸기
예시 2 - create_proxy()를 이용해 Python 함수를 JavaScript 이벤트 핸들러로 등록 및 Python으로 입력 UI를 에디터 하단에 생성
4. CPython 기반
MicroPython 혹은 Brython 같은 재구현이 아닌, 공식 CPython을 WebAssembly로 컴파일한 것이므로 기존 파이썬 코드와 호환성이 높다.
한계점
| 항목 | 내용 |
|---|---|
| 초기 로딩 | 첫 실행 시 Pyodide (~10MB) 다운로드 필요 |
| 실행 속도 | 네이티브 CPython 대비 WASM 실행이 느려 대규모 연산에는 부적합 |
| 지원 패키지 | 모든 pip 패키지가 아닌 Pyodide 내장/지원 패키지만 사용 가능 |
| 파일 I/O | 실제 파일 시스템 접근 불가 (인메모리 가상 파일시스템 사용) |
| 네트워크 제한 | 브라우저 샌드박스 환경이므로 requests.get() 같은 HTTP 요청이 그대로 동작하지 않고, pyodide-http 패치나 JavaScript fetch를 거쳐야 함 |
| 실행 격리 | 에디터끼리 같은 Python 런타임을 공유함 (전역 상태 공유) |
마치며
Pyodide 덕분에 정적 블로그에서도 서버 없이 Python 실행 환경을 제공할 수 있다. 위 에디터의 코드를 자유롭게 수정하고 실험해보길 바란다. 필자는 Pyodide를 파이썬 에디터 형태로 꾸미는 과정에서 Claude Code의 도움을 조금 받았는데 본인이 웹개발에 지식이 풍부하지 않다면 나와 같이 agent의 도움을 받는 것을 추천한다.
참고 자료
tags: python - pyodide - webassembly - interactive - browserTools 카테고리의 글 목록
-
-
-
Pyodide - Python Interactive Code Editor in Browser
-