Files

T

koriweb d8a80f6272 chore(wiki): dangling 링크 canonical 정규화 (768파일/1200건)

이름만 다른(표기 변형) [[위키링크]]를 대상 문서의 canonical 제목으로 치환해
끊겼던 1,200개 링크를 연결. 제목/파일명 정규화 일치만 적용하고 별칭 매칭은
과병합 위험으로 제외(애매성 가드). 원본은 _link_reconcile_backup/ 에 백업.
도구: Datacollect/scripts/link_reconcile_apply.mjs

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

2026-06-08 12:24:15 +09:00

7.4 KiB

Raw Blame History

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

title

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

PWA: Service Worker + 매 instant load.
Value-Integrated UI: 매 sustainability metric 의 PDP 의 inline.
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

Story 의 product 의 inline.
Speed 의 first metric.
A/B test 의 measure.
Sustainability 의 differentiator (modern consumer).
Mobile-first.

💻 패턴 (응용 — PWA + value UI)

Service Worker (workbox)

// 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

{
  "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)

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)

<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)

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

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

# .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

7.4 KiB Raw Blame History