Chzzk Watcher 는 치지직 인기 스트리머 Top 20 을 매 정각 기록해 두는 순위 아카이브예요. 10월 26일부터 28일까지 사흘 동안 버전이 v1.6 에서 v1.11 까지 올라갔는데, 대부분이 화면을 다시 그리는 일이었습니다.
그동안은 디자인 기준 문서 없이 기능을 붙일 때마다 그때그때 모양을 만들어서, 페이지마다 생김새가 제각각이었어요. 그러다 대만 야후 뉴스 기사에 인용된 뒤 사람들이 들어오기 시작했는데, 막상 들어와서는 무엇을 봐야 하는지, 이 사이트가 뭘 하는 곳인지 모르는 경우가 많았어요.
구글 애널리틱스 숫자로 보면 이렇습니다.
| 기사 전 (10/1~18) | 기사 뒤 일주일 (10/19~25) | |
|---|---|---|
| 방문(세션) | 61 | 535 |
| 한 페이지만 보고 나간 비율 | 7% | 47% |
| 방문당 본 페이지 | 2.0 | 1.3 |
| 평균 머문 시간 | 1분 58초 | 48초 |
들어온 사람은 열 배 가까이 늘었는데, 절반 가까이가 기사에 걸린 스트리머 페이지 하나만 보고 나갔어요. 대만 야후 뉴스에서 온 방문만 따로 봐도 방문당 1.4페이지였고요. 그 페이지에서 순위 차트나 다른 스트리머로 넘어가 볼 이유를 보여 주지 못한 거죠.
그래서 이참에 사이트의 목적에 맞게 화면을 고치고, 디자인도 하나로 통일하자고 마음먹었습니다.
이번 편은 그중 보는 화면 — 순위 차트, 홈, 스트리머 페이지 이야기예요.
기준부터 정했다 — "방송 전광판"
화면을 하나씩 고치기 전에 디자인 기준 문서(DESIGN.md)를 먼저 썼어요. 페이지마다 따로 고치면 또 제각각이 될 테니까요.
| 기준 | 내용 |
|---|---|
| 바탕 | 검정 바탕 + 강조색은 네온 초록 하나 |
| 숫자 | 순위·시청자 수는 고정폭 글꼴(JetBrains Mono) — 자릿수가 줄 맞춰 읽히게 |
| 글자 | 12px 아래 글자는 쓰지 않는다 |
| 색 | 색 값을 직접 쓰지 않고 토큰(bg-canvas · text-muted · text-accent …)으로만 |
| 덜어 낼 것 | 이모지, 카드 안의 카드, 보라 그라데이션 |
순위 차트 — 무지개를 금·은·동으로
가장 많이 바뀐 곳은 사이트의 중심인 시간별 순위 차트예요.
예전 Top 20 은 작은 타일 20개에 순위마다 다른 색 배지가 붙어 있었어요. 20색 무지개라 어디부터 봐야 할지 알기 어려웠죠. 지금은 1~3위만 크게, 금·은·동으로 두고 4~20위는 표로 바꿨습니다. 표에는 직전 정각보다 오르고 내린 만큼 ▲▼, 새로 들어오면 NEW 를 붙였어요.
예전엔 마지막 정각의 Top 20 만 볼 수 있었는데, 이제 위의 시각 칩을 누르면 그날 다른 정각의 Top 20 으로 바뀌어요. "그날 그 시간의 1등"을 보여 주겠다는 처음 목표에 한 걸음 더 다가간 셈이에요.
선 색은 열 개만
순위 흐름 차트도 같은 원칙으로 색을 줄였어요.
- 1~3위 — 금·은·동
- 4~10위 — 차분한 구분색 7개 (색약 시뮬레이션·대비 검사를 통과한 조합)
- 그 밖 — 회색, 고르거나 가리키면 강조색
비슷해 보이는 두 색이 색약인 사람에겐 같은 색으로 보이면 선을 구분할 수 없어서, 검사를 통과한 조합만 썼어요.
시각 줄 아래에는 얇은 하늘색 띠를 넣었어요. 밤의 남색에서 새벽, 낮 하늘, 저녁 노을로 이어져서, 숫자를 읽지 않아도 지금 보는 곳이 새벽인지 저녁인지 알 수 있어요.
자잘하지만 쓰기 편해진 것도 있어요.
- 오늘 차트는 최신 시간부터 보이게 — 폰에선 0~4시만 보여 지금 순위를 보려면 한참 밀어야 했어요
- 날짜 옆 ◀ 전날 · 다음 날 ▶ — 지난 날을 넘겨 보려면 달력을 열어야 했어요
- 범례는 지금 순위순 10명 + "전체 보기"와 이름 찾기 — 예전엔 60명 넘게 다 펼쳐졌어요
- 선을 고르면 화면 아래 "스트리머 기록 보기 →" 바 — 예전엔 숨은 더블클릭으로만 이동할 수 있어 폰에선 갈 방법이 없었어요
하루 100명을 한 화면에 — 출석표
순위 흐름 차트는 선이 많아지면 읽을 수 없어서 10명까지만 그려요. 그런데 하루 동안 Top 20 에 한 번이라도 드는 스트리머는 100명 안팎이에요. 나머지 90명은 차트에서 안 보였던 거죠.
그래서 차트 아래에 Top 20 출석표를 만들었어요. 한 줄이 스트리머 한 명, 한 칸이 정각 하나이고, 진할수록 높은 순위예요. 줄을 누르면 위의 순위 흐름 차트로 올라가 그 스트리머를 골라 줍니다.
그 위에는 시간대별 카테고리도 붙였어요. 정각마다 Top 20 시청자가 어떤 카테고리를 보고 있었는지 쌓은 막대예요(많이 본 5개 + 기타).
홈 — 들어오자마자 "지금"
예전 홈은 가운데 정렬 소개, 아이콘 카드 3개, 01·02·03 큰 단계 설명이 이어지는 전형적인 소개 페이지였어요. 정작 순위는 한참 내려가야 보였죠.
지금은 소개 바로 아래에 **"지금"**을 뒀어요.
- 그 시각 1위와 시청자 수, 다음 정각까지 카운트다운
- 주 버튼은 기능 이름 대신 결과를 말하게 — "오늘 1위 싸움 보러 가기"
- 스트리머 검색창 — 이름을 넣으면 스트리머 목록에서 바로 찾아 줘요
- 호기심 링크 — "일주일 전 이 시간엔 누가 1위였을까?" 를 누르면 그날 차트의 같은 시각 Top 20 이 열려요
스트리머 페이지 — 상황마다 첫 버튼이 다르다
스트리머 페이지는 첫 버튼부터 바꿨어요. 방송 중이면 빨간 "지금 방송 보러 가기", 아니면 초록 "N월 N일 순위 흐름 보기" 가 맨 앞에 와요. 그 사람을 찾아온 이유가 상황마다 다르니까요.
그 아래 핵심 숫자 넷(역대 최고 순위 · 최고 시청자 · 평균 시청자 · 팔로워와 30일 증감)은 카드 네 장 대신 선으로 나눈 한 판으로 묶었어요.
주간 기록 → 월간 달력
예전엔 주 단위로 기록을 넘겨 봤는데, 이걸 월간 기록으로 바꿨어요. 달력 칸마다 그날 최고 순위가 색과 숫자로 찍혀 있어서, 한 달 동안 언제 잘나갔는지 한눈에 보여요. 칸을 누르면 그날 하루 카드(24칸 띠 + 정각마다의 기록과 당시 채팅)로 내려갑니다.
순위 색도 사이트 전체에서 하나로 맞췄어요. 1~3위는 금·은·동, 나머지는 초록 — 차트, 표, 달력, 타임라인 어디서 봐도 같은 색이 같은 뜻이에요.
덜어 낸 것들
이번 개편은 더한 것만큼 뺀 것도 많아요.
- 섹션 제목의 이모지, 카드 안에 또 카드를 넣은 상자, 보라 그라데이션
- 노란 안내 상자, 12px 아래의 작은 회색 글자
- 순위 배지 20색, 시간대 배경 띠
- 더 이상 쓰지 않는 컴포넌트 3개와 주간 히트맵
예전에도 눈에 띄게 하려고 넣은 장식들이었지만, 막상 사람들이 몰렸을 때는 오히려 무엇을 봐야 할지 흐리게 만들고 있었어요. 더하는 것보다 빼는 게 먼저였어요.
다음 편
이번 편이 보는 화면이었다면, 다음 편은 다시 오게 만드는 기능 이야기예요.
- 스트리머 기록을 카드 이미지로 나누는 공유 시트
- 로그인 없이 저장하는 내 스트리머 ★
- 같은 시간대에 자주 함께 Top 20 에 드는 자주 겹치는 스트리머
- 검색과 AI 답변에서 들어오게 다듬은 것들
직접 보고 싶다면 오늘의 치지직 순위 차트부터 열어 보세요.