오랫동안 서버 사이드 프레임워크 언어로 사용되고 있는 파이썬은 거의 모든 프로젝트 규모 또는 사용례를 지원한다. 그러나 파이썬은 역사적으로 백엔드에 국한된 언어로, 프론트엔드나 클라이언트 사이드 코드를 위해 파이썬을 사용하는 경우는 거의 없었다. 적어도 지금까지는 그렇다.

최근 프론트엔드에서 파이썬을 자바스크립트로 트랜스파일하거나, 웹어셈블리를 통해 프론트엔드에서 파이썬을 실행하려는 몇몇 프로젝트가 시도되기도 했다. 아이디어는 좋지만 현재 구현되는 방식은 불편하고 원시적이다. 더 나은 옵션은 없을까?

물론 있다. 새롭게 등장한 일련의 파이썬 웹 프레임워크는 백엔드에서 선언적 파이썬 코드를 작성해 프로그래밍 방식으로 프론트엔드 코드를 생성할 수 있게 해준다. 파이썬 객체를 사용해 HTML 엔터티와 자바스크립트 기반 동작을 설명한 다음 객체를 클라이언트에 제공할 때 프레임워크가 객체를 생성하도록 할 수 있다.

여기서는 이 패러다임을 따르는 세 가지 파이썬 웹 프레임워크를 살펴본다. 이를 통해 백엔드 파이썬 코드를 사용해서 프론트엔드 코드(HTML, CSS 및 자바스크립트)를 설명할 수 있다. 프론트엔드 객체는 파이썬 객체 모델을 통해 표현된다.

앤빌(Anvil)

앤빌이 강조하는 것은 “파이썬만 사용해 웹 앱을 빌드할 수 있다”는 것이다. 앤빌에서는 파이썬 코드를 작성하거나 앤빌의 드래그 앤 드롭 로우코드 툴을 사용해서 자바스크립트 기반의 인터랙티브 프론트엔드와 파이썬 기반 백엔드를 갖춘 정식 웹 애플리케이션을 만들 수 있다.

앤빌이 제공하는 기본적인 접근 방식은 두 가지다. 하나는 다양한 가격 등급으로 시각적 빌드 툴과 다양한 호스팅 옵션을 제공하는 앤빌 클라우드 서비스, 다른 하나는 시각적 디자이너는 포함되지 않지만 직접 작성한 코드로 앤빌 애플리케이션을 빌드하고 실행할 수 있게 해주는 오픈 소스 앤빌 런타임이다.

앤빌 애플리케이션은 3가지 요소, 즉 앤빌의 디자인 툴로 디자인하거나 직접 작성한 코드로 표현할 수 있는 UI, 파이썬에서 자바스크립트로 트랜스파일된 클라이언트 사이드 코드, 그리고 서버 사이드 파이썬 코드로 구성된다. 앤빌 클라우드 편집기는 Qt 디자인 스튜디오(Qt Design Studio)와 같은 툴과 거의 같은 방식으로 백엔드 및 프론트엔드 코드를 자동으로 생성한다.

앤빌의 클라우드 버전은 UI를 위한 강력한 시각적 디자인 툴을 제공한다. UI가 생성되면 디자이너 없이 코드를 재사용할 수 있다.

IDG

앤빌 클라우드 편집기에는 백엔드 코드가 없는 기본적인 정적 애플리케이션, 간단한 티켓팅 시스템, 완전한 온라인 스토어와 같은 몇 가지 예제가 포함돼 있다. 각 예제를 프로젝트 템플릿으로 사용할 수 있다. 또한 웹 페이지에 집어넣을 수 있는 사전 구축된 유용한 UI 구성요소도 제공된다. 편리한 구성요소 중 하나는 일정 간격으로 코드를 실행하는 타이머다(예를 들어 업데이트를 위해 데이터 소스를 폴링할 때 사용). 자체 HTML과 맞춤형 구성요소를 직접 작성할 수도 있다. 데이터 소스를 클라우드에 추가하고 구성요소에 연결할 수도 있으므로 일반적인 CRUD 앱을 매우 빠르게 만들 수 있다.

앤빌 런타임을 사용하기로 선택했다면 직접 애플리케이션을 작성하고 몇 가지 사전 구축된 템플릿 중 하나를 출발점으로 사용할 수 있다. 코드 변경은 애플리케이션 서버에 즉시 반영되므로 빠른 개발 주기가 가능하다. 사용자 인터페이스 요소는 본질적으로 파이썬 클래스 인스턴스이며, 이벤트 핸들러는 클래스 메서드를 통해 추가된다. 잘 설계된 일반 메서드를 통해 프로그래밍 방식으로 손쉽게 동작을 추가할 수도 있다. 예를 들어 객체의 자식으로 이벤트를 발생시키려는 경우 자식들을 순환할 필요 없이 컨테이너 객체에서 raise_event_on_children 메서드를 사용하면 된다.

기본적으로 앤빌 사이트를 위한 모든 자바스크립트는 자동으로 생성되지만 필요에 따라 직접 자바스크립트를 작성할 수도 있다. 단, 이렇게 작성한 코드는 앤빌이 로드하는 자체 자바스크립트와 충돌할 수 있다는 점에 유의해야 한다. 또한 예를 들어 부트스트랩 3와 같은 앤빌의 몇몇 종속 항목은 다소 오래됐다. 맞춤형 테마를 만들어서 문제를 피해갈 수는 있지만 간단한 작업은 아니다.

리플렉스(Reflex)

