카테고리
유용한 정보

Nightbot으로 도배봇 차단하는 방법

오랜만이에요 여러분! 하루 입니다!

요즘 트위치 채팅 관리 일을 하다 보니, 채팅 내용 중에 그림으로 된 문자로 도배하는 일이 자주 생겨서 Nightbot으로 할 수 있을까 찾아보다가 만들었습니당

도배봇이란?

도배봇은 채팅에서 반복된 단어 및 글자로 이루어진 긴 문장으로 시청자와 스트리머를 불쾌하게 만드는 악의적인 봇이에요. 대표젹으로 아스키 아트 또는 그림으로 된 도배봇이 있어요

이해를 돕기 위해 예제 사진을 보여드리겠습니다

대략 이런 모양의 도배가 있어요. 이런 유형을 차단하는 방법을 알려드리고자 이 글을 쓰게 되었어요! 그럼 어떻게 하면 Nightbot이 바로 차단 할 수 있는지 알아봅시당!

차단하는 방법

우선 Nightbot 공식 홈페이지에 접속해서 로그인 해 주신 다음에 왼쪽에 있는 Spam Protection 메뉴에 들어가주세요. 그런 다음 Blacklist Words/Phrases를 Enable (활성화) 시키고 Options (설정)에 들어갑니당

Options에 들어가면 차단할 문장 및 단어를 설정할 수 있는 창이 나오는데, 여기서 Blacklist 코드를 이렇게 입력해 주세요

Blacklist 코드

~/([\u2801-\u28ff])/g
~/([\u2580-\u259f])/g
~/(\u0bf5)/g

입력한 다음 Silent를 체크 해 주세요! 이것은 Nightbot이 차단하면 채팅을 입력하지 않고 바로 조용히 차단하게 해 주는 기능이에요

이제 설정을 저장하기 위해 Submit 버튼을 눌러주세요! 그러면 Nightbot이 앞으로 도배봇을 막아줄거예요!

아무튼 읽어주셔서 감사합니다! 🙂

카테고리
Twip 스킨

팝업 채팅 스킨

body {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 2em)
}

body,
html {
    font: $font_sizepx '$font_face', sans-serif;
    background-color: $background_color;
    height: 100%;
    overflow: hidden
}

#log {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: absolute;
    bottom: 20px;
    left: 0;
    padding: 0 1em;
    width: 100%;
    box-sizing: border-box
}

#log div {
    width: calc(100% - 20px);
    background: #fff;
    box-shadow: 1px 1px 0 #8eabc5, 2px 2px 0 #8eabc5, 3px 3px 0 #8eabc5, 4px 4px 0 #8eabc5, 5px 5px 0 #8eabc5, 6px 6px 0 #8eabc5, 7px 7px 0 #8eabc5, 8px 8px 0 #8eabc5, 9px 9px 0 #8eabc5, 10px 10px 0 #8eabc5;
    margin: .5em 0 0;
    padding: 0.3em 0.4em;
    line-height: 1.2em;
    animation: InBox .5s ease, OutBox 1s ease $message_hide_delays forwards;
    -webkit-animation: InBox .5s ease, OutBox 1s ease $message_hide_delays forwards
}

.badge {
    padding: 0.05em;
}

.meta {
    font-weight: 600;
    margin-right: 0.3em
}

.deleted {
    visibility: hidden
}

.message {
    color: $text_color !important;
    word-wrap: break-word;
}

.badge,
.colon,
.name {
    vertical-align: middle
}

img {
    width: 1em;
    margin-right: 0.3em;
    vertical-align: middle !important
}


/* 닉네임 가독성 해결 */

span.meta[style="color: #00FF00"] {
    color: #3FD83F !important
}

span.meta[style="color: #0000FF"] {
    color: #4586FF !important
}

span.meta[style="color: #5F9EA0"] {
    color: #56BFA8 !important
}

span.meta[style="color: #B22222"] {
    color: #FB6767 !important
}

span.meta[style="color: #2E8B57"] {
    color: #1CE048 !important
}

span.meta[style="color: #191970"] {
    color: #8383DE !important
}

span.meta[style="color: #008000"] {
    color: #49CC49 !important
}

span.meta[style="color: #D2691E"] {
    color: #DC8444 !important
}

span.meta[style="color: #FF0000"] {
    color: #FF4A4A !important
}

