Organizr과 Theme.Park 결합을 통한 일관된 홈 미디어 인터페이스 구성

Theme.Park는 50개 이상의 셀프호스팅 앱에 적용 가능한 테마를 제공하는 오픈소스 프로젝트이며, Organizr는 다양한 미디어 서비스를 하나의 대시보드에서 관리할 수 있게 해주는 도구입니다. 이 두 시스템을 통합하면 단순히 기능적인 수준을 넘어, 시각적으로 조화롭고 사용자 친화적인 홈 미디어 환경을 구축할 수 있습니다.

통합의 장점

디자인 일관성 유지: Plex, Sonarr, Radarr 등 다양한 애플리케이션이 동일한 시각적 언어를 공유
사용자 정의 자유도 향상: 색상, 투명도, 레이아웃 등을 세밀하게 조정 가능
직관적인 UX: 복잡한 설정 없이도 원클릭으로 서비스 접근 가능
확장성 보장: 새 앱 추가 시에도 기존 테마 스타일을 쉽게 적용

기초 설정: 시작 전 준비사항

통합을 시작하기 전 다음 항목을 확인하세요:

Organizr v2 이상이 웹 서버(Nginx, Apache 등) 위에서 정상 작동 중인지 확인
Theme.Park 저장소를 로컬 또는 호스팅 환경에 복제:
```
git clone https://gitcode.com/gh_mirrors/th/theme.park
```
theme.park 디렉토리가 웹 경로(`/css/addons/`)로 접근 가능하도록 설정

테마 적용 절차

1단계: 테마 파일 배치

Organizr의 테마 폴더에 원하는 스킨을 복사합니다. 예를 들어 'frost' 테마를 사용할 경우:

cp -r theme.park/css/addons/organizr/frost /var/www/organizr/themes/

2단계: CSS 임포트 설정

Organizr 관리자 패널에서 "설정 → 외형 → 사용자 정의 CSS" 섹션에 다음 코드를 삽입:

@import "/css/addons/organizr/frost/base.css";
@import "/css/addons/organizr/frost/layout.css";

3단계: 커스텀 변수 정의

CSS 내부 또는 별도의 사용자 스타일 시트에서 전역 변수를 재정의하여 맞춤 디자인 구현:

:root {
    --bg-primary: #0d1117;
    --text-light: #e6edf3;
    --accent-gradient: linear-gradient(135deg, #268bd2, #2aa198);
    --card-opacity: 0.85;
    --blur-strength: 12px;
}

고급 설정 팁

유리 효과(Transparency & Blur) 조정

배경 투명도와 백드롭 필터를 조절해 현대적인 비주얼 효과를 구현:

.panel, .header {
    background-color: rgba(13, 17, 23, var(--card-opacity));
    backdrop-filter: blur(var(--blur-strength)) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

모바일 최적화

작은 화면에서도 깔끔한 표현을 위해 미디어 쿼리 활용:

@media (max-width: 768px) {
    .sidebar { display: none; }
    .main-content { width: 100%; margin: 0; }
    body { font-size: 14px; }
}

다른 앱과의 테마 연동

Theme.Park는 Organizr 외에도 다음과 같은 앱과의 테마 호환성을 제공합니다:

Plex – 다크 모드 및 간결한 인터페이스
Jellyfin – 반투명 컨트롤 바
Lidarr/Sonarr – 통합된 그리드 레이아웃

이를 통해 전체 미디어 생태계가 동일한 시각 체계를 따르도록 구성할 수 있습니다.

문제 해결 가이드

CSS가 반영되지 않을 경우

브라우저 개발자 도구(F12)로 네트워크 탭에서 404 에러 여부 확인
서버의 파일 권한이 웹 프로세스에 의해 읽힐 수 있도록 설정 (예: 644)
Organizr 캐시 비우기 옵션 실행

배경 이미지 교체 방법

기본 배경 대신 사용자 지정 이미지를 적용하려면:

--bg-primary-image: url("/images/custom-bg.jpg") fixed;

이미지는 `/var/www/organizr/images/`와 같은 공개 경로에 위치해야 합니다.

모바일에서 블러 효과 활성화

성능 문제로 기본 비활성화된 블러를 강제로 적용하려면:

@media (max-width: 768px) {
    .panel {
        backdrop-filter: blur(8px) !important;
    }
}

단, 저사양 기기에서는 성능 저하가 발생할 수 있음에 유의.

결론

Organizr와 Theme.Park의 조합은 단순한 테마 적용을 넘어서, 전체 셀프호스팅 미디어 환경의 시각적 통합성을 확보하는 핵심 솔루션입니다. 초기 설정 후에는 새로운 서비스를 추가하더라도 일관된 UI를 유지할 수 있어 장기적인 유지보수 부담을 크게 줄일 수 있습니다. 사용자의 취향에 따라 차분한 다크 테마부터 다채로운 그라데이션까지 자유롭게 실험해 보세요.

태그: Organizr Theme.Park self-hosting CSS customization media server

5월 24일 05:56에 게시됨

괴물 클럽

Organizr과 Theme.Park 결합을 통한 일관된 홈 미디어 인터페이스 구성