# Show GN: 치지직 클립 다운로더 크롬익스텐션

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

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=26186](https://news.hada.io/topic?id=26186)
- GeekNews Markdown: [https://news.hada.io/topic/26186.md](https://news.hada.io/topic/26186.md)
- Type: show
- Author: [aciddust](https://news.hada.io/@aciddust)
- Published: 2026-01-28T10:35:07+09:00
- Updated: 2026-01-28T10:35:07+09:00
- Original source: [media-processor.github.io](https://media-processor.github.io/chzzk-clip-downloader/)
- Points: 16
- Comments: 17

## Summary

**치지직 클립 다운로더 크롬익스텐션**은 브라우저 내에서 바로 클립을 저장하고 **mp4로 변환**할 수 있도록 만든 실험적 도구입니다. 외부 API 호출이나 별도 프로그램 없이 작동하며, ffmpeg 대신 필요한 기능만 직접 구현해 wasm으로 빌드해 **211KB 수준의 가벼운 번들**을 구현했습니다. SvelteKit과 TailwindCSS 기반으로 팝업·사이드패널 UI를 제공해, 스트리밍 클립을 손쉽게 관리할 수 있습니다.

## Topic Body

크롬익스텐션 방식으로 작동하는 치지직 클립 다운로더입니다  
외부 페이지 이동이나 API 호출 없이 작동합니다  
  
별도의 스크립트를 작성하거나  
ffmpeg 같은 별도의 프로그램을 사용하는게 번거로워서  
브라우저에서 팝업이나 사이드패널로 사용할 수 있도록 만들어보았습니다.  
  
라이브 스트리밍 되는 ts(transport stream) 파일을 하나씩 붙여서 내어주었다면  
쉬운 작업이 되었을 것 같은데  
  
별도의 통합코덱이 설치된 플레이어를 받아야 ts 파일을 재생할 수 있는점이 아쉬워서  
mp4 로 변환하는 기능을 추가했습니다.  
  
이 과정에서 wasm 으로 빌드된 ffmpeg 를 올려야하나 싶었지만  
필요한 기능에 비해 너무 과하고 번들 크기를 늘려버리는게 마음에 안들었는데요  
  
그래서 다소 실험적이지만 ts, mp4 파일 구조를 공부할겸  
에이전트의 도움을 받아 필요한 기능만 작성해서 wasm 으로 빌드한 뒤에 적용해보았습니다.  
  
이러한 이유로 릴리즈 버전의 크기는 압축파일 기준으로 약 211KB 정도 나오네요  
  
언제 또 스트림 방식이나 구조가 달라질지 모르겠지만  
  
그 때가 되면 또 다른 도전을 해볼 수 있을 것 같다는 생각이 드네요  
  
#### 사용한 것들  
  
- sveltekit  
- shadcn-svelte  
- tailwindcss  
- ts2mp4 (https://github.com/aciddust/ts2mp4)  
- imgico (https://crates.io/crates/imgico)

## Comments



### Comment 51609

- Author: roxie
- Created: 2026-02-23T09:54:44+09:00
- Points: 1

혹시 괜찮으시다면 랜딩 페이지는 어떤 스택/툴로 만드셨는지 궁금합니다 깔끔하고 이뻐서요

### Comment 51616

- Author: aciddust
- Created: 2026-02-23T10:08:11+09:00
- Points: 1
- Parent comment: 51609
- Depth: 1

안녕하세요. 익스텐션과 마찬가지로 sveltekit, tailwindcss 사용했고, 일부 컴포넌트는 shadcn-svelte 사용했습니다~

### Comment 51647

- Author: roxie
- Created: 2026-02-23T13:20:56+09:00
- Points: 1
- Parent comment: 51616
- Depth: 2

와 따로 템플릿 같은게 있지는 않으셨나요? 정말 대단합니다

### Comment 51655

- Author: aciddust
- Created: 2026-02-23T13:52:25+09:00
- Points: 1
- Parent comment: 51647
- Depth: 3

https://github.com/media-processor/chzzk-clip-downloader  
랜딩페이지 레파지토리입니다.  
---  
  
클립다운로더 랜딩을 만들기전에 화면구성을 어떻게 할지 고민을 좀 했는데요  
mobbin 같이 래퍼런스 잘 모아둔 곳에서 괜찮겠다 싶은 시안을 몇 가지 골라보고  
Google AI Studio 같은 에이전트에 입력하는 방식으로 PoC를 진행한 적 있습니다~  
  
https://github.com/sc-ahn/portfolio-example  
https://portfolio-example-eosin.vercel.app  
  
이 때 얻은 컨셉을 차용해서 작업했어요  
  
이번작업에서는 레이아웃 구성이 복잡하지도 않고  
섹션단위로 컴포넌트 구성해서 탑다운으로 배치했어요 ㅎㅎ  
  
---  
  
https://aciddust.github.io/ddt-piano/  
  
이번 연휴에 키보드매크로를 작성했는데 관련 랜딩페이지에요  
(tauri + sveltekit)  
  
템플릿으로 굳혀놓고 돌려쓰니까 작업속도가 붙어서 좋긴해요

### Comment 50167

- Author: zero0000
- Created: 2026-01-29T08:36:31+09:00
- Points: 1

스붐은

### Comment 50198

- Author: aciddust
- Created: 2026-01-29T14:15:02+09:00
- Points: 1
- Parent comment: 50167
- Depth: 1

온다  
이미 왔을지도..

### Comment 50105

- Author: ziczin7176
- Created: 2026-01-28T14:45:00+09:00
- Points: 1

오 잘쓸게용

### Comment 50106

- Author: aciddust
- Created: 2026-01-28T14:55:52+09:00
- Points: 1
- Parent comment: 50105
- Depth: 1

감사합니다! 행복하세요~

### Comment 50099

- Author: pcj9024
- Created: 2026-01-28T14:09:56+09:00
- Points: 1

쬬아요 쬬아요 스벨트킷 쬬아요

### Comment 50100

- Author: aciddust
- Created: 2026-01-28T14:11:24+09:00
- Points: 1
- Parent comment: 50099
- Depth: 1

후에에에엥 스벨트 네르지마세요

### Comment 50087

- Author: crawler
- Created: 2026-01-28T12:58:41+09:00
- Points: 1

개추 ㅋㅋㅋ

### Comment 50103

- Author: wedding
- Created: 2026-01-28T14:31:54+09:00
- Points: 2
- Parent comment: 50087
- Depth: 1

개추크레용

### Comment 50089

- Author: crawler
- Created: 2026-01-28T12:59:19+09:00
- Points: 1
- Parent comment: 50087
- Depth: 1

썸네일까지 보여주는 UI가 정말 마음에 드네요

### Comment 50092

- Author: aciddust
- Created: 2026-01-28T13:08:36+09:00
- Points: 2
- Parent comment: 50089
- Depth: 2

마음에 들어하셔서 기분이 좋네요~  
  
수집한 ts 에서 가장 처음 만나는 I-Frame(h.264) 데이터를 추출해서  
VideoDecoder 로 디코드하고 캔버스에 그리는 방식을 사용했습니다

### Comment 50086

- Author: click
- Created: 2026-01-28T12:25:53+09:00
- Points: 1

스벨트 좋아요

### Comment 50153

- Author: chanapple
- Created: 2026-01-28T23:47:52+09:00
- Points: 1
- Parent comment: 50086
- Depth: 1

스벨트 좋아요

### Comment 50090

- Author: aciddust
- Created: 2026-01-28T13:01:22+09:00
- Points: 1
- Parent comment: 50086
- Depth: 1

스벨트 좋아요~