Z-Image Generator의 사용자 정의 UI 및 로고 교체 가이드

AI 이미지 생성 도구를 개인화하고 싶으신가요? 본 문서에서는 LiuJuan Z-Image Generator라는 강력한 현지 이미지 생성 도구를 기본 Streamlit 인터페이스에서 완전히 새로운 모습으로 변형하는 방법을 안내합니다. 특히 사용자 정의 UI 테마 색상과 로고 교체에 초점을 맞춰, 개발자는 프론트엔드 전문 지식 없이도 자신만의 디자인을 구현할 수 있습니다.

1. 환경 설정 및 프로젝트 개요

1.1 기본 환경 확인

Z-Image Generator를 성공적으로 실행했는지 먼저 확인하세요:

의존성 설치: 프로젝트 폴더에서 pip install -r requirements.txt 명령어 실행.
모델 준비: models/ 폴더에 필요한 모델 파일(Safetensors 포함) 배치.
애플리케이션 시작: streamlit run app.py와 같은 명령어 실행.

브라우저에서 애플리케이션이 정상 작동하면 환경 설정은 완료된 것입니다.

1.2 프로젝트 구조 이해

프로젝트 폴더 구조는 일반적으로 다음과 같습니다:

liujuan-z-image-generator/
├── main_app.py           # 주 프로그램 파일
├── helper_functions/      # 유틸리티 함수들
├── models/                # 모델 관련 파일
├── resources/             # 정적 자원 폴더 (중요!)
│   ├── logo.png           # 현재 로고 파일
│   └── ...               # 기타 이미지나 아이콘들
└── setup.txt              # Python 패키지 목록

이번 작업은 주로 **main_app.py**와 resources/ 폴더를 다룹니다.

2. 단계 1: 개인 로고 적용하기

2.1 새 로고 준비

새로운 로고를 준비하세요:

파일 형식: PNG 추천 (투명 배경 지원).
크기: 200x200px ~ 400x400px 사이로 제작.
배경: 투명하거나 테마 색상과 조화되는 배경을 사용.

2.2 로고 교체

현재 로고(resources/logo.png)를 대체하거나 코드에서 경로 수정:

# 로고 표시 예제
import streamlit as st

st.sidebar.image("resources/my_custom_logo.png", width=180)

위 코드에서 "my_custom_logo.png"를 실제 파일 이름으로 바꾸세요.

2.3 변경 사항 확인

변경 후 브라우저 새로고침 시 새 로고가 나타납니다.

3. 단계 2: UI 테마 색상 설정

Streamlit의 .streamlit/config.toml 파일을 통해 전체 테마를 커스터마이즈할 수 있습니다.

3.1 테마 구성 파일 작성

프로젝트 루트에 .streamlit 폴더 생성 후 내부에 config.toml 파일 추가:

예시 테마 설정:

[theme]
primaryColor = "#FF5733"  # 메인 색상
backgroundColor = "#1E1E1E"  # 배경 색상
secondaryBackgroundColor = "#3C3C3C"  # 보조 배경색
textColor = "#FFFFFF"       # 글자 색상
font = "sans serif"

3.2 테마 적용

Streamlit 서비스 재시작 후 테마가 적용됩니다.

터미널에서 Ctrl + C로 현재 서비스 중지.
다시 실행: streamlit run main_app.py.

4. 고급 설정

4.1 특정 요소 스타일링

특정 버튼이나 컴포넌트의 스타일을 조정하려면 CSS를 활용:

st.markdown("""
<style>
.custom-button {
    background-color: #4CAF50;
    color: white;
    border-radius: 8px;
}
</style>
""", unsafe_allow_html=True)

st.button("실행", key="custom_button", help="클릭하세요.", on_click=None, args=None, kwargs=None, type="primary", disabled=False, use_container_width=False, class_name="custom-button")

4.2 문제 해결

테마가 적용되지 않음: config.toml 경로 확인 및 Streamlit 재시작.
로고 크기 불균일: width 파라미터 조정.

5. 결론

이제 Z-Image Generator를 개인화한 도구로 변형했습니다. 이를 통해 더욱 효율적인 작업 환경을 만들 수 있습니다.

태그: Streamlit python AI

5월 20일 20:54에 게시됨

괴물 클럽

Z-Image Generator의 사용자 정의 UI 및 로고 교체 가이드