피그마의 피드백 선물 (새 탭에서 열림)
Welcome to the WIP Insights Design Product management Thought leadership Design
코드에서 영감 얻기 | Figma (새 탭에서 열림)
A sneak peek at Schema 2022 Inside Figma Design systems Design Events
당신의 잼을 위한 완 (새 탭에서 열림)
피그마는 수만 개의 레이어가 복잡하게 얽힌 디자인 파일 내에서 원하는 요소를 빠르게 찾고 수정할 수 있는 ‘찾기 및 바꾸기(Find and replace)’ 기능을 도입했습니다. 이 기능은 단순한 텍스트 검색을 넘어 레이어와 컴포넌트까지 아우르는 복합적인 검색 환경을 제공하며, 수백만 개의 객체가 포함된 대형 파일에서도 지연 없는 성능을 보장하는 데 초점을 맞췄습니다. 결과적으로 디자이너들은 대규모 프로젝트에서도 수동 작업의 번거로움 없이 디자인 일관성을 효율적으로 유지할 수 있게 되었습니다. ### 디자인 데이터의 특성을 고려한 검색 엔진 구축 * 단순한 문자열 매칭을 넘어 레이어 이름, 텍스트 콘텐츠, 프레임 구조 등 피그마 고유의 객체 속성을 모두 검색 범위에 포함했습니다. * 수백만 개의 객체를 포함한 파일에서도 즉각적인 검색 결과를 반환하기 위해 데이터 구조를 최적화하고 효율적인 인덱싱 시스템을 설계했습니다. * 텍스트 검색 시 대소문자 구분, 전체 단어 일치, 정규 표현식과 유사한 필터링 옵션을 제공하여 검색의 정확도를 극대화했습니다. ### 실시간 성능 최적화와 인메모리 처리 * 사용자가 디자인을 수정함에 따라 검색 결과가 실시간으로 업데이트되도록 인크리멘탈(incremental) 업데이트 방식을 채택했습니다. * 웹브라우저 환경의 제약을 극복하기 위해 클라이언트 사이드에서 고성능 검색 알고리즘을 실행하여 서버 통신 없이도 즉각적인 반응성을 확보했습니다. * 대량의 레이어 트리 구조를 순회(Traverse)할 때 발생하는 메모리 부하를 최소화하기 위해 효율적인 데이터 접근 패턴을 구현했습니다. ### 맥락을 유지하는 탐색 및 일괄 수정 인터페이스 * 검색 결과 리스트에서 특정 항목을 선택하면 해당 요소가 위치한 캔버스로 즉시 이동 및 확대(Zoom)하여 작업 문맥을 잃지 않도록 돕습니다. * '모두 바꾸기(Replace all)' 기능을 통해 여러 페이지와 레이어에 흩어진 반복적인 텍스트나 이름을 한 번에 수정할 수 있어 작업 시간을 획기적으로 단축했습니다. * 전체 파일뿐만 아니라 '현재 선택 영역 내 검색' 옵션을 제공하여 특정 섹션이나 컴포넌트 내부로 검색 범위를 한정할 수 있는 유연성을 제공합니다. 대규모 디자인 시스템이나 복잡한 프로토타입을 관리하는 팀이라면 이 기능을 통해 레이어 정리 및 텍스트 일관성 검토 시간을 크게 줄일 수 있습니다. 특히 컴포넌트 내의 특정 텍스트를 일괄 변경해야 하거나, 명명 규칙(Naming convention)을 준수하기 위해 레이어 이름을 정리할 때 유용하게 활용할 것을 권장합니다.
멀티플레이어를 더 안정적으로 (새 탭에서 열림)
피그마는 실시간 동기화의 복잡성을 해결하기 위해 기존의 일반적인 알고리즘인 OT(Operational Transformation) 대신, 중앙 집중식 서버를 활용한 독자적인 멀티플레이어 엔진을 구축했습니다. 디자인 파일의 계층 구조와 복잡한 속성을 효율적으로 관리하기 위해 서버를 유일한 진실의 원천(Single Source of Truth)으로 삼고, 속성 단위의 충돌 해결 방식을 채택했습니다. 이를 통해 피그마는 수천 명의 사용자가 동시에 협업하더라도 지연 없는 매끄러운 사용자 경험을 제공하며 웹 기반 디자인 도구의 한계를 극복했습니다. ### 중앙 집중식 동기화 엔진과 객체 그래프 구조 * 피그마의 데이터 모델은 단순히 텍스트의 나열이 아니라, 수많은 객체(도형, 레이어 등)가 계층적으로 연결된 트리 형태의 그래프 구조입니다. * 구글 독스 등에서 사용하는 OT 방식은 텍스트 편집에는 적합하지만, 복잡한 객체 그래프의 동기화에는 지나치게 복잡하고 성능 부하가 크다는 단점이 있습니다. * 이를 해결하기 위해 피그마는 클라이언트 간 직접 통신이 아닌, 모든 변경 사항이 반드시 서버를 거치도록 설계했습니다. 서버는 편집 명령의 순서를 결정하고 이를 모든 클라이언트에 브로드캐스팅하여 전체 상태의 일관성을 보장합니다. ### Last Write Wins(LWW) 기반의 충돌 해결 * 피그마는 개별 객체의 속성(예: 색상, X 좌표, 불투명도) 수준에서 동기화를 수행합니다. * 복잡한 알고리즘 대신 '마지막에 쓰인 값이 승리(Last Write Wins)'하는 단순한 전략을 사용합니다. 두 사용자가 같은 객체의 서로 다른 속성(하나는 색상, 하나는 위치)을 수정하면 두 변경 사항이 모두 자연스럽게 반영됩니다. * 동일한 속성을 동시에 수정할 경우에만 서버에 먼저 도착한 요청이 우선순위를 가지며, 이를 통해 동기화 로직을 단순화하고 예측 가능한 동작을 구현했습니다. ### Rust와 WebAssembly를 활용한 고성능 인프라 * 브라우저 환경에서 데스크톱 수준의 성능을 내기 위해 피그마의 핵심 엔진은 C++로 작성되었으며, 이는 WebAssembly(Wasm)를 통해 웹 환경에서 실행됩니다. * 멀티플레이어 서버는 높은 동시성 처리에 최적화된 Rust 언어로 개발되었습니다. Rust는 메모리 안전성을 보장하면서도 실시간 메시지 라우팅에 필요한 저지연 성능을 제공합니다. * 네트워크 대역폭을 절약하기 위해 변경된 데이터만 전송하는 델타 동기화 기술과 바이너리 프로토콜을 사용하여 데이터 전송 효율을 극대화했습니다. ### 낙관적 업데이트와 클라이언트 상태 관리 * 사용자 경험의 즉각성을 위해 클라이언트는 서버의 응답을 기다리지 않고 로컬에서 즉시 변경 사항을 반영하는 '낙관적 업데이트'를 수행합니다. * 서버로부터 확정된 순서의 데이터가 도착하면 클라이언트는 자신의 로컬 상태와 비교하여 필요한 경우 상태를 재조정(Reconciliation)합니다. * 이 과정에서 사용자에게 시각적 끊김을 주지 않기 위해 부드러운 보간(Interpolation) 기술이 적용되어 다른 사용자의 마우스 움직임이나 편집 과정이 실시간처럼 보이게 합니다. 피그마의 사례는 모든 실시간 협업 도구에 복잡한 OT나 CRDT 알고리즘이 필수적인 것은 아님을 보여줍니다. 서비스의 도메인 특성(디자인 객체 모델)을 정확히 파악하고, 그에 맞는 단순하고 효율적인 충돌 해결 전략과 고성능 언어(Rust/Wasm)를 결합하는 것이 대규모 실시간 시스템 구축의 핵심입니다.
기능 비하인드: 찾 (새 탭에서 열림)
Figma의 다크 모드 도입은 단순한 색상 변경을 넘어, 수년간 쌓인 레거시 코드의 하드코딩된 색상 값을 체계적인 디자인 토큰 시스템으로 전환하는 대규모 엔지니어링 프로젝트였습니다. 이들은 수천 개의 색상 변수를 수동으로 수정하는 대신, 의미론적(Semantic) 명명 규칙과 자동화된 코드 수정 도구를 활용해 유지보수가 용이한 아키텍처를 구축했습니다. 결과적으로 Figma는 단일 테마의 제약에서 벗어나 다크 모드를 포함한 멀티 테마를 유연하게 지원할 수 있는 기술적 기반을 마련했습니다. ### 디자인 토큰 시스템 구축 - 하드코딩된 헥스(Hex) 코드 대신 의미를 담은 '디자인 토큰'을 도입했습니다. 단순한 색상값(예: `#FFFFFF`)이 아니라 역할(예: `bg-primary`)에 기반한 이름을 부여했습니다. - 토큰 구조를 '기본 값(Base)', '의미론적 값(Semantic)', '컴포넌트 특정 값(Component-specific)'의 계층으로 나누어 관리함으로써 확장성을 높였습니다. - JSON 형식을 사용하여 디자인과 엔지니어링 팀 간의 단일 진실 공급원(Single Source of Truth)을 구축하고, 이를 통해 다양한 플랫폼에 일관된 색상을 적용했습니다. ### 하드코딩된 레거시 코드의 자동화된 마이그레이션 - 코드베이스 내에 흩어져 있던 수천 개의 하드코딩된 색상 값을 찾기 위해 정규 표현식과 추적 도구를 활용했습니다. - '코드모드(Codemods)'를 제작하여 수동 수정의 위험을 줄이고, 기존의 Hex 코드를 적절한 CSS 변수(Variable)로 자동 교체했습니다. - 단순 일대일 매칭이 불가능한 경우(같은 흰색이라도 배경인지 경계선인지에 따라 토큰이 달라지는 경우)를 해결하기 위해 엔지니어가 직접 문맥을 확인하는 프로세스를 병행했습니다. ### CSS 변수 기반의 실시간 테마 전환 - 런타임에서 테마를 즉각적으로 변경하기 위해 CSS 커스텀 프로퍼티(Custom Properties)를 사용했습니다. - 최상위 루트 요소에 테마를 결정하는 클래스(예: `.theme-dark`)를 부여하고, 하위 요소들이 해당 스코프 내의 CSS 변수 값을 참조하도록 설계했습니다. - DOM 요소뿐만 아니라 HTML Canvas와 같이 CSS 변수를 직접 사용할 수 없는 복잡한 렌더링 환경에서도 테마 시스템이 연동될 수 있도록 별도의 브릿지 로직을 구현했습니다. ### 기술적 부채 해결과 향후 확장성 - 다크 모드 프로젝트를 통해 발견된 수많은 유령 색상(사용되지 않거나 중복된 색상)을 정리하여 코드의 청결도를 높였습니다. - 새롭게 구축된 시스템은 향후 '고대비 모드'나 '브랜드 테마' 등 또 다른 테마를 추가할 때 최소한의 코드 수정만으로 대응할 수 있는 구조를 갖추게 되었습니다. **실용적인 제언** Figma의 사례는 대규모 서비스에서 다크 모드를 도입할 때 단순한 스타일 추가가 아닌 **'의미론적 토큰화'**가 선행되어야 함을 보여줍니다. 초기 구축 단계에서 자동화 도구(Codemods)를 적극 활용하고, 디자인과 엔지니어링이 공통으로 사용하는 토큰 관리 체계를 만드는 것이 장기적인 유지보수 비용을 줄이는 핵심입니다.
Schema 2022 미리 보기 (새 탭에서 열림)
Figma는 디자인 시스템의 가치와 영향력을 심도 있게 다루기 위해 전용 컨퍼런스인 'Schema'의 개최를 발표했습니다. 이 행사는 전 세계 디자인 시스템 실무자들이 모여 복잡한 워크플로우를 해결하고, 디자인과 코드 간의 격차를 줄이는 실제적인 경험을 공유하는 데 목적이 있습니다. 결과적으로 참여자들은 확장 가능한 디자인 시스템을 구축하고 유지하는 데 필요한 구체적인 통찰력을 얻을 수 있습니다. ### 디자인 시스템 전문 컨퍼런스의 취지 - 디자인 시스템이 단순한 컴포넌트 모음을 넘어 제품 개발의 핵심 인프라로 자리 잡음에 따라, 이를 전문적으로 다루는 공유의 장이 필요해졌습니다. - 성공적인 디자인 시스템 구축을 위한 전략, 거버넌스 수립, 그리고 조직 내 확산 과정을 실무 관점에서 깊이 있게 조명합니다. - Figma는 이 컨퍼런스를 통해 파편화된 디자인 시스템 지식을 체계화하고 커뮤니티 간의 연결을 강화하고자 합니다. ### 기술적 실행과 협업의 최적화 - 디자인 토큰(Design Tokens)의 표준화와 이를 실제 코드와 어떻게 동기화할 것인지에 대한 기술적 구현 방안을 논의합니다. - 디자이너와 개발자가 동일한 언어로 소통할 수 있는 핸드오프 프로세스와 도구 활용법을 구체적인 사례와 함께 제시합니다. - 다양한 규모의 기업 사례를 통해 시스템의 확장성(Scalability)을 확보하고 유지보수 효율성을 높이는 방법론을 공유합니다. ### 글로벌 지식 공유와 커뮤니티 확장 - 전 세계 주요 도시를 거점으로 하거나 온라인 스트리밍을 병행하여, 지역적 한계를 넘어선 디자인 시스템 생태계를 구축합니다. - 현업 전문가들이 직접 연사로 참여하여 실제 프로젝트에서 겪은 시행착오와 이를 극복한 기술적 솔루션을 투명하게 공개합니다. - 단순히 도구 사용법을 익히는 것을 넘어, 디자인 시스템이 비즈니스 임팩트에 기여하는 방식을 탐구합니다. 디자인 시스템을 처음 도입하거나 현재 운영 중인 시스템의 고도화를 고민하는 팀이라면, Schema에서 공유되는 세션들을 통해 최신 기술 트렌드를 파악하고 조직에 맞는 최적의 운영 전략을 수립하는 데 큰 도움을 얻을 수 있습니다.
디자인 인재 유치 (새 탭에서 열림)
Digital design is now a real job Insights Leadership Report Thought leadership
자신 있게 클라우드 (새 탭에서 열림)
Localization, languages, and listening Inside Figma Design Product updates
Adobe와의 새로운 협업 | 피 (새 탭에서 열림)
피그마(Figma)와 어도비(Adobe)는 15개월간 이어진 규제 당국의 심사 끝에 합병 계획을 공식적으로 철회하기로 합의했습니다. 양사는 유럽연합(EU)과 영국 등 주요국 규제 기관의 승인을 얻을 수 있는 현실적인 경로가 더 이상 존재하지 않는다는 결론에 도달했습니다. 이로써 피그마는 어도비의 산하로 들어가는 대신 독자적인 기업으로서 성장을 지속하게 되었습니다. **규제 승인 실패의 배경** * 영국 경쟁시장국(CMA)과 유럽연합 집행위원회(EC) 등 글로벌 규제 기관들은 이번 합병이 인터페이스 디자인 소프트웨어 시장의 경쟁을 저해할 수 있다는 우려를 지속적으로 제기했습니다. * 규제 당국은 어도비가 디자인 시장의 지배적 사업자로서 혁신적인 경쟁자인 피그마를 인수할 경우, 시장의 독점화가 심화되고 소비자의 선택권이 줄어들 것으로 판단했습니다. * 양사는 규제 기관을 설득하기 위해 다양한 구제책을 논의했으나, 시장의 경쟁 구조를 유지하려는 당국의 요구 수준을 충족하기 어렵다고 판단하여 최종적으로 합병 철회를 결정했습니다. **피그마의 독자적 행보와 전략** * 합병이 무산됨에 따라 어도비는 피그마 측에 약 10억 달러(한화 약 1조 3천억 원) 규모의 계약 해지 수수료(Termination Fee)를 지급하게 됩니다. * 피그마는 확보된 자본과 독립성을 바탕으로 제품 로드맵을 확장하고, 화이트보드 도구인 'FigJam' 및 AI 기반 디자인 기능 강화에 집중할 계획입니다. * 이번 결정으로 피그마는 기존의 커뮤니티 중심 생태계를 유지하면서, 어도비 제품군과의 직접적인 경쟁 구도를 이어가게 되었습니다. **디자인 소프트웨어 시장에 미칠 영향** * 이번 합병 실패는 빅테크 기업들의 인수를 통한 확장에 대해 글로벌 규제 당국이 매우 엄격한 잣대를 적용하고 있음을 보여주는 상징적인 사례가 되었습니다. * 디자인 업계는 피그마의 독립성 유지를 환영하는 분위기이며, 이는 디자인 도구 시장의 기술 혁신 경쟁을 더욱 가속화할 것으로 전망됩니다. * 어도비는 자체적인 클라우드 기반 디자인 도구 개발 및 AI 서비스인 '파이어플라이(Firefly)' 고도화에 더욱 박차를 가할 것으로 보입니다. 피그마는 이번 일을 계기로 단순한 디자인 도구를 넘어 협업 플랫폼으로서의 정체성을 강화할 기회를 맞이했습니다. 비록 거대 자본과의 결합은 무산되었으나, 독립적인 혁신을 통해 시장 내 입지를 더욱 공고히 다지는 전환점이 될 것으로 보입니다.
마이크로소프트 존 프리드 (새 탭에서 열림)
마이크로소프트는 대규모 조직 내 디자인 일관성을 유지하고 반복적인 수작업을 줄이기 위해 Figma 플러그인을 워크플로우의 핵심으로 도입했습니다. 이들은 단순한 도구 활용을 넘어, 디자인 시스템과 실시간 데이터를 연결하는 맞춤형 플러그인을 통해 수천 명의 디자이너와 엔지니어 사이의 협업 간극을 좁혔습니다. 결과적으로 디자인 프로세스의 자동화를 실현하며 제품의 품질과 팀의 생산성을 동시에 높이는 성과를 거두었습니다. ### 대규모 디자인 시스템 관리와 일관성 유지 * 수백 개의 제품과 수천 명의 디자이너가 협업하는 환경에서 수동 업데이트는 오류를 유발하고 일관성을 해치는 주요 원인이었습니다. * 마이크로소프트는 'Fluent UI' 디자인 시스템을 플러그인과 결합하여, 디자인 요소의 변경 사항이 모든 제품군에 즉각적이고 정확하게 반영되도록 시스템화했습니다. * 중앙 집중화된 도구를 통해 개별 디자이너가 최신 가이드를 일일이 확인하지 않아도 시스템의 규칙을 준수할 수 있는 환경을 구축했습니다. ### 실제 데이터를 활용한 현실적인 디자인 환경 구축 * 'Content Reel'과 같은 플러그인을 개발하여 더미 텍스트 대신 실제 사용자 이름, 아바타, 아이콘 등의 데이터를 디자인 파일에 즉시 삽입할 수 있게 했습니다. * 이를 통해 디자이너는 실제 사용자가 경험하게 될 화면을 더 정확하게 예측하고, 텍스트 길이에 따른 레이아웃 깨짐 등 엣지 케이스를 디자인 단계에서 사전에 발견할 수 있게 되었습니다. ### 반복 업무 자동화를 통한 디자인 생산성 극대화 * 레이아웃 정렬, 접근성 검사, 레드라이닝(치수 및 사양 표기) 등 소모적인 수작업을 자동화 플러그인으로 대체했습니다. * 디자이너가 픽셀 단위의 단순 조정 작업에 시간을 쏟는 대신, 제품의 핵심 사용자 경험과 복잡한 문제 해결에 집중할 수 있는 시간을 확보했습니다. * 자동화된 검수 도구는 디자인 핸드오프(Hand-off) 과정에서의 커뮤니케이션 오류를 줄여 개발 효율성까지 증대시켰습니다. ### 디자인과 엔지니어링의 유기적인 기술 연동 * 디자인 토큰(Design Tokens)을 관리하는 플러그인을 활용하여 디자인 변경 사항을 코드로 직접 변환하고 배포 프로세스의 정확도를 높였습니다. * 플러그인은 단순한 그리기 도구를 넘어 디자인과 개발 사양을 연결하는 가교 역할을 수행하며, 디자인 시스템의 업데이트가 엔지니어링 환경으로 즉각 전파될 수 있는 파이프라인을 형성했습니다. 마이크로소프트의 사례는 대규모 조직일수록 도구의 자동화와 커스텀 플러그인 구축이 선택이 아닌 필수임을 보여줍니다. 반복적인 작업은 기술에 맡기고 디자이너는 창의적인 의사결정에 집중할 수 있는 '도구 기반의 워크플로우'를 구축하는 것이 현대적인 제품 개발 조직의 핵심 경쟁력입니다.
피그턴으로서의 나의 여름 | (새 탭에서 열림)
Figma에서의 원격 인턴십은 지리적 제약을 넘어 협업 중심의 제품 개발 문화를 깊이 있게 경험할 수 있는 소중한 기회입니다. 이 글은 제품 관리(PM)와 UI/UX 디자인이 유기적으로 연결되는 과정을 다루며, 원격 환경에서 효율적인 성장을 이끌어내는 소통의 가치를 조명합니다. 기술적 도구의 활용만큼이나 중요한 것은 투명한 문서화와 능동적인 피드백임을 실제 사례를 통해 강조합니다. ### 원격 환경에서의 제품 관리(PM)와 협업 * **문서화의 중요성:** 원격 근무 환경에서는 비동기 소통이 핵심이므로, 제품 요구 사항 정의서(PRD)를 명확하고 상세하게 작성하여 모든 팀원이 같은 맥락을 공유하도록 합니다. * **도구를 통한 실시간 조율:** Figma와 FigJam을 활용해 아이디어를 시각화하고, 복잡한 기능 명세나 사용자 흐름을 팀원들과 실시간으로 논의하며 의사결정 속도를 높입니다. * **이해관계자 관리:** 엔지니어링, 디자인, 마케팅 등 다양한 부서와 긴밀하게 소통하며 제품의 우선순위를 설정하고 기술적 제약 사항을 조기에 파악합니다. ### UI/UX 디자인과 사용자 중심의 사고 * **반복적인 프로토타이핑:** 아이디어를 빠르게 프로토타입으로 구현하고, 내부 피드백과 사용자 테스트를 통해 디자인의 문제점을 지속적으로 수정하고 보완합니다. * **디자인 시스템의 활용:** Figma의 강력한 컴포넌트 라이브러리와 디자인 시스템을 실무에 적용하며 일관성 있는 인터페이스를 구축하는 기술적 역량을 배양합니다. * **사용자 피드백의 내재화:** 사용자의 목소리를 정량적 데이터와 정성적 의견으로 분석하여, 실제 기능 개선으로 연결하는 '사용자 중심'의 설계 프로세스를 체득합니다. ### 커리어 성장과 교육적 교훈 * **멘토십과 네트워킹:** 원격 환경에서도 적극적인 1:1 미팅을 통해 시니어 전문가들의 인사이트를 흡수하고, 자신의 커리어 경로를 구체화하는 법을 배웁니다. * **자기 주도적 학습:** 주어진 업무에 매몰되지 않고 Figma 내부의 기술 블로그나 세미나를 통해 제품의 비하인드 스토리와 기술적 도전을 파악하며 시야를 넓힙니다. * **소프트 스킬의 강화:** 원격 근무일수록 자신의 업무 진행 상황을 명확히 공유하고, 모호한 상황에서 질문을 주저하지 않는 태도가 성장의 핵심임을 깨닫습니다. 성공적인 원격 인턴십은 단순히 업무를 수행하는 것을 넘어, 물리적 거리감을 줄이기 위한 의도적인 소통 노력에서 결정됩니다. 기술적인 숙련도만큼이나 팀의 문화를 이해하고 그 안에서 자신의 목소리를 투명하게 내는 연습이 커리어 성장의 가장 큰 밑거름이 될 것입니다.