안내

• 우선 해당 css는 아래 문서를 기반으로 제작되었습니다. 좋은 기능 제공 중이신 개발자님 감사합니다.

• 아래 css는 기본적인 채팅 연동만 고려한 css이므로, 추가 기능들을 적용하고 싶다면 위 문서의 옵션 목록을 확인해보시길 추천 드립니다.

디자인

• 아래 작업을 완료하면 나오는 결과물입니다.
• 좌측 상단의 동그란 인디케이터를 통해 플랫폼을 구분할 수 있습니다.
• 검은 배경의 초록 글자는 관리자 아이디로 채팅을 쳤을 때 나오는 css입니다. (일반적으로 흰 배경에 검은 글자만 나오겠죠?)

obs 세팅

1. obs에서 소스 목록으로 ‘브라우저’를 하나 추가합니다.

2. 아래 코드를 복사해서 URL 칸에 입력합니다.

   <https://chzzk-api.ddutto.com/chat/[치지직_코드]?setting=twitch:[트위치ID],youtube:[유튜브_핸들네임],afreeca:[아프리카ID]>
   

   

3. 대괄호가 있는 부분을 자신의 정보로 치환해줍니다. 밑은 예시일 뿐 본인의 정보를 넣어주세요.

   • 치지직_코드

     

   • 트위치ID

     

   • 유튜브 핸들네임(@는 꼭 빼주세요!)

     

   • 아프리카 ID

     

4. 최종적으로 아래 같은 느낌의 url이 작성되어 있다면 OK입니다.

   <https://chzzk-api.ddutto.com/chat/c7acfaad2a96a6a12284a966dce53b8f?setting=twitch:vrecordinfo,youtube:vrecordinfo,afreecatv:tvrecordinfo>
   

CSS 세팅

1. 브라우저 속성에서 사용자 지정 css 칸을 비웁니다.

   

2. 아래 css를 복사해서 붙여 넣습니다.(아래 박스 위에 마우스를 올리면 우측 상단에 복사 버튼이 있습니다.)

   :root {
       /* 설정 */
       ;--폰트_사이즈: 28px
       ;--텍스트_정렬: left
   
       ;--chzzk-color: #00FFAF
       ;--twitch-color: #A970FF
       ;--youtube-color: #FF0000
       ;--afreeca-color: #0545B1
   }
   
   /* 폰트 추가 */
   @font-face {
       font-family: 'GmarketSans';
       font-weight: 300;
       font-style: normal;
       src: url('<https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansLight.eot>');
       src: url('<https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansLight.eot?#iefix>') format('embedded-opentype'),
            url('<https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansLight.woff2>') format('woff2'),
            url('<https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansLight.woff>') format('woff'),
            url('<https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansLight.ttf>') format("truetype");
       font-display: swap;
   } 
   @font-face {
       font-family: 'GmarketSans';
       font-weight: 500;
       font-style: normal;
       src: url('<https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansMedium.eot>');
       src: url('<https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansMedium.eot?#iefix>') format('embedded-opentype'),
            url('<https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansMedium.woff2>') format('woff2'),
            url('<https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansMedium.woff>') format('woff'),
            url('<https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansMedium.ttf>') format("truetype");
       font-display: swap;
   } 
   @font-face {
       font-family: 'GmarketSans';
       font-weight: 700;
       font-style: normal;
       src: url('<https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.eot>');
       src: url('<https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.eot?#iefix>') format('embedded-opentype'),
            url('<https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.woff2>') format('woff2'),
            url('<https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.woff>') format('woff'),
            url('<https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.ttf>') format("truetype");
       font-display: swap;
   } 
   
   /* 채팅 메세지에 스타일 적용 */
   #log > div[data-from] {
       font-family: 'GmarketSans'!important;
       background: #fff;
       margin: 0.4em;
       padding: 0.6em 0.8em 0.4em 0.8em!important;
       text-shadow: none!important;
       color: #333!important;
       font-size: var(--폰트_사이즈)!important;
       text-align: var(--텍스트_정렬)!important;
       border-radius: 0.9em;
       width: fit-content!important;
       box-shadow: 0px 0.4em 20px 0px rgba(0, 0, 0, 0.05);
       animation: open .5s cubic-bezier(0, 0.62, 0, 0.98) forwards!important;
   }
   @keyframes open {
   	0% { 
           margin: 0.4em 0.4em -1em 0.4em;
           transform: translateY(2em);
           opacity: 0;
       }
   	100% {
           margin: 0.4em 0.4em 0.4em 0.4em;
           transform: translateY(0em);
           opacity: 1;
       }
   }
   
   /* 닉네임 제거 */
   #log > div > .meta {
       display: none
   }
   
   /* 플랫폼 색상 아이콘 */
   #log > div::before {
       content: '';
       width: 0.5em;
       height: 0.5em;
       background: #f6f4ff;
       position: absolute;
       border-radius: 100%;
       left: 0px;
       top: 0px;
   }
   #log > div.chzzk::before {
       background: var(--chzzk-color);
   }
   #log > div.twitch::before {
       background: var(--twitch-color);
   }
   #log > div.youtube::before {
       background: var(--youtube-color);
   }
   #log > div.afreeca::before {
       background: var(--afreeca-color);
   }
   
   /* 스트리머 채팅 강조 */
   #log > div.streamer {
       background: #363444;
       color: #00ffaf!important;
       font-weight: 700!important;
   }
   

3. 세팅 끝! 채팅을 쳐서 테스트하거나 url 끝에 test-mode를 추가해주시면 간단한 확인이 가능합니다.