top of page

파이썬 (Python) 기반의 웹앱을 HTML, CSS, JavaScript 필요 없이 개발하는 방법

파이썬 (Python) 애플리케이션의 공통적인 문제는 다른 사람들과 공유입니다. 대부분의 개발자들은 UI가 있는 웹 인터페이스를 이용하여 이 문제를 해결하죠. 하지만 대부분의 인터랙티브한 프론트엔드 컴포넌트는 자바스크립트 (JavaScript)를 이용하고 있습니다. 그러면 파이썬 개발자들은 HTML, CSS, 자바스크립트를 알거나 프론트엔드 개발자의 도움을 받아야 하죠.


Streamlit은 이런 문제를 해결하는 파이썬 라이브러리입니다. Streamlit을 이용하여 파이썬 개발자는 파이썬 기반의 다양한 인터랙티브한 컴포넌트를 구사하는 프론트엔드를 구현할 수 있습니다.


Streamlit's Official Site https://docs.streamlit.io/

개발된 애플리케이션은 파이썬이 구동될 수 있는 어떤 곳이라도 호스팅이 가능합니다. 게다가 파이썬기반의 Streamlit의 메소드나 클래스를 사용하여 컴포넌트를 제작하므로 HTML, JavaScript나 CSS를 알 필요도 없습니다.


이 포스팅에서는 Streamlit 사용법을 간단하게 알아보겠습니다.


간단한 Streamlit의 예제


Streamlit 프로그램은 선언적인 (declarative) 스타일 기반입니다. 객체들은 코드에서 선언되는 순서로 보여지게 됩니다. 컴포넌트와의 인터랙션이 행해지면 다시 처음의 코드부터 실행이되므로 페이지가 리로드됩니다.


아래는 Streamlit 앱의 간단한 예제 코드입니다:



위의 코드 블럭은 다음과 같은 방식으로 실행이 됩니다.


  1. Take input from the user라는 타이틀이 웹페이지 보임

  2. Say something: 이라는 라벨을 가진 텍스트 입력 박스가 그 아래에 나타남

  3. 유저가 2번의 텍스트 박스에 입력을 하고 Enter 키를 누르면, 텍스트 박스 아래에 You said: 이라는 라벨을 가진 텍스트에 입력된 값이 나타남


이 모든 HTML 위젯과 이들의 행동은 Streamlit에서 자동으로 관리하고, 게다가 유저 입력 값과 같은 앱의 상태들도 Streamlit에서 관리를 하게됩니다.


이밖에도 LaTeX-formatted text, Bokeh charts, 카메라 인풋등 더 많은 HTML 컴포넌트가 Streamlit에 존재합니다.


좀 더 복잡한 Streamlit 예제


복잡한 Streamlit 애플리케이션을 개발하려면 Streamlit의 예제 문서를 참조하시면 됩니다. 이 예제는 미국 맨해튼에서 Uber 택시의 승하차 데이터를 로드하고 시간별로 그룹화 합니다. 그 다음에는 시간을 차트로 시각화를 하고 장소는 인터랙티브한 맵으로 표시합니다.


앱 전체의 코드는 약 30개의 라인으로 이루어 져 있으므로 파일로 복사 붙여넣어 편리하게 Streamlit의 다양한 기능을 잘 보여줄 수 있습니다.


Streamlit 앱의 데이터


Streamlit은 다양한 데이터 소스를 이용할 수 있게 하기 위해 네이티브 데이터 기능들이 많이 존재합니다. 데이터를 로드하고 사용할 시에는 메인으로 dataframe을 이용합니다.


기존의 다른 파이썬 앱에서와 같이 Streamlit에서도 여러 종류의 소스에서 데이터를 로드 할 수 있습니다. 예를 들면, 위의 예제에서는 Pandas를 사용하여 원격 URL 주소에서 CSV를 로드하고 dataframe으로 변경합니다. 편리한 기능이지만 원격 URL 주소에서 매번 데이터를 로드하여 dataframe으로 변경하는 프로세스는 시간이 걸리는 일이죠. 게다가 Streamlit의 앱은 유저가 앱과 인터랙트 할 때마다 매번 로드를 다시 하므로 UX에 좋은 영향을 주지 않습니다.


이런 이유로 Streamlit은 load_data() 함수에 @st.cache_data라는 데코레이터를 제공합니다. 이 데코레이터는 앱의 재로드시에 항상 데이터를 캐시하고 처음에만 로드가 됩니다.


Streamlit 앱의 상태 관리


Streamlit의 디자인은 유저 인터랙션 후 항상 앱의 재로드가 되므로 상태 관리가 당연히 존재합니다. 처음의 예제와 같이 텍스트 박스의 값과 같이 하나의 컴포넌트의 상태를 관리도 하지만 앱 전체의 상태 관리를 위해서는 session_state라는 빌트인 객체를 이용합니다.


streamlit.session_state는 세션에 지속되는 key-value 스토어 (dictionary)입니다. Streamlit 앱이 처음 시작이되면 이 스토어는 빈값으로 시작하므로 액세스 시에는 키의 존재여부를 항상 체크해야 하죠.



session_state의 데이터는 Streamlit 서버가 애플리케이션을 구동하고 있는 동안만 지속이됩니다. 서버가 중지되면 데이터는 없어지게 됩니다. 지속적으로 데이터를 유지하려면 데이터베이스나 in-memory 캐시인 Redis같은 방법을 사용해야합니다.


Streamlit 앱의 데이터 위젯


Streamlit에는 위 예제와 같이 간단한 텍스트 인풋이나 HTML 컨트롤 부터 맵, 차트, 오디오/비디오 재생, 또는 (LLM 인풋용의) 챗박스등도 존재합니다


데이터의 시각화나 인터랙티브 환경용의 컨트롤들은 다양하게 존재합니다. 예를 들면, Streamlit의 웹 위젯으로 dataframe을 소스로 이용하여 간단하게 테이블로 시각화 해주기도 합니다.


아주 다양하고 많은 데이터 위젯이 Streamlit에 기본 제공 되어있습니다. 게다가 유저 커뮤니티도 활발하여 더 많은 라이브러리들이 존재합니다. 이런 라이브러리는 pip install로 쉽게 설치가 가능하죠.


Streamlit 앱의 배포


Streamlit 앱은 파이썬 기반이므로 파이썬의 배포과정과 동일합니다. 가장 쉬운 방법은 머신에서 앱을 구동시키고 사용하는 port를 열어주면 됩니다.


더 실제적인 배포 방법은 Docker, Kubernetes 또는 여러가지 클라우드 서비스를 이용하는 것입니다. AWS와 Microsoft Azure의 Snowflake 유저들은 Streamlit 앱을 Snowflake의 데이터 스토어에 배포를 할 수 있습니다. 게다가 Streamlit에서는 Streamlit 앱을 배포할 수 있는 커뮤니티 클라우드 호스팅 서비스도 제공하고 있습니다.


참고:


Comments


pngegg (11)_result.webp

<Raank:랑크 /> 구독 하기 : Subscribe

감사합니다! : Thanks for submitting!

bottom of page