Civitai의 이전 칩 스타일 베이스 모델 필터를 복구하는 유저스크립트

커뮤니티 반응

작성자와 유사하게 UI 변경에 불편함을 느꼈던 사용자들로부터 긍정적인 반응을 얻고 있다.

합의점 vs 논쟁점

합의점

Civitai의 드롭다운 필터 변경이 다수 모델 탐색 시 불편함을 초래했다
AI 코딩 도구를 활용하면 개인용 유저스크립트 제작 속도를 획기적으로 높일 수 있다

실용적 조언

Civitai에서 특정 모델만 보고 싶다면 이 스크립트의 블랙리스트 기능을 활용할 수 있다
유저스크립트 제작 시 Codex와 같은 AI 에이전트를 사용하면 복잡한 DOM 조작 코드를 빠르게 생성 가능하다

섹션별 상세

Civitai의 베이스 모델 필터가 드롭다운 방식으로 변경되면서 다수의 모델을 동시에 탐색하는 사용자의 작업 효율이 저하됐다. 작성자는 이를 해결하기 위해 기존의 칩(Chip) 스타일 버튼으로 UI를 되돌리는 유저스크립트를 개발했다. 브라우저에서 실행되는 스크립트가 DOM 요소를 조작하여 숨겨진 필터 옵션들을 다시 버튼 형태로 노출시킨다. 이를 통해 사용자는 스크롤 없이 한눈에 모델을 선택할 수 있다.

Civitai 필터 UI의 변경 전후를 비교한 스크린샷이다. — Screenshot왼쪽의 'BEFORE'는 드롭다운이 포함된 기본 UI를, 오른쪽의 'AFTER'는 스크립트 적용 후 모든 모델이 칩 스타일 버튼으로 펼쳐진 모습을 보여준다. 이를 통해 필터 가독성과 접근성이 어떻게 개선되는지 명확히 확인할 수 있다.

개발 과정에서 AI 코딩 에이전트인 Codex를 활용하여 구현 시간을 단축했다. 작성자는 복잡한 스크립트 작성을 위해 Codex에 요구 사항을 전달했고, 모델은 이를 제로샷(Zero-shot)으로 처리하여 전체 코드를 생성했다. 취미 개발자가 단 한 시간 만에 실용적인 도구를 완성할 수 있었던 것은 AI의 코드 생성 능력이 뒷받침되었기 때문이다. 이는 단순한 자동화를 넘어 개발 진입 장벽을 낮추는 사례이다.

사용자 편의를 위해 시각적 블랙리스트 및 화이트리스트 기능을 스크립트에 포함했다. 너무 많은 모델 칩이 화면을 가득 채우는 것을 방지하기 위해 사용하지 않는 모델은 숨기고 자주 쓰는 모델만 강조하는 로직을 하드코딩했다. 또한 현재 페이지에서 사용 가능한 모델 목록을 텍스트로 추출하는 'Copy model list' 기능을 추가하여 데이터 관리 편의성을 높였다. Civitai의 공식 목록 업데이트 여부를 감지하는 경고 시스템도 갖추고 있다.

용어 해설

유저스크립트(Userscript): — 브라우저 확장 프로그램을 통해 특정 웹사이트의 기능을 수정하거나 외형을 변경하는 자바스크립트 코드이다. 사용자는 이를 통해 서비스 제공자가 의도하지 않은 기능을 추가하거나 불편한 UI를 개선할 수 있다. 웹 서핑 경험을 개인화하는 데 필수적인 도구이다.
제로샷(Zero-shot): — AI 모델이 특정 작업에 대한 추가 학습 데이터나 예시 없이, 자연어 지시만으로 즉석에서 결과물을 생성하는 능력이다. 이 아티클에서는 Codex가 복잡한 스크립트 요구사항을 단번에 코드로 변환한 과정을 의미한다. 개발자가 복잡한 로직을 직접 설계하지 않아도 되게 해준다.
코딩 에이전트(Coding Agent): — 프로그래밍 언어를 이해하고 실행 가능한 코드를 생성하거나 오류를 수정하는 자율형 AI 도구이다. 단순한 코드 완성을 넘어 전체적인 프로그램 구조를 설계하고 구현하는 역할을 수행한다. 개발 생산성을 극대화하며 비전문가도 복잡한 스크립트를 작성할 수 있게 돕는다.
블랙리스트(Blacklist): — 특정 항목이나 데이터를 목록에서 제외하여 사용자에게 노출되지 않도록 차단하는 필터링 방식이다. 이 스크립트에서는 사용하지 않는 모델 칩을 화면에서 숨겨 UI를 깔끔하게 유지하는 용도로 사용된다. 정보 과부하를 방지하고 필요한 정보에만 집중하게 한다.

언급된 도구

Codex추천

유저스크립트 코드 생성 및 개발 보조

Civitai중립

Stable Diffusion 모델 공유 플랫폼