Not just another network latency issue: How we unraveled a series of hidden bottlenecks (새 탭에서 열림)

사용량 추정 서비스의 배포 시마다 반복되는 높은 시작 지연 시간(Startup Latency) 문제를 해결하기 위해, 시스템 전반의 네트워크 경로와 인프라 계층을 다각도로 조사했습니다. 단순히 애플리케이션 코드를 수정하는 수준을 넘어, 사이드카 프록시 설정, 리눅스 커널 버그, 클라우드 인스턴스의 네트워크 대역폭 한계 등 복합적인 병목 현상을 단계별로 추적해 해결했습니다. 최종적으로 인프라 최적화와 우아한 종료(Graceful Shutdown) 메커니즘을 결합하여 서비스 안정성을 확보하고 팀의 경보 피로도를 대폭 낮추는 결론에 도달했습니다. **Envoy 사이드카의 CPU 병목 해소** * 배포 단계에서 원격 캐시 데이터를 대량으로 불러올 때, 사이드카 프록시인 Envoy가 모든 쿼리를 배치 처리하며 과도한 CPU를 사용함을 확인했습니다. * Envoy가 할당된 CPU 자원(2코어)을 모두 소진하여 쓰로틀링(Throttling)이 발생했고, 이로 인해 패킷 처리 지연과 TCP 재전송(Retransmit)이 급증했습니다. * Envoy에 할당되는 CPU 자원을 늘려 1차적인 지연 시간 수치를 개선했으나, 여전히 배포 중 지연 시간이 300ms에서 1s 사이를 진동하는 문제가 남았습니다. **리눅스 커널 버그 패치 및 트래픽 분산** * 조사 과정에서 AWS의 Elastic Network Adapter(ENA)를 사용할 때 발생하는 리눅스 커널 버그를 발견했습니다. * 해당 버그는 네트워크 트래픽을 8개의 전송 큐(Transmit Queue)에 분산하지 않고 첫 번째 큐에만 몰아넣어 병목을 유발하고 있었습니다. * 트래픽을 모든 큐에 골고루 분산시키는 핫픽스를 적용하여, 배포 기간 외에 간헐적으로 발생하던 지연 시간 스파이크 문제를 해결했습니다. **AWS 인스턴스 네트워크 대역폭 최적화** * 커널 수정 후에도 배포 중 지연이 지속되자 AWS 전용 메트릭인 `bw_in_allowance_exceeded`와 `bw_out_allowance_exceeded`를 분석했습니다. * 분석 결과, 배포 시 발생하는 급격한 트래픽이 인스턴스 유형별로 할당된 최대 네트워크 대역폭을 초과하여 하이퍼바이저 수준에서 패킷 드롭이 발생하고 있었습니다. * 이를 해결하기 위해 더 높은 대역폭을 제공하는 네트워크 최적화(Network-optimized) EC2 인스턴스로 마이그레이션하여 대역폭 제한 문제를 해결했습니다. **종료되는 파드로의 요청 라우팅 방지** * 모든 인프라 개선 후에도 남아있던 1초 가량의 지연 스파이크가 원격 캐시 파드의 종료(Terminating) 시점과 일치함을 포착했습니다. * 기존의 우아한 종료 로직이 Envoy 클라이언트의 처리 중인 요청(In-flight requests)을 충분히 기다리지 못해, 종료 중인 파드에 요청이 전달되어 타임아웃과 재시도가 발생하고 있었습니다. * 파드에 `preStop` 훅을 구현하여 종료 전 유지 관리 모드 상태임을 클라이언트에 알리고, 모든 요청이 완료될 때까지 대기하도록 설정하여 지연 시간을 최종적으로 안정화했습니다. 성능 최적화 과정에서 단일 원인을 찾기보다 네트워크 스택의 각 계층(프록시, OS 커널, 클라우드 인프라, 애플리케이션 생명주기)을 체계적으로 검증하는 접근 방식이 중요합니다. 특히 대규모 트래픽이 발생하는 배포 시점에는 시스템의 숨겨진 한계치가 드러나기 쉬우므로, 클라우드 제공업체의 전용 메트릭과 네트워크 큐 상태를 면밀히 모니터링할 것을 권장합니다.

단순한 네트워크 지연 문제가 (새 탭에서 열림)

Patterns for safe and efficient cache purging in CI/CD pipelines

Figma 슬라이드 덱 (새 탭에서 열림)

