[파이썬] Streamlit 웹 개발 - 2: DataFrame

이전 내용

[파이썬] Streamlit 으로 웹페이지 만들기 - 1

---

Streamlit으로
DataFrame 출력하기

 

이번엔 웹페이지에 데이터프레임을 띄워보는 작업을 해본다. 이를 위해 pandas 와 같은 라이브러리를 import 한다.

st.dataframe 은 pandas로 생성한 데이터프레임을 띄울 수 있다.

'user_container_width=' 매개변수는 데이터프레임의 너비를 컨테이너 크기에 맞게 조절할 수 있는 기능으로 True 또는 False로 설정할 수 있다.

import streamlit as st
import numpy as np
import pandas as pd

st.title("DataFrame 튜토리얼")

# DataFrame 생성
df = pd.DataFrame({
    'first column': [1, 2, 3, 4],
    'second column': [10, 20, 30, 40],
})

st.dataframe(df)
st.write('#### user_container_width=True 기능은 DataFrame을 컨테이너 크기에 확장할 때 사용(True/False)')
st.dataframe(df, use_container_width=True)

 

또한, dataframe API가 좋은 이유는 인터랙티브해서 사용자가 테이블을 정렬 또는 필터링할 수 있고, csv 로 다운로드 할 수 있는 기능을 자동으로 제공하기 때문이다.

 

 

◆ table

: dataframe과 달리 인터랙티브한 기능을 제공하지 않는다. (표를 표시하는 기능만 제공)

# static 테이블
# dataframe 과는 달리 interactive한 기능을 제공하지 않음
st.title("Table")
st.table(df)

---

Metric
: 주요 지표나 통계 표시하기

 

Metric은 주요 지표나 통계를 강조하여 표시하기 위한 함수이며, 이를 통해 특정 지표의 현재 값과 변동치를 보여줄 수 있다.

 

[주요 매개변수]

• label (str):
  메트릭의 이름이나 설명 지정. 화면에 표시 된다.
• value (str or int or float):
  현재 메트릭의 값을 나타낸다. 숫자 문자열, 정수 또는 부동 소수점 수를 사용할 수 있다.
• delta (str or int or float, optional):
  이전 값과의 차이를 나타내며, 값이 변화한 양을 표시한다. 양수인지 음수인지에 따라 색상(초록색 또는 빨간색)으로 강조 표시된다.
• delta_color (str, optional):
  delta의 색상을 정의하는 선택적 매개변수다.
  - "normal": 색상 없음
  - "inverse": 반전 색상
  - "green": 양수일 때 초록색
  - "red": 음수일 때 빨간색

# Metric : Value를 중심으로 위아래 표시
st.title("Metric")
st.metric(label="온도", value='10℃', delta='1.2℃')
st.metric(label='삼성전자', value='61,000원', delta='-1,200원')

◆ columns: 가로로 표시되게 하기

metric은 기본적으로 세로로 출력되는데, 가로로 출력되게 하기 위해서 columns를 같이 사용할 수 있다.

# layout: 칼럼으로 영역 나눠 표시
st.title("Columns & Metric")
col1, col2, col3 = st.columns(3)
col1.metric(label="달러 USD", value="1,410 원", delta='12.00 원')
col2.metric(label="일본 JPY", value="928.0 원", delta="-7.44 원")
col3.metric(label="유럽연합 EUR", value="1,335.82 원", delta="11.44 원")

 

* 너비 지정하기

columns에 각기 다른 값을 부여하여 너비를 지정해줄 수도 있다.

# 너비 지정하기
st.write("#### 칼럼 영역의 너비 지정")
col1, col2, col3 = st.columns([1, 5, 1])
with col1:
    st.write("**왼쪽**")
    st.write("안녕하세요, 왼쪽 영역입니다.")
with col2:
    st.write("**가운데**")
    st.write("안녕하세요, 가운데 영역입니다.")
with col3:
    st.write("**오른쪽**")
    st.write("안녕하세요, 오른쪽 영역입니다.")

st.write("다시 전체 영역으로 내용이 표시됩니다.")

 

---

탭 생성하기
: tabs

 

한 페이지에서 탭을 사용해 화면을 분할할 수 있다.

