> ## Documentation Index
> Fetch the complete documentation index at: https://guide.dorothy.land/llms.txt
> Use this file to discover all available pages before exploring further.

# 채팅창 커스텀

> 글꼴, 배경, 표시 효과, 시청자 수와 플랫폼별 후원 스타일을 방송 분위기에 맞게 바꿉니다.

채팅창 커스텀에서는 메시지 표시 방식부터 시청자 수, 폰트, 배경과 플랫폼별 후원 스타일을 한 화면에서 조절할 수 있어요.<br />
아래 순서대로 설정한 뒤 오른쪽 미리보기에서 결과를 확인해 보세요.

## 1. 채팅 오버레이 열기

1. [도로시 워크스페이스](https://dorothy.land/workspace)에 로그인합니다.
2. 왼쪽 메뉴에서 **위젯 → 채팅 오버레이**를 선택합니다.
3. 화면 위쪽 **프리셋**에서 수정할 프리셋을 고릅니다.

<Frame caption="왼쪽 메뉴에서 채팅 오버레이를 선택합니다">
  <img src="https://mintcdn.com/flate/SBOiZtEbgxfSSuFA/images/guides/chat-customization-entry.png?fit=max&auto=format&n=SBOiZtEbgxfSSuFA&q=85&s=bde6990092674c4705660d157c184619" alt="도로시 워크스페이스 왼쪽 메뉴의 채팅 오버레이 항목만 라벤더 테두리로 표시한 화면" width="930" height="430" data-path="images/guides/chat-customization-entry.png" />
</Frame>

<Info>
  여러 방송 스타일을 번갈아 사용한다면 기존 프리셋을 바로 덮어쓰기보다 **새 프리셋**을 만들어 두는 편이 좋아요.
</Info>

## 2. 채팅 표시 방식 정하기

### 화면에 보여 줄 정보

**테마 → 채팅창 설정**에서 시청자 이름, 플랫폼 아이콘, 뱃지와 후원 표시 여부를 선택합니다.<br />
시청자 이름 아래에서 메시지를 시작하거나, 이름 뒤에 `:`을 붙이는 것처럼 메시지 배치도 바꿀 수 있어요.

<Frame caption="채팅창에 표시할 이름, 플랫폼 아이콘, 뱃지와 후원 정보를 선택합니다">
  <img src="https://mintcdn.com/flate/SBOiZtEbgxfSSuFA/images/guides/chat-theme-display.png?fit=max&auto=format&n=SBOiZtEbgxfSSuFA&q=85&s=92288e2d92e7f8f3168e5630aa25bbb8" alt="채팅창 테마에서 시청자 이름, 플랫폼 아이콘, 뱃지, 줄바꿈, 후원과 상단 흐림 설정만 라벤더 테두리로 표시한 화면" width="655" height="194" data-path="images/guides/chat-theme-display.png" />
</Frame>

### 크기와 등장 효과

플랫폼 아이콘 크기를 먼저 맞춘 뒤 채팅이 쌓이는 방향을 왼쪽·가운데·오른쪽 중에서 선택합니다.<br />
메시지가 나타날 때의 효과는 없음·페이드·슬라이드·줌 중에서 고르고, 아래 속도 슬라이더로 움직임을 조절해 보세요.

<Frame caption="플랫폼 아이콘 크기와 채팅 방향, 등장 효과와 속도를 조절합니다">
  <img src="https://mintcdn.com/flate/SBOiZtEbgxfSSuFA/images/guides/chat-theme-motion.png?fit=max&auto=format&n=SBOiZtEbgxfSSuFA&q=85&s=b05338bd35ac67d3d2a04d99ede219b7" alt="채팅창 테마의 아이콘 크기, 채팅 표시 방향, 표시 효과와 속도 설정만 라벤더 테두리로 표시한 화면" width="655" height="205" data-path="images/guides/chat-theme-motion.png" />
</Frame>

### 오래된 채팅 정리하기

**채팅 자동 숨김**을 활성화하고 시간을 입력하면 오래된 메시지가 설정한 시간이 지난 뒤 사라집니다.<br />
**시청자 이름 랜덤 색상**을 켜면 여러 시청자의 이름을 색상으로 구분하기 쉬워요.

<Frame caption="채팅 자동 숨김 시간과 시청자 이름 랜덤 색상을 설정합니다">
  <img src="https://mintcdn.com/flate/SBOiZtEbgxfSSuFA/images/guides/chat-theme-behavior.png?fit=max&auto=format&n=SBOiZtEbgxfSSuFA&q=85&s=c000fcb1f46b5746033e648e4251b6ae" alt="채팅 자동 숨김과 시청자 이름 랜덤 색상 설정만 라벤더 테두리로 표시한 화면" width="655" height="121" data-path="images/guides/chat-theme-behavior.png" />
</Frame>

## 3. 시청자 수 표시하기

**채팅창에 시청자 수 표시**를 켜면 미리보기 아래쪽이나 위쪽에 플랫폼별 시청자 수를 함께 보여 줄 수 있습니다.<br />
숫자가 길어질 때 읽기 쉽도록 **3자리마다 콤마 표시**를 사용하는 것도 좋아요.

<Frame caption="시청자 수 표시 여부와 위치, 숫자 표기 방식을 먼저 선택합니다">
  <img src="https://mintcdn.com/flate/SBOiZtEbgxfSSuFA/images/guides/chat-viewer-basic.png?fit=max&auto=format&n=SBOiZtEbgxfSSuFA&q=85&s=31dc305220cc2da7ffe96d0e2493e844" alt="시청자 수 표시 여부, 상단과 하단 위치, 세 자리마다 콤마 표시 설정만 라벤더 테두리로 표시한 화면" width="652" height="188" data-path="images/guides/chat-viewer-basic.png" />
</Frame>

이어서 배경과 글자색, 정렬, 테두리 두께와 모서리를 방송 화면에 맞게 조절합니다.<br />
여러 플랫폼의 수치를 한 줄로 모으려면 **전부 이어서**, 플랫폼마다 구분된 상자가 필요하면 **각각 나눠서**를 선택해 주세요.

<Frame caption="시청자 수의 배경과 글자, 정렬, 표시 방식과 테두리를 설정합니다">
  <img src="https://mintcdn.com/flate/SBOiZtEbgxfSSuFA/images/guides/chat-viewer-style.png?fit=max&auto=format&n=SBOiZtEbgxfSSuFA&q=85&s=aaa858c1ac3d23ccf754bb9135be31e8" alt="시청자 수의 배경색, 글자색, 정렬, 플랫폼 표시 방식과 테두리 설정만 라벤더 테두리로 표시한 화면" width="652" height="365" data-path="images/guides/chat-viewer-style.png" />
</Frame>

<Tip>
  시청자 수는 채팅 메시지와 겹치지 않는 위치에 두고, 실제 방송 해상도에서 숫자가 잘리지 않는지 확인해 보세요.
</Tip>

## 4. 폰트 스타일 맞추기

먼저 사용할 **글꼴**을 고른 뒤 폰트 굵기와 글자 크기를 조절합니다.<br />
윤곽선 두께와 색상은 마지막에 맞추면 화면이 밝거나 복잡할 때도 글자를 읽기 쉬워요.

<Frame caption="글꼴과 굵기, 글자 크기, 윤곽선 두께와 색상을 설정합니다">
  <img src="https://mintcdn.com/flate/SBOiZtEbgxfSSuFA/images/guides/chat-font-controls.png?fit=max&auto=format&n=SBOiZtEbgxfSSuFA&q=85&s=67072abf23057b72ed113da2ae0c1f84" alt="채팅창 폰트 스타일의 글꼴, 굵기, 글자 크기, 윤곽선 두께와 색상 설정 전체를 라벤더 테두리로 표시한 화면" width="658" height="310" data-path="images/guides/chat-font-controls.png" />
</Frame>

<Info>
  밝은 게임 화면에서는 흰 글자와 어두운 윤곽선 조합이 잘 보입니다.<br />
  글자가 답답해 보이면 윤곽선을 줄이고, 배경과 섞여 보이면 조금씩 늘려 보세요.
</Info>

## 5. 배경 스타일 정하기

**배경**은 채팅창 전체 영역의 색과 투명도를, **사용자 채팅**은 각 메시지 뒤에 표시되는 말풍선의 색과 투명도를 조절합니다.<br />
아래 **모서리** 값으로 말풍선을 각지게 만들거나 부드럽게 둥글릴 수 있어요.

<Frame caption="채팅창 전체 배경과 사용자 채팅 말풍선의 색, 투명도와 모서리를 설정합니다">
  <img src="https://mintcdn.com/flate/SBOiZtEbgxfSSuFA/images/guides/chat-background-controls.png?fit=max&auto=format&n=SBOiZtEbgxfSSuFA&q=85&s=d0c7283d9607919d952515c211679111" alt="채팅창 배경 스타일의 전체 배경과 사용자 채팅 색상, 투명도와 모서리 설정을 라벤더 테두리로 표시한 화면" width="664" height="196" data-path="images/guides/chat-background-controls.png" />
</Frame>

전체 배경 없이 메시지만 띄우려면 배경 투명도를 `0%`로 맞춰 주세요.<br />
말풍선만 은은하게 남기고 싶다면 사용자 채팅 배경에 낮은 투명도를 적용하면 됩니다.

## 6. 플랫폼별 후원 스타일 설정하기

**플랫폼 선택**에서 치지직 또는 유튜브를 고르면 선택한 플랫폼에만 적용되는 이벤트와 후원 스타일을 편집할 수 있어요.<br />
치지직은 **치즈**, 유튜브는 **슈퍼챗**처럼 플랫폼에 맞는 후원 단위와 아이콘을 사용할 수 있습니다.

<Frame caption="플랫폼 선택에서 치지직 또는 유튜브를 고릅니다">
  <img src="https://mintcdn.com/flate/SBOiZtEbgxfSSuFA/images/guides/chat-platform-selector.png?fit=max&auto=format&n=SBOiZtEbgxfSSuFA&q=85&s=6323bfce37602a7127c65e89802bb660" alt="플랫폼별 설정에서 치지직과 유튜브를 선택하는 목록만 라벤더 테두리로 표시한 화면" width="674" height="166" data-path="images/guides/chat-platform-selector.png" />
</Frame>

| 플랫폼 | 후원 표시 예시 |
| --- | -------- |
| 치지직 | 치즈       |
| 유튜브 | 슈퍼챗      |

후원 카드의 위치, 배경색과 투명도, 모서리, 금액 색상과 단위, 아이콘 종류와 크기를 차례로 맞춰 주세요.<br />
플랫폼을 바꾸면 설정 대상도 함께 바뀌므로 치지직과 유튜브를 각각 확인하는 것이 중요해요.

<Frame caption="선택한 플랫폼의 후원 위치, 배경, 금액 단위와 아이콘 스타일을 설정합니다">
  <img src="https://mintcdn.com/flate/SBOiZtEbgxfSSuFA/images/guides/chat-donation-style.png?fit=max&auto=format&n=SBOiZtEbgxfSSuFA&q=85&s=55f0c293e0a0562825a7cde0c463d1f8" alt="선택한 플랫폼의 후원 위치, 배경, 모서리, 금액 색상, 단위와 아이콘 크기 설정만 라벤더 테두리로 표시한 화면" width="674" height="292" data-path="images/guides/chat-donation-style.png" />
</Frame>

## 7. 미리보기 확인하고 저장하기

### 미리보기 결과 확인하기

설정을 바꿀 때마다 오른쪽 **미리보기**에서 채팅 메시지, 시청자 수와 후원 카드가 어떻게 보이는지 확인합니다.<br />
미션 후원을 사용한다면 금액과 남은 시간이 카드 안에서 잘 보이는지도 함께 살펴보세요.

<Frame caption="미리보기에서 채팅, 미션 후원 카드와 플랫폼별 시청자 수를 확인합니다">
  <img className="mx-auto max-w-sm" src="https://mintcdn.com/flate/SBOiZtEbgxfSSuFA/images/guides/chat-preview-overview.png?fit=max&auto=format&n=SBOiZtEbgxfSSuFA&q=85&s=ba36aab2400253267ccd54a6ee5c0837" alt="채팅창 미리보기의 일반 채팅, 미션 후원 카드, 플랫폼별 시청자 수와 테스트 전송 영역을 라벤더 테두리로 표시한 화면" width="326" height="635" data-path="images/guides/chat-preview-overview.png" />
</Frame>

### 테스트 유형 선택하기

**테스트 전송**의 첫 번째 목록을 열면 채팅, 후원, 구독, 선물 구독과 미션 중에서 확인할 이벤트를 선택할 수 있어요.<br />
구독이나 미션처럼 실제 방송에서 자주 사용하는 항목을 하나씩 골라 미리보기 모양을 비교해 보세요.

<Frame caption="테스트 전송에서 채팅, 후원, 구독, 선물 구독 또는 미션을 선택합니다">
  <img className="mx-auto max-w-sm" src="https://mintcdn.com/flate/SBOiZtEbgxfSSuFA/images/guides/chat-preview-event-types.png?fit=max&auto=format&n=SBOiZtEbgxfSSuFA&q=85&s=3110289d7b9dc6c63440df4d012845f3" alt="채팅창 테스트 전송의 채팅, 후원, 구독, 선물 구독과 미션 선택 목록을 라벤더 테두리로 표시한 화면" width="320" height="693" data-path="images/guides/chat-preview-event-types.png" />
</Frame>

### 후원 테스트 전송하기

**후원**을 선택한 뒤 플랫폼, 닉네임, 금액과 메시지를 입력합니다.<br />
**후원 전송**을 누르면 위 미리보기에 후원 카드가 추가되며, 치지직 치즈와 유튜브 슈퍼챗 스타일을 각각 확인할 수 있어요.

<Frame caption="후원 정보를 입력하고 전송한 뒤 미리보기의 후원 카드를 확인합니다">
  <img className="mx-auto max-w-sm" src="https://mintcdn.com/flate/SBOiZtEbgxfSSuFA/images/guides/chat-preview-donation.png?fit=max&auto=format&n=SBOiZtEbgxfSSuFA&q=85&s=5cefc2f6fe5667955648ea69d51e8ed9" alt="채팅창 테스트 전송에서 후원 플랫폼, 닉네임, 금액과 메시지를 입력하는 영역과 미리보기 후원 카드를 라벤더 테두리로 표시한 화면" width="334" height="668" data-path="images/guides/chat-preview-donation.png" />
</Frame>

### 저장하기

긴 닉네임과 메시지, 큰 후원 금액까지 확인했다면 화면 위 또는 아래의 **저장하기**를 누릅니다.<br />
프리셋을 바꿔 가며 사용한다면 현재 선택된 프리셋이 맞는지도 저장 전에 한 번 더 확인해 주세요.

<Warning>
  설정을 바꾼 뒤 **저장하기**를 누르지 않으면 공개 URL에 반영되지 않습니다.<br />
  저장한 뒤에는 OBS의 채팅창 브라우저 소스를 **새로고침**해 주세요.
</Warning>

## 저장 전 체크리스트

* 긴 닉네임과 긴 메시지가 잘리지 않나요?
* 밝은 장면과 어두운 장면 모두에서 글자가 읽히나요?
* 시청자 수가 다른 방송 요소와 겹치지 않나요?
* 치즈와 슈퍼챗의 금액·아이콘이 적절하게 보이나요?
* 오른쪽 미리보기에서 플랫폼별 테스트를 마쳤나요?
* 마지막에 **저장하기**를 눌렀나요?
