제21회: 게시판의 '열광'을 시각화하다! 독자 계산식에 따른 스레드 기세(ikioi) 랭킹 TOP 10과 HOT 배지
요약
본 글은 2ch 스타일 게시판의 핵심 기능인 '기세(ikioi)' 알고리즘 구현 과정을 다룹니다. 기세는 단순 PV나 댓글 수가 아닌, 스레드의 실시간 활동성을 측정하여 현재 가장 활발하게 논의가 이루어지는 장소를 시각화하는 지표입니다. 이를 통해 서버 사이드에서 경과 시간 대비 댓글 증가율을 계산하고, TOP 10 랭킹 UI를 CSS Grid로 개선한 개발 과정을 설명합니다.
핵심 포인트
- 기세(ikioi)는 실시간 활동성을 측정하여 '지금'의 열기를 수치화하는 지표입니다.
- 계산식은 (현재 댓글 수 - 1) / (경과 시간 in 초) * 86,400 이며, 폭발적 증가가 중요합니다.
- 서버 로직에서 제로 나눗셈 방지를 위해 경과 시간을 최소 1초로 처리하는 안전장치를 마련했습니다.
- TOP 랭킹 UI를 CSS Grid 기반의 반응형 2열 레이아웃으로 개선하여 가독성을 높였습니다.
PV 수나 총 댓글 수가 아닙니다. 지금 이 순간, 어디에서 '축제(祭り)'가 일어나고 있는지를 초 단위로 시각화해야 합니다.
2026년에 직접 제작한 2채널 스타일 게시판 '츠우바이 채널(つゔぁいちゃんねる, 2ch.biz)' 개발 비하의 제21탄입니다. 제20회까지 철벽 보안 및 관리 기반을 다진 개발팀은 여기서부터 '게시판을 최고로 흥겹게 만드는 공세적 기능 개발'에 돌입합니다. 이번에는 2ch 문화의 상징인 '기세(勢い, ikioi)' 알고리즘 구현과, TOP 페이지를 화려하게 장식할 랭킹 UI 진화를 공개합니다.
일반적인 블로그나 뉴스 사이트에서는 인기 기사를 랭킹화하는 지표로 '페이지뷰 수(PV)'나 '좋아요 수'가 사용됩니다.
하지만 2채널의 세계에서 PV 수는 그다지 의미를 갖지 못합니다.
아무리 과거에 10만 PV가 읽힌 스레드라 하더라도, 지금 아무도 발언하고 있지 않다면 그곳은 '끝난 과소(過疎) 스레드'입니다. 반대로, 아직 만들어진 지 5분밖에 되지 않았고 PV 수는 적어도 수십 명이 일제히 글을 쓰고 있다면 그곳은 '지금 막 무언가가 일어나고 있는 열광의 중심지(祭り)' 입니다.
2채널 유저들이 원하는 것은 과거의 누적 값이 아니라, '지금 이 순간, 가장 흥겹게 떠들고 있는 장소는 어디인가' 라는 실시간 열기였습니다.
이것을 수치화한 2ch만의 개념이 바로 '기세(勢い, ikioi)' 입니다.
개발 초기(2026년 8월 21일), 모든 스레드를 가로질러 실시간으로 기세를 계산하고 TOP 페이지에 게시하는 '지금 뜨거운 스레드 TOP 10' 을 구축했습니다.
'기세'란, '그 스레드가 현재의 페이스를 유지하며 글이 계속 올라간다고 가정했을 때, 하루(24시간 = 86,400초) 동안 몇 개의 댓글에 도달하는가' 를 보여주는 이론값입니다.
기본 계산식은 다음과 같습니다.
勢い = (현재 총 댓글 수 - 1) / (현재 시간 - 스레드 생성 시간 in 초) * 86,400 (초/일)
예를 들어:
- 생성 후 1시간(3,600초) 만에 100개 댓글이 달린 스레드:
$$rac{99}{3600} imes 86400 allingdotseq 2,376$$
→기세: 2,376 (매우 활발한 인기 스레드!) - 생성 후 - 24시간(86,400초) 만에 20개 댓글이 달린 스레드:
$$rac{19}{86400} imes 86400 allingdotseq 19$$
→기세: 19 (느긋하게 진행되는 과소 스레드)
이처럼 '총 댓글 수'가 적더라도, 막 시작해서 폭발적으로 늘고 있는 스레드가 랭킹 상위에 떠오릅니다.
서버 사이드에서 모든 스레드의 기세를 계산하여 정렬하는 API 로직입니다.
public function getTrendingThreads($limit = 10) {
$now = time();
// 1. 활성 스레드(dat落ちしていないスレッド)를 추출
...
스레드가 생성된 '0초 후'에 API가 호출되면, $now - $createdTime = 0이 되어 제로 나눗셈(Division by Zero) 에러로 서버가 다운됩니다.
max(1, $now - $createdTime)
을 통해 경과 시간이 최소한 1초가 되도록 안전장치를 마련했습니다.
당초에는 TOP 페이지에 'TOP 5'를 세로로 표시했지만, 게시판이 흥겹게 달아오르자 '5개로는 너무 적다! 더 많은 화제를 일람하고 싶다'는 요청이 나왔습니다.
그래서 게재 건수를 TOP 10으로 한 번에 두 배 증량시키고, 화면을 컴팩트하면서도 아름답게 유지하기 위해 CSS Grid를 이용한 반응형 2열 레이아웃을 도입했습니다.
<!-- index.html의 기세 랭킹 골격 -->
<section class="hot-threads-section">
<div class="section-header">
...
/* style.css */
.hot-threads-grid {
display: grid;
...
랭킹인 이상, 한눈에 순위와 열기가 보이지 않으면 재미가 없습니다.
/* 순위 배지 프리미엄 그라데이션 */
.rank-badge {
display: inline-flex;
...
카드 내부에는 스레드 제목뿐만 아니라 소속된 '판명', 현재의 '총 댓글 수', 그리고 주황색으로 빛나는 '기세: 2,450'이 게시됩니다.
1위부터 3위의 메달 색상과, 고동치는 HOT 배지가 사용자에게 **'지금 당장 이 스레드를 보고 싶다!'**는 강한 충동을 줍니다.
제21회에서는 게시판의 열광을 수치와 비주얼로 표현하는 **'스레드 기세(ikioi) 랭킹 TOP 10'**에 대해 설명했습니다.
누적치가 아닌 '순간 풍속'을 추적하라: 커뮤니티 활성화에는 현재 사람이 모여 있는 장소를 실시간으로 보여주는 것이 가장 효과적입니다. -
0 나누기 방지 및 경계값 안전 설계: 수학적 계산식을 웹 앱에 통합할 때의 기본 동작입니다. -
CSS Grid를 이용한 정보 고밀도화: 화면 너비에 따라 1열에서 2열로 자연스럽게 흐르는 카드 레이아웃이 탐색 경험을 극적으로 향상시킵니다.
기세 랭킹 덕분에 인기 스레드로의 유입 경로는 완벽해졌습니다.
하지만, 랭킹만으로는 아직 태어난 지 얼마 안 된 '신규 스레드'가 묻혀버립니다.
**'카테고리별 신규 스레드를 놓치지 않고 한눈에 확인할 수 있는 고밀도 헤드라인'**이 필요합니다.
다음 편에서는 【제22회】타임라인을 놓치지 마라! 카테고리별 신규 스레드 고밀도 헤드라인 표시로 이어집니다!
실제 서비스: https://2ch.biz/
AI 자동 생성 콘텐츠
본 콘텐츠는 Qiita AI의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기