매력적인 프론트 엔드를 만드는 파이썬 웹 프레임워크 3가지

파이썬은 오래전부터 서버 측 프레임워크용 언어로 쓰였고, 거의 모든 규모, 거의 모든 환경의 프로젝트를 지원한다. 그러나 파이썬은 전통적으로 백엔드 영역에 갇혀 있었다. 프론트 엔드, 클라이언트 측 코드를 만들기 위한 용도로 파이썬을 쓰는 문화는, 적어도 아직까지는 크게 확산하지 않았다.
 

최근 일부 프로젝트가 프론트 엔드에서 파이썬을 자바스크립트로 트랜스파일하거나 웹어셈블리를 통해 프론트엔드에서 파이썬을 실행하는 방법을 시도했지만, 현재 구현되는 방식은 투박하고 원시적이다. 개발자에게 지금 바로 더 좋은 선택지는 없을까? 물론 있다. 새로운 파이썬 웹 프레임워크 제품군을 사용하면 백엔드에서 프로그래밍 방식으로 프론트 엔드 코드를 생성하는 선언적인 파이썬 코드를 작성할 수 있다. 파이썬 객체를 사용해 HTML 엔티티와 해당 자바스크립트 기반 동작을 기술한 다음, 클라이언트에 제공될 때 프레임워크가 이러한 객체를 자동으로 생성하도록 할 수 있다. 

이 패러다임을 따르는 3가지 파이썬용 웹 프레임워크를 소개한다. 모두 백엔드 파이썬 코드로 HTML, CSS, 자바스크립트 등 프론트 엔드 코드를 설명할 수 있도록 허용하고, 따라서 파이썬 객체 모델을 통해 프론트 엔드 객체가 표현된다. 
 

앤빌

앤빌(Anvil)이 내세우는 가장 큰 장점은 “오직 파이썬만 사용해 웹 앱 빌드하기”다. 앤빌을 사용하면 파이썬 코드를 작성하거나 앤빌의 드래그 앤 드롭 로우코드 툴을 사용해 인터랙티브한 자바스크립트 기반 프론트 엔드와 파이썬 기반 백엔드를 갖춘 완전한 웹 애플리케이션을 만들 수 있다. 

앤빌의 기본적인 접근 방식은 두 가지다. 하나는 앤빌 클라우드 서비스로, 여러 요금제로 구성돼 있으며, 시각적 빌드 툴과 다양한 호스팅 옵션을 제공한다. 다른 하나는 오픈소스 앤빌 런타임이다. 시각적 디자이너는 포함되지 않지만 직접 작성한 코드를 사용해 앤빌 애플리케이션을 빌드하고 실행할 수 있다. 앤빌 애플리케이션은 3가지 요소로 구성된다. 첫째는 UI로, 앤빌의 디자인 툴을 사용해 디자인하거나 직접 작성한 코드를 통해 표현할 수 있다. 두 번째는 파이썬에서 자바스크립트로 트랜스파일된 클라이언트 측 코드, 세 번째는 서버 측 파이썬 코드다. 앤빌 클라우드 편집기는 Qt 디자인 스튜디오(Qt Design Studio) 등의 툴과 거의 같은 방식으로 백/프론트 엔드 코드를 자동으로 생성한다. 
 

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

앤빌 런타임을 활용하면 수동으로 애플리케이션을 작성하고, 사전 제작된 소스의 템플릿 중 하나를 출발점으로 사용할 수 있다. 코드 변경 사항이 애플리케이션 서버에 즉각 반영되므로 개발 주기가 빨라진다. 사용자 인터페이스 요소는 기본적으로 파이썬 클래스 인스턴스로, 클래스 메소드를 통해 이벤트 핸들러가 추가된다. 또한 세심하게 고안된 일반적인 메소드를 통해 프로그래밍 방식으로 손쉽게 동작을 추가할 수 있다. 예를 들어 객체의 자식으로 이벤트를 발생시키려는 경우 자식을 루프로 돌릴 필요 없이 컨테이너 객체에서 raise_event_on_children 메소드를 사용하면 된다.

기본적으로 앤빌 사이트의 모든 자바스크립트는 자동으로 생성되지만 필요한 경우 직접 자바스크립트를 작성할 수 있다. 참고로, 앤빌은 몇 가지 자체 자바스크립트를 로드하며 이 자바스크립트가 직접 작성하는 코드와 충돌할 수도 있다. 또한 앤빌의 자체 종속 항목 중에는 부트스트랩(Bootstrap) 3 등 오래된 것이 일부 있다. 이 문제는 맞춤형 테마를 만드는 방법으로 해결할 수 있지만 간단한 해결 방법이라고 할 수는 없다.
 

파인콘

파인콘(Pynecone)에는 앤빌과 같은 디자인 툴이 없지만 기반 개념은 같다. 즉, 웹 스택의 백엔드를 작성하고, 자바스크립트를 쓸 필요 없이 프로그래밍 방식으로 프론트 엔드를 생성하는 두 가지 작업에 모두 파이썬 코드를 사용한다.

파인콘 자체는 파이썬과 Node.js 런타임의 장기 지원 버전, 그리고 번(Bun) 자바스크립트 라이브러리 관리자를 사용한다. 따라서 pip install pynecone을 실행하려면 노드가 있어야 한다. 또한 파인콘의 스택은 윈도우보다는 리눅스에 다소 편향돼 있다. 윈도우에서도 실행은 되지만 리눅스용 윈도우 하위 시스템(WSL)을 사용하지 않는 한 리눅스만큼 원활하지는 않다. 그러나 일단 설정을 완료하면 제공되는 pc 명령을 활용해 가상 환경에 새 파인콘 프로젝트 템플릿을 설정하고 실행할 수 있다. 
 

