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

> Clean Markdown view of GeekNews topic #20940. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=20940](https://news.hada.io/topic?id=20940)
- GeekNews Markdown: [https://news.hada.io/topic/20940.md](https://news.hada.io/topic/20940.md)
- Type: GN+
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2025-05-16T13:15:42+09:00
- Updated: 2025-05-16T13:15:42+09:00
- Original source: [nuejs.org](https://nuejs.org/blog/introducing-hyper/)
- Points: 17
- Comments: 7

## Summary

Hyper는 **HTML, CSS, JavaScript 웹 표준**, 그리고 **로직/스타일 분리**를 핵심으로 하여 복잡한 인터페이스도 간결하게 구현할 수 있도록 설계되었습다. **Bun 기반**, **AI 모델 UI 생성 지원**, **3.9KB의 JS 번들 크기** 등으로 경량성과 미래지향성에서 강점을 보입니다. **JS 번들 크기**가 최소(예: **3.9KB 테이블 구현**)로 유지되며, 프로젝트 규모가 커져도 단순성을 유지합니다. CSS 32줄만으로 **디자인 테마 완전 교체**, **제로 보일러플레이트** 등 개발 및 유지보수 효율성을 극대화하였습니다.

## Topic Body

- **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  
  
1. **Standards first**: HTML, CSS, JS 표준 기반 구성  
2. **Simplicity**: 복잡한 추상화 없이 간단한 컴포지션 구조  
3. **Design Systems**: 디자이너와 개발자 모두를 위한 분리된 디자인 계층  
4. **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 프로젝트가 존재하지만 다른 맥락이므로 문제 없음  
  
### 궁극적 목표  
- **파괴적으로 단순한 웹 스택** 구축이 최종 목표임

## Comments



### Comment 38791

- Author: youngkwon
- Created: 2025-05-17T10:22:20+09:00
- Points: 2

전형적으로 역사를 무시하고, 옛날 바퀴를 가져왔습니다.  
몇몇 아이디어는 나쁘지않은 것 같은데(마크다운 이용방법), 다른 도구들과 비교해서 크게 이점은 없는 것 같습니다.  
  
해커뉴스에서 논의하는 것 보면  
일단 개발자는 리액트에 대해서 이해도도 너무 낮습니다.

### Comment 38790

- Author: aer0700
- Created: 2025-05-17T10:13:45+09:00
- Points: 1

머지않은 미래에 이름이 바뀔 것 같은 느낌이 드네요... 글에도 써있지만 겹치는 일렉트론 프로젝트가 있는데... 굳이 저 이름을 썼어야 했나.

### Comment 38775

- Author: fastkoder
- Created: 2025-05-16T22:07:19+09:00
- Points: 1

코드 비교보니 토큰이 많이 절약 될거 같군요

### Comment 38770

- Author: ng0301
- Created: 2025-05-16T21:29:37+09:00
- Points: 1

svelte 최고

### Comment 40123

- Author: hyeonseok
- Created: 2025-06-14T21:32:03+09:00
- Points: 1
- Parent comment: 38770
- Depth: 1

svelte 최고

### Comment 38743

- Author: sixmen
- Created: 2025-05-16T14:03:20+09:00
- Points: 1

사람마다 취향이 다를 것 같은데, 저는 Angular, Vue등(이 라이브러리? 마크업? 포함)의 `<li for>` 보다, vanilla JS로 처리하는 JSX의 `.map((item) => <li>)` 이게 좋더라고요

### Comment 38753

- Author: schang124
- Created: 2025-05-16T17:23:13+09:00
- Points: 1
- Parent comment: 38743
- Depth: 1

저도 동감하는 부분입니다. HTML 에 추가되는 로직이 vanilla 가 아닌 자체 syntax 인 경우가 큰 허들입니다. 간단한 UI 구현은 문제 없지만 로직이 복잡한 경우는 개발 유연성에서 차이가 나고 학습곡선도 무시할 수 없습니다.