🏢 Vercel 기술 스택 분석

프론트엔드 개발자를 위한 최고의 배포 플랫폼을 만드는 Vercel의 기술 스택을 심층 분석합니다.
"Develop. Preview. Ship." - 프론트엔드 배포를 혁신하는 기술

📊 회사 개요

서비스 규모

• 월간 배포: 1,000만+ 건
• 개발자: 100만+ 명
• 월간 요청: 300억+ 건
• 엣지 로케이션: 전 세계 100+ 개
• 평균 빌드 시간: < 1분

엔지니어링 조직

• 엔지니어: 200명+ (전체 직원 350+)
• 문화: "Ship Early, Ship Often"
• 원격 우선: 글로벌 분산 팀
• 오픈소스: Next.js, Turborepo 등 주도

기술적 도전과제

1. 즉각적 배포: Git push에서 프로덕션까지
2. 글로벌 성능: 전 세계 밀리초 응답
3. 개발자 경험: 완벽한 로컬-프로덕션 패리티
4. 엣지 컴퓨팅: 서버리스의 다음 단계

🏗️ 아키텍처 Overview

시스템 다이어그램

┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ Git Push │────►│ Builder │────►│ Registry │ │ (GitHub) │ │ Platform │ │ (OCI) │ └─────────────┘ └─────────────┘ └─────────────┘ │ │ │ │ ┌─────▼─────┐ ┌─────▼─────┐ │ │ Preview │ │Edge Network│ │ │ URLs │ │(100+ PoPs) │ │ └───────────┘ └───────────┘ │ │ │ └────────────────────┤ │ ┌─────▼─────┐ ┌─────▼─────┐ │ Analytics │ │ Edge │ │ Engine │ │ Functions │ └───────────┘ └───────────┘ 

핵심 설계 원칙

1. Zero Config: 설정 없이 바로 배포
2. Edge First: 사용자 가까이에서 실행
3. Instant Rollbacks: 즉시 이전 버전으로
4. Preview Deployments: 모든 PR에 미리보기
5. Framework Agnostic: 모든 프레임워크 지원

기술 진화

• 2015: ZEIT Now로 시작
• 2016-2017: Now.sh 플랫폼 구축
• 2018-2019: Serverless 전환
• 2020: Vercel로 리브랜딩, Next.js 통합
• 2021-2022: Edge Functions 출시
• 2023-현재: AI SDK, v0 출시

🧩 기술 스택 상세

Build Platform

빌드 시스템 (Go)

