Hyper - 웹 표준 중심의 React 대체제

(nuejs.org)

13P by GN⁺ 1일전 | ★ favorite | 댓글 6개

HTML, CSS, JavaScript 웹 표준 중심의 UI 언어로, 기존 프레임워크보다 간결하고 확장 가능한 인터페이스 구성을 지향
리액트와 달리 로직과 스타일을 분리하며, CSS-in-JS 대신 외부 디자인 시스템 파일을 활용하는 방식으로 유지보수 용이성 확보
복잡한 컴포넌트 구현 시에도 코드가 단순하고 JS 번들 크기가 작음, 예: 정렬/필터 기능 포함 테이블이 3.9KB
디자인 테마 전환도 단 32줄의 CSS 변경만으로 가능, 컴포넌트 수정 없이 디자인 시스템 교체 가능
Bun 기반으로 작동하며 빠른 번들링, 표준 호환성, AI 모델을 위한 UI 생성 기반 등을 갖춘 미래지향적 프레임워크

Introducing Hyper

Hyper는 HTML/CSS/JS 웹 표준을 기반으로 UI를 구성하는 새로운 마크업 언어임
복잡한 UI도 깔끔하고 단순한 문법으로 표현 가능
React와 달리 표현과 로직, 스타일을 분리하여 구성

Project goals

Standards first: HTML, CSS, JS 표준 기반 구성
Simplicity: 복잡한 추상화 없이 간단한 컴포지션 구조
Design Systems: 디자이너와 개발자 모두를 위한 분리된 디자인 계층
Scalability: 애플리케이션이 커져도 단순성을 유지

React vs Hyper 비교

React는 로직, 구조, 스타일이 혼합된 모놀리식 구조인데 반해 Hyper는 순수 뷰 계층에 집중함
Simple components
- 같은 테이블 컴포넌트를 Modern React, Old-school React, Hyper로 각각 구현한 사례 제시
  - 현대적 React: ShadCN, Material UI, Tailwind Catalyst 등 컴포넌트 라이브러리로 UI 구성, AI 툴 지원이 강점임
  - 구식 React: 스타일과 컴포넌트 코드가 분리되던 초창기 방식임
  - Hyper: 웹 표준을 준수하는 간결한 예제로, 구조와 스타일을 명확히 분리함
- Hyper는 불필요한 클래스, 상태 훅 없이 순수 HTML 기반의 구조와 간단한 메서드만으로 표현함
- 간단한 예에서는 차이가 미미하나, 복잡성이 커질수록 Hyper와 React의 접근법 차이가 커짐
Complex components
- ShadCN 기반 React: JS 번들 91.3KB
- Hyper: 3.9KB (1.2KB + 2.7KB)
- Hyper는 최소한의 JS로 동작하며 유지보수가 쉬움
Design systems
- Hyper로 대시보드 스타일을 변경할 때 컴포넌트 코드 변경 없이 CSS 32줄만 추가로 전체 테마 교체 가능함
- 반면 React 기반 ShadCN의 경우 수천 줄의 TSX 코드가 테마별로 중복됨
- Hyper의 디자인 시스템 철학
  - CSS-in-JS, Tailwind, inline style 등 디자인과 컴포넌트 간 결합을 완전히 배제
  - 모든 타이포그래피와 스타일 규칙을 외부 CSS 파일에 집중
  - 완전한 재사용성, 중앙 집중형 디자인 시스템, 제로 보일러플레이트 실현
Scalability
- Hyper 방식은 프로젝트가 커져도 단순함이 유지됨
- 구조가 단순, 코드 크기가 작음

자주 묻는 질문

Svelte, Vue와의 차이점?
- 둘 다 React보다는 가볍지만 여전히 scoped CSS, Tailwind 등 디자인과 컴포넌트 결합 유도
- Hyper는 완전히 분리된 디자인 시스템을 강제
What is Nue?
- Nue는 Nue JS 템플릿 기반의 웹사이트/웹앱 생성기임
- Hyper는 Nue JS의 차세대 진화 제품이고, 같은 모노레포 아래 관리됨
- Hyperlink(예정)는 라우터 솔루션, 웹 표준과의 긴밀한 연결을 의미함
기존 프레임워크와의 차이?
- Hyper는 새로운 추상화 도구 추가가 아닌, 표준 회귀와 단순성 회복이 핵심 목표
- CSS, HTML, JS 지식만으로 프로 앱 구성 가능
웹 표준의 중요성?
- 타임리스한 기술: 수십 년간 유효한 기술 기반
- 지속 가능한 제품: 프레임워크 변경 없이 오랫동안 유지보수 가능

앞으로 계획

Full-stack 애플리케이션 (3개월 이내)
- 라우팅, 컴포넌트 간 통신, DB 연동, 클라우드 배포, 디자인 테마 교체 기능 탑재 예정
Generative UIs (4~5개월 이내)
- HTML/CSS 조합 기반의 AI가 생성 가능한 UI 프레임워크
- 접근성, 반응성, 문서화 자동 포함
어떻게 React를 이길 수 있나?
- 서서히 점유율 확보를 목표로 함
- 단계적으로 개발자 인식 변화 유도
- 단순하고 유지보수 가능한 구조 제공
- 기초 기술의 힘을 입증하며 성장 계획
이름 중복 문제?
- 기존에 같은 이름을 쓰는 Rust, Electron 프로젝트가 존재하지만 다른 맥락이므로 문제 없음