Devup UI | 데브파이브

Devup UI

본 프로젝트는 데브파이브에서 자체 개발한 프론트엔드 UI 컴포넌트 라이브러리인 Devup UI를 구축하여 개발 생산성 향상과 일관된 디자인 구현을 동시에 실현할 수 있도록 설계된 통합 솔루션을 개발했습니다. 모든 구성 요소는 CSS-in-JS 기반의 현대적인 스타일링 방식을 채택하여 개발자들이 프로젝트 요구사항에 따라 유연하게 커스터마이징할 수 있는 확장성을 제공하며, 내부 개발팀 간의 효율적인 디자인 시스템 통합과 신속한 프로토타이핑 프로세스를 지원하는 것을 핵심 목적으로 제작했습니다. 또한 향후 데브파이브의 모든 웹/앱 개발 프로젝트에서 핵심적으로 활용될 수 있는 재사용 가능한 컴포넌트 체계를 구축하고, 외부 파트너와의 협업 프로젝트에서도 원활하게 적용하고 확장할 수 있는 유연한 아키텍처 구조를 갖추어 데브파이브의 개발 역량과 프로젝트 효율성을 전반적으로 향상시키는 전략적 개발 자산으로 활용됩니다.

제작 기간2025. 01 - 진행 중
고객사데브파이브
사용 기술Rust

사이트 바로가기

서비스
미리보기

Devup UI 랜딩 페이지 — 전체
로고: Devup UI
네비게이션: Docs · Components · Showcase · Team · Storybook · GitHub · Discord · 채팅 · 다크모드 토글
히어로
- Zero Config
- Zero FOUC
- Zero Runtime
- CSS in JS Preprocessor
- Building the Future of CSS-in-JS
- Analyze all possible scenarios at the fastest speed and style with optimal performance.
- 버튼: Get started >
- Star 36 · Sponsor
Comparison Benchmarks
Next.js Build Time and Build Size (github action - ubuntu-latest)
라이브러리 버전 Build Time
Devup-ui 1.0.18 👑 18.23s
Chakra UI 3.27.0 29.99s
Mui 7.3.2 22.21s
Kuma UI 1.5.9 21.61s
Tailwind CSS 4.1.13 20.22s
panda CSS 1.3.1 22.01s
styleX 0.15.4 38.97s
vanilla extract 1.17.4 20.09s
Features
Devup UI offers a performance-optimized CSS-in-JS system, theme typing, and amazing features for faster and safer development.
기능 설명
Zero Runtime A futuristic design that eliminates the root causes of performance degradation.
Top Performance The fastest build speed and the smallest bundle size among CSS-in-JS solutions.
Type Safety Enhanced DX with typing-based support.
Figma Plugin A Figma plugin enabling safer and faster development. (Go Figma Community)
Join our community
- Join our Discord and help build the future of frontend with CSS-in-JS!
- 버튼: Open KakaoTalk · Join our Discord
푸터
- Devup UI
- 상호: (주)데브파이브 | 대표자명: 오정민 | 사업자등록번호: 868-86-03159
- 주소: 경기 고양시 덕양구 마상로140번길 81 4층
- Copyright © 2021-2024 데브파이브. All Rights Reserved.

화면에 마우스를 올려보세요!

고객 요구사항
& 프로젝트 방향

클라이언트의 인터뷰 및 협의를 통해 프로젝트의 핵심 요구사항을 도출하였으며, 인사이트를 바탕으로 사용자 경험과 브랜드 관점에서 개선이 필요한 5가지를 기반으로 설계하였습니다.

1.
코드 일관성·재사용성을 확보한 컴포넌트 기반 UI 시스템 구축
2.
스타일 가이드를 정립한 컴포넌트 구조로 디자인 일치성 유지
3.
컴포넌트별 설치 가이드와 예제 코드를 제공하는 문서화 시스템 구현
4.
Discord 기반 피드백·개선 요청 커뮤니티 채널 제공
5.
개발 효율성과 학습 곡선 단축으로 사용성 강화

타이포 그래피
& 컬러 시스템

사용자의 시각적 편의를 고려한 명도 대비와 체계적인 컬러 시스템을 구축하였으며, 확장이 용이한 타이포그래피와 공통 컴포넌트를 설계하여 브랜드의 일관된 경험을 구현하였습니다. 섹션: typo
폰트: Pretendard
웨이트 스케일: ExtraBold | Bold | SemiBold | Medium | Regular
샘플: Aa
타이포그래피 스케일
스타일 크기 샘플 텍스트
h1 52px Devup UI ZERO
h4 36px Devup UI ZERO
Body 16px Devup UI ZERO
Caption 14px Devup UI ZERO

