【제16회】불쾌한 글은 보지 않는 것이 2ch의 멋! localStorage를 활용한 클라이언트 측 '아보옹' 완벽 구현

「『반년 ROM』『어그로에 반응하는 것도 어그로』――2채널 문화의 핵심은, 자치(自治)가 아니라 개인의 무시력(スルー力)에 있다」

레이와 시대에 직접 만든 2채널풍 게시판 「츠부아이채널(つゔぁいちゃんねる, 2ch.biz)」 개발 비화의 제16탄입니다. 이번에는 서버에 의존하지 않고 브라우저(localStorage)만으로 완결시키며, 보고 싶지 않은 코테한이나 어그로 글을 순식간에 지워버리는 두 가지 표시 모드(행 아보옹 / 투명 아보옹)의 구현 테크닉을 공개합니다.

익명 게시판을 운영하다 보면, 반드시 사용자들로부터 「〇〇라는 코테한이 거슬리니 관리자가 삭제해 주세요」「애니메이션 스포일러를 쓴 사람을 활동 정지시켜 주세요」와 같은 요청이 도착합니다.

하지만 명백한 규약 위반(협박이나 불법 행위)이라면 모를까, 「단순히 마음에 들지 않는 의견」이나 「개인적으로 싫은 분위기」까지 관리자가 일일이 수동으로 삭제한다면 끝이 없습니다. 관리자가 개인의 취향에 너무 개입하면, 게시판은 숨 막히는 검열 사회가 되어버립니다.

옛날 좋았던 2채널에는 이 문제를 해결하는 최고의 지혜가 있었습니다.

「싫은 것은 자신의 화면에서 보이지 않게 하면 된다 (아보옹)」

전용 브라우저(JaneStyle 등)를 사용했던 사람이라면 누구나 도움을 받았던 「로컬 NG 기능」입니다.

이것을 외부 앱 불필요, 브라우저의 웹 표준 기능만으로 완벽하게 재현하기 위해, 개발 초기(2026년 8월 18일 밤)에 **「개인용 로컬 NG 시스템」**을 개발했습니다.

츠부아이채널의 NG 시스템은, 서버 통신을 단 1바이트도 하지 않습니다.

모든 설정과 즐겨찾기는, 사용자 브라우저의 localStorage
내에만 저장됩니다.

graph TD
A[서버에서 스레드 목록 가져오기] --> B[브라우저의 JavaScript 렌더링 루프]
B --> C{localStorage의 NG 리스트와 대조}
...

「누가 어떤 단어나 ID를 NG 등록했는지」는, 서버 관리자(저)에게조차 절대로 알 수 없습니다. 완전히 개인의 비밀로 보호됩니다.

NG 판정은 모두 클라이언트(브라우저 CPU)에서 실행되기 때문에, 1만 명의 사용자가 각각 100개의 NG 단어를 등록하고 있어도, 서버 데이터베이스 부하는 완전 제로입니다.

계정 등록이나 쿠키 동의를 일절 요구하지 않고, 사이트를 열자마자 누구나 자신만의 NG 리스트를 구축할 수 있습니다.

전용 브라우저 애호가들의 고집을 만족시키기 위해, 전통의 **「2가지 아보옹 모드」**를 탑재했습니다.

글 번호와 헤더만 남기고 본문을 가려서 접는 모드입니다.

12 :아보옹 :아보옹 [NG 설정(NG 단어: 스포일러)에 의해 비표시 (클릭으로 일시 표시)]

• 아코디언 전개: 행을 클릭하면, 그 자리에서 「슈슉」하고 원래 본문이 펼쳐지고, 다시 한 번 클릭하면 다시 접힙니다. -
  안정감: 「아, 여기서 누가 어그로를 끌었구나」라는 분위기만 파악하면서도, 불쾌한 문구는 시야에 들어오지 않습니다.

「아보옹이라는 글자조차 보고 싶지 않다!」라는 금욕적인 사용자들을 위한 모드입니다.

해당하는 글을 DOM 트리에서 완전히 제거하고, 글 11 다음이 즉시 글 13이 되도록 표시를 채워 넣습니다.

가장 큰 기술적 포인트는, **「DOM을 그린 후에 지우는 것」이 아니라, 「DOM을 생성하는 루프 단계에서 판정하여 대체하는 것」**입니다.

한 번 렌더링하고 나서 지우면, 화면이 순간적으로 깜빡이는 FOUC(Flash of Unstyled Content)가 발생해버리기 때문입니다.

// LocalStorage로부터 NG 데이터 읽기
function getNgSettings() {
const defaultSettings = {
...

조작성을 극대화하기 위해, 각 글의 헤더에 있는 작성자 ID 옆에 작은 [NG] 버튼을 설치했습니다.

명無しさん 2026/08/18 20:30 ID:m9Ka1L0q [NG]

어그로를 발견하면, 이 [NG]
을 1탭하는 것만으로, 다이얼로그 확인을 거쳐 즉시 localStorage
의 NG ID 리스트에 추가되고, 그 자리에서 화면 전체 해당 글이 아보옹으로 전환됩니다.

게다가, 헤더 우상단의 「⚙️ NG 설정」 버튼을 열면, 다음과 같은 관리 모달이 표시됩니다.

⚠️ [IMG:N] 형식 토큰은 이미지 placeholder 입니다. 번역하지 말고 원래 위치에 그대로 유지하세요.

표시 모드 전환: 라디오 버튼으로 '줄 아보옹'과 '투명 아보옹'을 순식간에 전환 -
NG 단어 목록: 등록된 단어 확인, 수동 추가, 개별 삭제 -
일괄 삭제: 실수로 너무 많이 등록했을 경우의 정리

제16회에 걸쳐는 2ch 문화의 정수라 할 수 있는 '스루 능력'을 브라우저 상에서 완벽하게 자동화하는 '개인용 로컬 NG(아보~ㄴ)' 의 설계와 구현에 대해 설명했습니다.

기술로 스루를 지원하다: 검열에 의존하지 않고, 사용자 개개인이 자신에게 맞는 타임라인을 커스터마이징할 수 있는 자유를 제공합니다. -
localStorage를 통한 프라이버시와 성능의 양립: 서버를 거치지 않는 설계가 최고의 속도와 보안을 만들어냅니다. -
깜빡임 없는 렌더링 설계: DOM 구축 루프 내에서의 판별을 통해 네이티브 앱처럼 부드러운 표시를 실현했습니다.

자신의 시야를 쾌적하게 만드는 수단을 얻었습니다.

하지만, 명백한 범죄 예고나 심각한 명예훼손 등 '개인이 스루하는 것만으로는 해결되지 않는 악질적인 글' 은 어떻게 해야 할까요?

다음 편에서는 【제17회】자율적 커뮤니티 운영으로! 원클릭 신고 기능과 관리자 모더레이션 큐 로 이어집니다!

실제 서비스: https://2ch.biz/