GraphQL

20 개의 포스트

figma3분 읽기큐레이션 요약

대규모 실시간 데이터를

Figma의 실시간 데이터 서비스 LiveGraph는 사용자와 쿼리 증가, 데이터베이스 샤딩으로 기존 구조의 한계에 도달했다. Figma는 초기 로컬 캐시와 단일 PostgreSQL의 전역 변경 스트림에 의존하던 아키텍처를 100배 규모까지 확장할 수 있도록 근본적으로 재설계하려 했다. 새 설계의 목표는 성능과 안정성을 유지하면서 데이터베이스 샤드와 읽기·업데이트 부하를 독립적으로 확장하고, 사용자 영향 없이 점진적으로 마이그레이션하는 것이다. ## LiveGraph의 역할 - LiveGraph는 GraphQL과 유사한 쿼리를 구독하는 웹 API를 제공한다. - 쿼리 결과를 JSON 트리로 반환하며, 객체와 관계를 정의한 스키마와 특정 그래프 일부를 조회하는 뷰를 사용한다. - Figma의 커스텀 React Hook을 통해 데이터가 변경되면 프런트엔드가 자동으로 다시 렌더링된다. - 캔버스 공동 편집, 댓글, FigJam 투표 등 여러 협업 기능에서 최신 데이터를 유지하는 기반 역할을 한다. ## 규모 증가로 드러난 문제 - 2021년 이후 LiveGraph 세션 수가 3배 증가했다. - 최근 1년 동안 뷰 요청 수는 5배 늘어났고, 세션 하나의 처리 비용도 점점 커졌다. - 데이터베이스 역시 단일 PostgreSQL 인스턴스에서 여러 수직·수평 샤드 구조로 변화하고 있었다. - 따라서 문제는 단순히 각 LiveGraph 서버가 데이터베이스 변경 사항을 모두 수집하는 데 그치지 않고, 클라이언트 세션·읽기 요청·데이터베이스 업데이트가 동시에 증가하는 복합적인 확장성 문제였다. ## LiveGraph 100x의 설계 목표 Figma는 현재의 읽기 및 데이터베이스 업데이트 부하를 장기적으로 100배까지 처리하기 위한 “LiveGraph 100x” 계획을 시작했다. - **서비스 속도 유지** - 초기 로드 시간과 실시간 업데이트에 대한 SLO를 유지하거나 개선해야 했다. - **데이터베이스 확장 지원** - 수직 확장뿐 아니라 수평 샤딩도 기본적으로 지원해야 했다. - 샤드가 늘어나도 신뢰성과 성능이 저하되지 않아야 했다. - **독립적인 확장 수단 확보** - 클라이언트 읽기량이 증가할 때와 쿼리 업데이트량이 증가할 때 서로 다른 구성 요소를 확장할 수 있어야 했다. - **안전한 점진적 마이그레이션** - 기존 LiveGraph 사용자를 중단시키지 않고 단계적으로 구조를 개선해야 했다. ## 초기 아키텍처와 변경 스트림 초기 LiveGraph는 단일 PostgreSQL과 하나의 서버를 중심으로 구성됐다. - PostgreSQL의 논리적 복제 스트림은 WAL에 기록된 행 단위 변경 사항을 전달한다. - 각 변경에는 행의 변경 전·후 이미지와 단조 증가하는 시퀀스 번호가 포함된다. - LiveGraph는 이 스트림을 추적해 데이터 변경을 실시간 업데이트로 재사용했다. - 모든 LiveGraph 쿼리는 기본 데이터베이스인 primary를 조회했다. - 서버 내부에는 인메모리 쿼리 캐시가 있었고, PostgreSQL의 각 행 변경이 발생할 때마다 관련 쿼리 결과를 직접 수정했다. - 즉, 캐시는 전체 결과를 다시 계산하기보다 개별 mutation을 결과에 반영하는 방식이었다. ## 단일 데이터베이스 구조의 한계 초기 구조에서는 데이터베이스가 하나였기 때문에 변경 스트림의 전역 순서를 가정할 수 있었다. - 모든 변경 사항이 하나의 PostgreSQL 인스턴스에서 생성됐다. - 따라서 LiveGraph는 하나의 전역적으로 정렬된 업데이트 스트림을 처리하면 됐다. - 하지만 단일 PostgreSQL 인스턴스가 용량 한계에 도달하면서 데이터베이스를 여러 수직 샤드로 나누게 됐다. - 여러 샤드가 동시에 변경 사항을 생성하면서 업데이트의 전역 순서가 더 이상 보장되지 않았다. - 기존의 “하나의 전역 순서 스트림”이라는 가정은 샤딩된 데이터베이스 환경에서 유지될 수 없었다. ## 재설계가 필요해진 이유 - LiveGraph는 데이터베이스 확장에 맞춰 변경 사항 수집과 캐시 갱신 방식을 바꿔야 했다. - 수직·수평 샤딩 환경에서는 여러 변경 스트림을 안정적으로 처리해야 한다. - 읽기 요청과 실시간 업데이트가 서로 다른 속도로 증가하므로, 전체 시스템을 한 방식으로만 확장해서는 효율적이지 않다. - Figma는 데이터베이스 용량 문제에 신속히 대응하면서도 기존 서비스의 성능과 안정성을 유지할 수 있는 전략적 변경이 필요했다. 실무적으로는 단일 데이터베이스의 전역 순서와 중앙 캐시에 의존하는 실시간 시스템이 초기에는 단순하고 효율적이지만, 샤딩 단계에서는 변경 순서·캐시 일관성·부하 분리 문제를 별도로 설계해야 한다는 점을 보여준다.

