[Streamlit] html, css, javascript 없이 Python으로 웹 구현하기 1

아직 배포나 상용화 단계를 가보지 못한 나는 웹 페이지 만들기를 도전해보려고 한다. 다른 언어나 프레임워크를 다룰 줄 모르기 때문에 내 능력 선에서 가능한 방법을 찾았고, 그게 바로 Streamlit 이다. Streamlit은 보통 데이터에 대한 정보를 다루기 좋게 설계되어 있다. 어떻게 시작하는지, 어떤 데이터를 사용하는지, 어떻게 웹 페이지로 만드는지 살펴보도록 하자. 이 글은 나의 최애 생활코딩님의 유튜브 영상을 참고로 쓰여졌다.

vscode 기본 세팅과 github, Streamlit 계정을 미리 준비해두면 좋다.

1. 작업 환경에 Streamlit 설치하기

나는 Visual Studio Code를 이용하므로 프로그램에 들어가 Conda에 적당한 가상환경을 선택해 터미널을 열고 Streamlit을 설치했다. 보통 머신러닝 작업을 많이 했던 machine 환경에서 진행하기로 결정했다. Python이라는 Extension을 깔면 가상환경을 다루기 쉽다. 

홈페이지에 나와있는 코드를 터미널에 작성하면 아래와 같은 페이지가 팝업된다. 좌측을 보면 Streamlit이 어떤 식으로 돌아가는지 알 수 있게 예시 데이터들이 있다. 웹 페이지에 어떻게 데이터가 출력되는지와 이를 작성하기 위한 예시 코드가 있다.

 

2. Visual Studio Code에서 파일 생성 및 코드 작성 후 Streamlit 실행하기

이제 vscode에서 데이터를 입력하고 Streamlit에서 어떻게 작동하는지 확인해보자. 유튜브 시청자 수를 예시로 들어 임의의 데이터를 만들어볼거다. 우선은 app.py라는 파일을 생성한 뒤, Streamlit 라이브러리를 불러오고 view 라는 변수에 100, 150, 30이라는 값을 넣어보자.

위 코드까지 작성하고 저장한 뒤에 터미널에서 streamlit run app.py를 입력해주면 ...

이런 웹 사이트가 팝업이 될거다. 그런데 잘 보면 view가 출력되어 있다. 이제 이 변수를 시리즈 형태로 변환한 뒤 출력해보자.

그 전에 웹 사이트에서 우측 상단에 목록을 클릭해 세팅을 들어가 'Run on save'를 체크해주자. 저장하면 자동으로 새로고침 된다.

다시 vscode로 돌아가 pandas 라이브러리를 불러와서 시리즈 형태로 변환 작업을 해주자. 변수는 시리즈 형태니까 sview라는 이름으로 새로 받아주도록 하자. 그리고 파일을 저장한 뒤 웹 사이트로 돌아가보자.

sview는 데이터프레임의 형태로 출력되어 있다. 이제 마지막 단계다. view 데이터를 바 차트로 그려보자. 바 차트로 그리기 위해서는 Streamlit 라이브러리에 .bar_chart() 메소드를 이용한다.

그리고 나서 웹 사이트로 돌아가보면 바 그래프가 출력된다.

여기까지는 웹 사이트를 만든 것은 아니다. 단순히 로컬 상에서 웹 사이트의 형태로서 출력을 한 것 뿐이다. 그렇다면 전 세계 누구나 볼 수 있는 웹 사이트를 만드려면 어떻게 해야될까?

다음 포스트에서는 github와 연동하여 '진짜' 웹 사이트를 만드는 과정을 살펴보자.