refactor(topics): 멀티 에이전트용 지식 재편 — _Common(공통 기본기) + Domain_* 구조

에이전트 8종(대화형/프로그래머 C·S/디자이너/설계자/기획자/QA/PD/PM)에게 [공통 기본 능력 + 롤별 Specialty] 2층으로 지식을 주입하기 위한 재분류. 문서 내용·포맷은 무수정, 폴더 이동만 (6,372개 문서 수 보존 확인). - Topic_Programming → Domain_Programming (내부 구조 보존) - Topic_Graphic → Domain_Design - Topic_Business → Domain_Product - Topic_General → Domain_General - _Common 신설: Math(구 Topic_Math_Specialty), Reasoning(구 General/From_Thinking & Reasoning), Reasoning_Creativity(구 General/From_창의성), Communication(Poetic_Blog_Writing + From_writing) - 타 도메인의 From_* 폴더는 유지 (출처 표기일 뿐, 이미 도메인에 맞게 분류된 문서) - 빈 폴더 정리 (memory/procedures) - 에이전트→폴더 매핑은 workspace의 .astra/agent-knowledge-map.json (9개 에이전트) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-11 11:05:56 +09:00
parent 6549ead309
commit c24165b8bc
6193 changed files with 1717 additions and 31 deletions
@@ -0,0 +1,259 @@
+---
+id: wiki-2026-0508-case-study-allbirds-pwa
+title: "Case Study: Allbirds PWA Redesign"
+category: 10_Wiki/Topics
+status: verified
+canonical_id: self
+aliases: [Allbirds PWA, e-commerce PWA, sustainability commerce, value-integrated UI, conversion case study]
+duplicate_of: none
+source_trust_level: B
+confidence_score: 0.85
+verification_status: applied
+tags: [case-study, e-commerce, pwa, conversion, sustainability, branding, web-performance, allbirds]
+raw_sources: []
+last_reinforced: 2026-05-10
+github_commit: pending
+tech_stack:
+  language: web
+  framework: PWA / React / Service Worker
+---
+
+# Case Study: Allbirds PWA Redesign
+
+## 📌 한 줄 통찰
+> **"매 performance + 매 brand value 의 integrated"**. 매 PWA + 매 sustainability metric 의 PDP integration → 매 23% conversion ↑ + 매 $2.3M / quarter. 매 modern e-commerce 의 reference.
+
+## 매 핵심
+
+### 매 challenge
+- 매 mobile speed.
+- 매 sustainability message 의 dilution X.
+- 매 conversion 의 boost.
+
+### 매 solution
+1. **PWA**: Service Worker + 매 instant load.
+2. **Value-Integrated UI**: 매 sustainability metric 의 PDP 의 inline.
+3. **Optimized assets**: 매 lazy load + 매 modern format.
+
+### 매 quantitative result
+| Metric | Change |
+|---|---|
+| Page load | -89% |
+| Bounce rate | -34% |
+| Conversion (eco-conscious segment) | +23% |
+| Revenue (first quarter post-launch) | +$2.3M |
+
+### 매 lesson
+- **Value 의 inline > 매 separate page**.
+- **Speed = trust**.
+- **PWA 의 native-like UX**.
+- **Single funnel optimization > 매 widespread micro-改善**.
+
+### 매 PWA 핵심 기술
+- **Service Worker**: 매 offline + 매 cache.
+- **Web App Manifest**: 매 installable.
+- **Web Push**: 매 notification.
+- **Background Sync**: 매 retry.
+
+### 매 modern PWA stack (2026)
+- **Workbox**: SW abstraction.
+- **Vite + React / Solid / Svelte**.
+- **Edge functions**: Cloudflare / Vercel.
+- **Image CDN**: Cloudflare Images / imgix.
+
+### 매 generalizable principle
+1. **Story 의 product 의 inline**.
+2. **Speed 의 first metric**.
+3. **A/B test 의 measure**.
+4. **Sustainability 의 differentiator** (modern consumer).
+5. **Mobile-first**.
+
+## 💻 패턴 (응용 — PWA + value UI)
+
+### Service Worker (workbox)
+```js
+// sw.js
+import { precacheAndRoute } from 'workbox-precaching';
+import { registerRoute } from 'workbox-routing';
+import { StaleWhileRevalidate, CacheFirst } from 'workbox-strategies';
+import { ExpirationPlugin } from 'workbox-expiration';
+
+precacheAndRoute(self.__WB_MANIFEST);
+
+// 매 image: cache-first with expiration
+registerRoute(
+  ({ request }) => request.destination === 'image',
+  new CacheFirst({
+    cacheName: 'images',
+    plugins: [new ExpirationPlugin({ maxAgeSeconds: 30 * 86400, maxEntries: 60 })],
+  }),
+);
+
+// 매 API: network-first with offline fallback
+registerRoute(
+  ({ url }) => url.pathname.startsWith('/api/'),
+  new StaleWhileRevalidate({ cacheName: 'api' }),
+);
+```
+
+### Web App Manifest
+```json
+{
+  "name": "Allbirds",
+  "short_name": "Allbirds",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#1a1a1a",
+  "icons": [
+    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
+  ]
+}
+```
+
+### Value-integrated PDP (React)
+```tsx
+function ProductDetailPage({ product }) {
+  return (
+    <article>
+      <ProductGallery images={product.images} />
+      
+      <section>
+        <h1>{product.name}</h1>
+        <Price value={product.price} />
+        
+        {/* 매 sustainability inline — NOT in 'About' */}
+        <SustainabilityBadge>
+          <CarbonIcon />
+          {product.carbonKg.toFixed(1)} kg CO₂e
+          <Tooltip>매 industry avg 의 매 60% 만</Tooltip>
+        </SustainabilityBadge>
+        
+        <SustainabilityBadge>
+          <PlantIcon />
+          매 {product.materials.percentNatural}% natural materials
+        </SustainabilityBadge>
+        
+        <SizeSelector sizes={product.sizes} />
+        <AddToCartButton product={product} />
+      </section>
+      
+      <section>
+        <Tabs>
+          <Tab name="Story">{product.story}</Tab>
+          <Tab name="Materials">{product.materialBreakdown}</Tab>
+          <Tab name="Care">{product.careGuide}</Tab>
+        </Tabs>
+      </section>
+    </article>
+  );
+}
+```
+
+### Image optimization (modern)
+```tsx
+<picture>
+  <source srcSet={`${url}?fmt=avif&w=800 800w, ${url}?fmt=avif&w=1600 1600w`} type="image/avif" />
+  <source srcSet={`${url}?fmt=webp&w=800 800w, ${url}?fmt=webp&w=1600 1600w`} type="image/webp" />
+  <img 
+    src={`${url}?w=800`} 
+    srcSet={`${url}?w=800 800w, ${url}?w=1600 1600w`}
+    sizes="(min-width: 768px) 50vw, 100vw"
+    loading="lazy"
+    decoding="async"
+    width={800} height={1000}
+    alt={product.name}
+  />
+</picture>
+```
+
+### Performance metric tracking (web-vitals)
+```js
+import { onCLS, onLCP, onFID, onFCP, onTTFB, onINP } from 'web-vitals';
+
+function send(metric) {
+  navigator.sendBeacon('/analytics', JSON.stringify(metric));
+}
+
+onLCP(send);
+onCLS(send);
+onINP(send);  // 매 modern (replaces FID)
+onFCP(send);
+onTTFB(send);
+```
+
+### A/B test for value placement
+```ts
+const variant = getVariant(userId);  // 매 'control' or 'inline-sustainability'
+
+if (variant === 'inline-sustainability') {
+  // 매 sustainability badge 의 product page
+  showValueInline = true;
+}
+
+// 매 conversion track
+function onPurchase(orderId) {
+  analytics.track('purchase', {
+    order_id: orderId,
+    variant: variant,
+  });
+}
+```
+
+### Lighthouse CI
+```yaml
+# .lighthouserc.yml
+ci:
+  collect:
+    url:
+      - https://allbirds.com/
+      - https://allbirds.com/products/wool-runners
+    numberOfRuns: 5
+  assert:
+    preset: lighthouse:no-pwa
+    assertions:
+      first-contentful-paint: ['error', { maxNumericValue: 2000 }]
+      largest-contentful-paint: ['error', { maxNumericValue: 2500 }]
+      cumulative-layout-shift: ['error', { maxNumericValue: 0.1 }]
+```
+
+## 🤔 결정 기준
+| 상황 | Approach |
+|---|---|
+| Slow mobile e-commerce | PWA + image opt |
+| Brand 의 value-driven | Inline value UI |
+| Static product info | SSG (Next, Astro) |
+| Dynamic catalog | SSR + edge |
+| Long product browse | Service Worker prefetch |
+| Conversion lift | A/B test value placement |
+
+**기본값**: PWA + image AVIF/WebP + value inline + web-vitals + Lighthouse CI.
+
+## 🔗 Graph
+- 부모: [[E-commerce]] · [[Web-Performance]]
+- 변형: [[PWA]] · [[Service-Worker]] · [[CRO]]
+- 응용: [[Workbox]] · [[Web-Vitals]] · [[Lighthouse]]
+- Adjacent: [[CSS Animations]] · [[Baseline (Web Platform Features)]] · [[Authenticity]] · [[Brand Consistency Maintenance]]
+
+## 🤖 LLM 활용
+**언제**: 매 e-commerce redesign. 매 PWA migration. 매 conversion strategy. 매 brand-value integration.
+**언제 X**: 매 simple landing page. 매 internal tool.
+
+## ❌ 안티패턴
+- **Value 의 'About' page 매 hide**: 매 conversion lift X.
+- **PWA 의 mobile only**: 매 desktop 도 benefit.
+- **Heavy image (no AVIF/WebP)**: 매 LCP 의 fail.
+- **No A/B test**: 매 lift 의 prove X.
+- **Sustainability 의 vague (no metric)**: 매 greenwashing.
+
+## 🧪 검증 / 중복
+- Verified (Allbirds public case study, web.dev PWA pattern).
+- 신뢰도 B.
+- Related: [[CSS Animations]] · [[Baseline (Web Platform Features)]] · [[Brand Consistency Maintenance]] · [[Authenticity]] · [[Web-Vitals]].
+
+## 🕓 Changelog
+| 날짜 | 변경 |
+|---|---|
+| 2026-05-08 | Phase 1 |
+| 2026-05-10 | Manual cleanup — PWA + value-integrated UI + 매 Workbox / Lighthouse / web-vitals code |