사이드바 그리드 v2.1 - 사이드바 봇 아이콘 배열 변경 (170957

RisuAI
Quarterly
ISSUE 02  ·  SPRING 2026  ·  ₩ 0
Cover Story · Plugins
사이드바를
다시 짜다.
하나의 열에 갇혀있던 캐릭터들을 풀어주는 작은 플러그인. 테마와 싸우지 않고, 새로고침을 강요하지 않으며, 그저 메인 DOM에 자기 자리를 만들어 산다.
글 ·
Canister
|  v2.0 릴리스
사
이드바 그리드는 두 줄짜리 요청에서 시작했다.
"캐릭터 카드를 한 화면에 더 많이 띄울 수 없을까."
단순한 CSS 한 덩어리면 끝날 줄 알았다. 그러나 RisuAI의 customCSS 필드는 테마 매니저의 영토였고, 우리가 적어넣은 규칙은 사용자가 테마를 바꾸는 순간 깨끗이 지워졌다. v1은 그것을 3초 폴링으로 막았고, v2는 폴링을 버리고 메인 DOM에 직접 자리를 잡는 길을 택했다.
BY THE NUMBERS
표시 가능 열 수
1 — 5
테마 변경 시 폴링 빈도
0 Hz
새로고침 없이 유지되는가
예
필요 API 버전
3.0
Part I
네 가지 특징
i.
자유로운 열 수
1열부터 5열까지 토글 한 번으로. 실시간 프리뷰는 적용 전 어떻게 보일지 미리 알려준다.
iii.
폴더 모드
폴더를 펼친 순간에만 그리드. 평소 사이드바는 본래 모습 그대로.
ii.
테마와의 독립
customCSS DB가 아닌 메인 DOM에 자기 style 태그를 심는다. 테마가 바뀌어도, 테마 매니저가 customCSS를 덮어써도, 우리 자리는 그대로다.
iv.
폴링 없음
setInterval 한 번도 부르지 않는다. 한 번 자리를 잡으면 더는 일하지 않는다.
"테마는 customCSS만 쥐고 흔든다.
그렇다면 우리는 그 바깥에 살면 된다."
— v2.0 설계 노트
Part II · Photo
설정 화면
↑ 햄버거 메뉴에서 호출되는 320px 폭의 설정 패널. 열 수 선택, 실시간 프리뷰, 폴더 모드 토글이 한 화면에 모인다.
Part III · Comparison
한 열에서 세 열로
↑ 적용 전 — 기본 1열 사이드바, 한 화면에 6~8개
↑ 적용 후 — 3열 그리드, 한 화면에 20개 이상
Part IV · Manual
설치 절차
①
파일 다운로드
아래 다운로드 버튼으로
sidebar_grid.js
확보.
②
RisuAI 임포트
설정 → 플러그인 →
추가
→ 파일 선택.
③
활성화 + 새로고침
토글을 켜고 페이지를 한 번 새로고침해야 iframe 인스턴스가 만들어진다.
④
설정 후 적용
햄버거 메뉴 →
사이드바 그리드
클릭 → 열 수 선택 → 적용.
Editor's Note
첫 적용 시
mainDom 권한
을 요청하는 작은 팝업이 한 번 뜬다. 메인 문서의 head에 style 태그 하나를 추가하기 위해서만 사용되며, 다른 곳엔 손대지 않는다. 거부하면 플러그인은 조용히 비활성화된다.
Available now —
DOWNLOAD
사이드바 그리드 v2.0
PROTON DRIVE · sidebar_grid.js
Technical Appendix
▾ open
v2.0의 구조
Risuai.getRootDocument()
로 mainDom 권한 SafeDocument 획득 →
createElement('style')
+
head.appendChild
로 메인 문서에 마커 태그 박는다. customCSS에는 손대지 않는다.
설정의 영속화
x-sg-cols
·
x-sg-mode
속성에 저장. 페이지 재로드 시 attribute readback으로 복원.
v1.x의 한계
customCSS DB 패치 + 3초 폴링으로 마커 블록 사라지면 재주입. 테마 매니저와 매번 충돌, 폴링 비용. v2.0에서 폐기.
Changelog
▾ open
v2.0
mainDom 주입 전환, 폴링 제거, 테마 변경 즉시 유지
v1.1
3초 폴링 워처 추가, 테마 변경 자동 복구
v1.0
초기 릴리스 — 1~5열 그리드, 폴더 모드 토글
발행 · Canister  |  디자인 · Anthropic Claude  |  2026
— FIN —