인디 록 듀오 '탠라인스(Tanlines)'는 8년 만의 컴백 신곡 'Outer Banks'의 뮤직비디오를 위해 피그마(Figma)의 슬라이드 데크와 구글 미트(Google Meet) 환경을 활용하는 독특한 시도를 선보였습니다. 멤버 제시 코헨은 공백기 동안 유튜브 뮤직과 나이키에서 근무하며 익힌 기업적 소통 방식인 '슬라이드 데크'를 예술적 도구로 재해석하여, 현대 직장인들의 원격 협업 문화를 음악적 서사로 치환했습니다. 이 프로젝트는 업무용 툴이 단순한 생산성 도구를 넘어, 창작자와 팬들이 공유하는 일상적인 언어로서 기능할 수 있음을 보여줍니다. **직장인의 공용어, 슬라이드 덱의 예술적 재해석** * 탠라인스의 멤버 제시 코헨은 지난 8년간 기업에서 근무하며 슬라이드 데크가 현대 전문직 종사자들의 '공용어(Lingua Franca)'가 되었다는 점에 주목했습니다. * 뮤직비디오는 구글 미트 화면 속에서 피그마 슬라이드를 발표하는 형식을 취하며, 보컬 에릭 엠이 노래하는 모습은 마치 회의에서 슬라이드 내용을 읽어주는 발표자의 모습을 연상시킵니다. * 이는 원격 근무가 일상화된 시대에 창작 활동과 직장 생활, 육아를 병행해야 하는 아티스트의 현실적인 삶을 반영한 설정입니다. **Figma를 활용한 지극히 현실적인 시각 언어 구현** * 소셜 전문 에이전시의 헌터 엘렌바거(Hunter Ellenbarger)와 협업하여 피그마로 슬라이드를 제작했으며, 초기에는 전 곡의 슬라이드 데크를 구글 드라이브나 피그마 폴더 형태로 배포할 계획도 세웠습니다. * 시각적으로 너무 화려하거나 미학적인 디자인보다는, 실제 기업 미팅에서 흔히 볼 수 있는 그래프, 화살표, 흐름도, 인사이트 문구 등을 의도적으로 배치하여 사실감을 높였습니다. * 이러한 '제너릭(Generic)'한 디자인은 직장인들이 매일 접하는 업무 환경을 음악이라는 프레임 안으로 가져와, 팬들이 자신의 일상과 연결된 느낌을 받도록 유도합니다. **변화된 삶의 궤적을 반영한 협업의 가치** * 이번 앨범 *The Big Mess*는 과거의 앨범 커버처럼 멤버들의 얼굴을 전면에 내세우는 대신, 그래픽 디자이너 테디 블랭크스와 협업하여 보다 개념적이고 단순한 디자인을 채택했습니다. * 탠라인스라는 이름의 유래가 '스튜디오 안에서만 작업하다 밖으로 나갔을 때 생기는 햇볕에 탄 자국'인 것처럼, 이번 작업 역시 현실 세계의 의무와 예술적 자아 사이의 균형을 찾는 과정이었습니다. * 중년에 접어든 아티스트로서 느끼는 불확실성을 인정하고, 이를 동료들과의 협업을 통해 우아하게 표현하는 데 집중했습니다. **실용적인 시사점** 협업 툴인 피그마와 화상 회의 시스템은 단순히 업무 효율을 높이는 도구를 넘어, 현대인의 삶을 규정하는 중요한 '컨텍스트'가 되었습니다. 탠라인스의 사례처럼 지루하게 느껴질 수 있는 기업적 형식을 창의적인 콘텐츠의 포맷으로 활용한다면, 타겟 청중에게 깊은 공감과 신선한 재미를 동시에 선사할 수 있습니다.

2023-03-08 사건: 플랫폼 수준의 영향 깊이 살펴보기 | Datadog (새 탭에서 열림)

2023년 3월 8일 발생한 Datadog의 전사적 서비스 장애는 시스템 관리 데몬인 systemd의 동작 변경과 자동 보안 업데이트 설정이 결합되어 발생한 이례적인 사건입니다. Ubuntu 22.04 환경에서 systemd-networkd가 재시작될 때 기존 IP 라우팅 규칙을 모두 삭제하는 새로운 기본 동작이 활성화되었고, 이것이 전 지역 노드에 동시다발적인 자동 패치로 실행되면서 대규모 네트워크 중단으로 이어졌습니다. 이 사고는 인프라 전반에 걸친 자동화된 변경 관리와 점진적 배포 원칙이 보안 패치라는 예외 상황에서 어떻게 무력화될 수 있는지를 보여줍니다. **systemd-networkd의 IP 규칙 삭제 동작** * 2020년 12월 배포된 systemd v248부터 `systemd-networkd`는 시작 시 자신이 파악하지 못한 모든 IP 규칙(IP rules)을 삭제(flush)하는 동작을 도입했습니다. * 이후 v249에서 `ManageForeignRoutingPolicyRules` 설정을 통해 이 동작을 거부할 수 있는 옵션이 추가되었으나, 기본값은 여전히 기존 규칙을 삭제하는 방식이었습니다. * Datadog이 마이그레이션 중이던 Ubuntu 22.04는 이 위험한 기본 설정이 포함된 systemd v249를 사용하고 있었습니다. **보안 패치와 자동 업데이트의 결합** * 2023년 3월 7일, systemd의 CVE 취약점을 해결하기 위한 보안 패치가 Ubuntu 저장소에 업데이트되었습니다. * Datadog의 서버들은 Ubuntu의 기본 설정인 `unattended-upgrades`를 사용하고 있었으며, 이는 매일 특정 시간(06:00 UTC)에 보안 업데이트를 자동으로 수행하도록 설정되어 있었습니다. * 이 보안 패치가 설치되면서 `systemd-networkd` 서비스가 재시작되었고, 그 즉시 노드의 핵심적인 네트워크 라우팅 규칙들이 모두 삭제되었습니다. **점진적 배포 전략의 무력화** * Datadog은 평소 새로운 OS나 설정을 도입할 때 실험용 클러스터부터 시작해 스테이징, 소규모 리전, 대규모 리전 순으로 수주에 걸쳐 점진적으로 배포하는 엄격한 프로세스를 따릅니다. * 하지만 시스템 레벨의 자동 업데이트(unattended-upgrades)는 이러한 점진적 배포 통제를 우회하여 전 세계 모든 리전의 노드에 거의 동시에 적용되었습니다. * 결과적으로 전체 서버의 90% 이상을 차지하던 Ubuntu 22.04 노드들이 동시다발적으로 네트워크 불능 상태에 빠지게 되었습니다. **실용적인 교훈과 권장사항** 운영 환경에서 OS 배포판을 업그레이드할 때는 시스템 구성 요소(특히 systemd와 같은 핵심 데몬)의 기본 동작 변경 사항을 상세히 검토해야 합니다. 또한, 보안을 위한 자동 업데이트라 할지라도 인프라 전체에 동시에 적용되는 방식은 위험할 수 있으므로, 업데이트 주기를 리전별로 분산하거나 자체적인 패키지 미러를 통해 보안 패치 역시 점진적 배포 파이프라인의 통제하에 두는 것이 권장됩니다.

2023-03-08 incident: A deep dive into the platform-level impact (새 탭에서 열림)

