Ripple Framework 완전 가이드: TypeScript 기반 JSX Superset로 빠른 UI 만드는 법

Ripple: Compiler‑Driven TypeScript UI Framework (한국어 리뷰·해설, 2025)

 

TL;DR

• Ripple은 TypeScript‑first 철학의 compiler‑driven view library로, JSX Superset을 기반으로 합니다.
• 전체적인 인상은 React × Svelte에 SolidJS의 느낌을 더한 조합. 템플릿에서 expression뿐 아니라 statement(if, for)를 바로 쓰고, **track() + @**로 reactivity를 단순하게 표현합니다.
• fine‑grained DOM updates, component‑local scoped CSS, Prettier/ESLint/VS Code/TypeScript 등 day‑zero DX가 준비되어 있습니다.
• 질문은 하나: JavaScript fatigue를 다시 불러올까? 아니면 석탄 광부로 전직하는 것보다 배우기 쉬울까? 여기서 가볍지만 진지하게 따져봅니다.

 

“새 framework 만들었다”는 말을 흘려듣지 말아야 할 단 한 번

 

---

프롤로그: 2019를 기억하나요?

2019년엔 분위기가 달랐죠. Area 51 밈으로 떠들썩했고, JavaScript framework 고르는 일도 일종의 cosplay처럼 가벼웠습니다. 솔직히 말해 수상한 bootcamp에서 며칠 Backbone.js 배우고 연봉 6자리를 꿈꾸던 시절이었으니까요. 회사는 ping‑pong 테이블과 간식으로 work‑life balance를 포장했고, 우리도 하나만 더 배우라면 농사를 짓겠다고 엄살을 부렸습니다.

그리고 우리는 집단적인 현상에 이름을 붙였습니다. JavaScript fatigue. 무료이고 오픈 소스이며 커뮤니티가 자발적으로 이끄는 수많은 라이브러리/프레임워크 사이에서, 매 시즌 Fortnite Battle Pass까지 챙기려다 보니 생긴 어지러움 말이죠.

이후 세상은 murder hornets, NFT, 그리고 Morb… Morbius 같은 밈을 지나 AI가 junior developer의 기회를 빼앗는다는 불안까지 겹쳤습니다. 공기가 달라졌어요. 그런데 2025년, 다시 새로운 UI framework가 우리의 인내심을 시험합니다.

이 글은 The Code Report (November 6, 2025) 내용을 바탕으로, 한국어 독자를 위해 톤과 맥락을 재해석했습니다.

 

 

---

“새 framework 만들었다”는 말을 흘려듣지 말아야 할 단 한 번

요즘 누가 **“새 UI framework 만들었어요”**라고 하면, 마음속 McGruff the Crime Dog가 고개를 듭니다. 솔직히 어떤 제안은 DMT에 취해 machine elves와 hover state를 논의하다 나온 것처럼 들리니까요.

하지만 예외가 있습니다. 그 사람이 Dominic Galloway라면요.

• 10여 년 전, 그는 Inferno를 발표했습니다. 요약하면 **“React가 정말로 빠르다면?”**에 대한 대답 같은 프로젝트였죠.
• 대중적 성공은 아니었지만 충분히 인상적이어서 **Facebook React core team(2016)**에 합류했습니다.
• 시간이 흘러 React만 파는 삶이 달갑지 않다는 걸 깨닫고, Vercel로 옮겨 **Svelte core team(2023)**에서 활동했습니다.
• 그리고 결국, 그는 **“공작새처럼 날아야 할 때”**라며 축적한 경험을 바탕으로 새로운 시도를 시작합니다.

그 결과물이 Ripple입니다.

 

 

---

Ripple 한 줄 정의

Ripple은 TypeScript에 기댄 compiler‑driven view library입니다. 핵심은 JSX Superset. 겉모습은 Svelte와 React의 사랑의 열매에 SolidJS가 스치듯 지나가는 무드. 하지만 몇 가지 대담한 선택으로 결을 달리합니다.

 

1) Template에서 statement를 그대로 쓰는 경험

Ripple에선 component 키워드로 컴포넌트를 정의하고, JSX‑like 템플릿으로 UI를 서술합니다. 포인트는 statement를 그대로 쓴다는 것.