리플렉스(전 파인콘(Pynecone))에는 앤빌과 같은 디자인 툴은 없지만, 자바스크립트를 작성할 필요 없이 파이썬 코드를 사용해서 웹 스택의 백엔드를 작성하고 프로그래밍 방식으로 프론트엔드를 생성한다는 기본 아이디어는 동일하다.

리플렉스의 초기 버전은 파이썬과 Node.js 런타임의 장기 지원 버전을 모두 사용했다. 리플렉스는 파이썬 3.8 이상만 있으면 된다. 리눅스와 윈도우에서 작동하지만 윈도우 사용자의 경우 WSL을 사용해야 최상의 성능을 얻을 수 있다. 설정을 마치면 제공된 reflex 명령을 사용해서 새 리플렉스 프로젝트를 설정하고 실행할 수 있다.

순수 파이썬으로 만든 샘플 리플렉스 웹 앱. 인터랙티브 차트는 리플렉스와 함께 번들로 제공되는 많은 위젯 중 하나다.

리플렉스 앱의 프론트엔드는 리액트 애플리케이션으로 컴파일되며 파이썬 백엔드를 제공하는 데는 패스트API(FastAPI)가 사용된다. 텍스트 레이아웃, 양식 처리와 같은 것뿐만 아니라 플롯, 차트와 같은 데이터 표시 객체, 알림이나 진행률 표시줄과 같은 피드백 컨트롤, 모달 및 툴팁과 같은 오버레이 객체 등 많은 일반적인 구성요소가 기본 제공된다. 맞춤형 리액트 구성요소를 래핑할 수도 있다. 데이터 소스 연결을 위해 잘 알려진 SQLAlchemy ORM을 래핑하는 데이터 계층이 포함돼 있다.

UI 구성요소를 맞춤 구성하려는 경우 구성요소를 하위 클래스화해서 수정하는 대신 CSS 스타일링과 같은 가장 일반적인 맞춤 구성을 객체 생성자에 인수로 전달할 수 있다. 다른 모든 부분에는 맞춤형 HTML이 있지만 대부분의 일반적인 프로젝트에는 기본 제공 요소와 옵션의 조합으로 충분하다.

마지막으로, 주로 정적 사이트를 구축한다면 전체 사이트의 프론트엔드를 정적 빌드로 내보내는 리플렉스의 편리한 기능을 사용할 수 있다. 프로그래밍 방식의 사이트 생성 툴로도 유용하게 활용 가능한 기능이다.

나이스GUI(NiceGUI)

명령줄 애플리케이션 또는 웹 서비스로 실행되는 기존 파이썬 앱이 있고, 여기에 웹 기반 UI를 빠르게 추가하려는 경우를 생각해 보자. 직접 프론트엔드를 조합해볼 수도 있지만 나이스GUI가 알아서 해주는 일을 굳이 다시 할 필요가 있을까?

나이스GUI는 선언적 구문을 사용해 UI 구성요소의 모양과 동작을 설명한다. 사전 구축된 UI 구성요소 갤러리에는 버튼, 슬라이더, 텍스트 레이블, 입력 상자, 파일 업로더 등 일반적인 위젯과 함께, 오디오나 비디오, 인터랙티브 데이터 프레젠테이션(차트, 표, Matplotlib 그림 렌더링), three.js를 사용한 3D 시각화, 코드미러(CodeMirror) 편집기와 같은 더 복잡한 애플리케이션을 위한 구성요소도 포함돼 있다. 이러한 모든 구성요소는 브라우저 내 코드를 전혀 작성할 필요 없이 사용할 수 있다. 나이스GUI가 모두 알아서 처리해주기 때문이다.

프로그래밍 방식으로 생성된 웹 위젯이 있는 간단한 나이스GUI 앱. 결과 앱을 서버에 배포하거나 독립형 프로그램으로 배포할 수 있다.

기존 코드를 나이스GUI로 래핑하려면 나이스GUI가 이벤트 루프, 애플리케이션 상태와 같은 항목을 어떻게 처리하는지에 대해 조금 알아야 한다. 다행히 이러한 모든 작업은 나이스GUI 자체의 고수준 구조를 통해 수행된다. 예를 들어 ui.timer 객체는 정기적으로 실행하거나 한 번만 호출할 코드를 빠르게 정의할 수 있게 해준다. ui.clipboard와 app.storage는 브라우저의 클립보드 및 로컬 스토리지 메커니즘을 처리한다. 장기 실행 작업은 하위 프로세스(run.cpu_bound 사용) 또는 쓰레드(run.io_bound 사용)로 손쉽게 위임할 수 있다.

나이스GUI는 내부 웹 프레임워크로 패스트API를 사용하므로 나이스GUI 앱 호스팅은 많은 점에서 패스트API 앱 설정과 동일한 패턴을 따른다. 또한 사전 구축된 도커 이미지를 기반으로 사용해서 나이스GUI 앱의 도커 버전을 만들거나, 쉽게 재배포할 수 있도록 앱을 독립형 실행 파일로 묶을 수 있다.

결론

앤빌의 주된 매력은 로우코드/노코드 인터랙티브 UI 생성 툴이다. 리플렉스는 리액트 프론트엔드로 작업하면서 생성된 사이트를 정적 HTML로 렌더링하려는 경우 편리하다. 나이스GUI는 이벤트 처리를 포함해 신속하게 앱을 생성하기 위한 많은 고수준의 선언적 추상화를 제공한다. 세 가지 모두 HTML 엔터티와 자바스크립트 지원 동작을 설명하는 파이썬 코드를 작성할 수 있게 해주는 충실한 프레임워크다.
dl-itworldkorea@foundryco.com