FeatureDrop v3 — 앱이 이제 언제, 어떻게 기능을 표시할지 결정합니다
Source: Dev.to
위에 제공된 내용 외에 번역할 텍스트가 없습니다. 번역하고 싶은 본문을 알려주시면 도와드리겠습니다.
GitHub | 문서 | npm | shadcn Components | 예제 앱
TL;DR
- 클라이언트‑사이드 행동 엔진 – 4 kB, 서버 없음
- 자동 형식 선택 (배지 / 토스트 / 모달) 사용자별
- 무료, MIT 라이선스 – 479개의 테스트, Next.js, Remix, Astro, Nuxt + shadcn와 호환
모든 제품 채택 도구 — Pendo, Appcues, Chameleon — 은 동일한 방식으로 작동합니다:
- 수 주간의 서버‑사이드 분석 데이터를 수집합니다.
- 어떤 사용자에게 알림을 보낼지 알려줍니다.
이 서비스에 대해 $250–$7,000 / 월을 청구합니다.
우리는 세션 1부터 동일한 결정을 내리는 4 kB 클라이언트‑사이드 엔진을 만들었습니다. 서버 없음. 데이터 수집 없음. MIT 라이선스.
FeatureDrop v3 (백스토리를 원한다면 v2 출시 글을 [here]에서 확인하세요 — 크게 성공해서 계속 개발했습니다.)
v3에 포함된 내용
| 항목 | v2.7 | v3.0 |
|---|---|---|
| 코어 번들 (gzip) | 3.01 kB | 3.02 kB |
| 엔진 번들 (gzip) | — | 4.08 kB |
| 테스트 | 374 | 479 |
| 서브‑경로 내보내기 | 20 | 26 |
| 프레임워크 통합 | 7 | 11 |
| shadcn 컴포넌트 | 0 | 5 |
| CLI 명령 | 9 | 10 |
코어는 크기가 늘어나지 않았습니다. 런타임 의존성이 없습니다. 엔진은 선택적 4 kB 추가 기능입니다 – 가져오지 않으면 비용이 청구되지 않습니다.
npm install featuredrop@3AdoptionEngine – 시스템의 핵심
┌─────────────────────────────────────────┐
│ AdoptionEngine │
├──────────────┬──────────────────────────┤
│ Behavior │ Tracks sessions, dismiss │
│ Tracker │ patterns, engagement │
├──────────────┼──────────────────────────┤
│ Timing │ Cooldowns, fatigue │
│ Optimizer │ detection, optimal gaps │
├──────────────┼──────────────────────────┤
│ Format │ Badge vs toast vs modal │
│ Selector │ based on user behavior │
├──────────────┼──────────────────────────┤
│ Adoption │ A‑F grading, breakdown, │
│ Scorer │ recommendations │
└──────────────┴──────────────────────────┘기본 사용법
import { FeatureDropProvider } from 'featuredrop/react';
import { createAdoptionEngine } from 'featuredrop/engine';
import { LocalStorageAdapter } from 'featuredrop';
import features from './features.json';
const engine = createAdoptionEngine();
function App() {
return (
<FeatureDropProvider engine={engine} features={features}>
{/* Your app goes here */}
</FeatureDropProvider>
);
}바로 그거예요. 엔진이 이제 사용자 행동을 관찰하고 결정을 내립니다. 추가 설정이 필요 없습니다.
스마트 훅 – 엔진이 포맷을 결정하도록
import { useSmartFeature } from 'featuredrop/react/hooks';
function Sidebar() {
const { show, format, feature, dismiss, confidence } =
useSmartFeature('ai-search');
if (!show) return null;
// Engine decided: badge for power users, toast for new users
if (format === 'badge')
return <>{feature.label}</>;
if (format === 'toast')
return <>{feature.description}</>;
if (format === 'banner')
return <>{feature.label}</>;
}- **
confidence**는 엔진이 얼마나 확신하는지를 알려줍니다.- 첫 번째 세션 → 낮은 confidence → 보수적인 포맷.
- 명확한 패턴이 보이는 열 번째 세션 → 높은 confidence → 최적의 포맷.
엔진이 없을 경우, 훅은 우아하게 다운그레이드됩니다 — 항상 표시되고, 항상 배지 포맷을 사용합니다. 파괴적인 변경이 전혀 없습니다.
원‑컴포넌트 솔루션
import { SmartAnnouncement } from 'featuredrop/react';
// Engine picks the format automatically
<SmartAnnouncement featureId="new-feature" />;
// Or bring your own UI with render props
<SmartAnnouncement featureId="new-feature">
{({ feature, format, dismiss }) => (
<div className={format}>
<h3>{feature.label}</h3>
<button onClick={dismiss}>Dismiss</button>
</div>
)}
</SmartAnnouncement>내장 포맷 렌더러 (6): badge, toast, banner, inline, modal, spotlight. 각각 사용자의 상황에 맞게 적용됩니다.
일류 프레임워크 통합
Next.js (서버 컴포넌트)
// app/layout.tsx
import { getNewCountServer, FeatureDropScript } from 'featuredrop/next';
export default async function Layout({ children }) {
const manifest = await getManifest();
const dismissed = await getDismissedIds(userId);
const newCount = getNewCountServer(manifest, dismissed);
return (
<html>
<head>
<FeatureDropScript />
</head>
<body>
<header>
What’s New {newCount > 0 && <span>{newCount}</span>}
</header>
{children}
</body>
</html>
);
}비슷한 네이티브 통합이 Remix, Astro, Nuxt에 존재합니다 — 각각 요청당 새로운
MemoryAdapter를 생성하여 공유 상태와 경쟁 조건을 방지합니다.
shadcn/ui components
# Changelog widget for React — yours to customize
npx shadcn@latest add https://featuredrop.dev/r/changelog-widget.json
npx shadcn@latest add https://featuredrop.dev/r/new-badge.json
npx shadcn@latest add https://featuredrop.dev/r/tour.json
npx shadcn@latest add https://featuredrop.dev/r/checklist.json
npx shadcn@latest add https://featuredrop.dev/r/feedback-widget.jsonshadcn 레지스트리는 FeatureDrop을 여러분의 코드베이스에 존재하는 React 컴포넌트 라이브러리로 변환합니다.
- 기존 shadcn 프리미티브(
Badge,Sheet,Dialog)를 사용합니다. - Tailwind 테마와 디자인 토큰을 존중합니다.
- 우리에게서 추가 CSS는 없습니다 — 여러분의 것.
AI 지원 설정
npx featuredrop ai-setup이 명령은 편집기를 자동으로 감지하고 올바른 컨텍스트를 생성하므로 모든 AI 코딩 어시스턴트가 이제 FeatureDrop을 이해합니다.
편집기
무엇을 생성합니까
| 도구 | 파일 / 구성 |
|---|---|
| Claude Code | .claude/skills/featuredrop.md + MCP config |
| Cursor | .cursorrules + .cursor/mcp.json |
| VS Code | .vscode/mcp.json |
MCP 서버는 AI 어시스턴트에게:
- 5가지 도구 – 기능 스캐폴드, 매니페스트 검증, 컴포넌트 제안, …
- 6가지 리소스 – 훅스 레퍼런스, 컴포넌트 카탈로그, 어댑터 가이드, …
예시: Claude에게 “사이드바에 변경 로그를 추가해줘”라고 말하면 첫 시도에서 올바른 import, hook, provider 설정을 생성합니다.
제품 채택 도구 비교
| 기능 | Pendo | FeatureDrop v3 |
|---|---|---|
| 기능 발표 | ✅ | ✅ |
| 제품 투어 | ✅ | ✅ |
| 체크리스트 | ✅ | ✅ |
| NPS / 설문조사 | ✅ | ✅ |
| 피드백 수집 | ✅ | ✅ |
| 스마트 타이밍 | Server‑side, weeks of data | Client‑side, session 1 |
| 포맷 적응 | Manual rules | Automatic |
| 채택 점수화 | Dashboard only | In‑app hooks |
| 번들 크기 | 100–300 kB | 3 kB core + 4 kB engine |
| 데이터 수집 | Their servers | Your browser – that’s it |
| 가격 | $7,000+/year | $0 |
| 벤더 종속성 | ✅ | MIT licensed |
핵심 요약: 스마트한 채택 결정을 내리기 위해 $7 k 분석 파이프라인이 필요하지 않습니다. localStorage를 사용하는 4 kB 클라이언트‑사이드 엔진이면 충분합니다.
시작하기
npm install featuredropfeatures.json파일을 만들어 기능 정의를 추가합니다.- 앱을
<FeatureDropProvider …>로 감싸세요. - 원하는 위치에
<SmartAnnouncement …>를 삽입합니다.
그게 전부입니다 – 엔진이 나머지를 처리합니다.
리소스:
[GitHub] | [Docs] | [shadcn Components] | [Example App]
FeatureDrop Cloud(팀용 호스팅 대시보드)는 곧 출시됩니다. 오픈소스 라이브러리는 영원히 무료입니다.
토론
만약 Pendo, Appcues, 혹은 Beamer를 사용해 보셨다면, 직접 구축하는 대신 이들에 비용을 지불하게 만든 이유는 무엇인가요? 댓글로 여러분의 생각을 듣고 싶습니다.
저는 GLINR Studios에서 FeatureDrop을 만들고 있는 GDS K S입니다. ⭐️ 유용하다면 레포에 별표를 달아 주세요.