• 즉, 템플릿 내부에서 **if**와 **for**를 직접 사용할 수 있습니다. 굳이 삼항 연산자나 map으로 꼬아 쓰지 않아도 됩니다.

예시:

component TodoList(props: { items: string[] }) {
  const done = track(false)

  <div class="todo-list">
    if (@done) {
      <p>All done! 🎉</p>
    } else {
      for (const item of props.items) {
        <li>{item}</li>
      }
    }
  </div>
}

제어 흐름을 돌려 말하지 않고 그대로 적습니다. 읽기 쉽고, 실수도 줄어듭니다.

 

 

2) Component 안에서 다루는 scoped CSS

Ripple은 컴포넌트 안쪽에 native style element를 두고 scoped하게 스타일을 적용합니다.

예시:

component Button() {
  <button class="cta">Click me</button>
  <style>
    .cta { font-weight: 600; padding: 0.75rem 1rem; border-radius: 0.5rem; }
    .cta:hover { transform: translateY(-1px); }
  </style>
}

별도 CSS‑in‑JS 도구나 네이밍 규칙에 매달릴 이유가 줄어듭니다. 그냥 CSS인데, 기본값이 local입니다.

 

 

3) 단순하지만 강력한 reactivity — track() + @

Ripple의 상태 관리는 직관적입니다.

• **track()**으로 시간에 따라 변하는 값을 만듭니다.
• 필요할 때마다 **@**로 읽고 쓰면 됩니다.
• 내부에선 fine‑grained rendering으로 바뀐 노드만 DOM에 수술하듯 반영합니다.

예시:

component Counter() {
  const count = track(0)

  <button onclick={() => @count++}>
    Count: {@count}
  </button>
}

보일러플레이트가 적고, 의도가 분명합니다. 퍼포먼스는 자연스럽게 따라옵니다.

 

 

---

Tooling & DX: 출시 첫날부터 갖춰진 기본기

Ripple은 갓 나왔지만 다음을 이미 지원합니다.

• Prettier 포맷팅
• ESLint 린팅
• VS Code extension(syntax highlighting + IntelliSense)
• TypeScript 전면 지원과 type‑checking

“프레임워크 먼저, 도구는 나중에”가 아닙니다. 도구와 함께 도착합니다.

 

 

---

React · Svelte · SolidJS와의 짧고 굵은 비교

• React: JSX 친숙도는 그대로. 다만 Ripple의 template statement와 fine‑grained DOM updates 덕분에 불필요한 re‑render와 보조 코드가 줄어듭니다.
• Svelte: compiler‑first DNA와 local style 철학이 맞닿아 있습니다. Ripple은 여기에 JSX + statement와 명료한 track()/@ 인터페이스를 택합니다.
• SolidJS: fine‑grained reactivity의 지향이 비슷합니다. 다만 Ripple은 JSX Superset과 템플릿 statement로 가독성을 강조합니다.

셋 중 하나라도 익숙하다면 Ripple 온보딩은 낯설지 않으면서도 산뜻할 겁니다.

 

 

---

배울까, 아니면 진짜로 광산에 내려갈까?

농담 같지만 의외로 현실적인 질문입니다. 리스크와 보상의 문제죠.

지금 시도해 볼 이유:

1. fine‑grained 성능을 자연스럽게 얻고 싶다.
2. 템플릿에 제어 흐름을 있는 그대로 쓰고 싶다.
3. scoped CSS로 스타일 경계를 깔끔히 유지하고 싶다.
4. TypeScript 기반 워크플로를 완전 지원받고 싶다.

 

조금 더 관망할 이유:

1. 대규모 사례, 생태계 성숙도, 장기 커뮤니티가 필요하다.
2. 지금의 스택에 만족하고, 학습 여력이 부족하다.

요컨대, 안전모를 쓰고 광산으로 향할 필요는 없고, 주말 프로젝트로 가볍게 맛보면 충분합니다.

 

 

---

JavaScript fatigue, 다시 오나?