// Vercel의 빌드 파이프라인 package builder import ( "context" "fmt" "time" "github.com/vercel/builder/pkg/analyzer" "github.com/vercel/builder/pkg/cache" "github.com/vercel/builder/pkg/runtime" ) type BuildPipeline struct { analyzer *analyzer.FrameworkAnalyzer cache *cache.BuildCache registry *Registry telemetry *Telemetry } type BuildRequest struct { RepoURL string Branch string CommitSHA string ProjectID string Environment map[string]string } func (bp *BuildPipeline) Build(ctx context.Context, req BuildRequest) (*BuildResult, error) { span := trace.StartSpan("build.pipeline") defer span.End() // 1. 소스 코드 클론 sourceDir, err := bp.cloneRepository(ctx, req) if err != nil { return nil, fmt.Errorf("clone failed: %w", err) } defer cleanup(sourceDir) // 2. 프레임워크 감지 framework, err := bp.analyzer.Detect(sourceDir) if err != nil { return nil, fmt.Errorf("framework detection failed: %w", err) } span.SetAttributes( attribute.String("framework", framework.Name), attribute.String("version", framework.Version), ) // 3. 캐시 복원 cacheKey := bp.generateCacheKey(req, framework) if cached := bp.cache.Restore(cacheKey); cached != nil { span.AddEvent("cache_hit") sourceDir = bp.applyCachedDependencies(sourceDir, cached) } // 4. 빌드 실행 buildResult, err := bp.executeBuild(ctx, sourceDir, framework, req.Environment) if err != nil { return nil, fmt.Errorf("build execution failed: %w", err) } // 5. 최적화 optimized, err := bp.optimize(buildResult, framework) if err != nil { span.RecordError(err) // 최적화 실패는 무시하고 진행 optimized = buildResult } // 6. 아티팩트 업로드 artifacts, err := bp.uploadArtifacts(ctx, optimized) if err != nil { return nil, fmt.Errorf("artifact upload failed: %w", err) } // 7. 캐시 저장 bp.cache.Save(cacheKey, bp.extractCacheableAssets(optimized)) // 8. 메타데이터 생성 metadata := bp.generateMetadata(framework, buildResult, artifacts) return &BuildResult{ Artifacts: artifacts, Metadata: metadata, Duration: time.Since(startTime), CacheHit: cached != nil, }, nil } // 프레임워크별 빌드 실행 func (bp *BuildPipeline) executeBuild( ctx context.Context, sourceDir string, framework Framework, env map[string]string, ) (*BuildOutput, error) { // 런타임 선택 rt := runtime.GetRuntime(framework) // 병렬 처리를 위한 워커 풀 workers := runtime.NewWorkerPool(runtime.MaxWorkers()) defer workers.Close() // 빌드 태스크 생성 tasks := rt.CreateBuildTasks(sourceDir, framework) results := make([]*TaskResult, len(tasks)) errChan := make(chan error, len(tasks)) // 병렬 실행 for i, task := range tasks { workers.Submit(func(idx int, t BuildTask) func() { return func() { result, err := t.Execute(ctx, env) if err != nil { errChan <- fmt.Errorf("task %s failed: %w", t.Name, err) return } results[idx] = result } }(i, task)) } // 결과 수집 workers.Wait() close(errChan) // 에러 확인 for err := range errChan { if err != nil { return nil, err } } // 결과 병합 return rt.MergeResults(results), nil } // 빌드 최적화 func (bp *BuildPipeline) optimize(output *BuildOutput, framework Framework) (*BuildOutput, error) { optimized := &BuildOutput{ Files: make([]File, 0, len(output.Files)), } for _, file := range output.Files { switch { case isJavaScript(file): // Terser로 minification minified, err := bp.minifyJS(file) if err == nil { file = minified } case isCSS(file): // CSS 최적화 optimized, err := bp.optimizeCSS(file) if err == nil { file = optimized } case isImage(file): // 이미지 최적화 (WebP 변환 등) converted, err := bp.optimizeImage(file) if err == nil { file = converted } } optimized.Files = append(optimized.Files, file) } // Tree shaking if framework.SupportsTreeShaking { optimized = bp.performTreeShaking(optimized) } // 번들 분석 optimized.BundleAnalysis = bp.analyzeBundles(optimized) return optimized, nil } 

Edge Runtime (Rust)