원문 읽기(새 탭에서 열림)
figma4분 읽기큐레이션 요약

LiveGraph: Figma의 실시간

Figma는 실시간 협업 제품에 필요한 데이터를 안정적으로 제공하기 위해 Postgres 위에 GraphQL 기반의 실시간 데이터 계층인 LiveGraph를 구축했다. LiveGraph는 프론트엔드가 선언적으로 데이터를 구독하면 데이터베이스 복제 스트림을 읽어 밀리초 단위로 변경 사항을 반영한다. 이를 통해 수동 이벤트 메시지와 클라이언트 상태 동기화의 복잡성을 줄이고, 대규모 실시간 데이터 구독을 지원한다. ## Figma에서 실시간 데이터가 필요한 이유 - 협업자가 파일을 추가하거나 권한을 변경하면 다른 사용자 화면에도 새로고침 없이 즉시 반영되어야 한다. - 따라서 서버에서 데이터를 한 번 가져오는 것만으로는 부족하며, 클라이언트가 현재 관심 있는 데이터의 변경 사항을 계속 받아야 한다. - 인프라 팀의 목표는 제품 개발자가 데이터 전파 방식이나 WebSocket 세부 구현을 직접 관리하지 않고도 실시간 뷰를 만들 수 있게 하는 것이었다. ## 기존 방식의 한계 - 초기에는 React 프론트엔드가 Ruby HTTP 엔드포인트에서 필요한 데이터를 한 번에 받아 Redux 전역 상태에 저장했다. - 데이터 변경 시 백엔드 코드에서 관련 클라이언트에 보낼 이벤트 메시지를 직접 작성하고, 프론트엔드는 WebSocket으로 이벤트를 받아 상태를 갱신했다. - 사용자와 데이터 규모가 커지면서 모든 데이터를 한 번에 로드하기 어려워졌고, 데이터를 점진적으로 불러오면서 다음 문제가 발생했다. - 특정 데이터가 메모리에 항상 존재한다는 보장이 없어짐 - 여러 제품 영역이 같은 데이터를 사용할 때 데이터 로딩 책임이 불분명해짐 - 이벤트를 어느 시점에 보내고 받아야 하는지 관리하기 어려워짐 - 단순한 “새 파일 생성” 이벤트와 달리 권한 변경은 다른 리소스의 가시성까지 연쇄적으로 바꿀 수 있어 이벤트 설계가 복잡했다. - 데이터베이스 쓰기 순서와 실시간 메시지의 송수신 순서가 항상 일치한다는 보장도 없었다. - 그 결과 클라이언트 상태가 서버 상태의 올바른 부분집합을 반영하지 못하는 일관성 버그가 발생했다. ## GraphQL 기반 Live Query 선택 - Figma는 개발자가 실시간 데이터 구독을 선언적으로 정의할 수 있는 일반적인 프레임워크가 필요하다고 판단했다. - GraphQL을 인터페이스로 사용하면 필요한 데이터와 관계를 쿼리로 표현하고, 시스템이 해당 데이터를 자동으로 가져오고 최신 상태로 유지할 수 있다. - 여기서 말하는 GraphQL 구독은 일반적인 이벤트 스트림 구독과 다르다. - GraphQL의 전통적인 `subscription`은 이벤트 메시지를 전달하는 방식에 가깝다. - LiveGraph가 목표로 한 것은 쿼리 결과 자체를 계속 갱신하는 “Live Query” 방식이다. - 프론트엔드는 GraphQL과 유사한 쿼리를 보내고, 서버는 결과를 JSON 트리로 반환한다. - 서버에는 엔터티와 관계를 정의하는 스키마 및 그래프의 일부를 조회할 수 있는 뷰가 존재한다. ## 기존 실시간 데이터베이스 대신 자체 구축한 이유 - Figma는 이미 Postgres를 대규모로 운영하고 있었기 때문에 Firebase나 RethinkDB 같은 별도의 실시간 데이터베이스로 이전할 수 없었다. - LiveGraph는 새로운 저장소가 아니라 기존 Postgres 위에 동작하는 쿼리 엔진이 되어야 했다. - Figma의 Multiplayer 시스템은 파일 단위의 쓰기와 충돌 해결을 담당하지만, LiveGraph는 여러 데이터의 조회와 실시간 동기화를 담당한다. - Hasura, Prisma, PostGraphile 등 GraphQL 기술도 검토했지만, 대규모 동시 구독을 핵심 요구사항으로 설계된 것은 아니었다. - Figma는 실시간 구독 수가 많아질수록 데이터베이스 부하가 커지는 폴링 방식도 피하고자 했다. - 폴링은 쿼리마다 주기를 정해야 한다. - 구독 수가 늘어나면 동일한 쿼리가 반복 실행되어 데이터베이스 부하가 증가한다. - 폴링보다 변경 발생 시점에 가까운 낮은 지연 시간을 확보하기 어렵다. ## 데이터베이스 복제 스트림 기반 설계 - LiveGraph는 주기적으로 데이터를 다시 조회하는 대신 Postgres의 데이터베이스 복제 로그를 추적한다. - 복제 스트림에서 변경 사항을 읽으면 실제 데이터베이스 변경을 감지한 뒤 구독 중인 쿼리 결과를 갱신할 수 있다. - 이 방식은 폴링보다 빠른 업데이트 지연 시간을 제공한다. - 다만 LiveGraph가 데이터베이스의 전체 변경량을 읽어야 하므로, 대규모 환경에서는 확장성이 중요하다. - Figma는 여러 데이터베이스 샤드의 변경 사항을 여러 머신에 분산 처리할 수 있는 구조를 고려했다. - 최종적으로 LiveGraph를 자체 구축한 이유는 Figma의 협업 기능에서 실시간 데이터가 핵심 기능이며, 이러한 요구사항이 경쟁력으로 이어질 수 있다고 판단했기 때문이다. ## 실용적인 결론 실시간 UI를 구축할 때 클라이언트별 수동 이벤트와 전역 상태 갱신에 의존하면 데이터 규모와 기능 복잡도가 커질수록 일관성 문제가 발생하기 쉽다. 기존 Postgres를 유지해야 하고 대규모 구독이 필요하다면, GraphQL 기반 선언적 쿼리와 데이터베이스 변경 스트림을 결합하는 방식이 폴링이나 수동 이벤트보다 확장성과 유지보수성 측면에서 유리하다.

