DXB CSS : Design eXperience Builder

* dxb-css v6.0.0 "Singularity Edition" * * ⚡ v6.0.0 핵심 변경사항 (v5.0.0 대비): * * [속도] * ① Trie 접두사 분기 — 매 클래스마다 89개 rule 순회 → 평균 4~6개만 검사 * ② 정규식 사전 컴파일 — 엔진 초기화 시 1회만 compile, 재사용 * ③ ruleCache Map — generateBaseCSS 결과 영구 캐싱 (정규식 재매칭 0) * ④ requestAnimationFrame 배치 — MutationObserver 변경분 rAF로 묶어 처리 * ⑤ DocumentFragment 대신 단일 문자열 배치 append (1회 DOM 조작) * * [커버리지 +40개] * ⑥ divide-* (자식 구분선), place-* (place-items/content/self) * ⑦ scroll-snap-*, scroll-behavior, scroll-margin/padding * ⑧ touch-action-*, break-*, sr-only / not-sr-only * ⑨ accent-*, caret-*, text-decoration-color/thickness/offset * ⑩ object-position-*, backdrop-filter 전체, print: variant * ⑪ supports: variant, aria-* variant * ⑫ [&_*] 자식 선택자 arbitrary variant * * [안정성] * ⑬ arbitrary value 완전 파서 — 괄호 깊이 추적 (calc, clamp, url 등) * ⑭ 중첩 variant — dark:hover:*, hover:sm:* 등 * ⑮ try-finally showBody 안전망 유지 + 500ms 하드 타임아웃 * ⑯ localStorage 용량 초과 시 자동 분할 저장 or 포기 * * [기능] * ⑰ 다크모드 — class 방식(.dark) / media 방식 선택 가능 * ⑱ extend() — 색상/간격/폰트 등 테마 확장 API * ⑲ plugin() — 커스텀 rule 추가 API * ⑳ theme() — 테마 값 접근 API * ㉑ v5 규칙 89개 + preflight 완전 유지, a 태그 기본 스타일 유지 다운로드 : https://designonex.com/dxb-download/view/1778168792683967