// Vercel Edge Runtime 구현 use std::time::Duration; use tokio::time::timeout; use wasmtime::{Engine, Module, Store}; pub struct EdgeRuntime { engine: Engine, isolate_pool: IsolatePool, request_router: RequestRouter, cache: EdgeCache, } #[derive(Debug)] pub struct EdgeFunction { id: String, wasm_module: Module, config: FunctionConfig, cold_start_snapshot: Option<Snapshot>, } impl EdgeRuntime { pub async fn handle_request( &self, request: Request<Body>, function_id: &str, ) -> Result<Response<Body>, Error> { // 1. 함수 조회 let function = self.get_function(function_id) .ok_or(Error::FunctionNotFound)?; // 2. 캐시 확인 if let Some(cached) = self.check_cache(&request, &function.config).await? { return Ok(cached); } // 3. Isolate 가져오기 (풀에서) let mut isolate = self.isolate_pool.acquire().await?; // 4. Cold start 최적화 if let Some(snapshot) = &function.cold_start_snapshot { isolate.restore_from_snapshot(snapshot)?; } else { // 첫 실행 - 모듈 인스턴스화 let instance = isolate.instantiate(&function.wasm_module)?; // 스냅샷 생성 (다음 cold start용) let snapshot = isolate.create_snapshot()?; self.cache_snapshot(function_id, snapshot).await; } // 5. 요청 실행 (타임아웃 포함) let response = timeout( Duration::from_millis(function.config.timeout_ms), self.execute_function(&mut isolate, request), ).await??; // 6. 응답 캐싱 if should_cache(&response, &function.config) { self.cache_response(&request, &response, &function.config).await?; } // 7. Isolate 반환 self.isolate_pool.release(isolate); Ok(response) } async fn execute_function( &self, isolate: &mut Isolate, request: Request<Body>, ) -> Result<Response<Body>, Error> { // Request 객체를 WASM 메모리로 전달 let request_ptr = isolate.serialize_request(request)?; // 함수 호출 let func = isolate.get_export::<Func>("handler")?; let response_ptr = func.call(&mut isolate.store, &[request_ptr.into()])?; // Response 역직렬화 let response = isolate.deserialize_response(response_ptr)?; Ok(response) } } // Isolate Pool 관리 pub struct IsolatePool { available: Arc<Mutex<Vec<Isolate>>>, max_size: usize, memory_limit: usize, } impl IsolatePool { pub async fn acquire(&self) -> Result<Isolate, Error> { // 사용 가능한 isolate 확인 if let Some(isolate) = self.available.lock().await.pop() { return Ok(isolate); } // 새 isolate 생성 self.create_isolate().await } async fn create_isolate(&self) -> Result<Isolate, Error> { let mut config = Config::new(); config.wasm_simd(true); config.wasm_bulk_memory(true); config.wasm_multi_value(true); // 메모리 제한 config.max_wasm_stack(1024 * 1024); // 1MB stack config.memory_limit(self.memory_limit); // V8 스타일 isolate 생성 let engine = Engine::new(&config)?; let store = Store::new(&engine, ()); Ok(Isolate::new(engine, store)) } } // 지능형 라우팅 pub struct RequestRouter { rules: Vec<RoutingRule>, geo_database: GeoIPDatabase, } impl RequestRouter { pub fn route(&self, request: &Request<Body>) -> RouterDecision { let client_ip = extract_client_ip(request); let geo_info = self.geo_database.lookup(client_ip); // 가장 가까운 엣지 로케이션 선택 let nearest_edge = self.find_nearest_edge(&geo_info); // 커스텀 라우팅 규칙 적용 for rule in &self.rules { if rule.matches(request, &geo_info) { return rule.decision.clone(); } } RouterDecision::Edge(nearest_edge) } } 

Frontend (Next.js Integration)

프레임워크 최적화