원문 읽기(새 탭에서 열림)
airbnb원문

데이터 지향 서비스 메시를 (새 탭에서 열림)

에어비앤비가 도입한 '바이아덕트(Viaduct)'는 거대해진 마이크로서비스 아키텍처(SOA)의 복잡성을 해결하기 위해 제안된 데이터 지향 서비스 메시입니다. 기존의 서비스 메시가 단순히 서비스 간의 원격 프로시저 호출(RPC)을 라우팅하는 데 집중했다면, 바이아덕트는 GraphQL 스키마를 중심에 두어 데이터 소비자가 하위 서비스의 구조를 몰라도 필요한 데이터를 효율적으로 가져올 수 있게 합니다. 이를 통해 서비스 간 의존성 그래프를 단순화하고 시스템 전반의 모듈성과 데이터 민첩성을 획기적으로 향상시켰습니다. **기존 SOA의 복잡성과 데이터 지향 설계의 필요성** - 마이크로서비스의 수가 수천 개로 늘어나면서 서비스 간 의존 관계가 '스파게티 코드'처럼 얽히는 문제가 발생했습니다. - 현재의 SOA는 1970년대 스타일의 프로시저 지향 설계에 머물러 있어, 각 서비스가 단순한 엔드포인트의 집합으로 취급됩니다. - 에어비앤비는 1980년대 객체 지향 언어들이 데이터를 중심으로 로직을 캡슐화했던 것처럼, SOA도 데이터 중심으로 진화해야 한다고 판단했습니다. **GraphQL 기반의 데이터 지향 서비스 메시, Viaduct** - 바이아덕트는 서비스 메시의 핵심을 데이터 중심의 GraphQL 스키마(Type, Query, Mutation)로 정의합니다. - 데이터 소비자(Consumer)는 특정 서비스의 엔드포인트를 직접 호출하는 대신, 필요한 데이터 필드를 쿼리하기만 하면 됩니다. - 서비스 메시는 어떤 서비스가 특정 데이터 요소를 제공하는지 알고 있으며, 소비자를 대신해 이를 결합(Orchestration)하여 전달함으로써 서비스 간 직접적인 의존성을 제거합니다. **중앙 집중형 스키마를 통한 데이터 민첩성 확보** - 바이아덕트는 단일화된 '중앙 스키마(Central Schema)'를 통해 여러 팀이 협업할 수 있는 구조를 제공합니다. - 데이터베이스 스키마 변경이 여러 계층의 마이크로서비스 API에 수동으로 반영되어야 했던 과거와 달리, 중앙 스키마 업데이트만으로 클라이언트까지 변경 사항을 즉시 전파할 수 있습니다. - 이는 대규모 SOA 환경에서 데이터 구조 변경에 소요되는 수 주간의 조율 과정을 획기적으로 단축합니다. **서버리스 기능을 활용한 서비스 단순화** - 클라이언트 요구에 맞춰 데이터를 가공하는 'BFF(Backend-for-Frontend)'나 상태 없는 변환 서비스들을 서버리스 클라우드 함수로 대체합니다. - 바이아덕트 내에서 '파생 필드(Derived fields)' 계산 로직을 서버리스로 실행함으로써, 복잡한 서비스 계층을 줄이고 그래프 구조를 깔끔하게 유지합니다. - 이를 통해 서비스의 개수와 복잡도를 낮추면서도 클라이언트에게 최적화된 데이터를 제공할 수 있습니다. **기술적 특징 및 관찰 가능성** - 바이아덕트는 `graphql-java`를 기반으로 구축되었으며, 세밀한 필드 선택 기능을 지원합니다. - 시스템 안정성을 위해 서킷 브레이킹(Short-circuiting), 소프트 의존성(Soft dependencies), 요청 내 캐싱(Intra-request cache) 등의 기술을 적용했습니다. - 필드 단위의 데이터 관찰 가능성(Data observability)을 제공하여, 어떤 서비스가 어떤 데이터를 소비하는지 정확하게 파악하고 관리할 수 있습니다. 이처럼 거대해진 마이크로서비스 환경에서 운영 효율을 높이려면, 개별 서비스의 엔드포인트 관리에서 벗어나 데이터 중심의 추상화 계층을 구축하는 것이 중요합니다. 에어비앤비의 사례는 GraphQL을 단순한 API 게이트웨이를 넘어 시스템 전체의 의존성을 관리하는 서비스 메시로 확장함으로써 복잡성을 제어할 수 있음을 보여줍니다.