이 글은 2023년 3월 8일 발생한 Datadog의 대규모 서비스 장애 원인을 분석하고 있습니다. 장애의 근본 원인은 Ubuntu 22.04에 포함된 **systemd-networkd의 기본 동작 변경**과 **자동 보안 업데이트(unattended-upgrades)**가 결합되어, 전 세계 모든 리전의 호스트에서 네트워크 라우팅 규칙이 동시에 삭제되었기 때문입니다. 결과적으로 리전 간 격리 원칙에도 불구하고 클라우드 제공업체와 무관하게 전사적인 네트워크 마비가 발생했습니다. ### systemd-networkd의 동작 변경과 잠복된 위험 * **새로운 기본값 도입:** systemd v248부터 `systemd-networkd`가 시작될 때 자신이 인식하지 못하는 모든 IP 규칙(IP rules)을 삭제(flush)하는 동작이 추가되었습니다. * **버전별 차이:** 이전 LTS 버전인 Ubuntu 20.04(systemd v245)에서는 이 문제가 없었으나, Datadog이 도입한 **Ubuntu 22.04(systemd v249)**는 이 새로운 동작이 기본값으로 설정되어 있었습니다. * **발견 지연의 이유:** 이 현상은 호스트가 처음 생성될 때가 아니라, 실행 중인 상태에서 `systemd-networkd`가 **재시작**될 때만 발생합니다. 평상시에는 재시작할 일이 거의 없었기 때문에 대규모 배포 과정에서도 위험이 감지되지 않았습니다. ### 자동 업데이트(Unattended Upgrades)와 트리거 * **보안 패치의 배포:** 2023년 3월 7일, systemd의 CVE 취약점 해결을 위한 패치가 Ubuntu 저장소에 배포되었습니다. * **자동 업데이트의 동작:** Datadog 서버들은 Ubuntu 기본 설정에 따라 `unattended-upgrades`가 활성화되어 있었으며, 매일 정해진 시간(06:00~07:00 UTC 사이)에 보안 업데이트를 수행하도록 설정되어 있었습니다. * **네트워크 규칙 삭제:** 보안 패치가 설치되면서 `systemd-networkd` 서비스가 재시작되었고, 이 과정에서 Kubernetes 네트워킹 등에 필요한 커스텀 IP 라우팅 규칙들이 "알 수 없는 규칙"으로 간주되어 모두 삭제되었습니다. ### 전 리전 동시 장애 발생 원인 * **일관된 구성의 역설:** 모든 리전이 동일하게 Ubuntu 22.04를 사용하고 동일한 업데이트 타이머 설정을 가지고 있었기 때문에, 리전 간의 물리적 격리에도 불구하고 업데이트와 그에 따른 네트워크 마비가 전 세계적으로 거의 동시에 일어났습니다. * **점진적 배포의 한계:** Datadog은 평소 인프라 변경 시 리전별로 단계적 배포를 수행하지만, OS 패키지 저장소에서 직접 내려받는 자동 보안 업데이트는 이러한 통제된 배포 프로세스를 우회하여 직접 호스트에 적용되었습니다. 이 사건은 인프라의 안정성을 위해 도입한 **자동 보안 패치**가 오히려 시스템의 기저 동작(low-level behavior) 변경과 맞물려 거대한 단일 장애점(Single Point of Failure)이 될 수 있음을 시사합니다. 운영 환경에서는 OS 패키지 업데이트를 포함한 모든 변경 사항이 통제된 파이프라인과 단계적 배포 전략을 거치도록 관리하는 것이 중요합니다.

4년이 지난 지금, Config가 (새 탭에서 열림)

Config 2021은 전 세계 디자이너들이 모여 협업의 미래를 논의한 Figma의 연례 컨퍼런스로, 디자인 프로세스의 확장과 커뮤니티의 연결성을 강조했습니다. 이 글은 팀원들이 아이디어를 자유롭게 발산할 수 있는 신규 도구인 'FigJam'의 출시와 디자인 시스템의 안정성을 높이는 브랜칭(Branching) 기능 등 주요 업데이트를 요약하고 있습니다. 결과적으로 Figma는 단순한 디자인 도구를 넘어 제품 개발 전 과정에서 팀원 모두가 참여할 수 있는 통합 협업 플랫폼으로 진화했음을 보여줍니다. **FigJam: 아이디어 구상을 위한 온라인 화이트보드** * 디자인 이전 단계의 브레인스토밍, 다이어그램 작성, 팀 미팅을 원활하게 지원하는 신규 서비스 FigJam이 공개되었습니다. * 스티커 메모, 스탬프, 커서 채팅 등 인터랙티브한 요소를 통해 디자이너뿐만 아니라 기획자, 개발자 등 모든 이해관계자가 즐겁게 협업할 수 있는 환경을 제공합니다. * Figma 파일과 유기적으로 연결되어, FigJam에서 논의된 아이디어를 즉시 디자인 작업으로 이어나갈 수 있는 워크플로우를 구축했습니다. **디자인 시스템의 고도화와 브랜칭 기능** * 대규모 팀이 디자인 라이브러리를 안전하게 관리할 수 있도록 '브랜칭 및 병합(Branching & Merging)' 기능이 도입되었습니다. * 메인 라이브러리를 손상시키지 않고 별도의 공간에서 디자인 수정을 실험할 수 있으며, 검토(Review) 프로세스를 거쳐 변경 사항을 안전하게 반영할 수 있습니다. * 이는 소프트웨어 개발의 버전 관리 시스템과 유사한 방식을 디자인에 도입하여 시스템의 일관성과 안정성을 극대화한 조치입니다. **커뮤니티 중심의 생태계 확장** * 전 세계 디자이너들이 자신의 작업물과 플러그인, 위젯을 공유할 수 있는 커뮤니티 기능을 강화하여 집단 지성을 활용하도록 독려했습니다. * 누구나 도구를 커스터마이징하고 기능을 확장할 수 있도록 API를 개방하여, 사용자가 직접 필요한 기능을 제작하고 공유하는 생태계를 구축했습니다. **모바일 환경에서의 워크플로우 개선** * 새롭게 리뉴얼된 Figma 모바일 앱을 통해 장소에 구애받지 않고 디자인을 검토하고 실시간으로 피드백을 주고받을 수 있게 되었습니다. * 모바일 기기에서의 프로토타입 미러링 기능을 개선하여 실제 기기 환경에서 사용자 경험을 더 정확하게 테스트할 수 있는 환경을 마련했습니다. 효과적인 팀 협업을 위해 기획 초기 단계부터 FigJam을 활용하여 아이디어를 시각화하고, 복잡해진 디자인 라이브러리 관리에는 브랜칭 기능을 도입하여 안정적인 디자인 배포 프로세스를 구축할 것을 권장합니다.

