🏢 Figma 기술 스택 분석

브라우저에서 네이티브 앱 수준의 디자인 툴을 구현한 Figma의 기술 스택을 심층 분석합니다.
"Design, prototype, and collaborate in real time" - 웹 기술의 한계를 넘어서는 혁신

📊 회사 개요

서비스 규모

• 월간 활성 사용자: 400만+ 명
• 생성된 디자인 객체: 30억+ 개
• 팀: 100만+ 개
• 동시 편집자: 파일당 200+ 명
• 렌더링 성능: 60fps 유지

엔지니어링 조직

• 엔지니어: 300명+ (Adobe 인수 후 확대)
• 문화: "Make design accessible to everyone"
• 기술 철학: 웹 기술의 한계 돌파
• 오픈소스: 제한적 (핵심 기술은 비공개)

기술적 도전과제

1. 브라우저 성능: 네이티브 앱 수준 속도
2. 실시간 협업: 수백 명 동시 편집
3. 벡터 렌더링: 복잡한 그래픽 실시간 처리
4. 대규모 파일: GB 단위 디자인 파일

🏗️ 아키텍처 Overview

시스템 다이어그램

┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ Browser │────►│ WebSocket │────►│Multiplayer │ │ (Client) │ │ Server │ │ Engine │ └─────────────┘ └─────────────┘ └─────────────┘ │ │ │ │ ┌─────▼─────┐ ┌─────▼─────┐ │ │ Render │ │ Document │ │ │ Server │ │ Store │ │ └───────────┘ └───────────┘ │ │ │ └────────────────────┼────────────────────┘ ┌─────▼─────┐ │WebAssembly│ │ Engine │ └───────────┘ 

핵심 설계 원칙

1. Performance First: 60fps 렌더링 목표
2. Web-Native: 플러그인 없는 순수 웹
3. Real-time Sync: 밀리초 단위 동기화
4. Infinite Canvas: 무한 확장 가능
5. Version Control: Git 같은 디자인 버전 관리

기술 진화

• 2012-2013: WebGL 프로토타입
• 2014-2015: C++ 엔진 개발
• 2016-2017: WebAssembly 이전
• 2018-2019: 멀티플레이어 엔진
• 2020-2021: 대규모 최적화
• 2022-현재: AI 기능 통합

🧩 기술 스택 상세

렌더링 엔진 (C++ → WebAssembly)

벡터 그래픽 엔진

// Figma의 렌더링 엔진 핵심 (C++) class FigmaRenderer { private: std::unique_ptr<Canvas> canvas; std::unique_ptr<Scene> scene; RenderCache cache; GPUContext* gpu_context; public: void render(const Frame& frame) { // 1. 더티 영역 계산 auto dirty_regions = calculate_dirty_regions(frame); // 2. 렌더 트리 구축 auto render_tree = build_render_tree(frame.root); // 3. 레이어 최적화 optimize_layers(render_tree); // 4. GPU 명령 생성 auto commands = generate_gpu_commands(render_tree, dirty_regions); // 5. WebGL로 렌더링 gpu_context->execute(commands); // 6. 캐시 업데이트 cache.update(dirty_regions); } // 효율적인 히트 테스트 Node* hit_test(const Point& point) { // Spatial indexing으로 빠른 검색 auto candidates = spatial_index.query(point); for (auto node : candidates) { if (node->contains_point(point)) { // 정확한 경로 테스트 if (precise_hit_test(node, point)) { return node; } } } return nullptr; } // 벡터 경로 래스터화 void rasterize_path(const Path& path, const Transform& transform) { // Bezier 곡선을 삼각형으로 분해 auto triangles = tessellate_path(path); // 안티엘리어싱 적용 apply_msaa(triangles, 4); // 4x MSAA // GPU 버퍼에 업로드 gpu_context->upload_triangles(triangles); } }; // 효율적인 텍스트 렌더링 class TextRenderer { private: struct GlyphCache { std::unordered_map<GlyphKey, GlyphData> glyphs; TextureAtlas atlas; }; GlyphCache cache; public: void render_text(const TextNode& text) { // 글리프 준비 prepare_glyphs(text.content, text.font); // 레이아웃 계산 auto layout = calculate_layout(text); // SDF (Signed Distance Field) 렌더링 for (const auto& glyph_run : layout.runs) { render_glyph_run(glyph_run); } } void render_glyph_run(const GlyphRun& run) { // 배치 렌더링으로 드로우콜 최소화 auto batch = create_glyph_batch(run); // 서브픽셀 안티엘리어싱 apply_subpixel_aa(batch); gpu_context->draw_instanced(batch); } }; 

