본문으로 건너뛰기
TubePress — 무료, 자체 호스팅 & 지속 관리
디자인 및 테마

디자인 및 브랜딩

로고, 파비콘, 색상, 다크 모드, 배경, 그리고 카드와 시청 페이지에 대한 세밀한 제어 옵션을 다룹니다.

/admin/appearanceAppearance 화면은 코드 없이 모든 것을 제어할 수 있는 제어실입니다. 여기의 모든 것은 활성 테마의 스타일을 변경합니다 — 로고, 색상, 다크 모드, 레이아웃, 그리고 비디오 카드와 시청 페이지의 세부 정보까지 — 파일 하나도 건드리지 않고요. 변경 사항은 설정으로 저장되며 렌더링 시 테마에 의해 읽히므로 자유롭게 실험하고 언제든지 되돌릴 수 있습니다.

화면은 상단을 따라 하위 탭으로 구분됩니다. 이 페이지에서는 각 그룹을 안내합니다. 마크업 자체를 변경하려면 테마에서 처리합니다. 아래 값들은 $_ 접두사가 붙은 변수로 템플릿 코드에 노출되며, 테마 API 참조에 전체 문서가 있습니다.

브랜딩

Appearance → Branding을 열어 브랜드 정체성을 설정합니다. 라이트 및 다크 테마에 별도의 로고를 업로드할 수 있습니다 — 둘 다 비워 두면 사이트 이름이 일반 텍스트로 표시되며, 라이트 로고만 제공하면 다크 로고는 라이트 로고의 반전 버전으로 대체됩니다. 파비콘(정사각형, 최소 32×32px)이 브라우저 탭에 표시됩니다.

모든 브랜딩 파일은 /uploads/branding/ 아래에 저장됩니다. 사이트 배경 이미지도 지원되며, 표시 모드는 cover, contain 또는 repeat를 선택할 수 있습니다. 테마는 이를 $_siteBackground$_siteBackgroundMode로 읽습니다. 데스크톱(기본값 36px) 및 모바일(기본값 28px)의 로고 높이를 실시간 미리보기로 조정할 수도 있습니다.

투명한 PNG 또는 SVG를 사용하세요. 투명한 배경의 로고는 라이트 및 다크 헤더 모두에서 깔끔하게 표시됩니다. 각 파일은 5 MB 미만으로 유지하세요.

색상 & 다크 모드

Appearance → Colors 아래에서 두 가지 팔레트를 설정합니다 — 라이트 테마용과 다크 테마용 — 선택적 불투명도가 있는 색상 선택기를 사용하여. 각 재정의는 CSS 사용자 지정 속성으로 컴파일되어 $_colorOverrides <style> 블록으로 주입되므로 소수의 값이 전체 테마에 계단식으로 적용됩니다. 각 팔레트는 동일한 8가지 역할을 노출합니다:

기본
버튼, 링크 및 활성 상태의 강조 색상. 기본적으로 두 테마 모두에서 공유됩니다.
배경
페이지 배경.
표면
사이드바, 섹션 배경 및 입력 필드.
카드
비디오 카드, 댓글 및 콘텐츠 블록.
다크 배경
푸터, 오버레이 및 자리 표시자.
텍스트 / 보조 텍스트
본문 텍스트 및 조용한 메타, 링크, 자리 표시자 텍스트.
테두리
구분선 및 카드 윤곽선.

같은 화면에 다크 모드 컨트롤도 있습니다. 마스터 사용자 토글은 방문자가 헤더에서 라이트/다크 전환 스위치를 사용할 수 있는지 결정하며, 라이트 또는 다크기본값으로 방문자가 처음 보는 모드를 설정합니다. 사용자 토글을 끄면 사이트는 항상 선택한 기본 모드를 사용하며 사용하지 않는 팔레트는 회색으로 표시됩니다.

레이아웃

Appearance → Layout은 그리드 크기를 제어합니다. 핵심 옵션은 행당 비디오 수입니다 — 4, 5 또는 6(기본값 5)을 선택하며, 템플릿에 $_videosPerRow로 노출됩니다. 탭 섹션에서는 비디오, 카테고리, 포르노스타 및 채널의 페이지당 수와 기본 정렬을 설정할 수도 있으며, 사이트 치수 블록은 전체 최대 너비(기본값 1800px)와 페이지 패딩을 설정합니다.

트렌딩 정렬에는 CTR 플러그인이 필요합니다. 트렌딩 기본 정렬 옵션은 클릭률 순위를 활성화할 때까지 잠겨 있습니다. CTR 순위를 참조하세요.

비디오 카드 옵션

Appearance → Video Cards 아래에서 목록의 모든 썸네일을 세밀하게 조정할 수 있으며, 각 컨트롤을 변경할 때 업데이트되는 고정 실시간 미리보기가 제공됩니다.

옵션변수기능
재생 시간 배지 표시$_cardShowDuration썸네일 오른쪽 하단의 재생 시간 표시.
제목 표시$_cardShowTitle썸네일 아래의 비디오 제목.
제목 줄 수$_cardTitleLines제목을 1 또는 2줄로 제한합니다.
메타 왼쪽 / 오른쪽$_cardMetaLeft / $_cardMetaRight각 면에 표시할 내용 선택: views, likes, time(경과 시간) 또는 none.
그리드 간격$_cardGridGap카드 사이의 간격, 0–30px.
테두리 반경$_cardBorderRadius모서리 둥글기, 0–24px.
호버 줌$_cardThumbnailHover마우스를 올렸을 때 썸네일을 확대합니다.

이 옵션들은 아래의 시청 페이지 설정을 따릅니다. 시청 페이지에서 재생 시간이나 메타 값을 숨기면 해당 카드 옵션이 자동으로 비활성화되어 두 설정이 일관되게 유지됩니다.

시청 페이지 옵션

시청 페이지 하위 탭은 플레이어 주변에 표시될 내용을 결정합니다. 각 항목은 독립적인 토글이며, 데이터가 없는 섹션은 자동으로 숨겨집니다.

  • 비디오 정보조회수, 재생 시간, 게시 날짜, 좋아요 / 싫어요즐겨찾기 버튼.
  • 비디오 세부 정보출연자, 채널, 카테고리태그.
  • 댓글 — 사이트 전체에서 댓글 스레드를 켜거나 끕니다($_commentsEnabled). 댓글을 참조하세요.

같은 화면에서 플레이어(기본 화질, 재생 속도, 다운로드 버튼, 반복 재생 및 더블 클릭 전체 화면)와 사이드바의 관련 비디오 수도 설정합니다. 이는 테마 API$_watchShow* 변수에 매핑됩니다.

탐색 & 검색

메뉴 하위 탭은 헤더 탐색을 구성합니다. 검색 바를 켜거나 끄고($_menuSearch), 기본 제공 목적지 또는 직접 만든 사용자 지정 링크에서 메뉴를 구성합니다. 각 항목($_menuItems)에는 label, url, enabled 플래그 및 선택적 templates 목록이 있어 링크가 특정 페이지 유형에서만 표시될 수 있습니다. 두 개 이상의 언어를 게시하면 언어 전환기가 자동으로 나타납니다.

메뉴와 푸터에 연결되는 정적 페이지는 페이지 & 메뉴를 참조하세요.

다음 단계

여전히 막히셨나요?

대시보드에서 티켓을 열면 저희 팀이 도와드리겠습니다.

라이브 데모 체험하기 → TubePress 다운로드 →