파인콘 애플리케이션의 프론트 엔드는 Next.js로 컴파일되며 웹 페이지의 각 구성요소는 파이썬 객체를 사용해 설명된다. 텍스트 레이아웃이나 양식 처리와 같은 일반적인 요소뿐만 아니라, 플롯 또는 차트와 같은 데이터 표시 객체, 알림 및 진행률 표시줄과 같은 피드백 컨트롤, 모델 및 툴팁과 같은 오버레이 객체까지 많은 일반적인 구성요소가 내장돼 있다. 또한 맞춤형 리액트(React) 구성요소를 래핑할 수도 있다. 데이터 소스 연결을 위해 잘 알려진 SQL알케미(SQLAlchemy) ORM을 래핑하는 데이터 레이어가 포함된다. 

UI 구성요소를 맞춤 설정하려는 경우 구성요소를 하위 클래스로 만들어 수정할 필요 없이 CSS 스타일과 같은 대부분의 일반적인 맞춤 설정을 객체 생성자에 인수로 전달할 수 있다. 그 외에 맞춤형 HTML이 있지만 대부분 프로젝트에는 내장된 요소와 각 옵션의 조합으로 충분하다. 내장된 메모이징 데코레이터 덕분에 구성요소를 다시 렌더링할 필요가 없지만 캐시의 크기나 수명은 제어할 수 없다. 마지막으로, 주로 정적인 사이트를 구축한다면 전체 사이트를 정적 빌드로 내보낼 수 있는 유용한 기능이 있다. 파인콘이 프로그래밍 방식의 사이트 생성기 툴로도 유용한 부분이다. 
 

저스트파이

저스트파이(JustPy)는 파인콘과 마찬가지로 프로그래밍 방식으로 웹 페이지에 요소를 구축할 수 있게 해주지만, 인터랙티브 디자인 툴은 없다. 저스트파이가 강점을 보이는 부분은 효율적이고 실용적인 객체 모델이다. 예를 들어, jp.Ul 목록 객체 l을 만든 다음, 인수를 통해 지정된 부모 l로 새 객체를 정의해 여기에 요소를 추가할 수 있다. 이렇게 하면 컨테이너에 객체를 추가할 필요 없이 for 루프를 사용해 목록을 쉽게 만들 수 있고, 결과 코드는 깔끔하고 구문 분석하기도 쉽다. 모든 저스트파이 객체는 하위 클래스 및 수정이 가능하다. 문서에서 몇 가지 예제를 제공한다. 

클릭 시 동작 등 요소에 대한 이벤트 핸들러를 등록하려면 (해당 객체에 대한) 첫 번째 인수로 self를 받는 파이썬 함수를 작성하기만 하면 된다. 유연성을 더 높이기 위해 이벤트 핸들러에는 “이전” 또는 “이후” 이벤트도 포함할 수 있다. 웹소켓을 통한 프론트 엔드 라이브 업데이트를 원하는 경우 저스트파이는 기본적으로 이 기능을 제공하지만 에이잭스(Ajax) 업데이트를 사용할 수도 있다. 

저스트파이는 CSS에 테일윈드(Tailwind)를 사용한다. 테일윈드는 스타일을 위해 구성 가능한 유틸리티 클래스를 사용하지만 필요한 경우 테일윈드를 비활성화하고 다른 CSS 프레임워크로 대체할 수 있다(저스트파이의 기본 통합 제외). 또한 HTML을 여러 가지 방법으로 직접 삽입할 수 있다. 예를 들어 객체에 inner_html 속성을 설정하거나, 페이지 수준에서 HTML을 직접 주입하거나, 원시 HTML을 객체 스트림으로 파싱하는 방법을 사용하면 된다. 또한 전체 페이지 또는 개별 객체를 캐시하여 재사용할 수 있다. 
 

또 다른 돋보이는 기능은 맷플롯립(Matplotlib), 플로틀리(Plotly), 알테어(Altair), 보케(Bokeh)를 비롯한 다양한 프론트 엔드 프레젠테이션 프레임워크와의 통합이다. 따라서 저스트파이는 데이터 과학용으로 파이썬 코드를 래핑하고 웹 인터페이스를 통해 제공하는 데 적합하다. 맷플롭립 플롯과 같은 각 객체는 모든 페이지의 객체 컬렉션에 추가할 수 있는 저스트파이 객체로 전달된다. 포함되지 않는 요소도 있다. 저스트파이에는 ORM이나 기타 데이터 레이어가 스택의 일부로 포함되지 않는다. 하지만 많은 현대 웹 프레임워크에서 ORM과 데이터 레이어는 나중에 손쉽게 추가할 수 있으므로 별다른 문제는 되지 않는다. 반면 진자2(Jinja2)와 같은 단순한 템플릿 시스템에 직접적으로 대응하는 요소가 없고, 완전한 정적 웹사이트 배포를 위한 옵션도 포함되지 않는다. 
 

결론 

3가지 프레임워크를 요약하면 앤빌은 로우코드 및 노코드 인터랙티브 UI 생성 툴이 큰 매력이고, 저스트파이는 객체를 만들고 상호 연계하는 방법을 표현하는 간결한 방법을 제공한다. 파인콘은 리액트 구성요소와 Next.js를 다루기 편리하며, 생성된 사이트를 정적 HTML로 렌더링할 수 있게 해준다.
editor@itworld.co.kr