WebAssembly 브릿지

// TypeScript에서 WebAssembly 모듈 사용 export class FigmaEngine { private wasmModule: WebAssembly.Module; private wasmInstance: WebAssembly.Instance; private memory: WebAssembly.Memory; private renderFunc: (framePtr: number) => void; async initialize() { // WebAssembly 모듈 로드 const response = await fetch("/figma-engine.wasm"); const bytes = await response.arrayBuffer(); // 컴파일 및 인스턴스화 this.wasmModule = await WebAssembly.compile(bytes); // 메모리 공유 this.memory = new WebAssembly.Memory({ initial: 256, // 16MB maximum: 16384, // 1GB shared: true, // SharedArrayBuffer for threading }); // Import 객체 설정 const imports = { env: { memory: this.memory, // WebGL 바인딩 glCreateShader: (type: number) => gl.createShader(type), glShaderSource: (shader: number, source: number) => { const sourceStr = this.readString(source); gl.shaderSource(shaders.get(shader), sourceStr); }, glCompileShader: (shader: number) => gl.compileShader(shaders.get(shader)), // ... 더 많은 WebGL 함수들 }, // JavaScript 콜백 js: { onRenderComplete: () => this.handleRenderComplete(), requestAnimationFrame: (callback: number) => { requestAnimationFrame(() => { this.wasmInstance.exports.invokeCallback(callback); }); }, }, }; this.wasmInstance = await WebAssembly.instantiate(this.wasmModule, imports); this.renderFunc = this.wasmInstance.exports.render as any; } render(sceneData: SceneData) { // Scene 데이터를 WASM 메모리에 복사 const scenePtr = this.allocateScene(sceneData); // C++ 렌더링 함수 호출 this.renderFunc(scenePtr); // 메모리 정리 this.freeScene(scenePtr); } // 효율적인 메모리 관리 private allocateScene(scene: SceneData): number { const size = this.calculateSceneSize(scene); const ptr = this.wasmInstance.exports.malloc(size); // 구조체 데이터 직렬화 const view = new DataView(this.memory.buffer, ptr, size); this.serializeScene(scene, view); return ptr; } } 

실시간 협업 시스템

멀티플레이어 엔진

// Rust로 구현된 고성능 동기화 서버 use tokio::net::{TcpListener, TcpStream}; use dashmap::DashMap; use bytes::{Bytes, BytesMut}; #[derive(Clone)] struct FigmaDocument { id: String, nodes: Arc<RwLock<HashMap<NodeId, Node>>>, operations: Arc<Mutex<Vec<Operation>>>, clients: Arc<DashMap<ClientId, Client>>, } #[derive(Debug)] enum Operation { Create { node_id: NodeId, data: NodeData }, Update { node_id: NodeId, changes: Vec<Change> }, Delete { node_id: NodeId }, Move { node_id: NodeId, parent_id: NodeId, index: usize }, } struct MultiplayerServer { documents: Arc<DashMap<String, FigmaDocument>>, connections: Arc<DashMap<ClientId, Connection>>, } impl MultiplayerServer { async fn handle_client(self: Arc<Self>, stream: TcpStream, client_id: ClientId) { let (reader, writer) = stream.split(); loop { match read_message(&mut reader).await { Ok(message) => { self.process_message(client_id, message).await; } Err(_) => { self.disconnect_client(client_id).await; break; } } } } async fn process_message(&self, client_id: ClientId, message: Message) { match message { Message::Operation { doc_id, op } => { self.handle_operation(doc_id, client_id, op).await; } Message::Subscribe { doc_id } => { self.subscribe_to_document(client_id, doc_id).await; } Message::Cursor { position } => { self.broadcast_cursor(client_id, position).await; } } } async fn handle_operation( &self, doc_id: String, client_id: ClientId, operation: Operation ) { let doc = self.documents.get(&doc_id).unwrap(); // 1. 변환 (Operational Transform) let transformed = self.transform_operation(operation, &doc).await; // 2. 적용 self.apply_operation(&doc, &transformed).await; // 3. 브로드캐스트 self.broadcast_operation(&doc, client_id, &transformed).await; // 4. 영속성 self.persist_operation(&doc_id, &transformed).await; } // OT (Operational Transformation) 구현 async fn transform_operation( &self, op: Operation, doc: &FigmaDocument ) -> Operation { let concurrent_ops = doc.operations.lock().await; let mut transformed = op; for concurrent_op in concurrent_ops.iter() { transformed = self.transform_pair(transformed, concurrent_op); } transformed } fn transform_pair(&self, op1: Operation, op2: &Operation) -> Operation { match (op1, op2) { (Operation::Move { node_id: id1, parent_id: p1, index: i1 }, Operation::Move { node_id: id2, parent_id: p2, index: i2 }) => { if id1 == *id2 { // 같은 노드 이동 - 나중 것 우선 op1 } else if p1 == *p2 { // 같은 부모로 이동 if i1 > *i2 { Operation::Move { node_id: id1, parent_id: p1, index: i1 - 1 } } else { op1 } } else { op1 } } // ... 더 많은 변환 규칙 _ => op1 } } } // 효율적인 diff 알고리즘 fn calculate_diff(before: &Node, after: &Node) -> Vec<Change> { let mut changes = Vec::new(); // 속성 비교 if before.properties != after.properties { changes.push(Change::Properties { old: before.properties.clone(), new: after.properties.clone(), }); } // 자식 노드 비교 (Myers diff algorithm) let child_diff = myers_diff(&before.children, &after.children); changes.extend(child_diff); changes } 

