방송TIP 0

이전 글보다 좀 더 똑똑해진 친구로 소개합니다.

적용 방법

이 곳에서 CSS 코드를 복사합니다.

Twip 알림 박스 설정을 엽니다.

사용하실 알림창의 커스텀 CSS에 복사한 코드를 붙여넣습니다.

각 후원 카테고리별로 레이아웃 설정과 효과를 고릅니다.

각 레이아웃에 따른 설정은 다음과 같습니다.

• 카드 타입: 후원 이미지 제거, 반 투명 흑색 배경
• 배너 타입: 후원 이미지를 배경으로 사용
• 사이드 타입: 후원 이미지 정사각형으로 표시, 반 투명 흑색 배경

후원 설정에서 글자수를 100자로 제한합니다.

(글자 크기 20pt 기준)

OBS, XSplit 에서 브라우저 소스를 추가하고 너비와 높이를 설정해줍니다.

송출 환경에 따른 추천값

• 1080p : 1920px * 150px
• 720p : 1280px * 100px
• 글자 크기는 Twip에서 조절

영상 도네이션과 일반 도네이션 분리

슬림 CSS는 높이 설정을 200px 으로 제한하고 있습니다.

높이 200px을 넘게 설정하면 슬림 레이아웃이 적용되지 않습니다.

그러므로, 다음과 같이 설정하면 트윕의 영상 분리 기능을 사용할 수 있습니다.

트윕의 영상 분리 기능에서 2개의 주소로 브라우저 소스를 만듭니다.

트윕 알림

트윕 알림(영상)

영상 전용 주소의 너비와 높이를 캔버스 해상도의 절반으로 잡습니다.

• 1080p : 960 * 540
• 720p : 640 * 360

분리된 영상 도네이션이 잘 실행되는지 확인합니다.

본기능 사용 시 영상 도네이션이 나오는 도중에 일반 도네이션이 나올 수 있습니다.

도네이션을 받아서 테스트한게 아니므로 확인된 부분은 아닙니다.

배너 타입 레이아웃

배너타입 레이아웃을 사용하면 위처럼 자유롭게 디자인된 레이아웃을 사용하는 것도 가능합니다.

권장 규격

• 1080p: 1920px * 150px
• 720p: 1280px * 100px
• 알림창 세로 길이에 따라 변경하여 테스트 바람

트윕 프로의 이미지 후원 기능을 활용하면

배너 레이아웃을 다양하게 연출하는 것도 가능할 것으로 생각됩니다.

트윕 프로를 구독하고 있진 않아서 능력 되시는 분이 확인 부탁드립니다.

자주 묻는 질문

1. 다른 서드파티 도네이션 서비스에 적용 가능한가요?

구조가 달라서 안됩니다.

2. 저작권이 어떻게 되나요?

본 CSS 코드는 직접 작성한 코드로 MIT 라이센스를 따릅니다.

어떤 목적으로든 자유롭게 이용하셔도 좋습니다.

3. 바탕화면 어디서 구해요?

스팀에서 판매하는 월페이퍼 엔진 유틸리티입니다.

트게더를 자주 들어오는 편이 아니다보니 댓글로 문의를 남기셔도 잘못봅니다.

이메일이나 Github를 통해서 문의 부탁드립니다.

이메일: [email protected]

개인적으론 영상 분리 기능이 유튜브 플레이어만 깔끔하게 떼어지면 좋겠는데 아쉽네요