> ## 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. # 도로시 채팅창 OBS 설정 > 공개 URL을 브라우저 소스로 추가해 채팅과 시청자 수를 방송 화면에 표시합니다. 도로시의 **오버레이 채팅창** 기능입니다.
공개 URL을 브라우저 소스로 추가하면 여러 플랫폼의 채팅과 시청자 수를 방송 화면에 표시할 수 있어요. ## 공개 URL 준비하기 ### 1. 채팅 오버레이 열기 [도로시 워크스페이스](https://dorothy.land/workspace) 왼쪽 메뉴에서 **위젯 → 채팅 오버레이**를 선택합니다. 도로시 워크스페이스 왼쪽 메뉴의 채팅 오버레이 항목만 라벤더 테두리로 표시한 화면 ### 2. 공개 URL 확인하고 복사하기 화면 위쪽 **공개 URL**의 가려진 영역을 누르면 전체 주소를 확인할 수 있습니다.
주소 오른쪽의 **복사**를 눌러 OBS에 입력할 URL을 복사합니다. **열기**를 누르면 위젯이 새 화면에서 정상적으로 열리는지 미리 확인할 수 있어요.
새 주소가 필요하다면 **URL 재생성**을 사용할 수 있습니다. 채팅 오버레이 공개 URL 입력란과 복사 및 URL 재생성 버튼만 라벤더 테두리로 표시한 화면 공개 URL은 프리셋마다 따로 만들어집니다. 주소를 아는 사람은 위젯 화면에 접근할 수 있어요.
주소가 방송 화면이나 게시글에 노출됐다면 **URL 재생성**을 누른 뒤 OBS의 기존 주소도
새 주소로 교체해 주세요. 프리셋을 삭제해도 기존 URL은 즉시 사용할 수 없게 됩니다. ## OBS Studio에 추가하기 ### 3. 소스 추가 버튼 누르기 OBS Studio에서 채팅창을 넣을 **장면**을 선택합니다. 화면 왼쪽 아래 **소스 목록**에서 ' + ' 버튼을 누릅니다. OBS 소스 목록 아래의 추가 버튼만 라벤더 테두리로 표시한 화면 ### 4. 브라우저 소스 선택하기 소스 메뉴가 열리면 **브라우저**를 선택합니다.
새 소스의 이름은 **도로시 채팅창** 처럼 알아보기 쉽게 입력해 주세요. OBS 소스 추가 메뉴의 브라우저 항목만 라벤더 테두리로 표시한 화면 ### 5. URL과 화면 크기 입력하기 **URL**에는 도로시에서 복사한 공개 URL을 붙여 넣습니다.
그 아래 **너비**와 **높이**에는 방송 화면에서 사용할 채팅창 크기를 입력합니다. 처음에는 `400 × 400`(예시) 처럼 시작한 뒤 실제 나의 방송 화면에 맞춰 조절하시면 됩니다.
입력이 끝나면 **확인**을 누릅니다. OBS 브라우저 속성의 URL, 너비, 높이 입력란과 확인 버튼만 라벤더 테두리로 표시한 화면 실시간 채팅 연결을 유지하려면 '**소스가 보이지 않을 때 종료**'와 '**장면이 활성화될 때 브라우저 새로고침**'은
특별한 이유가 없다면 꺼 두는 것을 권장합니다. OBS 브라우저 속성에서 소스가 보이지 않을 때 종료와 장면이 활성화될 때 브라우저 새로고침 옵션이 꺼져 있고 해당 영역이 라벤더 테두리로 표시된 화면 ### 6. 소스 목록 확인하기 브라우저 소스를 만들고 나면 **소스 목록**에 '**채팅창**' 또는 방금 입력한 이름이 표시됩니다.
목록에 소스가 나타나면 OBS에 채팅창이 정상적으로 추가된 상태입니다. OBS 소스 목록의 채팅창 항목만 라벤더 테두리로 표시한 화면 ## 방송 화면에 배치하기 ### 7. 원하는 위치와 크기로 조절하기 미리보기에서 채팅창 소스를 선택한 뒤 드래그해 원하는 위치로 옮깁니다.
모서리의 조절점을 끌면 방송 화면에 맞게 크기를 바꿀 수 있어요. OBS 미리보기에서 선택된 채팅창 영역을 라벤더 테두리로 표시한 화면 ### 8. 최종 화면 확인하기 채팅 메시지와 시청자 수가 원하는 위치에 표시되는지 확인합니다.
방송 전에 도로시의 테스트 전송을 사용하면 실제 채팅이 들어오는 모습도 미리 점검할 수 있어요. OBS 방송 화면에서 채팅과 시청자 수가 표시된 최종 채팅창 영역을 라벤더 테두리로 표시한 화면 ## 잘 보이는지 테스트하기 도로시 **채팅 오버레이** 화면 아래의 미리보기에서 다음을 확인할 수 있습니다. * 치지직·유튜브 등 플랫폼별 테스트 채팅 * 시청자 수 표시 * 테스트 유형과 플랫폼 선택 * 닉네임과 채팅 메시지 입력 * **채팅 전송** 테스트 OBS에서 채팅창 브라우저 소스의 새로고침 버튼만 라벤더 테두리로 표시한 화면 설정을 바꿨다면 **저장하기**를 누른 뒤 OBS의 브라우저 소스를 새로고침해 주세요. ## 문제 해결 ### 투명해야 할 곳이 검게 보여요 * 도로시의 **배경 스타일 → 배경** 투명도가 `0%`인지 확인합니다. * OBS 브라우저 소스의 기본 투명 배경 CSS를 지우지 않았는지 확인합니다. ### 채팅이 갱신되지 않아요 도로시 채팅은 **방송 설정**에서 사용할 플랫폼이 연결되어 있어야 갱신됩니다.
치지직 또는 유튜브가 **연결하기**로 표시된다면 아직 연결되지 않은 상태이며, 연결을 완료하기 전에는 해당 플랫폼의 채팅을 불러올 수 없습니다. 도로시 방송 설정에서 치지직과 유튜브 연결하기 영역만 라벤더 테두리로 표시한 화면 치지직 채널 연결 방법을 확인합니다. 유튜브 채널과 현재 라이브 연결 방법을 확인합니다. * 연결을 마친 뒤 방송 설정에서 플랫폼 연결 상태를 다시 확인합니다. * 브라우저 소스를 한 번 새로고침합니다. * URL을 재생성했다면 새 URL로 바꿨는지 확인합니다. ### 글자가 잘려요 * 브라우저 소스의 가로·세로 크기를 늘립니다. * 도로시에서 글자 크기와 아이콘 크기를 낮춥니다. * 미리보기와 실제 방송 캔버스 비율이 같은지 확인합니다. ## 참고 * [OBS 공식 Browser Source 안내](https://obsproject.com/kb/browser-source)