@keyframes InBox {
    0% {
        opacity: 0;
        margin: 0 -10px -10px 0;
        box-shadow: 0 0 0 #8eabc5
    }
    to {
        opacity: 1;
        margin: .5em 0 0;
        box-shadow: 1px 1px 0 #8eabc5, 2px 2px 0 #8eabc5, 3px 3px 0 #8eabc5, 4px 4px 0 #8eabc5, 5px 5px 0 #8eabc5, 6px 6px 0 #8eabc5, 7px 7px 0 #8eabc5, 8px 8px 0 #8eabc5, 9px 9px 0 #8eabc5, 10px 10px 0 #8eabc5;
    }
}

@keyframes OutBox {
    0% {
        opacity: 1;
        margin: .5em 0 0;
        box-shadow: 1px 1px 0 #8eabc5, 2px 2px 0 #8eabc5, 3px 3px 0 #8eabc5, 4px 4px 0 #8eabc5, 5px 5px 0 #8eabc5, 6px 6px 0 #8eabc5, 7px 7px 0 #8eabc5, 8px 8px 0 #8eabc5, 9px 9px 0 #8eabc5, 10px 10px 0 #8eabc5;
    }
    to {
        opacity: 0;
        margin: 0 -10px -10px 0;
        box-shadow: 0 0 0 #8eabc5
    }
}

이번에는 입체적인 채팅 스킨을 만들었어요!

해당 스킨은 Chrome의 렌더링 버그 때문에 그림자의 크기는 글꼴 크기에 따라 변경 되는 것이 아닌 고정 크기로 되어 있습니다. 또한 채팅창의 너비는 그림자의 크기 때문에 역시 고정으로 되어 있어요

카테고리
Twip 스킨

레트로 채팅 스킨

@font-face {
  font-family: '_neodgm';
  src: url('https://dalgona.github.io/neodgm/assets/neodgm_code.woff2') format('woff2'),
       url('https://dalgona.github.io/neodgm/assets/neodgm_code.woff') format('woff'),
       url('https://dalgona.github.io/neodgm/assets/neodgm_code.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
}

body {
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 2em )
}

body,
html {
	font: $font_sizepx '_neodgm', monospace;
	background-color: $background_color;
	height: 100%;
	overflow: hidden
}

#log {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0 0.5em 0.1em;
	width: 100%;
	box-sizing: border-box
}

#log div {
	background: #000;
	box-shadow: 0 0 0 0.15em #fff, 0 0 0 0.3em #000;
	margin: 0.8em 0.7em;
	padding: 0.3em 0.4em;
	padding-bottom: 0.3em;
	line-height: 1.2em;
	animation: fadeInUp .5s ease, fadeOut 1s ease $message_hide_delays forwards;
	-webkit-animation: fadeInUp .5s ease, fadeOut 1s ease $message_hide_delays forwards
}

.badge {
	padding: 0.05em;
}

.meta {
	font-weight: 600;
	margin-right: 0.3em
}

.deleted {
	visibility: hidden
}

.message {
	color: $text_color !important;
	word-wrap: break-word;
}

.badge,
.colon,
.name {
	vertical-align: middle
}

img {
	width: 1em;
	margin-right: 0.3em;
	vertical-align: middle !important
}

/* 닉네임 가독성 해결 */
span.meta[style="color: #00FF00"] {
  color: #3FD83F !important
}

span.meta[style="color: #0000FF"] {
  color: #4586FF !important
}

span.meta[style="color: #5F9EA0"] {
  color: #56BFA8 !important
}

span.meta[style="color: #B22222"] {
  color: #FB6767 !important
}

span.meta[style="color: #2E8B57"] {
  color: #1CE048 !important
}

span.meta[style="color: #191970"] {
  color: #8383DE !important
}

span.meta[style="color: #008000"] {
  color: #49CC49 !important
}

span.meta[style="color: #D2691E"] {
  color: #DC8444 !important
}

span.meta[style="color: #FF0000"] {
  color: #FF4A4A !important
}

옛날 느낌이 나는 스킨을 만들까 생각해서 만들었습니다! 아마 이런 느낌을 좋아하시는 분들이 있지 않을까 생각했기 때문에, 옛날 컴퓨터 화면을 참고해서 직접 제작했어요

레트로 스킨에서 쓰인 글꼴의 저작권은 Neo 둥근모 프로젝트에 있습니다

카테고리
Twip 스킨

LINE 채팅 스킨

body {
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 2em)
}

body,
html {
	font: $font_sizepx '$font_face', serif;
	background-color: $background_color;
	height: 100%;
	overflow: hidden
}

