Tambo 시작하기 — Tambo 시리즈 P2
Source: Dev.to
훅
당신은 Tambo가 무엇인지와 생성형 UI가 왜 중요한지 보았습니다.
이제 실제로 사용해 볼 차례입니다.
이 글에서는 이론 과부하 없이, 내부 구조를 깊게 파고들지 않고 — React 앱 안에서 생성형 UI가 살아 움직이는 모습을 볼 수 있도록 최소한의 설정만으로 제로부터 작동하는 Tambo 앱을 만드는 과정을 안내합니다.
배울 내용
- React 프로젝트에 Tambo를 설치하고 설정하는 방법
- 실행에 필요한 최소 구성
- Tambo를 연결했을 때 생성형 UI가 어떻게 동작하는지
- 첫 번째 Tambo 앱에서 “성공”이 어떤 모습인지
Context — from idea to first interaction
Part 1에서는 왜 Tambo가 존재하는지와 생성형 UI가 인터페이스 구축 방식을 어떻게 바꾸는지에 대해 이야기했습니다.
이번 파트는 의도적으로 실용적입니다.
목표는 숙달이 아니라 자신감입니다. 이 글을 다 읽고 나면 다음과 같이 말할 수 있어야 합니다:
“좋아, 이제 Tambo를 실행할 수 있어. 어떻게 동작하는지 알겠어. 분위기도 잡히네.”
그 정신적 장벽이 사라지면, 나머지는 모두 더 쉬워집니다.
Core concept — the simplest possible Tambo setup
1️⃣ Starting with a basic React app
Tambo는 일반적인 React 애플리케이션 안에 존재하도록 설계되었습니다.
특별한 프레임워크나 아키텍처가 필요하지 않아요.
- 이미 React 앱(Vite, Next.js 등)이 있다면 바로 사용하면 됩니다.
- 없다면 새로 시작해도 전혀 문제없어요 — 빠른 시작 예제가 바로 그 과정을 보여줍니다.
핵심 아이디어: Tambo는 React를 대체하지 않아요. React를 확장합니다.
2️⃣ Installing Tambo
앱이 준비되면 Tambo 설치는 아주 간단합니다:
npm install @tambo/react # or yarn add @tambo/react그 다음 제공해야 할 것은:
- AI 제공자(예: OpenAI)
- 작은 설정 레이어
- React 트리 안에서 살아갈 위치
아직 마법 같은 것은 없습니다 — 단순히 연결하는 과정일 뿐. Tambo는 일반적인 React 의존성처럼 느껴지도록 설계되었으며, 블랙 박스가 아닙니다.
3️⃣ Minimal configuration (what actually matters)
높은 수준에서 보면 Tambo가 필요한 것은 세 가지뿐입니다:
- API 키 (AI 모델용)
- 앱을 감싸는 Tambo provider
- 하나 이상의 생성형 컴포넌트
그게 전부입니다. 프롬프트 엔지니어링도, 복잡한 스키마도, 깊은 라이프사이클 훅도 필요하지 않아요. 빠른 시작 예제는 모든 것을 최소화하여 설정이 아니라 동작에 집중할 수 있게 해줍니다.
4️⃣ Your first generative UI moment
예제 앱에서는 다음과 같은 컴포넌트를 볼 수 있습니다:
- 사용자 입력을 받음
- 의도를 Tambo에 전달
- AI가 다음에 어떤 UI를 렌더링할지 결정하도록 함
다음과 같이 하드코딩하는 대신:
“사용자가 X를 클릭하면 컴포넌트 Y를 보여준다”
다음과 같은 점을 경험하게 됩니다:
- UI가 스스로 적응함
- 응답이 완전히 미리 정해져 있지 않음
- 인터페이스가 생동감 있게 느껴짐
이 순간이 바로 생성형 UI가 “깨지는” 순간입니다.
Example — Thinking in Generative UI (No Code Yet)
Instead of hard‑coding UI states, Tambo lets the interface generate itself based on user intent.
Mental model
- User types something
- Tambo interprets the intent
- The UI adapts on the fly
No condition spaghetti. No if/else hell.
개념적으로 무슨 일이 일어나고 있나요?
- UI는 대화형
- 컴포넌트는 의미에 기반하여 렌더링되며, 라우트가 기준이 아닙니다
- 경험이 클릭보다 채팅에 더 가깝게 느껴집니다
이 접근 방식은 다음을 구축할 때 빛을 발합니다:
- 다양한 상태를 가진 대시보드
- AI 기반 도구
- 탐색형 또는 어시스턴트 스타일 앱
💡 “페이지 탐색”보다는 “생각에 반응하는 UI”를 생각하세요.
Why this matters
Traditional UI
- You predict every possible path ❌
- You wire everything manually ❌
Generative UI with Tambo
- The system adapts dynamically ✅
- Less boilerplate, more flow ✅
If your app talks back to the user, this model just makes sense.
피해야 할 일반적인 실수
- ❌ 설정 없이 “마법”을 기대하기
- ❌ Tambo를 한 번에 모두 이해하려고 하기
- ❌ 첫 설정을 과도하게 설계하기
- ❌ Tambo를 UI 시스템이 아니라 챗봇처럼 다루기
간단하게 유지하세요. 도구가 잘하는 것을 보여주도록 하세요.
빠른 요약
- Tambo는 일반 React 앱에 플러그인됩니다
- 설정은 의도적으로 최소화되었습니다
- 생성형 UI는 UI 결정이 완전히 하드코딩되지 않음을 의미합니다
- 첫 번째 목표는 복잡성이 아니라 확신입니다
- 한 번 실행해 보는 것만으로도 UI에 대한 생각이 바뀝니다
Tambo 시리즈 다음 편
파트 3 — Tambo 컴포넌트 이해
우리는 생성형 vs. 인터랙티브 컴포넌트를 구분하고, Tambo가 무엇을 언제 렌더링할지에 대한 명확한 정신 모델을 구축할 것입니다.