# 탭 생성하기
tab1, tab2 = st.tabs(["1번탭", "2번탭"])

만약, 탭 내에 내용을 넣으려면 with: 를 사용하면 된다.

tab1에는 앞서 작성한 모든 내용을 넣어주고, tab2에는 아무것도 보여줄 게 없다는 문구를 넣어본다.

# 탭 생성하기
tab1, tab2 = st.tabs(["1번탭", "2번탭"])

with tab1:
	# 앞서 생성한 모든 코드 넣기 (들여쓰기 주의)
   
with tab2:
	st.write("Nothing to show")

 

1번탭에는 앞서 작성했던 모든 코드들이 들어갔고,

 

2번 탭에는 단 한 줄의 문장만 표시된다.

---

Side Bar: 왼쪽에 사이드 영역 할당

 

sidebar 함수를 사용하여 왼쪽의 영역을 사용할 수 있다.

# 사이드바: 화면 왼쪽의 영역을 나누어 사용
with st.sidebar:
    st.write('이건 사이드바')
    st.write("닫을 수 도 있습니다")

st.write("이 영역은 메인 페이지입니다.")

 

 

 

---

버튼 위젯

 

1. 버튼 클릭: 클릭을 하면 값이 바뀌도록 설정

# 1. 버튼 위젯
# 버튼 클릭
my_button = st.button("버튼을 클릭해 보세요")
st.write(my_button)

if my_button:
    st.write(":blue[버튼]이 눌렸습니다 :sparkles:")

▶ 버튼이 눌리면 화면이 바뀐다.

 

2. 링크 버튼: 버튼을 클릭하면 특정 url로 이동

# 링크 버튼
url = 'https://docs.streamlit.io/'
# 링크버튼 매개변수: 버튼 이름, url
link_button = st.link_button("Streamlit", url)

 

버튼 클릭 시, Streamlit Doc 사이트로 이동한다.

 

3. 파일 업로드 버튼: 파일을 업로드할 수 있다.

# 파일 업로드 버튼
uploaded_file = st.file_uploader("Choose a CSV file")
if uploaded_file is not None:
    df = pd.read_csv(uploaded_file)
    st.write(df)
    st.write(f"Uploaded file name: {uploaded_file.name}")
    st.write(f"File Size: {uploaded_file.size} bytes")

uploaded_file= st.file_uploader("Choose a TEXT File")
if uploaded_file is not None:
    st.write(f"Uploaded file name: {uploaded_file.name}")
    file_content = uploaded_file.read().decode("utf-8")
    st.write(file_content)

 

첫번째 버튼은 csv 파일을 업로드할 수 있고, 이를 업로드하면 파일명과 파일 사이즈가 표시된다.

두번째 버튼은 txt 파일을 업로드할 수 있고, 이를 업로드하면 파일명과 파일 내의 내용이 표시된다.

 

4. 다운로드 파일 버튼 만들기 - csv

# 다운로드 버튼 만들기
# 샘플 데이터 생성
dataframe = pd.DataFrame({
    'first column': [1, 2, 3, 4],
    'second column': [10, 20, 30, 40],    
})

st.download_button(
    label="CSV로 다운로드",
    data=dataframe.to_csv(),
    file_name="sample.csv",
    mime="text/csv"
)

버튼을 누르면 sample.csv 라는 이름으로 파일이 다운로드 된다.

★ mime
: 서버가 클라이언트에게 전송하는 컨텐츠의 종류를 알려주는 메타데이터
다양한 mime 타입을 보려면 아래 사이트 참고

https://developer.mozilla.org/ko/docs/Web/HTTP/Guides/MIME_types/Common_types

 

5. 다운로드 파일 버튼 만들기 - txt

역시 텍스트 파일을 생성 후, 다운로드 되게 하는 버튼을 생성할 수 있다.

# text 파일 다운로드
data = """ 이것은 다운로드할 데이터입니다.
여러 줄의 예시 텍스트를 사용하여 다운로드 기능을 테스트합니다.
이 데이터는 Streamlit에서 다운로드 버튼을 누르면 저장됩니다.
예제 데이터를 다운로드하여 기능을 확인해 보세요.
"""

