DESIGNONEX
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. We break down technical barriers to create an environment where anyone can build the best design experiences.
실시간 런타임 감시
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 node additions or class changes.
지능형 파서 (Regex)
Intelligent Parser (Regex)
복잡한 유틸리티 클래스명을 유효한 CSS로 번역합니다. 정교한 정규식 매핑을 통해 w-1/2, p-4와 같은 단축 속성을 정밀한 수치로 변환합니다.
Translates complex utility class names into valid CSS. Sophisticated regex mapping converts shorthand properties like w-1/2 and p-4 into precise values.
임의 값 및 AST 처리
Arbitrary Values & AST Processing
대괄호([]) 문법을 활용해 표준 범위를 벗어난 수치를 자유롭게 적용합니다. AST 분석 로직이 복잡한 그리드와 색상값을 즉석에서 조립합니다.
Leverage bracket ([]) syntax to freely apply values outside standard ranges. AST analysis logic assembles complex grid and color values on the fly.
DXB CSS vs Tailwind CSS
런타임 엔진의 압도적 기술력
Overwhelming Technology of the Runtime Engine
| 기술 비교 항목 Comparison Items |
DXB CSS (Pure JavaScript Engine) No Build Runtime |
Tailwind CSS (PostCSS/Node) Static Build |
|---|---|---|
| 작동 메커니즘 Mechanism |
실시간 브라우저 런타임 (No Build) Real-time Browser Runtime |
사전 컴파일 빌드 (Static Build) Pre-compiled Static Build |
| 설치 및 환경 Setup & Env |
Script 한 줄로 즉시 구동 (Zero Dependency) Instant execution with one script line |
Node.js, NPM 환경 및 수백개 종속성 필수 NPM and hundreds of dependencies required |
| DOM 실시간 대응 DOM Response |
MutationObserver를 통한 실시간 동적 추적 Real-time dynamic tracking |
소스 수정 시마다 JIT 재컴파일 대기 필요 JIT recompilation wait required |
| 메모리 관리 Memory |
Set 객체 기반의 지능형 스타일 캐싱 Intelligent style caching (Set object) |
PurgeCSS 과정을 통한 수동 파일 최적화 Manual optimization via PurgeCSS |
| 수치 전처리 Processing |
동적 AST 분석을 통한 임의 값 실시간 조립 Real-time assembly of arbitrary values |
Config 파일 내 사전 정의된 수치 위주 사용 Primarily uses pre-defined config values |
베리언트 및 가상 요소 핸들링
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:.
계층형 미디어 쿼리 엔진
Hierarchical Media Query Engine
DXB는 모바일 우선(Mobile First) 디자인 원칙을 실시간으로 구현합니다. sm, md, lg, xl, 2xl 등 5단계 표준 브레이크포인트를 감시하여, 현재 화면에서 실제 필요한 반응형 스타일만 선택적으로 생성합니다.
DXB implements Mobile First design principles in real-time. By monitoring 5 standard breakpoints, it selectively generates only the responsive styles actually needed for the current screen.
상상하는 모든 스타일 규칙을
단 3분 만에 추가하세요.
Add any style rule you imagine 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 the freedom of infinite expansion that works in the browser immediately.
커스텀 유틸리티 생성
Create Custom Utilities
회사의 고유 브랜드 컬러나 특수 애니메이션 규칙을 런타임에 직접 주입할 수 있습니다.
Inject brand colors or special animation rules directly into the runtime.
전역 테마의 유연성
Global Theme Flexibility
브레이크포인트(sm, md 등)의 수치나 기본 간격을 당신의 디자인 시스템에 맞게 즉시 리셋하세요.
Instantly reset breakpoint values or spacing to fit your design system.
// Example of Infinite Scalability const rules = [ { match: /^my-gradient-(.+)$/, prop: 'background', val: m => `linear-gradient(45deg, ${m[1]}, transparent)` }, // Your new rules go here... ];
MIT Open Source License
DXB CSS는 전 세계 개발자의 자유로운 창작 활동을 보장하기 위해 MIT 라이선스 하에 배포되는 완전한 오픈 소스입니다. 상업적 이용, 소스 수정, 재배포에 어떠한 제한도 없습니다.
DXB is fully open source under the MIT License to ensure creative freedom for developers worldwide. No restrictions on commercial use or redistribution.
기술적 법적 안정성
Technical & Legal Stability
Tailwind CSS의 클래스 명명 규칙(Naming Convention)은 기능적 표준으로서 MIT 라이선스 가이드에 따라 누구나 구현할 수 있는 공용 자산입니다. DXB는 이 표준을 계승하되 내부 구동 로직은 DesignOneX가 100% 독자 설계하여 법적 분쟁을 원천 차단했습니다.
Tailwind CSS's naming conventions are public assets. DXB inherits these standards, but DesignOneX independently designed 100% of the internal logic.
지능형 캐싱 및 GPU 가속
Intelligent Caching & GPU Acceleration
generatedCSS (Set 객체)를 통한 캐싱으로 중복 연산을 제거합니다. 또한 내부적으로 하드웨어 가속을 유도하여 60fps의 부드러운 애니메이션과 웹 성능의 최적화를 보장합니다.
Caching via the Set object eliminates redundant calculations. It induces hardware acceleration for 60fps animations and web performance.