[Streamlit] 2. CSS/폰트 적용하기

저번 멀티페이지 설정 이후 이런 사이드바가 생성되었다.

 

 

 

기능엔 충실하지만 웹서비스 사이드바 버튼으로 쓰기는 UI적으로 부족해 보였다.

특히, 한글 페이지의 경우 폰트가 깔끔하지 않은 느낌을 많이 주었다.

그래서 우선 폰트를 변경해 주고자 한다.

 

 

1. 폰트

스트림릿 자체에서 지원하는 폰트는 이렇게 세 개가 끝이다.

즉, 스트림릿에서 이외의 폰트를 사용하기 위해서는 웹폰트를 사용해야 한다.

 

나는 깔끔하고 무난한 프리텐다드 체를 반영하기로 했다.

내가 반영한 버전은 1.3.8 버전이지만 현재 1.3.9 버전까지 나와 있다.

자세한 사항은 프리텐다드 깃허브를 참고하면 된다.

 

GitHub - orioncactus/pretendard: 어느 플랫폼에서든 사용할 수 있는 system-ui 대체 글꼴 | A system-ui alternativ

 

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");

 

이런 식으로 웹폰트-CSS 코드를 가져오면 된다.

 

다음으로 스트림릿 웹페이지에 적용하는 과정을 거친다.

여러 페이지에 적용하기 위해 모듈화 과정을 거쳤다.

 

[전체 코드]

import streamlit as st

def load_custom_font(font_family='Pretendard'):
    st.markdown(
        f"""
        <style>
        @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");
        
        /* Use the custom font for specific tags */
        html, body, h1, h2, h3, h4, h5, h6, p, [class*="css"] {{
            font-family: '{font_family}';
        }}
        </style>
        """,
        unsafe_allow_html=True
    )

 

폰트 로더를 각 페이지에서 임포트하고 로드해 주면 폰트가 바뀐다.

 

 

---

2. CSS

 

CSS 적용도 폰트 적용 방법과 비슷하다.

기본적으로는 st.markdown 안에 style을 정의하고 unsafe_allow_html=True을 적용해 주면 된다.

CSS 로더 역시 재사용을 위해 모듈화를 진행해 주도록 한다.

 

[전체 코드]

import streamlit as st

def load_css(file_path):
    try:
        with open(file_path, "r") as f:
            css_content = f"<style>{f.read()}</style>"
            st.markdown(css_content, unsafe_allow_html=True)
    except FileNotFoundError:
        st.error("CSS 파일이 존재하지 않습니다. 경로를 확인하세요.")

 

나는 CSS를 따로 파일로 관리했기 때문에 경로를 지정하고 읽어오는 방식으로 짰다.

참고로 CSS 파일 예시는 아래와 같다.

내가 프론트엔드 개발자도 아니니 작동만 되면 장땡이라는 생각으로...

 

    .st-emotion-cache-lrlib {
        margin: 2px;
    }
    ul[data-testid="stSidebarNavItems"] li a {
        line-height: 4;
        background-color: rgb(250, 250, 250);
    }

 

마찬가지로 CSS 로더 역시 각 페이지에서 로드해주면 된다.

 

 

그럼 이렇게 사이드바가 완성되었다. 야호!