방송용 채팅 위젯 완벽 설정법 - 화면에 채팅 표시하는 방법
방송 화면 위에 채팅을 실시간으로 띄우면 시청자 참여감이 확 올라갑니다. 플랫폼별 채팅 위젯 설정부터 디자인 커스텀까지 한 번에 정리합니다.
채팅을 화면에 띄워야 하는 이유
유튜브나 트위치에서 방송 다시보기를 볼 때, 화면에 채팅이 함께 보이는 방송과 그렇지 않은 방송의 차이를 느껴본 적 있을 겁니다. 채팅이 화면에 보이면 VOD(다시보기 영상)로 볼 때도 현장감이 살아납니다. 생방송에서도 풀스크린으로 시청하는 사람은 채팅창을 따로 열지 않아도 다른 시청자들의 반응을 확인할 수 있습니다.
또한 유튜브에 방송 하이라이트를 올릴 때 채팅 반응이 함께 보이면 콘텐츠의 재미가 배가됩니다. "이 부분에서 채팅이 폭발했다"는 맥락이 영상만으로 전달됩니다.
채팅 위젯은 OBS의 브라우저 소스(Browser Source)를 통해 화면에 추가합니다. 브라우저 소스는 웹페이지를 OBS 안에서 렌더링하는 기능으로, 채팅 위젯 서비스가 제공하는 URL을 넣으면 실시간 채팅이 화면 위에 표시됩니다.
StreamElements 채팅 위젯 설정
StreamElements는 가장 널리 쓰이는 무료 스트리밍 도구 플랫폼입니다. 채팅 위젯도 무료로 제공됩니다.
1단계: 계정 연동
streamelements.com에 접속해서 트위치 또는 유튜브 계정으로 로그인합니다.
2단계: 오버레이 생성
좌측 메뉴에서 '스트리밍 도구' → '마이 오버레이'로 이동합니다. '새 오버레이' 버튼을 클릭하고, 해상도를 방송 해상도(1920x1080)로 설정합니다.
3단계: 채팅 위젯 추가
오버레이 에디터에서 좌측의 '+' 버튼 → '위젯' → 'Chat'을 선택합니다. 캔버스에 채팅 위젯이 추가됩니다.
4단계: 위젯 설정
추가된 채팅 위젯을 클릭하면 설정 패널이 열립니다. 주요 설정 항목들입니다.
- 테마: Clean, Boxed, Twitch 등 여러 프리셋 테마를 제공합니다.
- 글꼴: 한글을 지원하는 Noto Sans KR, IBM Plex Sans KR 등을 선택하세요.
- 글자 크기: 1080p 기준 24~32px이 적당합니다. 너무 작으면 읽기 어렵고, 너무 크면 화면을 많이 차지합니다.
- 표시 시간: 각 채팅 메시지가 화면에 머무는 시간입니다. 30~60초가 적당합니다.
- 최대 메시지 수: 동시에 표시할 메시지 개수입니다. 5~10개가 화면을 과도하게 차지하지 않으면서 채팅 흐름을 보여줍니다.
- 이모티콘 표시: 트위치 이모티콘, BTTV, FFZ 이모티콘 표시 여부를 설정합니다.
5단계: OBS에 추가
오버레이 에디터 상단의 URL을 복사합니다. OBS에서 원하는 장면에 '소스 추가' → '브라우저'를 선택하고, URL 필드에 복사한 주소를 붙여넣습니다. 너비와 높이를 오버레이 해상도와 동일하게(1920x1080) 설정합니다.
Streamlabs 채팅 위젯 설정
Streamlabs도 유사한 채팅 위젯을 제공합니다. Streamlabs를 이미 사용 중이라면 이쪽이 편합니다.
1단계: Streamlabs 대시보드(streamlabs.com)에 로그인합니다.
2단계: 좌측 메뉴에서 'All Widgets' → 'Chat Box'를 선택합니다.
3단계: 위젯 설정 페이지에서 테마, 배경색, 글꼴, 크기 등을 조정합니다. Streamlabs의 장점은 실시간 미리보기가 설정 페이지에서 바로 보인다는 것입니다. 설정을 바꿀 때마다 어떻게 보이는지 즉시 확인할 수 있습니다.
4단계: 페이지 상단의 '위젯 URL'을 복사해서 OBS 브라우저 소스에 추가합니다.
Streamlabs 채팅 위젯은 무료 계정에서도 기본 기능을 모두 사용할 수 있습니다. Pro 계정은 추가 테마와 커스텀 CSS 기능을 제공합니다.
CSS로 채팅 디자인 커스터마이징
기본 테마가 마음에 들지 않는다면 CSS(Cascading Style Sheets, 웹 디자인 스타일 언어)를 직접 수정해서 원하는 디자인을 만들 수 있습니다. 프로그래밍을 몰라도 아래 예시를 복사해서 수정하면 됩니다.
StreamElements와 Streamlabs 모두 채팅 위젯 설정에 'Custom CSS' 입력란이 있습니다. 여기에 CSS 코드를 입력하면 기본 디자인 위에 덮어씌워집니다.
배경을 반투명하게 만들기
기본 채팅 위젯은 배경이 투명하거나 단색입니다. 게임 화면 위에 올리면 가독성이 떨어질 수 있는데, 반투명 검은 배경을 깔면 해결됩니다.
CSS 코드 예시: .chat-line { background-color: rgba(0, 0, 0, 0.5); border-radius: 8px; padding: 4px 8px; margin-bottom: 4px; }
사용자 이름 색상 고정
트위치 채팅은 사용자마다 다른 이름 색상을 사용합니다. 밝은 배경에서 노란색 이름이 안 보이는 등의 문제가 있을 때 이름 색상을 고정할 수 있습니다.
CSS 코드 예시: .chat-author { color: #00FF7F !important; font-weight: bold; }
애니메이션 효과 추가
새 메시지가 나타날 때 슬라이드인 효과를 줍니다.
CSS 코드 예시: .chat-line { animation: slideIn 0.3s ease-out; } @keyframes slideIn { from { transform: translateX(-20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
Google에서 "StreamElements chat widget custom CSS"를 검색하면 커뮤니티가 공유한 다양한 CSS 템플릿을 찾을 수 있습니다.
치지직 채팅 오버레이 설정
치지직(Chzzk)은 네이버 기반 플랫폼이라 StreamElements/Streamlabs와 직접 연동이 안 되는 경우가 있습니다. 치지직 전용 채팅 오버레이 도구를 사용합니다.
Chzzk Chat Overlay 도구 사용
- GitHub에 공개된 치지직 채팅 오버레이 프로젝트를 활용합니다. "chzzk chat overlay"로 검색하면 여러 오픈소스 프로젝트를 찾을 수 있습니다.
- 대표적으로 chzzk-overlay 같은 도구는 치지직 채널 ID만 입력하면 채팅 오버레이 URL을 생성해줍니다.
- 생성된 URL을 OBS 브라우저 소스에 추가합니다.
멀티 플랫폼 채팅 통합
치지직과 트위치, 유튜브를 동시에 방송하는 멀티 스트리밍의 경우, Restream Chat이나 chat.overlay.expert 같은 도구를 사용하면 여러 플랫폼의 채팅을 하나의 위젯에 통합해서 표시할 수 있습니다. 어떤 플랫폼에서 온 채팅인지 아이콘으로 구분됩니다.
채팅 위젯 활용 팁
위치 선택
채팅 위젯은 화면의 왼쪽 하단 또는 오른쪽에 배치하는 것이 일반적입니다. 게임 UI와 겹치지 않는 위치를 선택하세요. 게임마다 UI 위치가 다르므로, 자주 하는 게임에 맞춰 위치를 조정해두면 좋습니다. OBS에서 장면별로 위젯 위치를 다르게 설정할 수 있습니다.
특정 메시지 필터링
채팅 위젯 설정에서 봇 메시지, 명령어 메시지(!로 시작하는 채팅), 특정 단어가 포함된 메시지를 화면에 표시하지 않도록 필터링할 수 있습니다. 불필요한 메시지가 화면을 차지하지 않도록 하세요.
하이라이트 모드
일부 채팅 위젯은 구독자, 후원자의 메시지를 다른 색상으로 강조하는 기능을 제공합니다. VIP 시청자의 채팅이 눈에 띄면 해당 시청자의 만족도가 올라가고, 다른 시청자에게도 구독/후원 동기를 부여합니다.
클립 영상에서의 활용
채팅 위젯을 켜두면 OBS 녹화 파일에도 채팅이 함께 녹화됩니다. 하이라이트 클립을 편집할 때 별도로 채팅 로그를 합성할 필요가 없어 편리합니다. 다만 채팅이 영상의 주요 부분을 가리지 않도록 위치를 잘 잡아두어야 합니다.
모바일 시청자 고려
모바일로 시청하는 사람이 많다면 채팅 위젯의 글자 크기를 약간 키우세요. 1080p 영상이 모바일 화면에서는 훨씬 작게 보이기 때문에, PC에서 적절해 보이는 24px 글꼴이 모바일에서는 거의 읽히지 않을 수 있습니다. 28~32px 정도면 모바일에서도 가독성이 확보됩니다.
