페이지 설정·테마와 비밀값

5부의 마지막이다냥! 배포 직전에 챙겨야 할 것 세 가지를 배운다냥 — 앱 이름과 아이콘 정하기, 넓게 보기, 그리고 비밀번호를 안전하게 숨기기 라냥. 특히 마지막은 정말 중요하니 꼭 집중하자냥!

오늘의 학습 목표

st.set_page_config 로 앱 이름·아이콘·넓이를 정한다.
테마로 앱 색을 바꾸는 법을 안다.
st.secrets 로 비밀번호·API 키를 안전하게 숨긴다.

실습 준비필요한 패키지와 버전

streamlit1.40 이상파이썬 코드로 웹 화면 만들기

설치하기 — 터미널에 그대로 붙여넣기

pip install "streamlit>=1.40"

설치 확인 — 버전 번호가 찍히면 성공

python -c "import streamlit; print(streamlit.__version__)"

위 버전은 최소 기준이라, 더 높은 버전이 깔려 있으면 그대로 써도 된다냥. 버전이 안 찍히고 에러가 나면 설치가 안 된 거라 설치 명령을 다시 실행해보자냥.

1단계 · 앱의 첫인상 — set_page_config

st.set_page_config 는 브라우저 탭에 뜨는 앱 이름과 아이콘, 그리고 화면을 넓게 쓸지를 정한다냥. 앱의 첫인상을 결정하는 설정이라냥.

import streamlit as st

st.set_page_config(
    page_title="코딩냥이의 가게",
    page_icon="🐱",
    layout="wide",
)

st.title("어서 오라냥")

맨 위, 딱 한 번이라냥

st.set_page_config 는 파일 맨 위에, 다른 st.무엇 보다 먼저 딱 한 번만 불러야 한다냥. 순서가 틀리면 에러가 난다냥! layout="wide" 를 주면 화면을 양옆까지 넓게 쓴다냥.

참고로 page_icon 자리에는 위 코드처럼 이모지를 넣을 수 있다냥. 그러면 브라우저 탭에 그 이모지가 작은 아이콘으로 나온다냥. 앱을 알아보기 쉽게 해준다냥!

2단계 · 테마로 색 바꾸기

앱의 배경색·글자색 같은 테마는 .streamlit/config.toml 이라는 설정 파일로 바꾼다냥. 앱 폴더 안에 .streamlit 폴더를 만들고 그 안에 넣는다냥.

# .streamlit/config.toml

[theme]
primaryColor = "#F59E0B"
backgroundColor = "#FFFFFF"
textColor = "#1F2937"

색은 # 으로 시작하는 코드로 준다냥

#F59E0B 같은 걸 색 코드(헥스 코드)라냥. primaryColor 는 버튼·강조색, backgroundColor 는 배경색이라냥. 설정 파일을 고치고 앱을 새로 실행하면 색이 바뀐다냥!

3단계 · 비밀번호 숨기기 — st.secrets

이게 오늘의 핵심이다냥! API 키나 비밀번호를 코드에 그대로 적으면 아주 위험하다냥. 코드를 인터넷에 올리는 순간 남들이 다 볼 수 있기 때문이라냥. 그래서 비밀값은 따로 숨겨두고 꺼내 쓴다냥.

이렇게 하면 안 된다냥

api_key = "sk-1234-진짜-비밀키"     # 절대 이렇게 코드에 박으면 안 된다냥!

이 코드를 그대로 인터넷(깃허브 등)에 올리면 비밀키가 통째로 노출된다냥. 남이 내 키로 돈을 쓸 수도 있다냥. 정말 조심해야 한다냥!

대신 .streamlit/secrets.toml 이라는 파일에 비밀값을 적어두고, 코드에서는 st.secrets 로 꺼내 쓴다냥. 이 파일은 인터넷에 안 올린다냥!

# .streamlit/secrets.toml  (이 파일은 절대 공개 안 한다냥)

api_key = "sk-1234-진짜-비밀키"

import streamlit as st

# 코드에는 비밀값이 안 보인다냥
api_key = st.secrets["api_key"]

st.write("키를 안전하게 불러왔다냥")

.gitignore 에 넣어두자냥

secrets.toml 은 .gitignore 라는 목록에 넣어서, 실수로도 인터넷에 안 올라가게 막는다냥. 32강 배포 때 이 비밀값을 배포 사이트 설정에 따로 넣는 법을 배운다냥!

복습 퀴즈

브라우저 탭의 앱 이름과 아이콘, 넓이를 정하는 함수는?

API 키나 비밀번호를 코드에 그대로 적으면 안 되는 이유는?

비밀값을 안전하게 숨겨두고 꺼내 쓰는 방법은?

여기까지가 5부 · 진짜 앱처럼 이다냥! 이제 앱을 다듬는 기술까지 다 배웠다냥. 드디어 마지막 6부에서는 지금까지 배운 걸 전부 모아 나만의 사이트를 처음부터 만들고, 인터넷에 배포 까지 한다냥. 결승선이 보인다냥!