그잼 스크린 리더 (새 탭에서 열림)

Figma는 디자인 도구가 시각적 경험에만 국한되지 않고 모든 사용자가 접근 가능해야 한다는 비전 아래, 새로운 스크린 리더 프로토타입 베타 버전을 발표했습니다. 이는 디자인 프로세스 전반에 걸쳐 장벽을 허물려는 Figma의 지속적인 노력의 일환으로, 시각 장애가 있는 디자이너와 협업자가 디자인 파일의 구조와 내용을 더 깊이 있게 이해할 수 있도록 돕는 것을 목표로 합니다. **디자인 접근성 강화를 위한 비전** * Figma는 "모두를 위한 디자인(Design for all)"이라는 철학을 바탕으로, 시각 중심적인 인터페이스 때문에 디자인 소외 계층이 발생하던 문제를 해결하고자 합니다. * 단순한 도구 사용의 편의성을 넘어, 디자인 결과물뿐만 아니라 디자인 과정 자체에 누구나 참여할 수 있는 포용적인 환경을 구축하는 데 집중하고 있습니다. * 이를 위해 내부 연구팀과 접근성 전문가들이 협업하여 시각적 정보를 텍스트와 음성으로 전환하는 최적의 메커니즘을 탐구해 왔습니다. **스크린 리더 프로토타입 베타의 주요 기능** * 이번에 공개된 프로토타입은 캔버스 내 레이어의 구조, 텍스트 내용, 그리고 각 디자인 요소의 속성을 스크린 리더가 인식할 수 있는 형태로 변환하여 제공합니다. * 사용자는 디자인 파일 내에서 논리적인 순서에 따라 요소를 탐색할 수 있으며, 복잡한 디자인 시스템의 계층 구조를 음성을 통해 파악할 수 있습니다. * 현재 단계에서는 베타 버전을 통해 실제 사용자들의 피드백을 수집하며, 디자인 객체 간의 관계성을 더 명확하게 전달할 수 있도록 알고리즘을 고도화하고 있습니다. **지속적인 연구와 커뮤니티 협력** * Figma는 접근성 개선이 단발성 기능 업데이트가 아닌 장기적인 연구(Research)와 설계(Design)가 필요한 과제임을 강조합니다. * 내부 팀인 'Inside Figma'를 중심으로 접근성 기술의 한계를 테스트하고 있으며, 실제 장애를 가진 사용자 그룹과의 긴밀한 협력을 통해 실질적인 해결책을 모색하고 있습니다. * 이번 베타 발표는 접근성 로드맵의 시작점이며, 향후 더 넓은 범위의 사용자들이 디자인 생태계에 참여할 수 있도록 기술적 지원을 확대할 계획입니다. Figma의 이번 시도는 단순히 기능을 추가하는 것을 넘어 디자인 도구의 표준을 확장하려는 중요한 발걸음입니다. 시각 장애가 있는 동료와 협업하거나 디자인 시스템의 접근성을 검토해야 하는 조직은 이번 베타 버전에 참여하여 피드백을 제공함으로써, 더욱 포용적인 디자인 워크플로우를 함께 구축해 나갈 수 있습니다.

디자인 시스템의 미래는 접근 (새 탭에서 열림)

디자인 시스템은 단순한 UI 컴포넌트 라이브러리를 넘어, 전 산업적인 비효율을 해결하고 디자인과 개발의 경계를 허무는 복합적인 생태계로 진화하고 있습니다. 현재 모든 기업이 동일한 기본 요소를 각자 구축하는 비효율에서 벗어나, 표준화된 '글로벌 디자인 시스템'이라는 공통 기반 위에서 고유한 브랜드 가치를 창출하는 방향으로 나아가야 합니다. 이를 통해 기술적 부채를 줄이고 사용자 경험의 본질적인 혁신에 집중할 수 있는 구조를 만드는 것이 미래 디자인 시스템의 핵심입니다. **반복되는 기초 작업과 산업적 비효율성** * 현재 수많은 기업과 팀이 버튼, 입력창, 체크박스 같은 기본적인 UI 요소를 각자 처음부터 다시 설계하고 개발하는 데 막대한 자원을 낭비하고 있습니다. * 이러한 "바퀴의 재발명"은 디자인 시스템 팀이 실제 비즈니스 문제를 해결하거나 사용자 경험을 개선하는 고차원적인 작업보다 기초적인 인프라 유지보수에 매몰되게 만듭니다. * 웹 표준의 발전 속도보다 개별 기업의 시스템 구축 속도가 느린 경우가 많아, 접근성이나 성능 최적화가 누락되는 보안 및 품질 이슈가 발생합니다. **글로벌 디자인 시스템(Global Design System)의 필요성** * 전 세계적으로 통용될 수 있는 공통 UI 레이어를 구축하여, 누구나 고품질의 접근성과 성능이 보장된 컴포넌트 기초를 활용할 수 있어야 합니다. * 개별 기업은 이 공통 레이어 위에 자사의 디자인 토큰(색상, 타이포그래피 등)과 고유한 비즈니스 로직을 입히는 방식으로 작업의 효율성을 극대화할 수 있습니다. * 이는 디자인 시스템의 역할을 '컴포넌트 제작'에서 '표준화된 경험의 조립 및 최적화'로 전환시키는 계기가 됩니다. **디자인과 코드의 완전한 통합과 자동화** * 피그마(Figma)와 같은 디자인 도구와 실제 프로덕션 코드 사이의 간극을 메우기 위해, 디자인 의사결정이 즉시 코드로 치환되는 워크플로우가 강화되어야 합니다. * 디자인 토큰의 고도화를 통해 스타일 변경이 개발자의 수동 작업 없이도 전체 플랫폼에 실시간으로 반영되는 자동화 파이프라인 구축이 필수적입니다. * AI 기술은 디자인 시스템의 문서를 자동 생성하거나, 디자인 의도를 이해하여 표준 컴포넌트로 코드를 변환하는 등 디자인 시스템의 운영 효율을 비약적으로 높여줄 것입니다. **조직의 역할 변화와 거버넌스 확장** * 미래의 디자인 시스템 팀은 단순히 컴포넌트를 만들어 배포하는 '공급자'가 아니라, 전사적인 디자인 품질을 관리하고 가이드를 제시하는 '조정자(Orchestrator)' 역할을 수행해야 합니다. * 시스템이 복잡해질수록 유연한 거버넌스 모델이 중요해지며, 중앙 집중식 관리와 각 제품 팀의 자율적인 기여가 조화를 이루는 연합형 구조가 요구됩니다. 앞으로 디자인 시스템을 구축하거나 운영할 때는 "우리가 직접 만들어야만 하는 독창적인 요소는 무엇인가?"를 끊임없이 질문해야 합니다. 공통적인 요소는 오픈소스나 표준화된 라이브러리를 적극 활용하여 비용을 절감하고, 남는 자원을 우리 서비스만의 차별화된 사용자 경험을 설계하는 데 투입하는 전략적 선택이 필요합니다.

