커스텀 CSS 꾸미기

템플릿과 옵션만으로 안 되는 모양은 커스텀 CSS로 덧입혀요. CSS를 몰라도 AI로 CSS 수정하기를 누르면 ChatGPT가 원하는 모양을 물어보고 CSS를 만들어 줘요.

넣는 곳

1. 위젯 · 미니게임 › 채팅 오버레이를 열어요.
2. 모양 탭에서 가장 비슷한 템플릿을 먼저 골라요. 커스텀 CSS는 그 템플릿 위에 덧입혀져요.
3. 커스텀 CSS 탭의 입력 칸에 CSS를 붙여 넣어요. 오른쪽 미리보기에 바로 보여요.
4. 위쪽 저장을 눌러요. OBS에 떠 있는 오버레이에도 바로 반영돼요. 마음에 안 들면 저장 전에 되돌리기를 눌러요.

커스텀 CSS는 20,000자까지 넣을 수 있어요.

AI로 CSS 수정하기

ChatGPT에 잼쿠봇 채팅 오버레이 설명서와 부탁할 말을 미리 넣어 열어 줘요.

1. 채팅 오버레이 설정의 커스텀 CSS 탭에서 AI로 CSS 수정하기를 눌러요. 이 가이드의 ChatGPT에서 시작하기를 눌러도 돼요.
2. ChatGPT가 설명서를 읽고 원하는 모양을 물어봐요. 분위기, 색, 말풍선·닉네임 모양, 후원 카드, 움직임을 편하게 답해요.
3. ChatGPT가 준 CSS를 커스텀 CSS 탭의 입력 칸에 붙여 넣고 미리보기로 확인한 뒤 저장해요.

4. 고치고 싶은 부분은 ChatGPT에게 그대로 말해요. "닉네임을 더 크게", "후원 카드를 분홍색으로"처럼 말하면 고친 CSS를 다시 줘요.

5. 대시보드 버튼은 지금 템플릿·글꼴·색 같은 설정과 지금 들어 있는 커스텀 CSS를 ChatGPT에게 같이 넘겨요. 이 가이드의 링크는 설정 없이 시작해요.

6. ChatGPT 사용에는 ChatGPT 계정이 필요할 수 있어요. ChatGPT가 만든 CSS는 미리보기로 꼭 확인하세요.
7. AI가 읽는 설명서는 이 주소에 있어요. 다른 AI 서비스를 쓴다면 이 주소를 주고 "이 설명서를 읽고 채팅창 CSS를 만들어 줘"라고 부탁하면 돼요.

쓸 수 있는 클래스

쓸 수 있는 변수

옵션 값은 CSS 변수로 들어와요. 변수를 쓰면 나중에 옵션으로 색을 바꿔도 CSS가 따라가요.

예시

/* 스트리머 채팅 글자를 노랗게 */
.co-chat[data-role="streamer"] .co-text { color: #ffd43b; }

/* 닉네임 뒤에 쌍점 붙이기 */
.co-chat:not(.co-nametop) .co-name::after { content: " :"; }

/* 말풍선 템플릿에 꼬리 달기 */
body[data-template="bubble"] .co-chat::after {
  content: "";
  position: absolute;
  left: 1em;
  bottom: -.32em;
  width: .7em;
  height: .7em;
  background: var(--co-bg);
  transform: rotate(45deg);
}

/* 큰 후원 카드를 조금 더 크게 */
.co-donation.co-big .co-card { font-size: 1.1em; }

주의할 점

• OBS 브라우저 소스는 최신 브라우저보다 오래된 판이에요. :has(), CSS 중첩, color-mix() 같은 최신 문법은 OBS에서 안 먹을 수 있어요.
• 배경(html·body)은 투명하게 두세요. 칠하면 방송 화면을 가려요.
• 위의 클래스 이름은 바뀌지 않아요. 새 요소를 넣을 수는 없고, 꾸밈이 더 필요하면 ::before·::after를 써요.
• 템플릿을 바꾸면 body[data-template="…"]로 범위를 좁힌 규칙은 맞지 않을 수 있어요.
• 채팅을 숨기려면 CSS 대신 표시할 채팅 설정을 쓰세요. CSS로 숨긴 채팅도 TTS는 읽어요.

안 될 때