figma3분 읽기큐레이션 요약

DesignSystems.com의 새로운

DesignSystems.com은 디자인 시스템을 만들고 운영하는 디자이너·개발자·관리자를 위한 지식 공유 플랫폼으로 자리 잡고 있다. 이 글은 2019년 6월에 공개된 주요 콘텐츠 네 가지를 소개하며, 아이콘 설계부터 접근성 높은 React 컴포넌트, 에이전시 협업, 화이트라벨링까지 디자인 시스템의 실무 범위를 보여준다. 핵심은 재사용성과 일관성을 유지하면서도 다양한 사용자와 제품 요구에 유연하게 대응하는 것이다. ## 아이콘 시스템 설계와 구현 - 아이콘 제작의 기본 원칙부터 개발자 전달까지 다루는 종합 가이드를 소개한다. - 주요 내용은 다음과 같다. - 아이콘의 스트로크와 필(fill) 설계 - Boolean 연산을 활용한 아이콘 제작 - 아이콘을 체계적으로 구성하고 관리하는 방법 - 개발자 핸드오프를 위한 파일 및 자산 준비 - 아이콘은 단순한 그래픽 요소가 아니라 디자인 시스템의 일관성과 사용성을 좌우하는 핵심 자산으로 설명된다. ## 에이전시 관점의 디자인 시스템 구축 - Instrument는 Nike, Google, Airbnb 등과 협업하며 일회성 결과물이 아닌 확장 가능한 디자인 시스템을 구축한다. - 재사용 가능한 기능성 컴포넌트를 여러 애플리케이션과 규모에 걸쳐 활용하는 것을 중시한다. - 디자인 시스템의 성공을 위해서는 다음 과정이 중요하다. - 클라이언트와 시스템의 목표 및 범위에 대한 공통 이해 형성 - 높은 수준의 협업을 통한 요구사항 조율 - 특정 프로젝트를 넘어 장기적으로 활용 가능한 구성요소 설계 - 디자인 시스템은 산출물 하나가 아니라 브랜드, 제품, 기술을 연결하는 협업 프로세스로 제시된다. ## 접근성을 공유하는 React 컨테이너 - Zendesk의 오픈소스 디자인 시스템 Garden은 접근성 및 키보드 조작을 공통 패턴으로 관리하기 위해 “컨테이너” 패턴을 사용한다. - 컨테이너는 화면 UI를 직접 렌더링하지 않고 다음 기능을 담당한다. - 키보드 및 마우스 상호작용 처리 - React 컴포넌트 간 접근성 로직 공유 - RTL(오른쪽에서 왼쪽으로 읽는 언어) 레이아웃 지원 - 새 라이브러리인 `react-containers`는 스타일이 포함된 전체 패키지를 설치하지 않아도 비시각적 로직만 사용할 수 있도록 별도 저장소로 분리됐다. - 기존 패턴보다 더 작고 효율적으로 다시 작성됐으며, WAI-ARIA Authoring Practices 1.1에 더욱 가깝게 구현됐다. ## 사용자에게 권한을 제공하는 화이트라벨링 - Dawn Labs는 제3자가 디자인 시스템을 직접 커스터마이즈할 수 있으면서도 제품 전체의 일관성을 유지해야 하는 문제를 다뤘다. - 사용한 기술은 다음과 같다. - `styled-components` - `styled-system` - GraphQL 백엔드 - CSS 변수와 전역 CSS 주입 - 기본 디자인 토큰과 구조는 통제하면서도, 최종 사용자가 클라이언트의 개입 없이 원하는 스타일을 수정할 수 있도록 “스타일링 탈출구”를 제공했다. - 화이트라벨 시스템은 일관된 기본 경험과 사용자별 커스터마이징 사이의 균형이 중요하다. ## 커뮤니티 중심의 지식 공유 - DesignSystems.com은 디자인 시스템 제작자, 디자이너, 개발자, 관리자가 경험과 실무 지식을 공유하는 것을 목표로 한다. - 다양한 분야의 기고를 통해 디자인 시스템을 시각 디자인에만 한정하지 않고 다음 영역까지 확장한다. - 접근성 - 컴포넌트 아키텍처 - 협업과 운영 - 사용자 커스터마이징 - 플랫폼의 성장은 운영팀뿐 아니라 커뮤니티 구성원의 사례와 기여에 기반한다. 디자인 시스템을 구축할 때는 재사용 가능한 컴포넌트와 명확한 시각 규칙뿐 아니라 접근성, 협업 프로세스, 확장 가능한 커스터마이징 구조까지 함께 설계하는 것이 좋다. 특히 공통 로직은 별도 모듈로 분리하고, CSS 변수나 디자인 토큰을 활용하면 일관성과 유연성을 동시에 확보할 수 있다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

