# Show GN: OBS에서 이용할 수 있는 치지직 채팅창 CSS (4K UHD 화면 전용)

> Clean Markdown view of GeekNews topic #13755. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=13755](https://news.hada.io/topic?id=13755)
- GeekNews Markdown: [https://news.hada.io/topic/13755.md](https://news.hada.io/topic/13755.md)
- Type: show
- Author: [chabulhwi](https://news.hada.io/@chabulhwi)
- Published: 2024-03-11T13:20:09+09:00
- Updated: 2024-03-11T13:20:09+09:00
- Original source: [github.com/chabulhwi](https://github.com/chabulhwi/chzzk-custom-css)
- Points: 5
- Comments: 6

## Topic Body

### chzzk-custom-css  
  
치지직 채팅창을 브라우저 소스로 OBS에 추가할 때 활용할 수 있는 사용자 지정 CSS 파일입니다. 단, 기본(캔버스) 해상도가 3840 × 2160 (4K UHD)이어야 됩니다.  
  
* 불투명도가 0.9인 검은 배경을 채팅 목록의 각 항목에 추가했습니다. 해당 배경의 둥근 모서리는 반지름이 24픽셀입니다.  
* 채팅, 구독, 후원 메시지의 모든 요소를 4배 확대했습니다.  
  
#### 왜 만들었나요?  
  
마지막남은뚜또 님이 만든 [커스텀 치지직 통합채팅창 오버레이][ddutto]는 비공개 소스 서비스로 보여서 이것에 의존하고 싶지 않았습니다. 물론 통합 채팅창이 필요한 분들은 이 서비스를 이용하셔야 됩니다.  
  
#### 붙임  
  
제가 CSS를 배운 적이 없다 보니, 이 파일을 이상하게 작성했을 수 있습니다.  
  
[ddutto]: https://docs.google.com/document/d/1muj0oGkGhKJ2qzaUWOQdDoJVNE56SIZ9zVgWcIur-Pc/edit

## Comments



### Comment 23636

- Author: olivecake
- Created: 2024-03-11T14:13:26+09:00
- Points: 2

오픈소스 채팅 오버레이를 원하신다면 제가 만든 [ChaosRat](https://chaosrat.update.sh/)도 사용해보세요.  
다양한 플랫폼을 지원하고, 앞으로 커스텀 CSS 기능도 제공할 예정입니다.  
소스코드는 https://github.com/yf-dev/chaosrat 에서 확인하실 수 있습니다(MIT License).

### Comment 25247

- Author: saori6629
- Created: 2024-05-14T17:22:40+09:00
- Points: 1
- Parent comment: 23636
- Depth: 1

ChaosRat 을 너무 잘 쓰고 있는데용......... 혹시 팬더티비나 플렉스티비 팝콘같은 타 플랫폼도 추가할 방법은 없을까요?

### Comment 25262

- Author: olivecake
- Created: 2024-05-15T13:09:45+09:00
- Points: 1
- Parent comment: 25247
- Depth: 2

제가 사용하지 않는 플랫폼이라 직접 지원할 예정은 없습니다.  
누군가 작업해서 PR 주신다면 서비스에 반영할 수는 있을 것 같습니다.

### Comment 23637

- Author: chabulhwi
- Created: 2024-03-11T14:23:16+09:00
- Points: 1
- Parent comment: 23636
- Depth: 1

아, 검색 엔진으로 이 채팅 오버레이를 못 찾은 게 정말 아쉽네요. 알려 주셔서 감사합니다!

### Comment 23634

- Author: chabulhwi
- Created: 2024-03-11T13:25:13+09:00
- Points: 1

* CSS 파일: https://github.com/chabulhwi/chzzk-custom-css/blob/master/chat_4k_uhd.css

### Comment 23643

- Author: chabulhwi
- Created: 2024-03-11T16:48:39+09:00
- Points: 1
- Parent comment: 23634
- Depth: 1

이모티콘 크기는 4배 말고 3배 확대했다는 점을 제가 놓쳤네요.
