Custom CSS Guide

🎨 V-Translator Live 커스텀 CSS 가이드 (고급편)

V-Translator Live는 자막 화면(오버레이)의 디자인을 사용자 취향에 맞게 마음대로 개조할 수 있는 커스텀 CSS(Custom CSS) 기능을 제공합니다.

가장 많이 변경하게 될 부분은 자막 전체를 감싸는 네모난 배경 박스인 .subtitle-card 입니다. 아래의 다양한 테마 코드들을 복사해서 [커스텀 CSS] 입력창에 넣고 나만의 방송 화면을 만들어 보세요!

자막 강조 포인트 색상 설정

CSS 코드를 직접 수정하기 전에, 가장 기본이 되는 테마 컬러(강조 색상)를 지정할 수 있습니다. 컬러 피커를 이용해 내 방송이나 아바타에 어울리는 색상을 선택하면, 자막의 이름이나 강조 부분에 즉시 반영됩니다.

단순하고 직관적인 컬러 피커

프리셋 색상 버튼을 클릭하거나, 직접 컬러 피커를 열어 미세한 색상을 골라보세요. HEX 코드(#FF0000)를 직접 입력할 수도 있습니다.
auto 버튼을 누르면 랜덤한 기본 색상으로 돌아갑니다.

+

📦 자막 카드(.subtitle-card) 인기 테마 디자인

🪟 고급스러운 반투명 유리 질감 (Glassmorphism)

최신 트렌드인 반투명한 유리 느낌을 줍니다. 뒷배경(게임 화면 등)이 은은하게 비쳐서 화면을 가리지 않으면서도 자막이 잘 보입니다.

css
.subtitle-card {
  background-color: rgba(0, 0, 0, 0.4) !important; /* 검은색 반투명 */
  backdrop-filter: blur(10px) !important; /* 뒷배경을 흐리게 (블러 처리) */
  border: 1px solid rgba(255, 255, 255, 0.2) !important; /* 은은한 흰색 테두리 */
  border-radius: 16px !important; /* 모서리를 둥글게 */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important; /* 깊이감 있는 그림자 */
}

💬 귀여운 둥근 말풍선 스타일

각진 네모가 아닌, 둥글둥글하고 귀여운 말풍선 형태로 만듭니다. (색상 코드를 방송 퍼스널 컬러로 바꿔보세요!)

.subtitle-card {
  background-color: #fff9e6 !important; /* 따뜻한 크림색 배경 */
  border: 3px solid #ffb347 !important; /* 주황색 두꺼운 테두리 */
  border-radius: 30px !important; /* 모서리를 아주 둥글게 */
  padding: 20px 30px !important; /* 안쪽 여백 늘리기 */
  box-shadow: 4px 4px 0px #ffb347 !important; /* 레트로 느낌의 단색 그림자 */
}
/* 배경이 밝으므로 글씨를 어둡게 변경 */
.main-text, .sub-text {
  color: #333333 !important; 
}

✨ 화려한 사이버펑크 네온사인 스타일

자막 주변에서 빛이 뿜어져 나오는 네온사인 효과입니다. 어두운 게임(공포 게임 등)을 플레이할 때 눈에 확 띄고 멋집니다.

.subtitle-card {
  background-color: rgba(10, 10, 10, 0.85) !important; /* 아주 어두운 배경 */
  border: 2px solid #0ff !important; /* 청록색 테두리 */
  border-radius: 8px !important;
  /* 테두리 밖으로 번지는 네온빛 그림자 */
  box-shadow: 0 0 10px #0ff, 0 0 20px #0ff, inset 0 0 10px #0ff !important; 
}
/* 텍스트에도 네온 빛 추가 */
.sub-text {
  color: #fff !important;
  text-shadow: 0 0 5px #0ff, 0 0 10px #0ff !important;
}

🌈 부드러운 그라데이션 배경

단색 배경이 밋밋하다면 두 가지 색상이 섞이는 그라데이션 배경을 적용해 보세요.

.subtitle-card {
  /* 보라색에서 분홍색으로 이어지는 그라데이션 */
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9)) !important;
  border: none !important; /* 기본 테두리 없애기 */
  border-radius: 20px !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
}
/* 텍스트 색상을 흰색으로 고정 */
.main-text, .sub-text {
  color: white !important;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5) !important;
}

👻 방송용 투명 배경 (글씨만 둥둥 띄우기)

배경 박스를 아예 투명하게 날려버리고 글자만 남기는 가장 베이직한 방송용 세팅입니다.

.subtitle-card {
  background-color: transparent !important; /* 배경 투명하게 */
  box-shadow: none !important; /* 박스 그림자 제거 */
  border: none !important; /* 박스 테두리 제거 */
}

/* 글씨가 묻히지 않도록 글씨 주변에 진한 검은색 외곽선 추가 */
.main-text, .sub-text, .previous-message {
  text-shadow: 
    -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, 
    -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000,
    0px 3px 3px rgba(0,0,0,0.8) !important;
}

텍스트(.main-text, .sub-text) 꾸미기 꿀팁

배경 카드 외에도 글씨 자체를 타겟팅하여 커스텀할 수 있습니다.

원본 언어(외국어) 자막 숨기기

번역된 자막만 화면에 깔끔하게 송출하고 싶을 때 사용합니다.

.main-text {
  display: none !important;
}
과거 자막 흐리게 만들기

최신 자막에 집중되도록 이전 자막을 반투명하게 만듭니다.

.previous-message {
  opacity: 0.4 !important;
}
.sub-divider {
  display: none !important;
}
실시간 인식 중(미완성) 자막 깜빡이게 하기

시스템이 현재 음성을 인식 중임을 시각적으로 보여줍니다.

@keyframes pulse {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}
.partial-text {
  animation: pulse 1s infinite !important;
  color: #a3a3a3 !important; /* 회색으로 표시 */
}

💡 웹 기술과 동일하게 작동합니다!

V-Translator Live의 오버레이(자막 화면)는 사실상 크롬(Chromium) 브라우저 화면을 투명하게 띄워놓은 것과 똑같은 원리로 동작합니다. 따라서 .subtitle-card 안에는 웹 개발자들이 사용하는 거의 모든 최신 CSS 코드가 100% 똑같이 작동합니다!

  • background, border 같은 기본적인 것부터
  • box-shadow (그림자, 발광 효과)
  • backdrop-filter (유리 질감, 블러 효과)
  • transform (기울이기, 회전, 크기 조절)
  • animation / transition (움직이는 효과)

⚠️ CSS 작성 시 주의사항: 작성한 코드가 간혹 작동하지 않는다면 속성 맨 끝에 !important를 붙여주세요. 기존의 기본 디자인 테마를 강제로 덮어쓰고 최우선으로 적용되게 만들어 줍니다.