피그마가 게임 세계에서 (새 탭에서 열림)

피그마는 단순한 웹 애플리케이션을 넘어 고성능 게임 엔진과 유사한 기술적 아키텍처를 기반으로 구축된 창의적 협업 도구입니다. 이 글은 피그마가 실시간 멀티플레이어 시스템, 물리 기반 애니메이션, 그리고 C++와 WebAssembly, Rust와 같은 고성능 스택을 통해 어떻게 디지털 세계를 구축하는지 설명합니다. 결과적으로 피그마는 게임 개발의 복잡한 시스템 상호작용 원리를 차용하여 사용자들에게 몰입감 있고 매끄러운 디자인 경험을 제공하고 있습니다. ## 디지털 세계를 구축하는 엔진으로서의 피그마 * 피그마의 핵심은 웹 기반의 2D 그래픽 및 렌더링 시스템으로, 이는 마인크래프트와 같은 게임 엔진의 근간과 동일한 구조를 가집니다. * 사용자가 생성하는 모든 텍스트, 도형, 선을 브라우저에서 실시간으로 구현하며, 방대한 캔버스에서의 팬(pan)과 줌(zoom) 조작 시에도 정확한 위치에 객체를 렌더링합니다. * 실시간 동시 편집 기능을 게임의 개념에서 착안한 '멀티플레이어(multiplayer)' 엔진이라고 명명하여 협업의 핵심 시스템으로 발전시켰습니다. * 브라우저 및 모바일 앱의 메모리와 성능 제약을 극복하기 위해 일반적인 웹 스택 대신 C++로 캔버스를 구축한 후 WebAssembly로 컴파일하여 로딩 속도를 3배 개선했으며, 서버 측 성능 향상을 위해 Rust 언어를 도입했습니다. ## 시스템 기반의 창의적 협업과 상호작용 * 게임 스튜디오에서 엔지니어와 아티스트가 협업하듯, 피그마 엔지니어들은 시스템의 한계를 밀어붙이기 위해 디자이너, PM, 데이터 과학자들과 긴밀하게 소통합니다. * '젤다의 전설: 브레스 오브 더 와일드'의 불(fire) 시스템이 빛, 온기, 공격 수단 등 다양한 방식으로 상호작용하는 것처럼, 피그마의 오토세이브, 멀티플레이어, 렌더링 시스템도 서로 유기적으로 연결되어 작동합니다. * 단순한 도구 기능을 넘어 스프링 물리 법칙을 적용한 애니메이션 시스템, 커서 채팅, 하이파이브 기능 등을 통해 사용자가 도구 내에서 살아있는 피드백을 느낄 수 있도록 설계했습니다. * 베리언트(Variants) 기능과 플러그인/위젯 시스템을 통해 디자인 컴포넌트와 코드를 긴밀하게 연결하고, 사용자가 직접 생태계를 확장할 수 있는 개방형 플랫폼을 지향합니다. 웹 환경에서 복잡하고 성능 집약적인 도구를 개발해야 한다면, 전통적인 웹 프레임워크의 틀을 벗어나 게임 엔진의 설계 방식과 고성능 언어(WASM, Rust) 도입을 검토해야 합니다. 기술적 한계를 극복하는 열쇠는 도구를 하나의 살아있는 '시스템'들의 집합으로 바라보고, 각 요소 간의 상호작용이 사용자 경험에 미치는 영향을 정교하게 설계하는 데 있습니다.

쿠팡 로켓배송: 공간 색인 기반의 새로운 배송 영역 관리 시스템 (새 탭에서 열림)