스타일 엔진 초기 렌더링 구조 재설계 및 CLS 근본 해결 기존 런타임 CSS 생성 구조에서 발생할 수 있었던 초기 렌더링 지연 및 레이아웃 흔들림(CLS) 문제를 해결하기 위해, 스타일 태그를 스크립트 실행 시점에 즉시 DOM에 삽입하는 방식으로 구조를 재설계하였습니다. 이 변경은 단순한 삽입 시점 조정이 아니라, 브라우저의 렌더링 파이프라인(HTML 파싱 → CSSOM 생성 → Render Tree 구성)에 맞춘 선제적 개입 전략으로, CSS 생성 시점과 관계없이 초기 페인트 이전에 스타일 컨테이너를 확보하도록 설계되었습니다. 그 결과, 동적 스타일 생성 환경에서도 시각적 안정성을 유지하며, 사용자 경험의 핵심 요소인 First Paint 품질을 크게 향상시켰습니다. 전체 DOM 재스캔 제거 및 요소 단위 처리 아키텍처 전환 기존 v3 구조에서 사용되던 전체 DOM 스캔 기반 스타일 생성 방식(scanAndInject)은 DOM 규모가 커질수록 성능 저하를 유발하는 구조적 한계를 가지고 있었습니다. 이를 해결하기 위해, v4.5에서는 요소 단위 처리(processElement) 기반으로 엔진 아키텍처를 전면 전환하였습니다. 클래스가 존재하는 개별 요소만을 대상으로 CSS를 생성하도록 설계하여, 불필요한 반복 연산을 제거하고, DOM 트리 전체를 순회하는 비용을 근본적으로 차단하였습니다. 이로 인해 대규모 컴포넌트 환경이나 동적 렌더링이 빈번한 SPA 구조에서도 일정한 성능을 유지할 수 있는 기반을 확보하였습니다. MutationObserver 감지 범위 축소를 통한 이벤트 처리 최적화 기존 범용 attribute 감지 방식에서 발생하던 과도한 콜백 실행 문제를 해결하기 위해, MutationObserver의 감지 대상을 class 속성으로 한정(attributeFilter: ['class'])하였습니다. 이 설계는 스타일 생성과 직접적으로 연관된 변경만을 추적하도록 하여, 불필요한 DOM 변화 감지를 원천 차단합니다. 결과적으로 이벤트 루프 부담을 줄이고, CPU 사용량을 안정화시키며, 실시간 UI 변화가 많은 환경에서도 퍼포먼스 저하 없이 동작하는 구조를 구현하였습니다. CSS 변수 기반 Transform 합성 시스템 도입 기존 transform 속성은 단일 선언 단위로 덮어쓰기 되는 구조적 제약으로 인해, translate, rotate, scale, skew를 동시에 적용하는 데 한계가 존재했습니다. v4.5에서는 각 변환 요소를 개별 CSS 변수로 분리(--dxb-translate-x, --dxb-rotate, --dxb-scale-x 등)하고, 이를 하나의 transform 선언으로 합성하는 구조를 도입하였습니다. 이 방식은 단순 기능 확장이 아니라, 스타일 충돌을 방지하면서도 조합 가능한 상태 기반 변형 시스템을 구축한 것으로, 복합 애니메이션 및 인터랙션 구현에 있어 훨씬 높은 자유도를 제공합니다. CSS 변수 기반 Filter 합성 구조 확장 filter 속성 또한 transform과 동일한 구조적 한계를 가지고 있었기 때문에, blur, brightness, contrast, grayscale 등 필터 효과를 각각 독립된 CSS 변수로 분리하고, 이를 하나의 filter 체인으로 합성하는 구조를 설계하였습니다. 이를 통해 다중 필터 효과를 동시에 적용할 수 있으며, 기존의 단일 필터 덮어쓰기 방식에서 발생하던 표현 제한을 제거하였습니다. 결과적으로 디자인 표현력과 UI 디테일을 동시에 강화할 수 있는 기반이 마련되었습니다. 초기 실행 타이밍 최적화 및 렌더링 지연 최소화 document.body 존재 여부를 기준으로 즉시 실행 분기를 적용하여, DOMContentLoaded 이벤트를 기다리지 않고 가능한 가장 빠른 시점에서 엔진이 동작하도록 개선하였습니다. 이는 초기 클래스 기반 스타일을 최대한 빠르게 해석하고 적용하기 위한 전략으로, 렌더링 블로킹 요소를 최소화하고, 실제 사용자 체감 속도를 향상시키는 데 중요한 역할을 합니다. v3.0.0 규칙 및 컬러 시스템 완전 호환 유지 기존 v3.0.0에서 제공되던 89개의 유틸리티 규칙과 전체 컬러 팔레트를 변경 없이 유지하여, 모든 기존 클래스에 대한 완벽한 하위 호환성을 보장하였습니다. 이는 단순한 유지가 아니라, 엔진 구조를 전면 개편하면서도 사용자 코드에 영향을 주지 않는 안정적인 업그레이드를 목표로 한 설계입니다. 결과적으로 기존 프로젝트는 수정 없이 즉시 성능 개선 효과를 적용받을 수 있습니다. 유틸리티 범위 확장 및 CSS 표현력 강화 content, table-layout, border-collapse, mask-image 등 기존에 지원되지 않던 영역까지 유틸리티 범위를 확장하여, CSS 표현 가능 범위를 더욱 넓혔습니다. 특히 mask-image와 같은 고급 그래픽 처리 속성 지원을 통해, 단순 레이아웃 스타일링을 넘어 시각적 효과와 인터페이스 표현 영역까지 엔진의 활용 범위를 확장하였습니다. 다운로드 주소 : https://designonex.com/dxb-download

## MutationObserver 최적화 (v4.0.0): 기존 v3.0은 변화가 있을 때마다 document.querySelectorAll로 전체 페이지를 다시 훑었지만, v4.0은 추가된 노드(addedNodes)와 클래스가 바뀐 요소만 콕 집어서 처리합니다. 대규모 페이지에서 CPU 점유율을 대폭 낮췄습니다. ## 변형(Transform) 변수 시스템: 기존에는 rotate-45와 scale-150을 같이 쓰면 하나가 덮어씌워지는 고질적인 문제가 있었습니다. 이제는 --dxb-rotate, --dxb-scale 등의 CSS 변수를 사용하여, 여러 유틸리티 클래스가 하나의 요소에 동시에 적용되어도 서로의 값을 보존하며 합쳐집니다. ## 방대한 규칙 계승 (v3.0.0): v3.0.0의 모든 색상(slate, sky, amber 등), 간격, 폰트 사이즈, 미디어 쿼리(sm:, md:) 로직을 하나도 빠짐없이 포함했습니다. Before/After 가상 요소 지원: before:content-['*']와 같은 가상 요소 베리언트 생성 로직도 v3.0.0 사양 그대로 유지했습니다.