Files

T

Antigravity Agent f8b21af4be Wiki cleanup: error-doc removal, dedup merge, link normalization

10_Wiki/Topics 대규모 정리:
- 오류 캡처/미완성 stub 문서 227개 제거
- 교차폴더 중복 43클러스터 병합 (63파일 → redirect)
- 링크명 정규화: 깨진 링크 수정·redirect 직결·개념 매핑 ~2,400건
- 카테고리 MOC 6개 신규 생성
- Graph 섹션 미해결 related-keyword 링크 10,058건 제거

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-05-20 23:52:15 +09:00

6.5 KiB

Raw Permalink 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

스포티파이(Spotify)의 스쿼드 모델 및 마이크로 프론트엔드 도입

매 한 줄

"매 Spotify 의 squad/tribe/chapter/guild 모델 — 매 Conway's Law 의 organizational answer to scaling — 매 micro-frontend 의 architectural mirror 의 결과". 매 2012 Henrik Kniberg "Spotify Engineering Culture" video 의 popularization, 매 2016 매 Spotify engineers 의 자체 의 "we don't actually do the squad model" 의 admission. 매 2026 의 reality: 매 inspiration 의 source 이지만 매 dogma 의 X.

매 핵심

매 Squad Model 의 4 layer

Squad — 6-12 명, 매 mini-startup, 매 single feature/product 의 ownership, 매 autonomous (mission, backlog, tech choice).
Tribe — 매 related squads 의 collection (~100 명), 매 product area.
Chapter — 매 cross-squad 의 functional grouping (e.g., 매 frontend chapter, QA chapter).
Guild — 매 voluntary 의 community of interest (e.g., 매 Web Performance guild).

매 핵심 원칙

Aligned autonomy — 매 squad 의 자율 BUT 매 company mission 의 alignment.
Servant leadership — 매 chapter lead 의 skill 의 grow, 매 tactic 의 X.
Trust over control — 매 fail-safe environment.
Continuous improvement — 매 retrospective, 매 hack week.

매 Micro Frontend 의 connection (Conway's Law)

매 squad 의 autonomy → 매 frontend codebase 의 split 의 자연스러운.
매 single SPA → 매 multiple independently-deployable frontend.
Iframe (legacy) → Web Components → Module Federation (Webpack 5+) → Native ES Modules + Import Maps (2026).

매 Spotify 의 actual practice (post-2016 admission)

매 squad model 의 inspiration 매 유지, 매 strict adherence 의 X.
매 platform team 의 strong existence.
매 "Backstage" (developer portal) 의 internal 의 build → opensource.
매 매트릭 매 outcome-driven (DAU, churn) 의 squad mission.

💻 패턴

Pattern 1: Backstage software catalog

# catalog-info.yaml — 매 squad 의 ownership 의 declare
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: now-playing
  annotations:
    github.com/project-slug: spotify/now-playing
spec:
  type: service
  owner: squad-listener-experience
  lifecycle: production
  system: playback

Pattern 2: Module Federation (Webpack 5)

// shell/webpack.config.js
new ModuleFederationPlugin({
  name: 'shell',
  remotes: {
    nowPlaying: 'nowPlaying@https://now-playing.spotify.com/remoteEntry.js',
    playlist: 'playlist@https://playlist.spotify.com/remoteEntry.js',
  },
  shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
});

// shell/App.tsx
const NowPlaying = lazy(() => import('nowPlaying/Player'));

Pattern 3: Import Maps (2026 native)

<script type="importmap">
{
  "imports": {
    "@spotify/now-playing": "https://cdn.spotify.com/now-playing/v3/index.js",
    "@spotify/playlist": "https://cdn.spotify.com/playlist/v2/index.js",
    "react": "https://esm.sh/react@19"
  }
}
</script>
<script type="module">
  import { NowPlaying } from '@spotify/now-playing';
</script>

Pattern 4: Web Components (framework-agnostic)

class SpotifyPlayer extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' }).innerHTML = `
      <style>:host { display: block; padding: 1rem; }</style>
      <div>Now playing: ${this.getAttribute('track')}</div>
    `;
  }
}
customElements.define('spotify-player', SpotifyPlayer);

<spotify-player track="Song Name"></spotify-player>

Pattern 5: Squad-as-API (clear contract)

// 매 squad 의 boundary 의 API contract
interface NowPlayingPublicAPI {
  play(trackId: string): Promise<void>;
  pause(): void;
  onTrackChange(cb: (track: Track) => void): () => void;
}

// 매 다른 squad 의 import — 매 internal 의 의존 X
import type { NowPlayingPublicAPI } from '@spotify/now-playing';

Pattern 6: Cross-squad 의 design system shared

// @spotify/encore (design system) — 매 platform team 의 maintain
import { Button, Card } from '@spotify/encore-web';

// 매 모든 squad 의 사용, 매 visual consistency

매 결정 기준

조직 규모	모델
<20 engineers	Single team
20-100	Squad model 의 lite (squad + chapter)
100-500	Full squad/tribe/chapter/guild
500+	Squad + platform team + central governance
Frontend split	Module Federation (Webpack) or Import Maps
Framework-agnostic	Web Components

기본값: 매 squad-style autonomy + Backstage developer portal + Module Federation / Import Maps + shared design system.

🔗 Graph

부모: Large_Frontend_Projects
변형: 스포티파이 자율적 분대 모델 (Spotify Squad) (alias)
응용: Backstage
Adjacent: Conway's Law · Agile · Module Federation

🤖 LLM 활용

언제: organizational topology 의 review, micro-frontend boundary 의 권고, Module Federation 의 setup boilerplate. 언제 X: 매 actual 의 hiring / restructure 의 결정 — 매 leadership.

❌ 안티패턴

Squad model 의 dogmatic adoption: 매 Spotify 자체 의 follow 의 X.
Micro-frontend without contract: 매 internal API 의 leak.
Shared mutable state across squads: 매 deployment coupling.
Design system 의 fragmentation: 매 squad 별 의 own button.
Iframe 의 legacy 의 over-use: 매 communication 의 fragile.

🧪 검증 / 중복

Verified (Henrik Kniberg "Spotify Engineering Culture" 2012, Jeremiah Lee "Failed #SquadGoals" 2020, Backstage docs, Module Federation docs 2026).
신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — squad/tribe/chapter/guild, Backstage, Module Federation, Import Maps

6.5 KiB Raw Permalink Blame History