코드 적용 방법
복사한 채팅창 코드를 위플랩에 붙여 넣고, 방송 화면에서 확인하는 방법이에요. 아래 순서대로 따라 해 보세요.
tokpi 채팅창을 StreamElements 커스텀 위젯으로 쓰는 방법이에요. 위젯에 파일 네 개를 붙여 넣고 오버레이를 OBS에 넣으면 끝. 5분쯤 걸려요.
무료 StreamElements 계정이 필요해요. 트위치 · 킥 · 유튜브 채팅을 보여 주고, OBS(또는 Streamlabs Desktop)에는 오버레이 주소만 넣으면 돼요. StreamElements 화면과 zip 안의 설명, 카드 문구는 영어예요.
tokpi 채팅창을 원코메(わんコメ) 템플릿으로 쓰는 방법이에요. zip을 원코메에 추가하고 OBS에 넣으면 끝. 3분쯤 걸려요.
원코메가 필요해요. 유튜브 · 트위치 · 트윗캐스팅 · 니코니코 생방송 등 원코메에 연결한 방송 사이트의 채팅을 보여 줘요. 원코메 화면과 zip 안의 설명, 카드 문구는 일본어예요.
1단계. 코드 복사하기
tokpi에서 마음에 드는 채팅창의 자세히보기를 눌러요. 열린 창에서 설명과 미리보기를 확인한 뒤 코드 복사를 눌러요. 버튼이 복사했어요로 바뀌면 복사된 거예요.
크게 보기 (새 탭)2단계. 위플랩 채팅창을 기본 테마로
위플랩에서 채팅창 설정을 열고 테마 설정에서 기본을 골라요. tokpi 채팅창은 기본 테마 위에 덧입히는 방식이에요.
테마를 바꾸면 다른 설정이 테마 기본값으로 돌아가요. 테마를 먼저 고른 다음 나머지를 맞춰 주세요.
크게 보기 (새 탭)3단계. 표시 효과는 '없음'으로
표시 효과는 없음으로 두세요. tokpi 채팅창의 등장 효과와 겹치지 않아요. 채팅 정렬은 줄바꿈을 추천해요.
크게 보기 (새 탭)4단계. 커스텀 CSS에 붙여 넣고 저장
커스텀 스타일 CSS 사용을 켜고, 복사한 코드를 아래 CSS 칸에 붙여 넣어요. 다 넣었으면 설정 저장을 눌러요.
크게 보기 (새 탭)5단계. '열기'로 실제 화면 확인
설정 화면 오른쪽 미리보기에는 커스텀 CSS가 보이지 않아요. 저장한 다음 위쪽 열기를 눌러 실제 채팅창으로 확인하세요.
미리보기가 그대로라도 정상이에요. 꼭 열기로 확인해 주세요.
크게 보기 (새 탭)6단계. OBS 브라우저 소스에 넣기
위플랩의 URL 복사로 채팅창 주소를 복사해 OBS 브라우저 소스의 URL에 넣고, 너비 500px · 높이 800px부터 시작해요.
배치에 맞춰 너비를 480~520px 정도로 조정하고, 긴 닉네임·메시지와 구독·후원 카드가 잘리지 않는지도 확인해 주세요.
크게 보기 (새 탭)
알아 두면 좋아요
- 배지와 플랫폼 아이콘은 위플랩 설정에서 켜 두어야 보여요.
- 글꼴은 위플랩 글꼴 설정을 쓰거나, 방송하는 PC에 설치된 글꼴로 보여요.
- 채팅 자동 삭제를 켠다면 삭제 시간을 넉넉하게 두세요. 퇴장 효과가 끝나기 전에 사라지지 않아요.