Frontend 기술

React 기반 UI

// Figma의 React 컴포넌트 시스템 import { useEffect, useRef, memo } from "react"; import { FigmaEngine } from "./wasm/engine"; interface CanvasProps { document: FigmaDocument; onSelectionChange: (selection: NodeId[]) => void; } export const Canvas = memo(({ document, onSelectionChange }: CanvasProps) => { const canvasRef = useRef<HTMLCanvasElement>(null); const engineRef = useRef<FigmaEngine>(); const [selection, setSelection] = useState<NodeId[]>([]); useEffect(() => { // WebAssembly 엔진 초기화 const initEngine = async () => { const engine = new FigmaEngine(); await engine.initialize(); engineRef.current = engine; // WebGL 컨텍스트 설정 const gl = canvasRef.current!.getContext("webgl2", { alpha: false, antialias: false, // MSAA는 직접 구현 preserveDrawingBuffer: false, powerPreference: "high-performance", }); engine.setGLContext(gl); }; initEngine(); }, []); // 렌더링 루프 useEffect(() => { let frameId: number; const renderLoop = () => { if (engineRef.current && document) { // 프레임 준비 const frameData = prepareFrameData(document, selection); // WASM 엔진으로 렌더링 engineRef.current.render(frameData); // 성능 모니터링 measurePerformance(); } frameId = requestAnimationFrame(renderLoop); }; renderLoop(); return () => cancelAnimationFrame(frameId); }, [document, selection]); // 입력 처리 const handleMouseDown = useCallback( (e: MouseEvent) => { const point = { x: e.clientX, y: e.clientY }; const hitNode = engineRef.current?.hitTest(point); if (hitNode) { if (e.shiftKey) { // 다중 선택 setSelection((prev) => [...prev, hitNode.id]); } else { setSelection([hitNode.id]); } onSelectionChange(selection); } }, [onSelectionChange] ); return ( <div className="canvas-container"> <canvas ref={canvasRef} className="figma-canvas" onMouseDown={handleMouseDown} onMouseMove={handleMouseMove} onWheel={handleWheel} /> <SelectionOverlay selection={selection} /> <Rulers zoom={zoom} offset={offset} /> </div> ); }); // 선택 영역 오버레이 const SelectionOverlay = ({ selection }: { selection: NodeId[] }) => { const overlayRef = useRef<SVGSVGElement>(null); useEffect(() => { // 선택된 노드들의 경계 상자 계산 const bounds = selection.map((nodeId) => { const node = getNode(nodeId); return calculateBounds(node); }); // SVG로 선택 영역 렌더링 renderSelectionBounds(overlayRef.current!, bounds); }, [selection]); return ( <svg ref={overlayRef} className="selection-overlay" style={{ position: "absolute", inset: 0, pointerEvents: "none" }} /> ); }; 

성능 최적화

가상화 및 LOD (Level of Detail)