#log {
	display: flex;
	flex-direction: column;
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0 0.5em 0.1em;
	width: 100%;
	word-wrap: break-word;
	box-sizing: border-box
}

#log>div {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	color: $text_color !important;
	margin: -0.3em 0.3em 0.7em 0.3em;
	animation: fadeInUp .5s ease, fadeOut 1s ease $message_hide_delays forwards
}

.reverse #log>div {
	align-items: flex-end
}

.meta {
	color: $text_color !important;
	margin: 0.25em 0;
	font-weight: 800
}

.message {
	justify-content: flex-start;
	background-color: #fff;
	border-radius: 1.25em;
	padding: 0.5em 0.7em;
	word-wrap: break-word;
	line-height: 1.5em;
	font-weight: 400
}

.moderator,
.broadcaster {
	align-items: flex-end !important
}

.reverse #log>div.moderator,
.reverse #log>div.broadcaster {
	align-items: flex-start !important
}

.moderator .message,
.broadcaster .message {
	background-color: #b1eb6b !important
}

.deleted {
	visibility: hidden
}

.badge,
.colon,
.name,
.message {
	vertical-align: middle
}

.badge {
	margin-right: 0.3em;
	height: 1em
}

.colon {
	display: none
}

.message>img {
	height: 1em
}

.emote_wrap {
	position: relative
}

.emoticon {
	height: $font_sizepx;
	vertical-align: middle;
	margin: -0.1em 0;
	image-rendering: pixelated
}

아마 Twip에 Kakao 라는 스킨을 보셨을 겁니다! 물론 Kakao 스킨은 제가 만든 것이 아니기 때문에! 제가 이번에 LINE 메신저를 참고해서 LINE 스킨을 만들었습니당

Kakao 스킨처럼 스트리머 (Broadcaster)와 매니저 (Moderator)만 오른쪽으로 표시되게 해 두었고, 반대로도 설정 가능하게 해 두었어요

아무튼 잘 쓰시기 바래요!

카테고리
Twip 스킨

무지개 2 채팅 스킨

body {
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 2em)
}

body,
html {
	font: $font_sizepx '$font_face', serif;
	background-color: $background_color;
	height: 100%;
	overflow: hidden
}

#log {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0 0.5em 0.1em;
	width: 100%;
	box-sizing: border-box
}

#log>div {
	background-color: white;
	padding: 0.2em 0.5em;
	margin: -0.3em 0.3em 0.7em 0.3em;
	border-radius: 0.2em;
	box-shadow: 0 0.2em 0.3em rgba(0, 0, 0, 0.5);
	animation: fadeInUp .5s ease, fadeOut 1s ease $message_hide_delays forwards;
}

#log>div:nth-last-child(10n-9)>.meta>.name {
	background: linear-gradient(135deg, #f2297c 0%, #ff9393 100%)
}

#log>div:nth-last-child(10n-8)>.meta>.name {
	background: linear-gradient(135deg, #f2482a 0%, #ffd093 100%)
}

#log>div:nth-last-child(10n-7)>.meta>.name {
	background: linear-gradient(135deg, #ff973d 0%, #ffdd00 100%)
}

#log>div:nth-last-child(10n-6)>.meta>.name {
	background: linear-gradient(135deg, #b1bc1a 0%, #c3ef27 100%)
}

#log>div:nth-last-child(10n-5)>.meta>.name {
	background: linear-gradient(135deg, #58aa22 0%, #a0efa9 100%)
}

#log>div:nth-last-child(10n-4)>.meta>.name {
	background: linear-gradient(135deg, #02ccbb 0%, #3df5ff 100%)
}

#log>div:nth-last-child(10n-3)>.meta>.name {
	background: linear-gradient(135deg, #0162ff 0%, #3dd5ff 100%)
}

#log>div:nth-last-child(10n-2)>.meta>.name {
	background: linear-gradient(135deg, #396ced 0%, #afb7ff 100%)
}

#log>div:nth-last-child(10n-1)>.meta>.name {
	background: linear-gradient(135deg, #8139ed 0%, #deafff 100%)
}

#log>div:nth-last-child(10n)>.meta>.name {
	background: linear-gradient(135deg, #ed39ed 0%, #ffaff0 100%)
}

.name {
	color: #fff !important;
	border-radius: 1em;
	box-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.15);
	margin-right: 0.5em;
	padding: 0.2em 0.5em;
	font-weight: 700;
	font-size: 0.8em;
}

