Open WebUI 사용자 정의 테마 구축: Docker를 이용한 CSS 커스터마이징 가이드

Open WebUI 테마 커스터마이징 가이드

이 콘텐츠는 Open WebUI의 내장 테마 기능이 없다는 점을 언급하며, Docker 이미지를 통해 사용자 정의 CSS 파일을 주입하여 UI를 쉽게 커스터마이징하는 방법을 안내합니다.

핵심 기술

• Docker 이미지 확장: 기존 Open WebUI Docker 이미지를 기반으로 사용자 정의 CSS 파일을 추가하는 Dockerfile을 작성합니다.
• CSS 변수 활용: 테마 색상을 --primary-text, --primary-yellow 등 CSS 변수로 정의하여 일관된 스타일 적용 및 쉬운 변경을 가능하게 합니다.
• CSS 선택자 활용: !important 지시어를 사용하여 Open WebUI의 기본 스타일을 오버라이드하는 구체적인 CSS 선택자를 활용합니다.

기술적 세부사항

• 필수 요구사항: Docker 설치, 기본 CSS 지식, 텍스트 편집기.
• Dockerfile 작성: FROM ghcr.io/open-webui/open-webui:git-49a928d와 같이 특정 버전 태그를 사용하여 이미지 안정성을 확보하고, COPY custom.css /app/build/static/custom.css 명령으로 CSS 파일을 이미지에 포함시킵니다.
• custom.css 예시: 파란색과 노란색 계열의 색상 변수를 정의하고, body, button, 특정 aria-label을 가진 요소 등에 적용하는 예시 코드를 제공합니다.
• CSS 선택자 찾기: 브라우저의 개발자 도구(Inspect Element)를 사용하여 스타일을 변경하려는 요소의 CSS 선택자를 파악하는 방법을 설명합니다.
• Docker 이미지 빌드: docker build -t my-custom-openwebui . 명령으로 사용자 정의 이미지를 빌드합니다.
• Docker 컨테이너 실행: docker run -d -p 3000:8080 -v open-webui:/app/backend/data --name open-webui-custom my-custom-openwebui 명령으로 테마가 적용된 컨테이너를 실행합니다.

개발 임팩트

• 개인화된 환경: Open WebUI를 사용자 또는 조직의 특정 요구사항에 맞는 시각적 환경으로 구축할 수 있습니다.
• 일관된 브랜딩: 기업 환경에서 브랜딩 가이드라인을 준수하는 UI를 적용할 수 있습니다.
• 향상된 UX: 가독성이나 사용 편의성을 개선하는 방향으로 UI를 직접 조정할 수 있습니다.

커뮤니티 반응

• GitHub 예제: 실제 작동하는 테마 구현을 위한 Open WebUI Theme GitHub 저장소를 참조하도록 안내합니다.

추천 팁

• CSS 변수 사용: 테마 변경을 용이하게 하기 위해 색상 등을 CSS 변수로 정의합니다.
• 철저한 테스트: 테마 적용 후 모든 UI 요소의 기능이 정상적으로 작동하는지 확인합니다.
• 구체적인 선택자 사용: Open WebUI의 스타일링 방식 때문에 매우 구체적인 선택자가 필요할 수 있습니다.
• 버전 관리: Dockerfile 및 custom.css 파일을 버전 관리 시스템에 저장합니다.
• 변경 사항 문서화: CSS 코드에 주석을 추가하여 변경 사항의 목적을 기록합니다.