DXB: Design eXperience Builder
DXB CSS는 DesignOneX에서 개발하고 관리하는 오픈 소스 프로젝트입니다. Tailwind CSS의 유틸리티 퍼스트 체계를 계승하며, 복잡한 빌드 과정 없이 브라우저 런타임에서 스타일을 실시간 생성합니다.
DXB CSS is an open-source project developed and maintained by DesignOneX. It inherits the utility-first approach of Tailwind CSS and generates styles in real-time at browser runtime, without the need for complex build processes.
실시간 런타임 감시
Real-time Runtime Monitoring
MutationObserver를 통해 HTML의 변화를 0ms에 가깝게 포착합니다. 클래스 변경을 즉시 감지하여 스타일을 생성하는 DXB의 심장부입니다.
Captures HTML changes near 0ms via MutationObserver. It's the heart of DXB that generates styles by instantly detecting class changes.
지능형 파서 (Regex)
Intelligent Parser (Regex)
복잡한 유틸리티 클래스명을 유효한 CSS로 번역합니다. 정교한 정규식 매핑을 통해 w-1/2, p-4와 같은 속성을 정밀한 수치로 변환합니다.
Translates utility class names into valid CSS. Sophisticated regex mapping converts properties like w-1/2 into precise values.
임의 값 및 AST 처리
Arbitrary Values & AST Processing
대괄호([]) 문법을 활용해 표준 범위를 벗어난 수치를 자유롭게 적용합니다. AST 분석 로직이 복잡한 수치와 색상을 즉석에서 조립합니다.
Leverage bracket ([]) syntax to apply values outside standard ranges. AST analysis assembles complex values on the fly.
런타임 엔진의 압도적 기술력
Overwhelming Technology of the Runtime Engine
| 기술 비교 항목 Comparison Items |
DXB CSS Pure JavaScript Engine |
Tailwind CSS PostCSS/Node Engine |
|---|---|---|
| 작동 메커니즘 (Mechanism) | 실시간 브라우저 런타임 (No Build) | 사전 컴파일 빌드 (Static Build) |
| 설치 및 환경 (Setup) | Script 한 줄로 즉시 구동 | Node.js, NPM 환경 및 종속성 필수 |
| DOM 실시간 대응 (DOM Response) | MutationObserver 실시간 추적 | 소스 수정 시마다 재컴파일 대기 |
| 메모리 관리 (Memory) | Set 객체 기반 지능형 캐싱 | PurgeCSS 과정을 통한 수동 최적화 |
| 수치 전처리 (Processing) | 동적 AST 분석 기반 즉석 조립 | Config 내 사전 정의된 수치 위주 |
베리언트 및 가상 요소 핸들링
Handling Variants & Pseudo-elements
단순 스타일링을 넘어 상호작용을 제어합니다. hover:, focus:와 같은 접두사를 분석하여 실시간으로 가상 클래스 셀렉터를 생성하며, before:, after:를 완벽 지원합니다.
Controls interactions beyond simple styling. It analyzes prefixes like hover: and focus: to generate pseudo-class selectors in real-time and fully supports before: and after:.
<div class="hover:scale-110 before:content-['*']">
계층형 미디어 쿼리 엔진
Hierarchical Media Query Engine
모바일 우선(Mobile First) 원칙을 실시간 구현합니다. sm부터 2xl까지 5단계 브레이크포인트를 감시하여 현재 화면에 필요한 반응형 스타일만 선택적으로 생성합니다.
DXB implements Mobile First design principles in real-time. By monitoring 5 breakpoints, it selectively generates only the responsive styles actually needed.
상상하는 모든 스타일 규칙을
단 3분 만에 추가하세요.
Add any style rule in just 3 minutes.
DXB 엔진은 갇혀 있지 않습니다. 오픈소스인 dxb.js의 rules 배열에 정규식 한 줄만 추가하면, 당신만의 독창적인 유틸리티 클래스가 즉시 탄생합니다. 수정 즉시 브라우저에서 작동하는 확장의 자율성을 경험해보세요.
The DXB engine is not confined. Simply add one line of regex to the dxb.js rules array, and your unique utility class is born instantly. Experience expansion that works immediately.
커스텀 유틸리티
브랜드 컬러 직접 주입 / Inject Brand Colors
테마 유연성
브레이크포인트 리셋 / Reset Breakpoints
// Infinite Scalability Example
const rules = [
{
match: /^my-grad-(.+)$/,
prop: 'background',
val: m => `linear-gradient(...)`
},
// Your new rules go here...
];
MIT Open Source License
DXB CSS는 전 세계 개발자의 자유로운 창작 활동을 보장하기 위해 MIT 라이선스 하에 배포됩니다. 상업적 이용, 소스 수정, 재배포에 어떠한 제한도 없습니다. DesignOneX가 100% 독자 설계한 구동 로직으로 법적 안정성을 확보했습니다.
DXB is fully open source under the MIT License. No restrictions on commercial use or redistribution. DesignOneX independently designed 100% of the internal logic for legal stability.
지능형 캐싱 및 GPU 가속
generatedCSS (Set 객체)를 통한 캐싱으로 중복 연산을 제거합니다. 또한 내부적으로 하드웨어 가속을 유도하여 60fps의 부드러운 애니메이션과 웹 성능의 최적화를 보장합니다.
Caching via the Set object eliminates redundant calculations. It induces hardware acceleration for 60fps animations and web performance optimization.
60fps Animation
Set-based Caching
© 2026 DESIGNONEX - DXB CSS OPEN SOURCE PROJECT
Breaking technical barriers for anyone to build the best design experiences.