// 대규모 디자인 파일 최적화 class ViewportManager { private visibleNodes: Set<NodeId> = new Set(); private lodLevels: Map<NodeId, LODLevel> = new Map(); updateViewport(viewport: Viewport, sceneRoot: Node) { // Quadtree로 빠른 공간 검색 const candidates = this.quadtree.query(viewport.bounds); // 뷰포트에 보이는 노드만 렌더링 const newVisible = new Set<NodeId>(); for (const node of candidates) { const distance = this.calculateDistance(node, viewport); if (distance < viewport.radius) { newVisible.add(node.id); // LOD 레벨 결정 const lod = this.calculateLOD(node, viewport.zoom); this.lodLevels.set(node.id, lod); } } // 차이 계산 const added = difference(newVisible, this.visibleNodes); const removed = difference(this.visibleNodes, newVisible); // 증분 업데이트 this.handleNodesAdded(added); this.handleNodesRemoved(removed); this.visibleNodes = newVisible; } calculateLOD(node: Node, zoom: number): LODLevel { const pixelSize = node.bounds.width * zoom; if (pixelSize < 10) { return LODLevel.INVISIBLE; } else if (pixelSize < 50) { return LODLevel.SIMPLIFIED; } else if (pixelSize < 200) { return LODLevel.NORMAL; } else { return LODLevel.DETAILED; } } } // 텍스처 아틀라스 관리 class TextureAtlasManager { private atlases: Map<string, TextureAtlas> = new Map(); private lruCache: LRUCache<string, AtlasRegion> = new LRUCache(1000); async getTexture(imageId: string): Promise<AtlasRegion> { // 캐시 확인 const cached = this.lruCache.get(imageId); if (cached) return cached; // 이미지 로드 const image = await this.loadImage(imageId); // 적절한 아틀라스 찾기 const atlas = this.findSuitableAtlas(image.width, image.height); // 아틀라스에 패킹 const region = atlas.pack(image); // 캐시 저장 this.lruCache.set(imageId, region); return region; } } 

기술 스택 요약:

• 렌더링: C++ → WebAssembly, WebGL 2.0
• Frontend: React, TypeScript, MobX
• Backend: Rust, PostgreSQL, Redis
• 실시간: WebSocket, Operational Transform
• 인프라: AWS, Cloudflare Workers
• 빌드: Bazel, custom toolchain

💡 핵심 기술 인사이트

1. WebAssembly의 혁신적 활용

• 네이티브 성능을 웹에서 구현
• C++ 코드 재사용
• 메모리 효율적 관리

2. 커스텀 렌더링 파이프라인

• GPU 가속 벡터 그래픽
• 효율적인 캐싱 전략
• 적응형 품질 조절

3. 실시간 협업의 정교함

• Operational Transform 알고리즘
• 충돌 없는 동시 편집
• 최소 지연 동기화

📈 성과 & 지표

기술적 성과

• 렌더링 성능: 60fps (복잡한 디자인에서도)
• 로딩 시간: < 3초 (대규모 파일)
• 동시 편집: 200+ 명 지원
• 지연 시간: < 50ms (같은 지역)
• 메모리 효율: 네이티브 앱 대비 70%

비즈니스 영향

• 시장 점유율: 디자인 툴 시장 1위
• Adobe 인수: $20B (2022년)
• 사용자 만족도: NPS 70+
• 개발 속도: 기존 툴 대비 3배

🎓 Figma에서 배울 점

✅ 적용 가능한 패턴

1. WebAssembly 활용: 고성능 웹 앱
2. Custom 렌더링: WebGL 직접 제어
3. OT 알고리즘: 실시간 협업
4. LOD 시스템: 대규모 콘텐츠 처리
5. Spatial Indexing: 효율적 히트 테스트

❌ 주의사항

1. 높은 기술 장벽: C++/WASM 전문성
2. 브라우저 제약: 메모리, API 한계
3. 복잡한 상태 관리: 동기화 로직
4. 성능 최적화: 지속적 튜닝 필요

📚 추천 리소스

• Figma Engineering Blog
• WebAssembly for Web Developers
• Operational Transformation
• Building a Collaborative Editor

🔮 미래 전망

현재 집중 분야

1. AI 디자인 도구: 자동 레이아웃, 생성
2. Dev Mode: 개발자 핸드오프 개선
3. 3D 지원: 3D 디자인 도구
4. 더 큰 파일: TB급 파일 지원
5. 플러그인 생태계: 더 강력한 API

기술 투자 영역

• WebGPU: 차세대 GPU API
• WASM SIMD: 벡터 연산 가속
• SharedArrayBuffer: 멀티스레딩
• AI/ML: 디자인 인텔리전스
• 분산 시스템: 글로벌 확장

"우리는 디자인 도구를 만드는 것이 아니라, 창의성을 위한 플랫폼을 만들고 있습니다."

• Figma Engineering

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