자막도 내 방식대로: 프리셋에서 시작하는 사용자 CSS

보는 방식에 맞춰 자막도 달라져야 합니다

기존 자막 스타일에서는 글꼴, 크기, 굵기, 색상, 배경 투명도를 조절할 수 있었습니다. 평소 시청에는 충분하지만, 이중 언어 자막을 활용하는 모든 방식을 담지는 못했습니다.

듣기 연습을 할 때는 필요할 때까지 번역을 숨기고 싶을 수 있습니다. 시선이 계속 원문으로 향한다면 원문을 흐리게 만들 수도 있습니다. 화면이 복잡한 영상에서는 더 선명한 배경이나 넉넉한 간격, 현재 자막을 찾기 쉬운 작은 애니메이션이 필요할 수 있습니다.

Read Frog 1.46.5는 동영상 자막 스타일에 사용자 CSS를 추가했습니다. 실시간 미리보기와 세 가지 프리셋이 함께 제공되어, 한 번의 클릭으로 시작하고 원할 때만 코드를 편집할 수 있습니다.

프리셋으로 시작하세요

메뉴를 열고 목적에 가장 가까운 동작을 고르세요.

프리셋은 일반 CSS를 편집기에 추가합니다. 적용한 뒤 모든 값을 바꿀 수 있고, 번역을 흐리게 하면서 원문을 약하게 표시하는 식으로 여러 프리셋을 조합할 수도 있습니다.

결과를 보면서 편집

입력하는 동안 미리보기가 갱신됩니다. 변경할 때마다 저장하거나 설정과 영상 탭을 오갈 필요 없이, 실제 자막과 같은 구조에서 결과를 확인할 수 있습니다.

편집기는 구문 강조와 검사를 제공합니다. 올바른 CSS는 명확히 확인되고, 구문 오류나 너무 긴 스타일시트는 저장 전에 차단됩니다. 저장은 직접 눌러야 하므로, 작성 중인 실험이 실수로 자막 스타일이 되지 않습니다.

기존 스타일 설정도 그대로 작동합니다. 사용자 CSS는 선택한 글꼴, 크기, 굵기, 색상, 배경 위에 적용되며, 덮어쓸 때 !important가 필요하지 않습니다.

세 가지 클래스로 전체 자막 스타일링

필요한 클래스는 세 가지입니다.

Blur translation 프리셋은 아래 CSS로 이루어집니다.

.subtitles-translation {
  filter: blur(6px);
  transition: filter 0.15s ease;
}

.subtitles-translation:hover {
  filter: none;
}

스타일시트는 Read Frog 자막 레이어 내부에 격리되어 YouTube 페이지 자체를 바꾸지 않습니다. 미리보기도 실제 자막과 같은 경계와 클래스 구조를 사용합니다.

사용 방법

1. Read Frog 설정 → 동영상 자막 → 자막 스타일을 엽니다.
2. 페이지 아래의 사용자 CSS로 이동합니다.
3. 프리셋을 선택하거나 미리보기를 보며 CSS를 작성합니다.
4. 검사가 통과하면 저장을 선택합니다.

자막 사용자 CSS는 Read Frog 1.46.5에서 사용할 수 있습니다. 업데이트 후 다른 스위치를 켤 필요는 없습니다.