Figma API 영감이 필요하신가

Figma는 2018년 Web API 출시 직후 커뮤니티가 만든 다양한 활용 사례를 소개한다. PDF·스타일 가이드 생성부터 음성 인터페이스, GraphQL, React 연동까지 API가 디자인 산출물 자동화와 개발자 협업에 활용될 수 있음을 보여준다. 글은 Figma API가 디자이너와 개발자의 작업 흐름을 확장하는 플랫폼이 될 가능성을 강조한다. ## Figma API 출시와 커뮤니티의 반응 - Figma는 전문 디자인 도구를 위한 첫 Web API인 Figma Platform을 공개했다. - 출시 후 며칠 만에 커뮤니티에서 다양한 프로젝트가 등장했다. - 일부 프로젝트는 오픈 소스로 공개되어 다른 개발자가 확장하거나 재사용할 수 있었다. - 소개된 통합 기능은 모두 제3자 프로젝트이므로 권한 설정과 유지보수는 Figma가 책임지지 않는다. ## 디자이너가 바로 사용할 수 있는 통합 ### PDF 내보내기 - Figma 파일에서 프레임을 선택한 뒤 파일 URL을 웹사이트에 입력하면 PDF로 변환할 수 있다. - 개발 지식이 없어도 사용할 수 있는 간단한 API 활용 사례다. - Gweltaz Calori가 만든 `Figma-To-Pdf` 프로젝트는 GitHub에 오픈 소스로 공개됐다. ### 스타일 가이드 자동 생성 - Figma 문서 URL을 입력하면 문서에 사용된 폰트, 색상, 기타 스타일 정보를 분석한다. - 분석 결과를 바탕으로 스타일 가이드 페이지를 자동으로 생성한다. - 디자인 파일을 별도로 정리하지 않아도 현재 사용 중인 디자인 시스템을 문서화할 수 있다. ### Alexa 음성 통합 - Figma 디자인에 남겨진 댓글을 Alexa가 읽어 주는 음성 기반 통합 사례다. - 실용성보다는 Figma API가 음성 인터페이스와도 연결될 수 있음을 보여주는 실험적 프로젝트다. - Airbnb의 디자인 테크놀로지스트 Jon Gold가 제작했다. ## 개발자를 위한 API 활용 기반 ### JavaScript 라이브러리와 GraphQL - Jon Gold는 Figma API를 JavaScript에서 쉽게 사용할 수 있도록 비공식 `figma-js` 라이브러리를 만들었다. - API 호출을 직접 다루는 복잡성을 줄여 JavaScript 통합 개발을 빠르게 시작할 수 있다. - Bernardo Raposo와 Sara Vieira는 이 라이브러리를 활용해 Figma API를 GraphQL 쿼리로 사용할 수 있는 오픈 소스 커넥터를 만들었다. - GraphQL을 이용하면 필요한 디자인 데이터만 질의하는 방식으로 API를 활용할 수 있다. ### Figma 디자인과 React 컴포넌트 동기화 - Figma 디자인을 React 등 다른 프레임워크의 코드로 자동 변환하려는 시도가 등장했다. - PageDraw는 Figma와 React를 연결하는 통합 기능을 제공했다. - Sara Vieira는 GraphQL 커넥터를 사용해 Figma 파일의 요소를 React 컴포넌트로 직접 렌더링하는 방식을 구현했다. - Candis의 Florian Nagel도 Figma 디자인을 React 코드로 변환하는 자체 도구를 개발하고 오픈 소스화를 추진했다. - 이러한 도구는 디자인과 실제 구현 사이의 변환 작업을 자동화해 디자이너와 개발자의 핸드오프 비용을 줄이는 것을 목표로 한다. ## 실용적인 시사점 Figma API는 단순한 파일 조회 기능을 넘어 문서화, 포맷 변환, 음성 인터페이스, GraphQL 질의, 프론트엔드 코드 생성까지 확장될 수 있다. 특히 디자인 시스템 자동 생성과 Figma-to-React 변환은 반복적인 협업 작업을 줄이는 데 직접적인 가치가 있으므로, API 래퍼나 오픈 소스 커넥터를 기반으로 팀의 디자인·개발 프로세스에 맞는 자동화 도구를 구축할 수 있다.

원문 읽기(새 탭에서 열림)