JavaScript fatigue는 오랫동안 농담의 소재였습니다. 프레임워크 선택이 마치 성격 테스트처럼 느껴지던 시절 말이죠. Ripple의 등장이 피로감을 되살려야 할 이유는 없습니다. 통제된 실험으로 받아들이면 됩니다.

• 익숙한 작은 앱(예: todo, counter, dashboard card)을 골라
• Ripple로 한 번 더 만들어 보고
• 명료성, bundle size, runtime behavior를 비교하세요.

이건 신앙 고백이 아니라 측정입니다. 호기심이 냉소를 이기게 하세요.

 

---

Mini App: statement 템플릿 + reactivity + scoped CSS 한 번에 보기

아래 예시는 Ripple의 핵심을 한 덩어리로 보여줍니다.

component Greeting(props: { name: string }) {
  const excited = track(true)
  const clicks = track(0)

  <section class="card">
    if (@excited) {
      <h2>Hello, {props.name}! ✨</h2>
    } else {
      <h2>Hello, {props.name}.</h2>
    }

    <p>Clicks: {@clicks}</p>

    <button onclick={() => {@clicks++; @excited = !@excited}}>
      Toggle Mood & Count
    </button>
  </section>

  <style>
    .card { border: 1px solid #e5e7eb; padding: 1rem; border-radius: 0.75rem; }
    button { padding: 0.5rem 0.75rem; border-radius: 0.5rem; }
    h2 { margin: 0 0 0.5rem 0; }
  </style>
}

if를 템플릿에서 바로 쓰고, @로 상태를 뒤집으며, 스타일은 local로 가둡니다. 자연스럽고 간결합니다.

 

 

---

자주 받는 질문

Ripple이 뭔가요?

TypeScript를 바탕으로 한 compiler‑driven UI framework입니다. JSX Superset, fine‑grained rendering, 템플릿 if/for statement, scoped CSS, Prettier/ESLint/VS Code/TypeScript 등 개발 편의성을 전면에 둡니다.

 

만든 사람은 누구죠?

Dominic Galloway. Inferno로 이름을 알렸고, **Facebook React core team(2016)**을 거쳐 **Vercel Svelte core team(2023)**에서 활동했습니다.

 

reactivity는 어떻게 처리하나요?

**track()**으로 상태를 만들고, **@**로 read/write합니다. 내부적으로 fine‑grained 방식으로 바뀐 DOM 노드만 업데이트합니다.

 

스타일링은 무엇이 다른가요?

컴포넌트 안의 **native style element`**를 사용합니다. 스타일은 scoped되어 네이밍 충돌과 외부 도구 의존을 줄입니다.

 

도구 지원은 어떤가요?

Prettier, ESLint, VS Code extension(syntax highlighting + IntelliSense), 그리고 TypeScript type‑checking까지 준비되어 있습니다.

 

지금 프로덕션에 써도 될까요?

아직은 brand‑new 단계입니다. DX는 훌륭하지만, 채택 사례와 생태계가 시간에 걸쳐 검증될 필요가 있습니다. 프로토타입으로 먼저 가볍게 시험해 보세요.

 

JavaScript fatigue가 다시 올까요?

그럴 필요 없습니다. Ripple을 집중 실험의 재료로 삼으세요. 배우고 비교하면 됩니다.

 

Curo/Kira는 왜 언급되나요?

원본 콘텐츠에 스폰서로 포함되어 있습니다. AWS의 AI IDE로 requirements.md → design doc → implementation file → agent hooks 흐름을 따릅니다. Kurowen hackathon과 pro‑tier features도 언급되었습니다.

 

 

---

핵심 포인트 요약

• React/Svelte/SolidJS 사용자에게 낯익은 학습 곡선
• 템플릿에서 statement를 허용해 제어 흐름을 명료하게
• **track() + @**로 간결한 reactivity와 surgical DOM updates
• scoped CSS로 팀 단위 스타일 경계 확립
• 출시와 동시에 Prettier/ESLint/VS Code/TypeScript DX 제공

추천 액션: 작은 기능 하나를 Ripple로 다시 구현해 보세요. 시간을 정해 실험하고, 현재 스택과 데이터로 비교하세요. 하이프가 아니라 수치가 답합니다.