DESIGNONEX
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 SupportDXB CSS vs Tailwind CSS
런타임 엔진의 압도적 기술력
| 기술 비교 항목 | DXB CSS (Pure JavaScript Engine) | Tailwind CSS (PostCSS/Node) |
|---|---|---|
| 작동 메커니즘 | 실시간 브라우저 런타임 (No Build) | 사전 컴파일 빌드 (Static Build) |
| 설치 및 환경 | Script 한 줄로 즉시 구동 (Zero Dependency) | Node.js, NPM 환경 및 수백개 종속성 필수 |
| DOM 실시간 대응 | MutationObserver를 통한 실시간 동적 추적 | 소스 수정 시마다 JIT 재컴파일 대기 필요 |
| 메모리 관리 | Set 객체 기반의 지능형 스타일 캐싱 | PurgeCSS 과정을 통한 수동 파일 최적화 |
| 수치 전처리 | 동적 AST 분석을 통한 임의 값 실시간 조립 | Config 파일 내 사전 정의된 수치 위주 사용 |
베리언트 및 가상 요소 핸들링
단순한 스타일링을 넘어 상호작용을 제어합니다. hover:, focus:와 같은 접두사를 분석하여 실시간으로 가상 클래스 셀렉터를 생성합니다. 또한 before:, after:를 완벽 지원합니다.
계층형 미디어 쿼리 엔진
DXB는 모바일 우선(Mobile First) 디자인 원칙을 실시간으로 구현합니다. sm, md, lg, xl, 2xl 등 5단계 표준 브레이크포인트를 감시하여, 현재 화면에서 실제 필요한 반응형 스타일만 선택적으로 생성합니다.
상상하는 모든 스타일 규칙을
단 3분 만에 추가하세요.
DXB 엔진은 갇혀 있지 않습니다. 오픈소스인 dxb.js의 rules 배열에 정규식 한 줄만 추가하면, 당신만의 독창적인 유틸리티 클래스가 즉시 탄생합니다. 빌드나 컴파일을 기다릴 필요 없이 수정 즉시 브라우저에서 작동하는 무한한 확장의 자율성을 경험해보세요.
커스텀 유틸리티 생성
회사의 고유 브랜드 컬러나 특수 애니메이션 규칙을 런타임에 직접 주입할 수 있습니다.
전역 테마의 유연성
브레이크포인트(sm, md 등)의 수치나 기본 간격을 당신의 디자인 시스템에 맞게 즉시 리셋하세요.
// 무한한 확장의 예시 const rules = [ { match: /^my-gradient-(.+)$/, prop: 'background', val: m => `linear-gradient(45deg, ${m[1]}, transparent)` }, // 당신만의 새로운 규칙이 여기에... ];
MIT Open Source License
DXB 2.0.2는 전 세계 개발자의 자유로운 창작 활동을 보장하기 위해 MIT 라이선스 하에 배포되는 완전한 오픈 소스입니다. 상업적 이용, 소스 수정, 재배포에 어떠한 제한도 없습니다.
기술적 법적 안정성
Tailwind CSS의 클래스 명명 규칙(Naming Convention)은 기능적 표준으로서 MIT 라이선스 가이드에 따라 누구나 구현할 수 있는 공용 자산입니다. DXB는 이 표준을 계승하되 내부 구동 로직은 DesignOneX가 100% 독자 설계하여 법적 분쟁을 원천 차단했습니다.
지능형 캐싱 및 GPU 가속
generatedCSS (Set 객체)를 통한 캐싱으로 중복 연산을 제거합니다. 또한 내부적으로 하드웨어 가속을 유도하여 60fps의 부드러운 애니메이션과 웹 성능의 최적화를 보장합니다.