HTML에서 실행하는 Python과 PyScript

PyScript란?

Python은 현재 수많은 라이브러리와 오픈 소스를 통해 데이터 분석과 시각화 및 머신러닝, 딥러닝과 같이 인공지능 분야에서 활발하게 활동 중인 프로그래밍 언어 중 하나입니다. 그렇다 보니 python은 back-end 서비스에 더욱 최적화되어있다고 볼 수 있습니다. 추가로 Python의 특징인 쉽고 빠르다는 장점을 통해 data scientist, researcher, developer 등 다양한 직종에서 활용되고 있는 프로그래밍 언어입니다. "이렇게 훌륭한 프로그래밍 언어를 Browser에서 사용할 수 있다면 얼마나 좋을까?"라는 말은 꽤 오래전부터 나오던 이야기였는데 올해 PyCon 2022 conference에서 Anaconda가 많은 사람의 염원을 이루어줄 PyScript를 공개하였습니다.

 

PyScript는 Pyodide, Emscripten, WASM(WebAssembly)와 더불어 기타 최신 웹 기술을 사용하여 HTML에서 Python code를 사용할 수 있도록 하는 front-end 프레임워크입니다. 그동안 Python은 웹과 상호작용을 하기 위해선 HTML, CSS, JS를 서버로 실행해야만 가능했는데 이는 다른 언어에 비해 굉장히 불편하고 어려운 부분이었습니다. 하지만 이를 해결하기 위해서 나온 것이 PyScript이며, 공식 사이트에서도 "Run python in your HTML"이라는 문구가 타이틀일 정도로 HTML에서 Python code를 작성할 수 있다는 것 자체로도 Python의 단점을 해결하고 장점을 더욱 극대화할 수 있는 기술이 바로 PyScript입니다.

 

PyScript의 특징

Pyscript는 표준 HTML을 지원하며 아래와 같은 6가지의 특징을 가지고 있습니다.

 

• Python in the browser: Server나 plug-in을 사용하지 않아도 Python code를 HTML에서 실행할 수 있으며, 외부 파일과 py파일 호스팅 또한 지원합니다.
• Python ecosystem: 인기 있는 Python library와 science package를 지원합니다. (numpy, pandas, scikit-learn, Matplotlib, Folium, Altair, Panel, DeckGL 등)
• Python with JavaScript: Python과 JavaScript의 개체 및 네임스페이스 간의 양방향 통신을 지원합니다.
• Environment management: 개발자가 실행할 페이지 코드에 포함할 파일과 패키지를 정의할 수 있도록 있습니다.
• Visual application development: 개발자는 버튼 및 컨테이너, 텍스트 상자 등과 같이 쉽게 사용할 수 있는 큐레이션 된 UI 구성 요소를 사용하여 쉽게 빌드할 수 있습니다.
• Flexible framework: PyScript는 개발자가 Python에서 직접 연결이 가능하며 확장 가능한 새로운 구성 요소를 생성하고 공유할 수 있는 유연한 프레임워크입니다.

이렇듯 PyScript는 아래와 같이 주로 개발자가 개발하는 데 편의성과 확장이 더욱 용이한 여러 특징을 가지고 있습니다. 참고로 PyScript에서는 아직 다른 웹 브라우저에서 코드 동작에 약간의 차이가 있을 수 있어 Google Chrome 웹 브라우저에서의 테스트를 권장하고 있습니다만 직접 실행해본 결과 가볍게 테스트를 진행할 땐 Edge에서도 이상 없이 잘 동작하는 것을 확인했습니다. (REPL의 적용은 Chrome 권장)

 

PyScript의 단점

공식 사이트에서 PyScript는 아직 매우 초기 단계며 개발할 부분이 많이 남아있다고 합니다. 그렇다 보니 아직 불안정한 부분을 Anaconda에서도 인지하고 있는데 이중 가장 치명적인 것은 페이지 로딩 시간이 오래 걸린다는 점입니다. 이 문제는 많은 변경이 필요할 것으로 예상되며 이 외에도 문제가 있어 PyScript가 완전해지기까지는 시간이 걸릴 것으로 예측됩니다. 그렇기에 Anaconda에서도 사람들이 탐구하고 직접 실행해보는 것은 권장하지만, 상업용으로는 사용하지 않는 것이 좋을 것이라며 권고하고 있습니다.

PyScript 사용 예제