// Vercel의 Next.js 최적화 import { NextConfig } from "next"; import { VercelConfig } from "@vercel/static-config"; export class NextJSOptimizer { private config: NextConfig; private vercelConfig: VercelConfig; async optimize(projectPath: string): Promise<OptimizedBuild> { // 1. 설정 로드 this.config = await this.loadNextConfig(projectPath); this.vercelConfig = await this.loadVercelConfig(projectPath); // 2. 자동 최적화 적용 const optimizations = []; // 이미지 최적화 if (this.config.images) { optimizations.push(this.optimizeImages()); } // 폰트 최적화 optimizations.push(this.optimizeFonts()); // 번들 분석 및 최적화 optimizations.push(this.optimizeBundles()); // ISR 설정 if (this.hasISRPages()) { optimizations.push(this.configureISR()); } // Edge Functions 변환 if (this.hasEdgeAPI()) { optimizations.push(this.convertToEdge()); } // 병렬 실행 const results = await Promise.all(optimizations); return this.mergeOptimizations(results); } private async optimizeImages(): Promise<ImageOptimization> { const images = await this.findAllImages(); return Promise.all( images.map(async (image) => { // Next/Image 컴포넌트로 자동 변환 if (this.isPlainImg(image)) { await this.convertToNextImage(image); } // 원본 이미지 최적화 const optimized = await this.processImage(image, { formats: ["webp", "avif"], sizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840], quality: this.config.images?.quality || 75, }); return optimized; }), ); } private async optimizeBundles(): Promise<BundleOptimization> { // Webpack 설정 분석 const webpackConfig = this.extractWebpackConfig(); // 자동 코드 스플리팅 const splitChunks = { chunks: "all", cacheGroups: { default: false, vendors: false, framework: { name: "framework", chunks: "all", test: /[\\/]node_modules[\\/](react|react-dom|scheduler)[\\/]/, priority: 40, enforce: true, }, commons: { name: "commons", chunks: "all", minChunks: 2, priority: 20, }, shared: { name(module, chunks) { return crypto .createHash("sha1") .update(chunks.reduce((acc, chunk) => acc + chunk.name, "")) .digest("hex"); }, priority: 10, minChunks: 2, reuseExistingChunk: true, }, }, }; // Tree shaking 강화 const optimization = { usedExports: true, sideEffects: false, concatenateModules: true, minimize: true, minimizer: [ new TerserPlugin({ terserOptions: { parse: { ecma: 8 }, compress: { ecma: 5, warnings: false, comparisons: false, inline: 2, drop_console: true, drop_debugger: true, }, mangle: { safari10: true }, output: { ecma: 5, comments: false, ascii_only: true, }, }, }), ], }; return { splitChunks, optimization }; } private async configureISR(): Promise<ISRConfig> { const pages = await this.findAllPages(); const isrPages = []; for (const page of pages) { const { revalidate } = await this.extractPageConfig(page); if (revalidate) { isrPages.push({ path: page.path, revalidate, // 스마트 무효화 설정 dependencies: await this.analyzeDependencies(page), fallback: this.determineFallback(page), }); } } return { pages: isrPages, // 글로벌 캐시 설정 cache: { strategy: "stale-while-revalidate", maxAge: 31536000, // 1년 staleWhileRevalidate: 86400, // 1일 }, }; } } // Analytics 수집 export class VercelAnalytics { private queue: AnalyticsEvent[] = []; private flushInterval: number = 5000; track(event: AnalyticsEvent): void { this.queue.push({ ...event, timestamp: Date.now(), sessionId: this.getSessionId(), visitorId: this.getVisitorId(), }); if (this.queue.length >= 10) { this.flush(); } } private async flush(): Promise<void> { if (this.queue.length === 0) return; const events = [...this.queue]; this.queue = []; try { await fetch("/_vercel/insights/event", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ events }), }); } catch (error) { // 실패한 이벤트는 다시 큐에 추가 this.queue.unshift(...events); } } measureWebVitals(): void { // Core Web Vitals 측정 if ("PerformanceObserver" in window) { // LCP (Largest Contentful Paint) new PerformanceObserver((list) => { const entries = list.getEntries(); const lastEntry = entries[entries.length - 1]; this.track({ type: "web-vital", name: "LCP", value: lastEntry.renderTime || lastEntry.loadTime, }); }).observe({ entryTypes: ["largest-contentful-paint"] }); // FID (First Input Delay) new PerformanceObserver((list) => { const entries = list.getEntries(); entries.forEach((entry) => { this.track({ type: "web-vital", name: "FID", value: entry.processingStart - entry.startTime, }); }); }).observe({ entryTypes: ["first-input"] }); // CLS (Cumulative Layout Shift) let clsValue = 0; new PerformanceObserver((list) => { list.getEntries().forEach((entry) => { if (!entry.hadRecentInput) { clsValue += entry.value; } }); this.track({ type: "web-vital", name: "CLS", value: clsValue, }); }).observe({ entryTypes: ["layout-shift"] }); } } } 

인프라 및 네트워크

글로벌 엣지 네트워크

// Edge Network 관리 export class EdgeNetwork { private nodes: Map<string, EdgeNode> = new Map(); private healthChecker: HealthChecker; private loadBalancer: LoadBalancer; async routeRequest(request: Request): Promise<EdgeNode> { // 1. 클라이언트 위치 파악 const clientLocation = await this.geolocate(request.ip); // 2. 가용한 노드 찾기 const availableNodes = await this.getHealthyNodes(); // 3. 최적 노드 선택 const selectedNode = this.selectOptimalNode( clientLocation, availableNodes, request, ); // 4. 요청 라우팅 return selectedNode; } private selectOptimalNode( clientLocation: GeoLocation, nodes: EdgeNode[], request: Request, ): EdgeNode { // 점수 계산 const scores = nodes.map((node) => ({ node, score: this.calculateNodeScore(node, clientLocation, request), })); // 가장 높은 점수의 노드 선택 scores.sort((a, b) => b.score - a.score); return scores[0].node; } private calculateNodeScore( node: EdgeNode, clientLocation: GeoLocation, request: Request, ): number { let score = 100; // 거리 점수 (가장 중요) const distance = this.calculateDistance(node.location, clientLocation); score -= distance / 100; // 100km당 1점 감소 // 부하 점수 const load = node.getCurrentLoad(); score -= load * 0.5; // 부하율당 0.5점 감소 // 특수 라우팅 규칙 if (request.headers["x-vercel-ip-country"] === node.country) { score += 10; // 같은 국가 보너스 } // 캐시 히트 가능성 if (node.hasInCache(request.url)) { score += 20; // 캐시 보너스 } return score; } } // DDoS 방어 export class DDoSProtection { private rateLimiter: RateLimiter; private blacklist: Set<string> = new Set(); private suspicious: Map<string, number> = new Map(); async checkRequest(request: Request): Promise<boolean> { const ip = request.ip; // 블랙리스트 체크 if (this.blacklist.has(ip)) { return false; } // Rate limiting const allowed = await this.rateLimiter.check(ip, { windowMs: 60 * 1000, // 1분 max: 100, // 최대 100 요청 }); if (!allowed) { this.incrementSuspicion(ip); return false; } // 패턴 분석 if (this.detectMaliciousPattern(request)) { this.incrementSuspicion(ip); return false; } return true; } private detectMaliciousPattern(request: Request): boolean { // User-Agent 검사 const ua = request.headers["user-agent"]; if (!ua || this.isBotUserAgent(ua)) { return true; } // 요청 패턴 검사 if (this.isScrapingPattern(request)) { return true; } // Payload 크기 검사 if (request.contentLength > 10 * 1024 * 1024) { // 10MB return true; } return false; } private incrementSuspicion(ip: string): void { const current = this.suspicious.get(ip) || 0; this.suspicious.set(ip, current + 1); // 임계값 초과 시 블랙리스트 if (current + 1 >= 10) { this.blacklist.add(ip); this.suspicious.delete(ip); // 일정 시간 후 해제 setTimeout(() => { this.blacklist.delete(ip); }, 3600 * 1000); // 1시간 } } } 