쿠팡은 급증하는 배송 물량과 복잡해지는 배송 환경에 대응하기 위해 기존의 텍스트 및 우편번호 중심 시스템에서 탈피하여 공간 색인 기술인 H3를 도입한 새로운 배송 영역 관리 시스템을 구축했습니다. 이 시스템은 배송 영역을 지도상에 시각화하고 데이터 기반으로 정교하게 분할할 수 있게 함으로써, 숙련자의 경험에만 의존하던 운영 방식에서 벗어나 누구나 직관적으로 배송 경로를 최적화할 수 있는 환경을 제공합니다. 결과적으로 공간 데이터 중심의 관리를 통해 신축 건물이나 지형 변화에도 유연하게 대처할 수 있는 로켓배송의 기술적 토대를 마련했습니다. **텍스트 기반 우편번호 체계의 한계** * 기존 시스템은 정부의 우편번호와 텍스트 주소에 의존했으나, 쿠팡의 성장에 따라 단일 우편번호 내 배송 건수가 한 명의 쿠친이 처리할 수 있는 범위를 초과하게 되었습니다. * 우편번호를 아파트 단지나 동 단위로 세분화해야 했으나, 텍스트 정보만으로는 공간적 위치를 파악하기 어려워 해당 지역에 능숙한 캠프 리더의 직관에만 의존하는 문제가 있었습니다. * 신축 건물의 등장이나 철거 등 지형적 변화가 발생했을 때 이를 시스템에 즉각적으로 반영하고 배송 영역을 조정하는 데 한계가 있었습니다. **H3 공간 색인 시스템의 도입** * 우버(Uber)에서 개발한 육각형 기반의 그리드 시스템인 H3를 도입하여 전 세계를 균일한 크기의 육각형 격자로 나누어 관리합니다. * 육각형 구조는 인접한 모든 이웃 격자와의 중심점 거리가 동일하여, 사각형이나 삼각형 격자보다 공간 분석 및 경로 최적화 계산에 훨씬 유리합니다. * 주소라는 텍스트 데이터 대신 위경도 기반의 공간 좌표를 사용함으로써 배송 영역의 경계를 더욱 명확하고 정교하게 설정할 수 있습니다. **시스템 재설계와 시각화 최적화** * 캠프 작업자들이 지도 위에서 배송 영역을 직접 확인하고, 마우스 클릭이나 드래그를 통해 영역을 생성, 수정, 공유할 수 있는 직관적인 UI를 구현했습니다. * 개별 육각형 격자들을 그룹화하여 하나의 다각형(Polygon) 형태로 변환하는 기술을 적용해 지도 렌더링 성능을 높이고 사용자 가독성을 개선했습니다. * 배송 밀도와 작업량을 격자 단위로 수치화하여 제공함으로써, 특정 영역에 업무가 쏠리지 않도록 균등하게 배송 물량을 배분할 수 있는 통계 기능을 강화했습니다. 물류 및 배송 시스템에서 주소는 더 이상 단순한 텍스트가 아닌 정교한 공간 데이터로 다뤄져야 합니다. 격자 기반의 공간 색인 시스템을 활용하면 운영 효율을 극대화할 수 있을 뿐만 아니라, 향후 자율주행 배송이나 드론 배송과 같은 미래 기술로 확장하기 위한 필수적인 데이터 구조를 확보할 수 있습니다. 이미 주소 기반 시스템의 한계를 느끼고 있는 물류 기업이라면 H3와 같은 공간 인덱싱 기술로의 전환을 적극적으로 검토할 것을 권장합니다.

fetch 실현하기: 범용 (새 탭에서 열림)

Datadog은 대규모 대시보드의 복잡한 데이터 페칭과 렌더링 성능을 최적화하기 위해 기존의 복잡한 휴리스틱 기반 스케줄러를 단순화하고 범용적인 시스템으로 재설계했습니다. 새로운 스케줄러는 쿼리와 렌더링 로직을 분리하고 가시성 중심의 작업 분배 알고리즘을 도입하여 백엔드 부하를 줄였으며, 최신 브라우저 스케줄링 API를 통해 런타임 성능을 극대화했습니다. 결과적으로 코드의 복잡성은 대폭 낮아졌고, API 호출 오류 감소와 함께 전반적인 사용자 경험이 향상되는 성과를 거두었습니다. ### 기존 스케줄러(v1)의 구조적 한계 * 20개 이상의 복잡한 매개변수와 서로 얽힌 휴리스틱으로 구성되어 있어, 개발자가 시스템의 동작을 예측하거나 유지보수하기 매우 어려웠습니다. * 쿼리(데이터 페칭)와 렌더링 스케줄링이 명확히 분리되지 않아, 렌더링 작업이 지연될 때 연관 없는 쿼리까지 함께 지연되는 비효율이 발생했습니다. * 대시보드 환경에만 특화된 로직으로 작성되어 있어, Datadog 내의 다른 제품이나 일반적인 위젯 컴포넌트에서 재사용하기 어려운 구조였습니다. ### 단순하고 효율적인 쿼리 스케줄링 알고리즘 * 화면에 보이는(Visible) 위젯의 쿼리는 즉시 실행하고, 비가시적 위젯의 쿼리는 큐에 쌓아 순차적으로 처리하는 단순한 방식을 채택했습니다. * 비가시적 쿼리는 2000ms의 고정된 시간 윈도우 내에서 최대 10개까지만 실행하도록 제한하여 백엔드 서비스의 부하를 안정화했습니다. * 브라우저가 자체적으로 처리하는 탭 포커스 여부 확인 등의 불필요한 체크 로직을 제거하여 관리 매개변수를 20개에서 6개로 줄였습니다. * 효율적인 작업 분산을 통해 '429(Too many requests)' 에러 발생률을 낮추었으며, 이는 결과적으로 재시도 횟수를 줄여 데이터 로딩 속도를 개선했습니다. ### Browser Scheduling API를 통한 렌더링 제어 * 브라우저의 CPU 및 메모리 자원 상태를 고려하지 못하던 기존 방식의 한계를 극복하기 위해 네이티브 브라우저 스케줄링 API(`postTask`)를 도입했습니다. * 작업을 중요도에 따라 `user-blocking`(사용자 차단), `user-visible`(사용자 가시), `background`(백그라운드) 세 단계로 분류하여 브라우저가 최적의 시점에 실행하도록 위임했습니다. * 중요도가 낮은 렌더링 작업은 브라우저가 유휴 상태일 때 실행되도록 설정하여 메인 스레드의 병목 현상을 방지하고 부드러운 UI 반응성을 확보했습니다. * `TaskController`를 활용해 특정 그룹의 작업 우선순위를 일괄 변경하거나 불필요한 작업을 즉시 중단(abort)할 수 있는 제어 구조를 갖추었습니다. 애플리케이션의 성능 최적화를 고려한다면 복잡한 자체 규칙을 만들기보다 가시성(Visibility)과 같은 핵심 지표에 집중하고, 최신 브라우저가 제공하는 스케줄링 표준 API를 활용하여 시스템 자원을 효율적으로 관리하는 것이 바람직합니다.