PyScript를 페이지에 적용하는 방법은 굉장히 쉽습니다. 공식 사이트(https://pyscript.net/) 에서 js와 CSS 파일을 다운로드 받은 후 프로젝트 내에서 import 하여 사용할 수 있고, 공식 사이트의 CDN을 사용하여 import 할 수 있습니다. 저는 테스트 목적이므로 공식 사이트의 CDN을 사용하여 진행할 예정입니다. 테스트 환경은 Python 3.9.7, Django 프레임워크를 사용하였는데, Java Spring 환경에서 JSP를 사용해도 동일하게 사용 가능합니다. 그럼 간단하게 문자열을 출력하는 예제를 만들어보도록 하겠습니다.

 

문자열 출력코드

문자열 출력 화면

이처럼 JS와 CSS 파일을 import하고 <py-script> 태그 안에 Python code를 작성하여 text 변수를 출력하였습니다.

 

문자열 출력 로딩

하지만 위에 서술했듯 페이지 로딩 시간이 오래 걸렸는데 python 코드 자체 성능에는 이상이 없는 것으로 확인되고 있고, 제 생각엔 pyodide 생성, pyscript load시 시간을 많이 사용하고 있는 것으로 예상됩니다.

 

외부 py import

외부 py 파일을 import할 경우 <py-env> 태그 내에 - paths: url을 작성하거나 <py-script src='url'>을 작성하여 import 합니다.

 

JavaScript 문법, PyScript 문법

PyScript는 JavaScript의 개체 및 네임스페이스 간 양방향 통신을 지원하기 때문에 Python 문법으로 HTML Elements에 접근할 수 있습니다. 직접 비교해보니 변수 선언, 객체 접근 방식, 반복문 등 각 문법이 다르다는 점을 제외하고는 동일하게 사용이 가능하다는 것을 알 수 있습니다.

이번엔 (https://pyscript.net/examples/)에서 library를 어떻게 활용하는지 한번 살펴보겠습니다. 테스트를 진행할 예제는 python 오픈 소스 library와 sklearn의 cluster를 활용한 예제를 보겠습니다.

 

Data Cluster 코드-1

첫 번째로 bokeh, panel, bootstrap 등 외부 library를 import 후 altair, pandas, scikit-learn과 같은 Pyhton library를 정의해줍니다.

 

Data Cluster 코드-2

두 번째로 py-script 태그 안에 Python Code를 작성합니다. python library를 import 하는 방식과 문법은 같습니다.

 

Data Cluster 코드-3

마지막으로 jquery를 통해 click 이벤트로 Collapse를 제어하고 있습니다. PyScript는 javascript와 네임 스페이스를 공유하기 때문에 jquery, angular, reack, vue, knockout 등과 함께 사용될 수 있습니다.

 

결과 화면

이 예제는 scikit-lean을 사용하여 펭귄의 데이터 세트를 K-mean clustering을 출력하고 클릭한 plot 그래프 좌표에 대한 정보를 표로 출력합니다. Python 기반이다 보니 DataFrame 파싱, 머신러닝, 시각화하는 과정에서 runtime이 길어지긴 하지만 JavaScript의 async를 활용하면 해결될 것으로 보입니다.

 

마리오 예제 - http://dreamplan7.cafe24.com/pyscript-main/examples/mario/play_mario.html

추가로 슈퍼마리오를 PyScript로 구현한 예제가 있는데 이처럼 Python으로 구현된 응용프로그램이 browser로 구현됐을 땐 웹 생태계가 많이 풍부해질 것으로 예측됩니다.

 

PyScript 기대 효과

PyScript는 모든 것이 웹 브라우저를 통해 구현되기 때문에 Jupyter Notebook의 기능을 완벽히 대체할 수 있습니다. Jupyter Notebook은 웹 인터페이스 기반 REPL, 셀단위 편집 지원, markdown 셀 지원 등과 같은 기능을 지원하는데, 이는 모두 PyScript로 구현 가능한 영역에 있습니다. 그렇게 되면 Jupyter Notebook를 설치하지 않아도 모바일, PC 어디에서나 간편하게 동일한 기능을 사용할 수 있을 것입니다. 이렇듯 기기와 장소 구분 없이 액세스가 가능한 웹 브라우저의 특징은 Data Scientist, Researcher에게 더 많은 유연성과 기능을 제공할 것입니다. 예를 들어 데이터 분석 혹은 머신 러닝을 하기 위한 CSV 파일만 업로드하면 어디서든 실행이 가능하며 시각화까지 제공해준다면 협업하기에 더욱 편해질 것으로 예상됩니다. 실제로도 PyScript는 여러 수학 Library와 머신러닝, 딥러닝과 같은 미래 기술을 브라우저에서 구현하는 것을 목표로 하고 있으며, 여러 Python Project들이 웹으로 유입될 경우, javascript와 Python은 각자 바라보는 방향성이 달라 그만큼 교집합이 적기 때문에 웹 생태계가 더욱 방대해질 것으로 예상됩니다. 만약 PyScript Project가 성공하여 정식적으로 기능이 제공되면 인실리코젠의 R&D Center와 AIDX 부서에서의 데이터 분석과 머신러닝 활용 시에도 더욱 긍정적인 효과를 가져올 수 있을 것으로 예상됩니다. PyScript는 Anaconda에서도 매우 초기 단계라고 할 만큼 아직 개선해야 할 부분이 많은 프레임워크입니다. 그러므로 정식적으로 사용하기엔 긴 시간이 소요될 것이지만 여러 개발자의 trouble shooting과 Anaconda 팀의 노력이면 충분히 성공할 수 있는 기술이라고 생각하고 있습니다. 

참고자료

• https://pyscript.net

 

 

---

EDITOR

김민준

BS Dept. · Junior Developer