기술 스택 요약:

• Backend: Go, Rust, Node.js
• Frontend: Next.js, React, TypeScript
• Edge Runtime: WebAssembly, V8 Isolates
• 인프라: AWS, Cloudflare, 자체 CDN
• 데이터베이스: PostgreSQL, DynamoDB, Redis
• 모니터링: 자체 분석 플랫폼
• 빌드 도구: Turborepo, Webpack, SWC

💡 핵심 기술 인사이트

1. 엣지 컴퓨팅의 미래

• 사용자 가까이에서 코드 실행
• 콜드 스타트 최소화
• 글로벌 일관된 성능

2. 개발자 경험 혁신

• Git push만으로 배포
• 즉각적인 미리보기
• 프레임워크 자동 감지

3. 성능 최적화 자동화

• 이미지 자동 최적화
• 코드 스플리팅
• 캐싱 전략 자동화

📈 성과 & 지표

기술적 성과

• 배포 시간: Git push → 프로덕션 < 60초
• 빌드 성공률: 99.5%+
• 엣지 응답시간: P50 < 50ms
• 가용성: 99.99%
• 글로벌 커버리지: 100+ PoP

비즈니스 영향

• 개발자 생산성: 3배 향상
• 페이지 로드 속도: 평균 40% 개선
• SEO 점수: 평균 20점 상승
• 개발 비용: 60% 절감

🎓 Vercel에서 배울 점

✅ 적용 가능한 패턴

1. Preview Deployments: PR별 미리보기
2. Edge Functions: 엣지에서 실행
3. 자동 최적화: 프레임워크별 최적화
4. Analytics: 실시간 성능 모니터링
5. Rollback: 즉시 이전 버전으로

❌ 주의사항

1. 벤더 종속: Vercel 전용 기능
2. 비용: 트래픽 증가 시 비용 상승
3. 제한사항: 함수 실행 시간 제한
4. 커스터마이징: 제한된 설정

📚 추천 리소스

• Vercel Documentation
• Next.js Documentation
• Edge Functions Guide
• Vercel Blog

🔮 미래 전망

현재 집중 분야

1. AI Integration: v0, AI SDK
2. Edge Databases: 분산 데이터베이스
3. Conformance: 프레임워크 최적화
4. Storage: Edge 스토리지 솔루션
5. Monitoring: 더 정교한 분석

기술 투자 영역

• WebAssembly: 더 빠른 Edge Runtime
• Machine Learning: 자동 최적화
• 5G Edge: 초저지연 컴퓨팅
• Blockchain: 분산 배포
• IoT: 엣지 디바이스 지원

"우리는 프론트엔드 클라우드를 구축하여, 개발자가 최고의 사용자 경험을 만드는 데 집중할 수 있도록 돕고 있습니다."

• Vercel Engineering

마지막 업데이트: 2025-01-28