크롬 확장프로그램 첫 개발 - 치지직 잼포인트
채팅이 활발한 구간이 반드시 재미있는 구간은 아니다. 질문이나 토론처럼 웃긴 장면이 아니어도 채팅은 많이 올라올 수 있다. 기존 채팅 활성도 도구는 어디에 반응이 몰렸는지 보여주지만, 그 반응이 웃음인지까지 구분해 주지는 않는다. 이 차이가 치지직 잼포인트를 만들게 된 출발점이었다.
치지직 잼포인트 · CHZZK JamPoint는 채팅의 양에 더해 메시지 안의 ‘ㅋ’와 ‘?’를 분석하는 Chrome 확장프로그램이다. 한 메시지의 웃음 길이까지 반영해 재미있는 장면을 찾는 단서로 사용한다. 다시보기 전체의 반응 그래프에서 구간으로 이동하고, 찾은 장면은 타임라인으로 복사할 수 있다.
같은 영상의 채팅 활성도와 재미도. 채팅이 많이 올라오는 위치와 웃음·물음표 반응이 강한 위치를 각각 비교한다. 두 지표의 세로축은 독립적으로 표시된다.
채팅량을 넘어, 메시지 안의 반응을 보기
ㅋ 10개짜리 채팅 두 건과 20개짜리 채팅 한 건은 문자 수가 같다. 하지만 한 사람이 길게 웃은 반응을 조금 더 강하게 보고 싶었다. 그래서 메시지마다 웃음 길이에 따른 점수를 계산하고, 20개부터는 더 높이지 않도록 했다.
웃음 점수 = (min(메시지의 ㅋ 개수, 20) / 20)² × ㅋ 가중치
물음표 점수 = ?가 포함된 메시지 한 건마다 ? 가중치
재미도 = 분석 시간 범위 안의 웃음 점수 합 + 물음표 점수 합기본 가중치는 웃음 1, 물음표 0.15다. 이 설정에서 ㅋ 10개짜리 두 건은 합계 0.5, 20개 이상인 한 건은 1이 된다. 20개 이후까지 점수를 계속 올리지 않는 것은 아주 긴 메시지 하나가 결과를 지나치게 좌우하지 않도록 하기 위해서다.
물음표는 처음에는 문자 수로 합산했다가, 포함된 메시지 한 건당 한 번만 가중하는 방식으로 바꿨다. ‘?’와 ‘?????’는 모두 0.15다. 메시지별 반응을 세는 것이며, 서로 다른 시청자의 수를 세는 것은 아니다.
현재 가중치 설정. 각 값이 무엇을 기준으로 하는지 이름과 계산 예시로 보여준다.
재미도·ㅋ 반응·? 반응·채팅 활성도를 각각 선택할 수 있다. ㅋ 반응과 ? 반응은 문자 수 합계가 아니라 위 계산을 따른 점수다. 재미도는 장면을 객관적으로 평가하는 수치보다, 먼저 찾아볼 위치를 고르는 지표로 생각했다.
50구간 고정에서 방송 길이에 맞추는 방식으로
처음에는 재미도 기준을 자동으로 조절해 영상마다 약 50구간을 찾도록 했다. 볼 분량이 일정하다는 장점은 있었지만, 1시간 방송과 6시간 방송에 같은 개수를 적용하는 것은 어색했다.
현재는 구간 찾기를 세 가지 방식으로 선택한다.
- 방송 길이에 맞춤: 다시보기 길이와 시간당 목표 구간 수로 계산한다. 기본은 시간당 10개로, 5시간이면 50개, 6시간이면 60개를 목표로 한다.
- 전체 구간 수 지정: 영상 길이와 관계없이 원하는 개수를 직접 입력한다.
- 재미도 기준 지정: 점수를 입력하거나 그래프의 수평선을 드래그한다.
설정창의 구간 찾기 부분. 시간당 구간 수 아래에 해당 다시보기 길이와 계산된 목표를 함께 표시한다.
시간당 목표도 직접 바꿀 수 있다. 같은 점수의 구간이 여럿 있거나 반응을 묶는 과정에서 정확한 개수를 만들기 어려우면, 가능한 결과 중 목표에 가까운 개수로 조절한다.
한 장면의 반응이 인접한 시간대에 반복해서 잡히는 문제는 ‘가까운 구간 묶기’로 줄였다. 기본 간격은 20초이며, 0으로 설정하면 합치지 않는다. 순위는 장면의 길이보다 그 안에서 가장 강했던 분석 시간대의 점수를 기준으로 정한다.
찾은 구간을 보고, 타임라인으로 남기기
목록은 재미도 높은 순과 영상 시간순으로 정렬할 수 있다. 상위 5개로 제한하지 않고 기준에 맞는 모든 구간을 펼쳐 볼 수 있게 했다. 목록 안에는 현재 순번과 이전·다음 버튼을 넣었다. 목록만 내부에서 스크롤되어 이동 버튼이 함께 사라지지 않는다.
현재 구간 목록. 반응 강도와 비중을 비교하고, 각 구간의 시간을 복사할 수 있다.
목록의 막대는 색상으로 웃음과 물음표의 비중을, 길이로 반응 강도를 보여준다. 비중은 해당 장면의 최고 재미도가 나온 시간대 기준이다. 막대 길이는 필터에 맞는 전체 구간 중 최고 점수를 기준으로 하므로, 정렬이나 ‘더 보기’를 바꿔도 비교 기준이 유지된다.
도구 모음의 이전·다음 버튼은 영상 시간순으로 이동하고, 목록 안의 버튼은 선택한 정렬 순서를 따른다. 목록을 재미도순으로 펼쳤다는 이유만으로 평소의 이동 방식까지 바뀌지 않게 했다. 기본 단축키는 여는 대괄호와 닫는 대괄호이며, 다른 키로 변경할 수도 있다.
채팅 반응은 장면보다 늦게 올라올 수 있어 이동 시각을 앞당기는 설정도 넣었다. 기본은 10초 전이며 직접 입력하거나 5초씩 조정한다. 복사 시간에도 같은 설정이 반영된다.
개별 시간 복사 외에 전체 타임라인 복사도 제공한다. 목록에 일부만 펼쳐 놓았거나 재미도순으로 정렬했어도, 필터에 맞는 모든 구간을 영상 시간순으로 가져온다. 댓글이나 유튜브 설명란에 붙여 넣고 구간 제목을 작성하는 용도다.
채팅이 적은 시간대에서 놓친 장면 찾기
채팅이 적은 시간대의 반응은 절대 점수만 비교하면 묻힐 수 있다. 과거 시청자 수를 기준으로 보정하는 방법을 생각했지만, 필요한 데이터를 확보하지 못했다. 대신 영상 전체와 장면 주변의 채팅 빈도를 비교하는 ‘채팅량 보정 재미도’를 실험 기능으로 만들었다.
전체와 주변의 대표 채팅량에는 중앙값을 사용한다. 주변 채팅이 충분하고 전체보다 조용할 때만 점수를 올린다. 실제 시청자 수를 추정해 표시하는 기능은 아니며, 사용자가 켜고 끌 수 있다.
중요한 결정은 채팅이 많은 곳의 점수를 낮추지 않는 것이었다. 이 기능을 넣은 이유는 기존에 찾은 장면 외에 놓친 장면을 더 찾아보기 위해서다. 목표 구간 수에 맞추는 기준도 보정 전 재미도로 유지하고, 보정 배율에는 상한을 두지 않았다. ㅋ 반응·? 반응·채팅 활성도는 원래 값을 유지한다.
채팅 활성도를 재미도 위에 겹쳐 보는 기능도 같은 목적에서 추가했다. 채팅 자체가 많았던 순간과 웃음·물음표 반응이 강했던 순간을 비교할 수 있다. 두 지표는 단위가 달라 각각의 범위로 표시하므로 선 높이가 같은 점수를 뜻하지는 않는다.
플레이어에서 자연스럽게 쓸 수 있도록
기능을 붙이는 것보다 조작 흐름을 다듬는 데 손이 많이 갔다. 설정창을 만지는 중 재생 바가 사라지거나, 체크박스를 누른 뒤 스페이스바를 누르면 영상 대신 체크박스가 다시 바뀌는 문제가 있었다.
그래프와 창을 조작하는 동안에는 재생 바가 유지되도록 하고, 조작 후에는 영상의 키보드 제어로 이어지도록 포커스를 정리했다. 숫자를 입력하는 중에는 입력을 방해하지 않도록 구분했다. 구간 목록의 스크롤도 창 전체가 아닌 목록 안으로 제한했다.
창과 도구 모음은 치지직의 어두운 배경 톤에 맞추고 그래프 배경은 투명하게 유지했다. 자주 쓰는 설정은 한 줄로 정렬하고, 가중치와 실험 기능은 별도로 정리했다. 자동 테마는 치지직 테마를 따르며, 어두운 플레이어 바 내부에 배치한 도구 모음은 다크 톤을 유지한다.
도구 모음은 기본 위치를 선택하거나 로고를 잡고 드래그해 옮길 수 있다. 더블클릭하면 기본 위치로 돌아온다. 그래프 불투명도와 전체 UI 크기도 조절할 수 있다. 짧은 버튼·창 애니메이션을 넣되 시스템의 모션 감소 설정을 반영했다.
수집·저장·배포까지 확인하기
전체 채팅은 영상 내 시각에 맞춰 10초 단위로 집계한다. 마지막 페이지까지 확인한 결과만 완료된 분석으로 저장하고, 가중치나 분석 범위를 바꿀 때는 집계를 재계산한다. 설정을 바꿀 때마다 채팅을 다시 수집하지 않도록 한 구조다.
채팅 분석은 브라우저 안에서 수행한다. 채팅 원문과 작성자 식별값을 로컬 저장소에 저장하지 않고, 설정과 시간대별 집계만 유지한다. 완료된 캐시는 최대 4개, 30일 이내로 재사용한다. 실행 코드는 확장 패키지에 포함하며 개발자의 분석 서버로 채팅을 보내지 않는다.
배포 준비 과정에서는 권한과 캐시 검증을 점검하고 스토어 설명도 기능 중심으로 정리했다. 한국어를 기본으로 영어 UI를 지원하며, 언어별 설명과 스크린샷을 준비했다. 사용법과 개인정보처리방침은 별도로 배포한 전용 웹사이트에 모았다.
이 글은 배포용 패키지 1.7.2 기준이다. 확장에는 JavaScript, Manifest V3, 서비스 워커, 콘텐츠 스크립트, Shadow DOM과 Canvas 등을 사용했고, 웹사이트는 Next.js·React로 만들어 Vercel에 배포했다.
단위 테스트 61개가 통과하며 계산·수집·구간 묶기·캐시·설정·번역을 검증한다. Playwright로 주요 UI 흐름을 점검하고, 패키지를 실제 MV3 확장으로 로드해 팝업과 번역 문자열 치환도 확인했다.
개발에는 Codex를 활용했다. 웃음의 기준, 보정의 목적, 구간 이동 방식과 설정 배치는 사용하면서 직접 판단하고 수정했다. 끝까지 유지한 기준은 ‘채팅이 많다는 이유만으로 재미있다고 판단하지 않기’였다. 그 위에 반응 강도와 탐색 기능을 더해, 긴 다시보기에서 먼저 살펴볼 장면을 찾는 도구로 다듬었다.
치지직 잼포인트는 치지직·네이버의 공식 확장프로그램이 아니다. 채팅 제공 여부와 서비스 변경에 따라 일부 영상에서 이용이 제한될 수 있다.