Making fetch happen: Building a general-purpose query and render scheduler (새 탭에서 열림)

데이터독(Datadog)은 복잡한 대시보드의 성능 최적화를 위해 쿼리와 렌더링 작업을 효율적으로 관리하는 범용 스케줄러를 개발했습니다. 기존의 복잡한 규칙 기반 시스템을 단순화하고 브라우저 네이티브 API를 활용함으로써, UI 응답성을 높이고 백엔드 부하를 안정화하는 성과를 거두었습니다. 이 글은 기존 스케줄러의 한계를 극복하고 모든 애플리케이션에 적용 가능한 유연한 스케줄링 모델로 전환한 과정을 다룹니다. ### 기존 스케줄러(v1)의 문제점 * **지나친 복잡성:** 약 20여 개의 매개변수가 얽힌 복잡한 휴리스틱(heuristics)으로 운영되어, 개발자가 시스템의 동작 방식을 예측하거나 추론하기 어려웠습니다. * **로직의 결합:** 쿼리(데이터 호출)와 렌더링(화면 표시) 스케줄링이 명확히 분리되지 않았습니다. 예를 들어, 렌더링 대기 작업이 많다는 이유로 연관 없는 쿼리 요청이 지연되는 등의 비효율이 발생했습니다. * **낮은 범용성:** 대시보드 환경에만 특화되어 설계되었기 때문에, 데이터독의 다른 제품군이나 일반적인 위젯 컴포넌트에서 재사용하기 어려운 구조적 한계가 있었습니다. ### 데이터 쿼리 스케줄링의 단순화 * **가시성 기반 우선순위:** 화면에 보이는(visible) 위젯의 쿼리는 요청 즉시 실행하고, 화면 밖(offscreen) 위젯은 별도의 대기열에 추가하여 지연 처리합니다. * **고정 시간 윈도우 알고리즘:** 복잡한 계산 대신 2,000ms라는 고정된 시간 창(window) 동안 최대 10개의 태스크만 실행하도록 제한하여 작업 분포를 평탄화했습니다. * **대기열 관리 최적화:** 백엔드에 펜딩된 요청이 너무 많으면 실행을 일시 중단하며, 화면 밖 작업들은 대기열에 들어온 순서대로 처리하여 공정성을 유지합니다. * **도입 결과:** 로직이 단순해졌음에도 불구하고 서버의 '429(Too many requests)' 에러가 크게 감소했으며, 쿼리 재시도 횟수가 줄어들어 전체적인 데이터 로딩 속도가 향상되었습니다. ### Browser Scheduling API를 활용한 렌더링 최적화 * **자원 상태 인지:** 기존 스케줄러는 브라우저의 CPU나 메모리 가용 상태를 알지 못한 채 작업을 할당했으나, 새로운 시스템은 브라우저 네이티브 기능을 활용합니다. * **우선순위 세분화:** 최신 `Browser Scheduling API`의 `postTask` 메서드를 도입하여 작업의 성격에 따라 우선순위(user-blocking, user-visible, background)를 부여합니다. * **효율적인 메인 스레드 사용:** 브라우저가 직접 작업의 우선순위를 제어하게 함으로써, 중요한 UI 업데이트는 즉시 처리하고 덜 중요한 렌더링은 브라우저가 유휴 상태일 때 실행하도록 최적화했습니다. 복잡한 웹 애플리케이션에서 성능을 확보하려면 스케줄링 로직을 최대한 단순화하고 브라우저가 제공하는 표준 API를 적극적으로 활용해야 합니다. 이는 개발자에게는 시스템에 대한 통제력을 제공하며, 사용자에게는 더 매끄러운 인터랙션 경험을 선사합니다.

혁신적인 제품을 만드는 법: (새 탭에서 열림)

Can design make work, work? Working Well Leadership Operations Meetings

데이터베이스 아키텍처 (새 탭에서 열림)