섹션: typo
폰트: Pretendard
웨이트 스케일: ExtraBold | Bold | SemiBold | Medium | Regular
샘플: Aa
타이포그래피 스케일
스타일 크기 샘플 텍스트
h1 52px Devup UI ZERO
h4 36px Devup UI ZERO
Body 16px Devup UI ZERO
Caption 14px Devup UI ZERO

섹션: color
메인 컬러
구분 HEX 색상
Primary #5A44FF 보라
Primary Bg #F6F5FE 연한 라벤더
Secondary #85A5F2 연한 파랑
그레이스케일 (7단계)
단계 HEX
1 #FFFFFF
2 ·
3 ·
4 #7C7B8E
5 ·
6 ·
7 #000000

타이포 그래피
& 컬러 시스템

Devup UI 문서 페이지 — Overview
로고: Devup UI
네비게이션: Docs · Components · Showcase · Team · Storybook · GitHub · Discord · 채팅 · 다크모드 토글 / 검색바 (Search documentation...)
사이드바 (좌측)
- Overview (선택됨)
- Quick Start
- Installation
- Core Concepts
- Zero Runtime
- No Dependencies
- Style Storage
- Type Inference System
- Optimize CSS
- N/M Base
- Features
- Figma and Theme Integration
- API
- Devup
What is Devup UI?
- Devup UI is not just another CSS-in-JS library — it's the future of CSS-in-JS itself.
- Devup UI is a zero-runtime CSS-in-JS preprocessor powered by Rust and WebAssembly. It transforms all your styles at build time, completely eliminating runtime overhead while providing full CSS-in-JS syntax coverage.
The Problem with Traditional CSS-in-JS
Traditional CSS-in-JS solutions force you to choose between:
- Developer Experience: Intuitive APIs, co-located styles, dynamic theming
- Performance: No runtime overhead, fast page loads, optimal Core Web Vitals
Libraries like styled-components and Emotion offer great DX but execute JavaScript at runtime to generate styles. Zero-runtime alternatives like Vanilla Extract sacrifice some flexibility for performance.
The Devup UI Solution
Devup UI eliminates this trade-off entirely. Our Rust-powered preprocessor analyzes your code at build time and handles every CSS-in-JS pattern:
- Variables — Dynamic values become CSS custom properties
- Conditionals — Ternary expressions are statically analyzed
- Responsive Arrays — Breakpoint-based styles are pre-generated
- Pseudo Selectors — _hover, focus, active work seamlessly
- Themes — Type-safe theme tokens with zero-cost switching
Key Advantages
Feature Devup UI styled-components Emotion Vanilla Extract
Zero Runtime Yes No No Yes
Dynamic Values Yes Yes Yes Limited
Full Syntax Coverage Yes Yes Yes No
Type-Safe Themes Yes Limited Limited Yes
Build Performance Fastest N/A N/A Fast
우측 목차: What is Devup UI? · The Problem with Traditional CSS-in-JS · The Devup UI Solution · Key Advantages · How It Works · Familiar API · Proven Performance · Get Started · Edit this page

Devup UI 문서 페이지 — Components
로고: Devup UI
네비게이션: Docs · Components · Showcase · Team · Storybook · GitHub · Discord · 채팅 · 다크모드 토글 / 검색바
사이드바 (좌측)
- Overview (선택됨)
- Form
- Button
- Textbox
- Textarea
- Dropdown
- Radio
- Checkbox
- Stepper
- Toggle
- Slider
- Date Picker
- Color Picker
- Uploader
- Pagination
- Progress Bar
- Search
- Select
- Label
- Layout
- Theme
Devup UI Components
If you want to use Devup UI Components, you need to install it.
1 npm install @devup-ui/components
2 // or
3 yarn add @devup-ui/components
4 // or
5 pnpm install @devup-ui/components
6 // or
7 bun add @devup-ui/components
Note: If you encounter Cannot run on the runtime error, make sure the include option is properly configured for your bundler.
Examples
Form
컴포넌트
Button (Click me!)
Textbox (Placeholder)
Textarea (Placeholder, 0/100)
Dropdown (Choose One)
Radio
Checkbox
Stepper (− 10 +)
Toggle
Slider
Date Picker (2025 Jun)
Color Picker
Uploader
Pagination (< 1 2 3 >)
Progress Bar (3/6)
Search (Placeholder)
우측 목차: Contents · Edit this page

목록으로

비즈니스의 다음 단계퀀텀 점프마스터키파트너, 데브파이브와 함께 도약하세요.

아이디어만 있어도 됩니다. 첫 상담부터 출시까지, 데브파이브가 함께합니다.

지금 문의하기

비즈니스의 다음 단계퀀텀 점프마스터키파트너, 데브파이브와 함께 도약하세요.비즈니스의 다음 단계퀀텀 점프마스터키파트너,데브파이브와 함께 도약하세요.데브파이브와 함께 도약하세요.

비즈니스의 다음 단계퀀텀 점프마스터키파트너, 데브파이브와 함께 도약하세요.