download_button = st.download_button(
    "클릭하면 다운로드가 됩니다",
    data=data,
    file_name="result.txt",
    mime="text/plain"
)

---

선택형 위젯

 

1. 체크 박스

checkbox 함수를 사용해 체크 박스 위젯을 만들 수 있다.

조건문을 사용해 버튼에 값이 입력될 경우 (True), 특정 문장을 출력하도록 설정할 수도 있다.

# 3. 선택형 위젯
# 3-1. 체크 박스
agree = st.checkbox("동의 하시겠습니까?")

if agree:
    st.write("동의 해주셔서 감사합니다 :100:")

▶ 체크 박스가 생성되고, 체크하면 '동의해 주셔서 감사합니다 + 이모지' 가 출력된다.

 

2. 라디오 버튼

라디오 단추 또는 옵션 단추는 그래픽 사용자 인터페이스의 요소 가운데 하나로, 사용자가 미리 정의된 선택 사항의 모임 하나만 선택할 수 있게 한다. 

mbti = st.radio(
    "당신의 MBTI는 무엇입니까?",
    ['INFJ', 'ESTP', '선택지 없음'],
    index=1
)

마찬가지로 조건문을 추가하며 입력 받은 값에 다른 값이 출력되도록 설정할 수 있다.

if mbti == "INFJ":
    st.write("당신은 :blue[옹호자 유형] 이시네요.")
elif mbti == "ESTP":
    st.write("당신은 :red[사업가 유형] 이시네요.")
else:
    st.write("당신에 대해 :green[알고 싶어요]:grey_exclamation:")

 

3. 셀렉트 박스 

위의 mbti에서 st.selection으로 바꾸면 셀렉트 박스를 생성할 수 있다.

mbti = st.selectbox(
    "당신의 MBTI는 무엇입니까?",
    ['INFJ', 'ESTP', '선택지 없음'],
    index=1
)

if mbti == "INFJ":
    st.write("당신은 :blue[옹호자 유형] 이시네요.")
elif mbti == "ESTP":
    st.write("당신은 :red[사업가 유형] 이시네요.")
else:
    st.write("당신에 대해 :green[알고 싶어요]:grey_exclamation:")

 

4. 다중 선택 버튼

multiselect 함수를 사용하면 다중 선택이 가능한 셀렉트 버튼을 생성한다.

options = st.multiselect(
    "당신이 좋아하는 과일은 무엇인가요? (중복 가능)",
    ['망고', '오렌지', '사과', '바나나'],
    ['바나나'] # placeholder
)

st.write(f":green{options}을(룰) 골랐습니다.")

 

5. 슬라이더

slider 함수를 사용하여 슬라이더를 생성할 수 있다.

values = st.slider(
    "범위의 값을 다음과 같이 지정할 수 있어요 :sparkles:",
    0.0, 100.0, (25.0, 75.0) # 최소, 최대 (placeholders)
)
st.write(f'선택 범위: :blue[{values}]')

날짜도 선택할 수 있다.

# 날짜 선택
start_time = st.slider(
    "약속을 언제 잡을까요?",
    min_value=dt(2025, 3, 1, 0, 0),
    max_value=dt(2025, 3, 20, 23, 0),
    value=dt(2025, 3, 25, 12, 0),
    step=datetime.timedelta(hours=1),
    format="MM/DD/YY - HH:mm"
)
st.write(f"선택한 약속 시간: **:red[{start_time}]**")

---

입력형 위젯

 

text_input은 텍스트를 입력받을 수 있는 함수,

number_input은 숫자를 입력받을 수 있는 함수이다.

# 4-1. 텍스트 입력
text_input = st.text_input(
    label="가고싶은 여행지가 있나요?",
    placeholder="여행지를 입력해 주세요"
)
st.write(f"당신이 선택한 여행지: **:blue[{text_input}]**")

# 4-2. 숫자 입력
number = st.number_input(
    label="나이를 입력해 주세요",
    min_value=10,
    max_value=100,
    value=30, # placeholder
    step=5
)
st.write(f"당신이 입력한 나이: **:grey[{number}]**")

---

[참고]

위키백과

---

다음 내용

[파이썬] [파이썬] Streamlit으로 웹 페이지 만들기 - 3