피그마(Figma)는 급격한 사용자 증가에 따른 데이터베이스 부하 문제를 해결하기 위해 단일 Postgres 인스턴스에서 분산된 Vitess(MySQL 기반) 클러스터로 전환하는 대규모 샤딩 프로젝트를 성공적으로 완수했습니다. 이 과정에서 피그마 엔지니어링 팀은 서비스 중단 없이 테라바이트급 데이터를 이전하기 위해 정교한 실시간 복제 및 검증 시스템을 구축했습니다. 결론적으로 이들은 인프라의 한계를 미리 예측하고, 애플리케이션 계층의 수정을 최소화하면서도 수평적 확장이 가능한 데이터 아키텍처를 확보하게 되었습니다. ### 수직적 확장의 한계와 샤딩의 필연성 * 초기 피그마는 단일 AWS RDS Postgres 인스턴스에 의존했으나, 트래픽이 급증하며 가장 큰 인스턴스 크기로도 쓰기 부하를 감당할 수 없는 임계점에 도달했습니다. * 수직적 확장(Vertical Scaling)과 읽기 복제본(Read Replicas) 추가만으로는 쓰기 성능 문제를 해결할 수 없음을 인지하고, 데이터를 여러 노드에 나누어 저장하는 수평적 확장(Sharding)을 결정했습니다. * 자체적인 샤딩 솔루션을 구축하는 대신, 유튜브 등에서 검증된 오픈소스 데이터베이스 클러스터링 시스템인 Vitess를 도입하여 운영 복잡성을 관리하기로 했습니다. ### Postgres에서 Vitess로의 대규모 이관 전략 * 기존 Postgres 환경에서 MySQL 기반의 Vitess로 전환하는 것은 데이터 모델과 쿼리 호환성 측면에서 큰 도전이었으며, 이를 위해 'FDB(Figma Database)'라는 중간 레이어를 구축했습니다. * **Shadow Writing(새도우 라이팅):** 모든 쓰기 작업을 기존 DB와 새 Vitess DB에 동시에 수행하여 데이터 정합성을 실시간으로 확인했습니다. * **Logical Replication(논리적 복제):** 기존 데이터를 중단 없이 옮기기 위해 CDC(Change Data Capture) 기술을 활용하여 소스 데이터베이스의 변경 사항을 실시간으로 Vitess에 반영했습니다. ### 무중단 컷오버와 정합성 검증 * 데이터 이전의 신뢰성을 확보하기 위해 'Consistency Checker'를 가동하여 기존 DB와 새 DB의 레코드를 지속적으로 비교하고 불일치를 해결했습니다. * **Query Replay:** 실제 운영 트래픽을 복제하여 대상 시스템에 미리 실행해 봄으로써 성능 병목 지점과 쿼리 호환성 문제를 사전에 파악했습니다. * 최종 전환 시에는 아주 짧은 읽기 전용(Read-only) 시간을 가진 후, 트래픽의 방향을 Vitess로 돌리는 방식을 통해 사용자 경험에 영향을 주지 않고 성공적으로 전환했습니다. ### 개발자 경험 보존을 위한 쿼리 라우팅 * 샤딩된 환경에서도 개발자들이 개별 샤드의 위치를 신경 쓰지 않고 개발할 수 있도록 투명한 쿼리 라우팅 시스템을 구현했습니다. * 크로스 샤드 조인(Cross-shard join)과 같이 분산 환경에서 성능이 저하될 수 있는 쿼리들을 모니터링하고, 필요에 따라 스키마 설계를 최적화하여 분산 시스템의 성능 이점을 극대화했습니다. * 애플리케이션 코드의 대대적인 수정 없이도 샤딩된 데이터베이스를 활용할 수 있게 함으로써 피쳐 개발 속도를 유지했습니다. 급격히 성장하는 서비스에서 데이터베이스 확장은 피할 수 없는 과제이며, 이를 위해 서비스 초기부터 데이터 간의 관계(Entity Groups)를 명확히 정의해두는 것이 추후 샤딩 난이도를 낮추는 데 결정적인 역할을 합니다. 또한, 대규모 인프라 변경 시에는 완벽한 자동화보다는 단계적인 검증과 새도우 트래픽 테스트를 통해 데이터 유실 리스크를 최소화하는 보수적인 접근 방식이 권장됩니다.

리틀 빅 아웃테이크 | (새 탭에서 열림)

Figma는 대규모 기능 개발 주기 사이에서 자칫 소홀해질 수 있는 세밀한 사용자 경험과 코드의 완성도를 높이기 위해 'Quality Week'라는 집중 개선 기간을 운영합니다. 이 기간 동안 엔지니어들은 평소 우선순위에서 밀려있던 작은 불편함(papercuts)을 해결하는 'Little Big Updates(LBU)'에 집중하여 제품의 전반적인 폴리싱(Polishing)을 수행합니다. 이러한 사소한 개선들의 축적은 사용자에게 제품이 더 정교하고 신뢰할 수 있다는 인상을 주며, 결과적으로 서비스의 전체적인 품질을 한 단계 끌어올리는 결론에 도달합니다. **Quality Week의 운영 방식과 목적** * 정규 로드맵의 압박에서 벗어나 엔지니어, 디자이너, PM이 오직 '품질 향상'이라는 단일 목표를 위해 협업하는 전사적 이벤트입니다. * 기능의 규모와 상관없이 사용자 경험을 방해하는 사소한 버그, UI 불일치, 성능 저하 요소를 리스트업하고 집중적으로 해결합니다. * 단순히 오류를 고치는 것을 넘어, 사용자가 제품을 사용할 때 느끼는 심리적 마찰(friction)을 줄이는 데 초점을 맞춥니다. **Little Big Updates(LBU)를 통한 UX 정교화** * **시각적 일관성:** 캔버스 내 정렬 도구의 피드백 기능을 강화하거나, 레이어 패널의 아이콘 가시성을 개선하여 작업 효율을 높입니다. * **상호작용 최적화:** 폰트 선택기나 컬러 피커의 로딩 속도를 개선하고, 단축키 반응성을 높여 전문 디자이너들의 작업 흐름이 끊기지 않도록 합니다. * **세밀한 기능 개선:** 파일 관리 폴더의 드래그 앤 드롭 동작을 더 직관적으로 수정하는 등, 사용자가 매일 겪는 '작은 불편함'들을 제거합니다. **엔지니어링 성능 및 내부 품질 강화** * **렌더링 성능 최적화:** 대규모 레이어가 포함된 복잡한 파일에서 줌인/아웃 및 패닝 동작 시의 프레임 드랍을 줄이기 위한 코드 최적화를 진행합니다. * **기술 부채 청산:** UI 구성 요소의 중복 코드를 정리하고 내부 라이브러리를 최신화하여, 장기적으로 개발 속도를 늦추는 장애물을 제거합니다. * **메모리 효율화:** 브라우저 환경에서 동작하는 Figma의 특성을 고려해, 불필요한 메모리 점유를 줄여 대용량 프로젝트의 안정성을 확보합니다. **지속 가능한 품질 관리를 위한 제언** 혁신적인 신기능 출시만큼이나 중요한 것은 사용자가 매일 마주하는 사소한 부분에서의 완성도입니다. 개발 팀은 정기적으로 '품질 집중 주간'을 설정하여 기술 부채와 UX 개선을 병행해야 하며, 이러한 작은 변화들이 모여 브랜드의 강력한 경쟁력이 된다는 점을 인식해야 합니다. 특히 사용자의 목소리가 큰 작은 불편함들을 빠르게 해결해 주는 것은 커뮤니티와의 신뢰를 구축하는 가장 효과적인 방법 중 하나입니다.