.message {
	color: $text_color !important;
	line-height: 1.5em;
	font-weight: 400
}

.deleted {
	visibility: hidden
}

.badge,
.colon,
.name,
.message {
	vertical-align: middle
}

.badge {
	margin-right: 0.3em;
	height: 1em
}

.colon {
	display: none
}

.message>img {
	height: 1em
}

.emote_wrap {
	position: relative
}

.emoticon {
	height: $font_sizepx;
	vertical-align: middle;
	margin: -0.1em 0;
	image-rendering: pixelated
}

이번에는 무지개 스킨을 좋아하는 분들을 위해 새로 만든 무지개 스킨 입니다!

닉네임 가독성 부분은 안 좋긴 하지만 “예쁜 스킨”을 원하시는 분들이 있을 것 같아서 배포를 합니다!

카테고리
Twip 스킨

구름 채팅 스킨

body {
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 2em)
}

body,
html {
	font: $font_sizepx '$font_face', serif;
	background-color: $background_color;
	height: 100%;
	overflow: hidden
}

#log {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0 0.5em 0.1em;
	width: 100%;
	box-sizing: border-box
}

#log>div {
    text-shadow: 0 0 0.05em #000,0 0 0.05em #000,0 0 0.05em #000,0 0 0.05em #000,
    0 0 0.05em #000,0 0 0.05em #000,0 0 0.05em #000,0 0 0.05em #000,
    0 0 0.05em #000,0 0 0.05em #000,0 0 0.05em #000,0 0 0.05em #000,
    0 0 0.05em #000,0 0 0.05em #000,0 0 0.05em #000,0 0 0.05em #000,
    0.05em 0.05em 0.05em #000,0.05em 0.05em 0.05em #000,0.05em 0.05em 0.05em #000,0.05em 0.05em 0.05em #000,
    0.05em 0.05em 0.05em #000,0.05em 0.05em 0.05em #000,0.05em 0.05em 0.05em #000,0.05em 0.05em 0.05em #000,
    0.05em 0.05em 0.05em #000,0.05em 0.05em 0.05em #000,0.05em 0.05em 0.05em #000,0.05em 0.05em 0.05em #000,
    0.05em 0.05em 0.05em #000,0.05em 0.05em 0.05em #000,0.05em 0.05em 0.05em #000,0.05em 0.05em 0.05em #000;
    animation: fadeInUp .5s ease, fadeOut 1s ease $message_hide_delays forwards;
}

.meta {
	margin-right: -0.5em;
	font-weight: 700
}

.message {
	color: $text_color !important;
	line-height: 1.5em;
	margin-top: 0.9em;
	font-weight: 400
}

.deleted {
	visibility: hidden
}

.badge,
.colon,
.name,
.message {
	vertical-align: middle
}

.badge {
	margin-right: 0.3em;
	height: 1em
}

.colon {
	margin-right: 0.7em
}

.message>img {
	height: 1em
}

.emote_wrap {
	position: relative
}

.emoticon {
	height: $font_sizepx;
	vertical-align: middle;
	margin: -0.1em 0;
	image-rendering: pixelated
}

/* 닉네임 가독성 해결 */

span.meta[style="color: #00FF00"] {
	color: #37B737 !important
}

span.meta[style="color: #0000FF"] {
	color: #2A74FF !important
}

span.meta[style="color: #5F9EA0"] {
	color: #56BFA8 !important
}

span.meta[style="color: #B22222"] {
	color: #FB6767 !important
}

span.meta[style="color: #2E8B57"] {
	color: #1CC24D !important
}

span.meta[style="color: #191970"] {
	color: #8383DE !important
}

span.meta[style="color: #008000"] {
	color: #49CC49 !important
}

span.meta[style="color: #D2691E"] {
	color: #DC8444 !important
}

span.meta[style="color: #FF0000"] {
	color: #FF4A4A !important
}

이번에 새로 만든 채팅 스킨 입니다!

뒷 배경이 보이면서 가독성이 좋은 스킨을 만들고자 하는 생각으로 만들게 되었어요! 스킨 이름은 “구름”이지만 아마 다른 이름으로 바뀔지도 모르겠네요 ㅎㅎ

아무튼 잘 쓰시기 바랄게요!

카테고리
Twip 스킨

리본 채팅 스킨 (미완성)

@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);

body {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20% )
}

body,
html {
  font: $font_sizepx 'NanumSquare', serif;
  background-color: $background_color;
  height: 100%;
  overflow: hidden
}

