DXB CSS : Design eXperience Builder

DXB: Design eXperience Builder

DXB CSS는 DesignOneX에서 개발하고 관리하는 오픈 소스 프로젝트입니다. Tailwind CSS의 유틸리티 퍼스트 체계를 계승하며, 복잡한 빌드 과정 없이 브라우저 런타임에서 스타일을 실시간 생성합니다. 우리는 기술적 장벽을 허물어 누구나 최상의 디자인 경험을 구축할 수 있는 환경을 만듭니다.

실시간 런타임 감시

MutationObserver를 통해 HTML의 변화를 0ms에 가깝게 포착합니다. 노드 추가나 클래스 변경을 즉시 감지하여 스타일을 생성하는 DXB의 심장부입니다. No Refresh Technology

지능형 파서 (Regex)

복잡한 유틸리티 클래스명을 유효한 CSS로 번역합니다. 정교한 정규식 매핑을 통해 w-1/2, p-4와 같은 단축 속성을 정밀한 수치로 변환합니다. Smart Mapping Engine

임의 값 및 AST 처리

대괄호([]) 문법을 활용해 표준 범위를 벗어난 수치를 자유롭게 적용합니다. AST 분석 로직이 복잡한 그리드와 색상값을 즉석에서 조립합니다. Arbitrary Values Support

DXB CSS vs Tailwind CSS

런타임 엔진의 압도적 기술력

DXB CSS는 순수 JavaScript 기반의 런타임 엔진으로, 별도의 빌드 과정 없이 브라우저에서 실시간으로 동작합니다. HTML 구조나 클래스가 변경되는 즉시 스타일을 생성·적용하는 방식으로, 개발 흐름을 중단시키지 않는 것이 가장 큰 특징입니다. 반면 Tailwind CSS는 PostCSS와 Node.js 환경을 기반으로 한 사전 컴파일 방식을 사용하며, 스타일 변경 시마다 정적 빌드 또는 JIT 재컴파일 과정이 필요합니다.

설치와 환경 측면에서 DXB CSS는 Script 한 줄만으로 즉시 실행되는 Zero Dependency 구조를 지향합니다. 추가적인 런타임이나 패키지 설치 없이 바로 사용할 수 있어 초기 진입 장벽이 매우 낮습니다. 이에 비해 Tailwind CSS는 Node.js, NPM 환경을 필수로 하며, 다수의 의존성과 설정 파일 구성이 요구됩니다.

DOM 대응 방식에서도 차이가 분명합니다. DXB CSS는 MutationObserver를 활용하여 DOM 변화를 실시간으로 감지하고, 노드 추가나 클래스 변경에 즉각 반응하여 필요한 스타일만 생성합니다. 반면 Tailwind CSS는 소스 코드 변경 이후 JIT 컴파일이 완료될 때까지 대기해야 하므로, 동적인 DOM 변화에 즉각 대응하기 어렵습니다.

메모리 관리 방식 또한 다릅니다. DXB CSS는 Set 객체 기반의 지능형 스타일 캐싱을 통해 이미 생성된 CSS를 재사용하며, 중복 연산을 최소화합니다. Tailwind CSS는 빌드 결과물의 크기를 줄이기 위해 PurgeCSS와 같은 수동 최적화 과정에 의존합니다.

수치 처리 방식에서는 DXB CSS가 동적 AST 분석을 통해 임의 값과 복합 수치를 실시간으로 조립하는 구조를 채택하고 있습니다. 이를 통해 사전에 정의되지 않은 값도 자유롭게 사용할 수 있습니다. 반면 Tailwind CSS는 Config 파일에 미리 정의된 수치를 중심으로 동작하며, 확장 시 추가 설정이 필요합니다.

베리언트 및 가상 요소 핸들링

단순한 스타일링을 넘어 상호작용을 제어합니다. hover:, focus:와 같은 접두사를 분석하여 실시간으로 가상 클래스 셀렉터를 생성합니다. 또한 before:, after:를 완벽 지원합니다.

상상하는 모든 스타일 규칙을 단 3분 만에 추가하세요.

DXB 엔진은 갇혀 있지 않습니다. 오픈소스인 dxb.js의 rules 배열에 정규식 한 줄만 추가하면, 당신만의 독창적인 유틸리티 클래스가 즉시 탄생합니다. 빌드나 컴파일을 기다릴 필요 없이 수정 즉시 브라우저에서 작동하는 무한한 확장의 자율성을 경험해보세요.

MIT Open Source License

DXB 2.0.2는 전 세계 개발자의 자유로운 창작 활동을 보장하기 위해 MIT 라이선스 하에 배포되는 완전한 오픈 소스입니다. 상업적 이용, 소스 수정, 재배포에 어떠한 제한도 없습니다.