#log {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 0.5em 0.1em;
  width: 100%;
  box-sizing: border-box
}

#log > div {
  background-color: #fff;
  padding: 0.2em 0.5em;
  margin: 0em 0.3em 0.7em 1em;
  box-shadow: 0 0.3em 0.4em rgba(0, 0, 0, 0.25);
  animation: fadeInUp .5s ease, fadeOut 1s ease $message_hide_delays forwards;
  -webkit-animation: fadeInUp .5s ease, fadeOut 1s ease $message_hide_delays forwards;
}

.meta {
  display: block;
  margin: 0 0 0.1em -0.7em;
  padding: 0.3em 0.5em;
}

.name {
  color: #fff !important;
  background-color: #EF6D86;
  margin: 0 0 0.3em -1em;
  padding: 0.3em 1.3em 0.3em 0.5em;
  font-weight: 700
}

.name:after, .name:before {
  content: '';
  position: absolute;
  border-style: solid
}

.name:after {
  margin: -0.3em 0 0 0.4em;
  border-width: 0.9em 0.45em;
  border-color: transparent #fff transparent transparent
}

.name:before {
  margin: 1.4em 0 0 -0.5em;
  border-width: 0.35em;
  border-color: #BA4258 #BA4258 transparent transparent
}

.message {
  color: $text_color !important;
  word-wrap: break-word;
  line-height: 1.5em;
  margin-top: 0.9em;
  font-weight: 400
}

.deleted {
  visibility: hidden
}

.badge,
.colon,
.name,
.message {
  vertical-align: middle
}

.badge {
  display: none;
}

.colon {
  display: none;
}

.message > img {
  height: 1em
}

.emote_wrap {
  position: relative
}

.emoticon {
  height: 1em;
  vertical-align: middle;
  margin: -0.1em 0;
  image-rendering: optimizespeed;
  -webkit-image-rendering: pixelated
}

가장 많은 분들이 요청한 리본 스킨 입니다

본 스킨은 디자인적으로 오류가 있지만 실사용에는 큰 문제가 없기 때문에 공개를 합니다!

카테고리
Twip 스킨

쿠로 채팅 스킨 (2차 수정판)

body {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 2em )
}

body,
html {
    font: $font_sizepx '$font_face', NanumGothic, serif;
    color: $text_color;
    background-color: $background_color;
    margin: 0;
    height: 100vh;
    box-sizing: border-box;
    overflow: hidden
}
  
#log {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 0.3em 0.3em 0.3em;
    width: 100vw;
    box-sizing: border-box
}

#log div {
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    margin-top: 0.2em;
    padding: 0.2em;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 0.15em;
    box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.5);
    animation: fadeInUp .5s ease, fadeOutUp .5s ease $message_hide_delays forwards;
}

#log > div.deleted {
    visibility: hidden
}
  
#log .emote_wrap {
    position: relative
}
  
#log .emote_wrap img.emoticon {
    height: $font_sizepx;
    vertical-align: middle;
    margin: .1em 0
}
  
#log .meta {
    padding-right: .1em;
    position: relative
}
  
.badge,
.colon,
.name {
    display: inline-block;
    vertical-align: top
}
  
.colon,
.name {
    height: 1em
}
  
.name {
    font-weight: 600;
    margin-left: .1em
}
  
.badge {
    margin: 1px 3px 3px 0;
    display: inline-block;
    vertical-align: middle
}

.badge, span.message > img {
    height: 1em
}
  
/* 닉네임 가독성 해결 */
span.meta[style="color: #00FF00"] {
    color: #3FD83F !important
}
  
span.meta[style="color: #0000FF"] {
    color: #4586FF !important
}
  
span.meta[style="color: #5F9EA0"] {
    color: #56BFA8 !important
}
  
span.meta[style="color: #B22222"] {
    color: #FB6767 !important
}
  
span.meta[style="color: #2E8B57"] {
    color: #1CE048 !important
}
  
span.meta[style="color: #191970"] {
    color: #8383DE !important
}
  
span.meta[style="color: #008000"] {
    color: #49CC49 !important
}
  
span.meta[style="color: #D2691E"] {
    color: #DC8444 !important
}
  
span.meta[style="color: #FF0000"] {
    color: #FF4A4A !important
}

기존에 있는 쿠로 스킨을 조금 더 넓게 보이게 수정했습니다

스트리머님의 요청으로 제작되었으며, 수정이 필요한 부분은 더 수정해서 여기에 올리겠습니다 🙂