피칭과 발표에 관하여 (새 탭에서 열림)

11 activities in Figma for your classroom Working Well Career & education

피그마의 새로운 EMEA 본 (새 탭에서 열림)

How work is changing at Figma Inside Figma Operations Behind the scenes

온라인 쇼핑객을 위해 디자인 (새 탭에서 열림)

제시해주신 BT(British Telecom)의 피그마(Figma) 도입 사례 및 디지털 혁신에 관한 글을 요약해 드립니다. 174년의 역사를 지닌 영국의 통신 대기업 BT는 거대 조직의 관성에서 벗어나기 위해 디자인 워크플로우를 전면 개편하고 디지털 혁신을 가속화하고 있습니다. 이들은 피그마를 도입하여 파편화된 디자인 도구를 하나로 통합하고, 전사적인 디자인 시스템인 'Loop'를 구축함으로써 수백 명의 디자이너와 개발자가 실시간으로 협업할 수 있는 환경을 조성했습니다. 이를 통해 BT는 브랜드 일관성을 유지하는 동시에 제품 출시 속도를 획기적으로 높이며 전통적인 통신사에서 현대적인 기술 기업으로 거듭나고 있습니다. ### 디자인 도구 통합과 워크플로우 현대화 * 기존에 Sketch, InVision, Abstract 등 여러 도구에 분산되어 있던 디자인 스택을 피그마 하나로 단일화하여 워크플로우의 단절을 해결했습니다. * 클라우드 기반의 실시간 협업 기능을 통해 영국 전역 및 글로벌 거점에 흩어져 있는 디자인 인력이 하나의 소스(Single Source of Truth)를 바탕으로 작업하게 되었습니다. * 파일 관리의 번거로움이 사라지면서 디자인 히스토리 추적이 용이해졌고, 피드백 루프가 짧아져 의사결정 속도가 대폭 개선되었습니다. ### 멀티 브랜드 디자인 시스템 'Loop' 구축 * BT와 EE 등 서로 다른 아이덴티티를 가진 브랜드를 효율적으로 관리하기 위해 'Loop'라는 통합 디자인 시스템을 설계했습니다. * 피그마의 **변수(Variables)** 기능을 활용하여 브랜드별 색상, 타이포그래피, 간격 등을 토큰화함으로써, 하나의 컴포넌트로 여러 브랜드의 테마를 즉각적으로 전환할 수 있는 환경을 만들었습니다. * 디자인 시스템의 컴포넌트 라이브러리를 고도화하여 신규 페이지 제작 시 0부터 시작하는 대신 기존 자산을 조합하는 방식으로 작업 시간을 단축하고 시각적 일관성을 확보했습니다. ### 디자인과 엔지니어링의 정렬 (Dev Mode 활용) * **데브 모드(Dev Mode)**를 도입하여 디자이너의 의도가 개발자에게 전달되는 과정에서 발생하는 정보 손실을 최소화했습니다. * 개발자는 피그마 내에서 직접 CSS, Swift, Kotlin 등의 코드 스니펫을 확인하고 자산을 추출할 수 있어, 디자인 사양을 코드로 변환하는 프로세스가 훨씬 정교해졌습니다. * 디자인 시스템과 실제 프로덕션 코드 간의 격차를 줄이기 위해 플러그인과 API를 활용, 디자인 변경 사항이 개발 환경에 더 빠르게 반영될 수 있는 파이프라인을 구축했습니다. ### 실험 중심의 프로토타이핑 문화 확산 * 고도화된 프로토타이핑 기능을 통해 실제 제품과 유사한 사용자 경험을 사전에 테스트하고, 이를 바탕으로 실제 개발 전 리스크를 줄이고 있습니다. * 디자이너뿐만 아니라 기획자, 스테이크홀더들이 피그마 내에서 직접 상호작용하며 아이디어를 구체화하는 등 전사적인 실험 문화를 정착시켰습니다. BT의 사례는 거대 레거시 기업이라도 현대적인 디자인 도구와 체계적인 시스템을 전략적으로 도입하면 스타트업 못지않은 민첩성을 확보할 수 있음을 보여줍니다. 특히 다중 브랜드를 운영하는 대규모 조직일수록 디자인 시스템의 '토큰화'와 '협업 플랫폼 통합'이 디지털 전환의 핵심 동력이 된다는 점을 시사합니다.

멀티 브랜드 디자인 시스템 구축 (새 탭에서 열림)

디자인 시스템은 단순한 UI 컴포넌트 모음을 넘어, 조직의 생산성을 높이고 제품 품질을 표준화하는 핵심 전략 자산입니다. 디자인 시스템의 가치를 입증하기 위해서는 단순히 라이브러리의 크기를 측정하는 것이 아니라, 재사용을 통한 시간 절감과 일관된 사용자 경험(UX) 제공이라는 정량적·정성적 성과를 데이터로 증명해야 합니다. 결과적으로 잘 구축된 디자인 시스템은 팀이 확장될 때 발생하는 운영 비용을 줄이고 제품 출시 속도를 가속화하는 강력한 동력이 됩니다. ### 개발 및 디자인 효율성의 정량화 * **시간 절감 효과(Time Savings):** 새로운 기능을 구현할 때 컴포넌트를 처음부터 만드는 대신 기존 시스템을 활용함으로써 절약되는 시간을 측정합니다. 이는 '디자인 시스템 적용 전후의 평균 태스크 완료 시간' 비교를 통해 산출됩니다. * **핸드오프 비용 감소:** 디자이너와 개발자 간의 소통 과정에서 발생하는 모호함을 줄여줍니다. 명확한 스펙과 코드 조각(Code Snippets)이 제공됨에 따라 불필요한 커뮤니케이션 루프가 단축됩니다. * **유지보수 효율성:** 시스템 전반에 걸친 스타일 변경이나 버그 수정을 한 곳(Single Source of Truth)에서 처리함으로써 발생하는 리소스 절감 효과를 분석합니다. ### 제품 품질과 성능의 최적화 * **UX 일관성 및 브랜드 신뢰도:** 제품 전반에서 동일한 패턴과 인터랙션을 제공함으로써 사용자의 학습 곡선을 낮추고 브랜드에 대한 신뢰도를 높입니다. * **접근성 및 성능 준수:** 디자인 시스템 내의 컴포넌트에 웹 접근성(A11y) 가이드라인을 내재화하여, 개별 팀이 별도의 노력 없이도 법적 준수 사항과 높은 사용성을 확보하게 합니다. * **코드 중복 제거:** 시스템 컴포넌트의 사용률을 높임으로써 중복되는 CSS 및 JavaScript 코드를 줄여 최종 번들 크기를 최적화하고 런타임 성능을 개선합니다. ### 시스템 채택률과 거버넌스 측정 * **채택률(Adoption Rate):** 실제 서비스 코드베이스 내에서 디자인 시스템 컴포넌트가 사용되는 비율을 추적합니다. 'Detached'된 인스턴스의 비율을 모니터링하여 시스템이 실제 요구사항을 얼마나 잘 반영하고 있는지 확인합니다. * **커버리지(Coverage):** 현재 디자인 시스템이 제품에 필요한 UI 요소들을 얼마나 포괄하고 있는지 측정하여, 향후 시스템 확장 우선순위를 결정하는 지표로 삼습니다. * **기여도 및 피드백 순환:** 시스템 외부 팀으로부터 들어오는 기여(Contribution) 수와 피드백 반영 속도를 측정하여 시스템의 생태계가 얼마나 건강하게 작동하는지 평가합니다. 디자인 시스템의 가치를 명확히 전달하기 위해서는 조직의 비즈니스 목표와 연계된 대시보드를 구축하는 것이 좋습니다. 단순히 "얼마나 많은 컴포넌트가 있는가"가 아니라 "시스템이 팀의 혁신 속도를 얼마나 높였는가"에 초점을 맞추어 이해관계자들을 설득하고 지속적인 투자를 이끌어내야 합니다.

Inside Figma: 엔터프라이즈 (새 탭에서 열림)

A deep dive on deep search Inside Figma Engineering Product updates Design systems

60fps의 React: Figma (새 탭에서 열림)

Figma가 발표한 **'Figma to React'**와 관련된 기술적 변화와 주요 기능을 요약한 내용입니다. Figma는 디자인과 엔지니어링 사이의 장벽을 허물기 위해 디자인 구성 요소를 React 코드로 직접 변환하는 기능을 강화했습니다. 이 도구는 디자이너가 의도한 시각적 요소를 개발자가 수동으로 재구현하는 번거로움을 줄이고, 디자인 시스템과 실제 코드 간의 일관성을 보장하는 데 목적을 둡니다. 결론적으로, Figma는 단순한 디자인 도구를 넘어 개발 생산성을 극대화하고 제품 출시 속도를 높이는 통합 협업 플랫폼으로 진화하고 있습니다. **Dev Mode를 활용한 코드 생성 최적화** - 개발자 전용 인터페이스인 'Dev Mode'를 통해 디자인 요소에서 직접 React 컴포넌트 코드를 추출할 수 있습니다. - 디자인의 오토 레이아웃(Auto Layout) 속성을 Flexbox나 Grid와 같은 최신 CSS 레이아웃 방식으로 정확하게 매핑하여 제공합니다. - 단순한 스타일 복사를 넘어 컴포넌트의 구조와 Props 관계를 고려한 코드 생성을 지원합니다. **디자인 시스템과 코드의 긴밀한 연결** - Figma에서 정의한 변수(Variables)와 스타일 토큰을 코드상의 테마 변수나 디자인 시스템 토큰과 동기화할 수 있습니다. - Tailwind CSS와 같은 최신 CSS 프레임워크를 지원하여, 프로젝트 환경에 맞는 최적화된 클래스 기반 코드를 생성합니다. - 디자인 시스템의 변경 사항이 발생했을 때, 이를 코드 수준에서 어떻게 반영할지 미리 확인하고 적용할 수 있어 관리 효율성이 높아집니다. **VS Code 통합을 통한 개발 흐름 개선** - 'Figma for VS Code' 확장 프로그램을 통해 IDE를 벗어나지 않고도 디자인 문서를 확인하고 코드를 작성할 수 있습니다. - 디자인 에셋을 다운로드하거나 색상 값을 확인하는 반복적인 작업을 편집기 내에서 즉시 수행하여 컨텍스트 스위칭 비용을 최소화합니다. - 코드와 디자인 파일 간의 링크를 유지함으로써, 특정 UI 요소가 디자인의 어떤 부분에서 기인했는지 추적하기 용이합니다. **실용적인 권장 사항** 협업 효율을 극대화하기 위해 디자이너는 Figma 작업 시 오토 레이아웃과 변수를 엄격하게 적용하는 것이 중요합니다. 개발자는 Figma에서 생성된 코드를 그대로 사용하기보다는 프로젝트의 아키텍처에 맞춰 리팩토링하는 기반 작업(Boilerplate)으로 활용할 때 가장 높은 생산성을 얻을 수 있습니다.

쇼피파이에서 협업을 (새 탭에서 열림)

How to evaluate design tools Working Well Tips & inspiration Plugins & tooling

나의 갭 이어에 관한 (새 탭에서 열림)

피그마는 전 세계 K-12(초·중·고) 교실에 디자인 도구를 보급하기 위해 구글과의 파트너십을 강화하고 교육용 기능을 대폭 확장합니다. 단순히 전문가용 도구를 제공하는 것을 넘어, 어린 학생들이 협업과 비판적 사고를 배울 수 있는 기초 교육 플랫폼으로 자리 잡는 것을 목표로 합니다. 이를 통해 미래의 창작자들이 도구의 제약 없이 자신의 아이디어를 시각화하고 디지털 리터러시를 함양할 수 있는 환경을 구축하고자 합니다. ### 크롬북 환경 최적화와 접근성 확대 * 구글 교육용 앱 허브(Google for Education App Hub)에 피그마와 피그잼이 공식적으로 포함되어, 학교 관리자가 수천 명의 학생 기기에 소프트웨어를 손쉽게 배포하고 관리할 수 있습니다. * 저사양 하드웨어가 많은 교육 현장의 특성을 고려하여, 크롬북(Chromebook) 환경에서도 성능 저하 없이 매끄럽게 작동하도록 웹 기반 최적화를 진행했습니다. * 미국 내 많은 학교에서 크롬북이 표준 기기로 사용됨에 따라, 하드웨어 제약으로 인해 디자인 도구에 접근하지 못했던 학생들에게 동등한 학습 기회를 제공합니다. ### 교육 현장에 특화된 학습 경험 설계 * '피그마 포 에듀케이션(Figma for Education)' 프로그램을 통해 교사와 학생을 위한 맞춤형 온보딩 프로세스를 제공하여 디자인 도구를 처음 접하는 사용자도 쉽게 적응할 수 있게 했습니다. * 피그잼(FigJam) 내에 수업 계획 수립, 아이디어 발산, 그룹 활동을 돕는 교육 전용 템플릿 수백 개를 추가하여 교실 내 상호작용을 강화했습니다. * 학생들이 시각적 화이트보드에서 협업하며 문제 해결 능력을 키울 수 있도록 복잡한 UI를 단순화하고 직관적인 조작 방식을 도입했습니다. ### AI를 활용한 수업 효율성 및 창의성 제고 * 피그잼의 AI 기능을 활용하여 교사는 복잡한 수업용 활동지를 즉석에서 생성하거나, 학생들이 제출한 다양한 아이디어를 주제별로 자동 분류하여 정리할 수 있습니다. * 학생들은 AI 기능을 브레인스토밍의 파트너로 활용하여 초기 아이디어를 구체화하거나, 시각적 요소를 빠르게 생성하며 창의적 영감을 얻습니다. * 이러한 자동화 도구들은 교사의 행정적 부담을 줄이고, 학생들이 실질적인 토론과 창작 활동에 더 많은 시간을 할애할 수 있도록 돕습니다. 피그마의 교육 시장 확장은 단순히 사용자 층을 넓히는 전략을 넘어, 디지털 협업 역량을 미래 세대의 필수 소양으로 정의하려는 시도입니다. 교육자들은 피그마의 무료 교육 플랜과 최적화된 도구들을 적극적으로 수업에 도입함으로써, 학생들이 산업 현장에서 실제로 사용하는 기술을 미리 경험하고 창의적인 문제 해결 능력을 갖추도록 지도할 수 있습니다.

Figma에서 일하는 방식 (새 탭에서 열림)

원격 근무가 보편화된 환경에서 팀원 간의 긴밀한 유대감을 유지하는 것은 단순히 정서적 만족을 넘어 팀의 생산성과 직결되는 핵심 요소입니다. 이 글은 물리적 거리가 멀어진 상태에서도 팀의 응집력을 유지하기 위해서는 '의도적인 설계'와 '투명한 소통 구조'가 필수적이라고 강조합니다. 결과적으로, 원격 팀은 암묵적인 규칙을 명시적인 프로세스로 전환함으로써 대면 근무 못지않은 강력한 협업 문화를 구축할 수 있습니다. **암묵적 정보의 명시화와 문서화** * 사무실에서 자연스럽게 오가던 대화가 사라지기 때문에, 모든 의사결정 과정과 맥락을 문서로 남기는 '글쓰기 중심의 문화'를 정착시켜야 합니다. * 정보의 비대칭을 방지하기 위해 프로젝트의 진행 상황, 변경 사항, 주요 논의 사항을 누구나 접근 가능한 공유 저장소에 기록합니다. * 비동기 커뮤니케이션을 기본 원칙으로 삼아, 시차가 다르거나 업무 집중 시간이 다른 팀원들이 정보에서 소외되지 않도록 배려합니다. **사회적 자본 축적을 위한 의도적인 상호작용** * 업무 외적인 유대감을 쌓기 위해 가상 커피 타임이나 온라인 팀 빌딩 활동과 같은 '비공식적 소통 채널'을 정기적으로 운영합니다. * 화상 회의 시작 전 5분 동안 일상적인 대화를 나누는 등 스몰 토크를 위한 시간을 의도적으로 배정하여 심리적 안전감을 형성합니다. * 텍스트 기반 소통에서 발생할 수 있는 오해를 줄이기 위해 이모지나 GIF 등을 활용하여 감정적 맥락을 풍부하게 전달하는 노력이 필요합니다. **투명한 운영 리추얼과 역할 정의** * 팀 전체가 동기화될 수 있는 정기적인 미팅(Sync-up)을 통해 목표를 공유하고, 각자의 역할과 책임(R&R)을 명확히 정의하여 협업의 혼선을 최소화합니다. * 원격 환경일수록 성과 측정의 기준을 '근무 시간'이 아닌 '결과물'과 '기여도' 중심으로 개편하여 팀원 간의 신뢰를 공고히 합니다. * 일대일 면담(1:1 meeting)을 강화하여 팀원의 커리어 성장과 개인적인 고충을 정기적으로 확인하고 지원하는 체계를 갖춥니다. 성공적인 원격 협업을 위해서는 팀원들이 '자연스럽게' 연결될 것이라는 기대를 버리고, 모든 소통과 관계 형성을 하나의 시스템으로 설계해야 합니다. 기술적 도구를 도입하는 것에 그치지 않고, 팀원 모두가 공유된 맥락 속에서 함께 움직이고 있다는 신뢰를 주는 것이 원격 팀의 유대감을 유지하는 가장 확실한 방법입니다.

Figma 커뮤니티 (새 탭에서 열림)

피그마는 전 세계 디자이너들이 자원과 지식을 공유하는 '커뮤니티' 기능을 디자인 프로세스의 핵심 생태계로 진화시키고자 합니다. 단순히 디자인 파일을 공유하는 저장소를 넘어, 플러그인, 위젯, 디자인 시스템 등 방대한 리소스를 효율적으로 탐색하고 크리에이터들 간의 연결을 강화하는 것이 이번 변화의 핵심입니다. 이를 통해 피그마는 모든 사용자가 전 세계의 집단지성을 활용해 더 빠르게 협업하고 성장할 수 있는 환경을 구축했습니다. **리소스 탐색 및 발견 경험의 고도화** * 수십만 개의 리소스를 사용자가 쉽고 빠르게 찾을 수 있도록 검색 알고리즘과 필터링 시스템을 대폭 개선했습니다. * 디자인 시스템, 아이콘 세트, 와이어프레임 템플릿 등 카테고리별로 세분화된 큐레이션을 제공하여 작업 목적에 맞는 최적의 결과물을 제안합니다. * 피그마 팀이 직접 검증하고 추천하는 고품질 리소스를 별도로 노출하여 커뮤니티 자산의 신뢰도를 높였습니다. **크리에이터 중심의 소통 및 프로필 강화** * 크리에이터 프로필 페이지를 강화하여 개별 디자이너나 팀이 자신의 작업물과 전문성을 효과적으로 브랜딩할 수 있는 공간을 제공합니다. * 특정 크리에이터를 팔로우하고 새로운 리소스 업데이트 시 실시간 알림을 받는 기능을 통해 창작자와 사용자 간의 지속적인 상호작용을 유도합니다. * 단순 공유를 넘어 댓글과 피드백 기능을 활성화하여, 리소스의 품질을 함께 개선해 나가는 커뮤니티 기반의 학습 문화를 조성합니다. **워크플로우와 커뮤니티의 유기적 결합** * 피그마 캔버스 내에서 커뮤니티 리소스를 직접 탐색하고 즉시 적용할 수 있는 인터페이스를 최적화하여 작업 흐름의 단절을 최소화했습니다. * 플러그인과 위젯의 접근성을 높여 반복적인 수작업을 자동화하고, 팀 전체의 생산성을 높일 수 있는 도구들을 쉽게 도입할 수 있게 했습니다. * 유료 및 무료 리소스의 공존을 통해 크리에이터에게는 보상을, 사용자에게는 고도화된 솔루션을 제공하는 지속 가능한 경제 생태계를 지향합니다. 디자이너는 이제 모든 작업을 바닥부터 시작할 필요 없이, 커뮤니티에 공유된 검증된 디자인 시스템과 에셋을 활용해 본연의 전략적 설계에 더 집중할 수 있습니다. 신뢰할 수 있는 크리에이터를 팔로우하고 최신 플러그인을 업무 프로세스에 적극적으로 도입하여 팀의 작업 속도와 디자인 퀄리티를 동시에 높여보시길 추천합니다.

피그마 내부: 원격 인 (새 탭에서 열림)

피그마(Figma)의 'Maker Week'는 구성원들이 일상적인 로드맵 업무에서 벗어나 오직 창의적인 실험과 제작에만 몰입할 수 있도록 설계된 반기별 내부 행사입니다. 이 행사는 단순한 사내 이벤트를 넘어 제품 혁신을 가속화하고 전사적인 협업 문화를 공고히 하는 피그마 기업 문화의 핵심적인 축으로 작동합니다. 리더십의 전폭적인 지지와 체계적인 운영을 통해 창의적인 아이디어가 실제 제품 기능으로 이어지는 선순환 구조를 만듭니다. ### 메이커 중심의 문화와 리더십의 역할 * 리더십은 직원들이 단기적인 KPI나 생산성 압박에서 완전히 벗어나 새로운 시도를 할 수 있도록 공식적인 '시간적 공간'을 보장합니다. * 엔지니어와 디자이너뿐만 아니라 운영, 마케팅, 영업 등 모든 직군이 참여하여 '모든 구성원이 메이커가 될 수 있다'는 가치를 공유합니다. * 실패에 대한 두려움 없이 실험할 수 있는 환경을 조성하며, 결과물의 완성도보다 과정을 통한 학습과 직군 간의 연결에 더 큰 가치를 둡니다. ### 체계적인 운영과 실행 전략 (Operations) * 행사가 시작되기 전 아이디어 피칭과 팀 빌딩 과정을 거치며, 평소 함께 일하기 어려웠던 타 부서원들과의 협업을 의도적으로 유도합니다. * 운영팀은 참가자들이 오직 '제작'에만 집중할 수 있도록 식사, 물리적 작업 공간, 원격 협업 툴 등 모든 물류 시스템을 세밀하게 지원합니다. * 글로벌 오피스 간의 격차를 줄이기 위해 하이브리드 형태의 커뮤니케이션 채널을 운영하여 전 세계 모든 피그마 구성원이 동시에 참여하는 경험을 제공합니다. ### 프로토타입에서 실제 제품으로의 진화 * Maker Week 기간 동안 탄생한 혁신적인 프로토타입들은 실제 피그마의 주요 기능(예: 오토 레이아웃 개선, FigJam의 초기 아이디어 등)으로 발전하는 중요한 원천이 됩니다. * 마지막 날 진행되는 'Demo Day'를 통해 각 팀의 성과를 전사에 공유하며, 기술적 통찰력과 창의적인 문제 해결 방식을 나누는 축제의 장을 만듭니다. * 평소 우선순위에서 밀려있던 기술 부채 해결이나 사소하지만 사용자 경험에 큰 영향을 미치는 디테일한 기능 개선들이 이 시기에 집중적으로 구현됩니다. 조직 내에서 혁신을 지속하려면 단순히 '창의성'을 강조하는 것을 넘어, 이를 뒷받침할 수 있는 전폭적인 리더십의 신뢰와 정교한 운영 프로세스가 필수적입니다. Maker Week와 같은 집중적인 제작 기간은 제품의 기술적 외연을 확장할 뿐만 아니라, 구성원들에게 강력한 동기부여와 소속감을 제공하여 장기적인 성장의 발판이 됩니다.

Config Europe 발표: 발표자 (새 탭에서 열림)

Reflections on Config, our first user conference Inside Figma Config Events News

기능 비하인드: (새 탭에서 열림)

피그마(Figma)는 전사 구성원이 일상 업무에서 벗어나 창의적인 프로젝트에 몰입할 수 있도록 돕는 '메이커 위크(Maker Week)'를 통해 혁신적인 조직 문화를 구축하고 있습니다. 이 행사는 단순한 사내 해커톤을 넘어, 부서 간 장벽을 허물고 제품의 미래 방향성을 제시하는 핵심적인 엔진 역할을 수행합니다. 피그잼(FigJam)과 같은 주요 제품이 이 기간의 아이디어에서 시작되었듯, 자율성이 보장된 환경이 어떻게 실제 비즈니스 가치와 제품 혁신으로 이어지는지를 명확히 보여줍니다. **메이커 위크의 핵심 원칙과 철학** * 기존의 업무 우선순위나 로드맵에서 완전히 벗어나, 평소 시도하고 싶었던 아이디어를 자유롭게 구현하는 데 집중합니다. * 엔지니어와 디자이너뿐만 아니라 운영, 리더십, 마케팅 등 전 직원이 참여하여 직군 간 경계를 넘나드는 협업을 장려합니다. * 완벽한 결과물보다는 '만드는 과정' 자체를 즐기는 문화를 지향하며, 실험적인 시도가 실패하더라도 그 과정에서 얻는 배움을 중시합니다. **리더십의 전폭적인 지원과 운영 전략** * 리더십 팀은 메이커 위크 기간 동안 모든 정기 미팅을 취소함으로써, 구성원들이 방해받지 않고 프로젝트에 온전히 몰입할 수 있는 물리적 시간을 보장합니다. * 단순한 관찰자에 머물지 않고 리더들도 직접 프로젝트에 참여하거나 팀을 지원하며, 수평적인 소통 구조를 강화하는 계기로 삼습니다. * 글로벌 오피스와 원격 근무자들이 모두 소외되지 않도록 온·오프라인 하이브리드 인프라를 구축하고, 기술적 지원을 아끼지 않습니다. **비하인드 스토리와 가시적인 성과** * 피그마의 화이트보드 협업 툴인 피그잼(FigJam)은 메이커 위크 기간 중 탄생한 대표적인 성공 사례로, 프로토타입이 실제 핵심 제품군으로 확장되었습니다. * 대규모 기능 외에도 개발 생산성을 높이는 내부 자동화 도구나 사용자 경험을 개선하는 소소한 UI 디테일 등 제품의 완성도를 높이는 다양한 결과물이 도출됩니다. * 평소 협업 기회가 적었던 동료들과 프로젝트를 수행하며 조직 내 유대감을 형성하고, 직무에 대한 동기부여와 창의적 에너지를 재충전하는 효과를 거둡니다. 메이커 위크는 기업이 성장을 위해 속도만을 강조하기보다, 잠시 멈춰 창의성을 발휘할 수 있는 '구조화된 자유'를 제공할 때 진정한 혁신이 일어난다는 점을 시사합니다. 조직 내 창의적 정체를 겪고 있다면, 구성원들에게 아무런 제약 없이 '만들 수 있는 권리'를 부여하는 전사적 실험을 고려해 볼 가치가 있습니다.

딥 서치 심층 분석 | 피 (새 탭에서 열림)

피그마(Figma)는 웹 브라우저라는 제한된 환경에서 복합적인 그래픽 작업과 실시간 협업을 동시에 구현하기 위해 독자적인 인프라 아키텍처를 구축했습니다. 이들은 성능 한계를 극복하기 위해 C++ 엔진을 웹어셈블리(WebAssembly)로 컴파일하여 사용하며, 모든 사용자가 동일한 상태를 공유할 수 있도록 '파일별 단일 프로세스' 모델 기반의 멀티플레이어 서버를 운영합니다. 결과적으로 피그마는 웹의 접근성과 데이티브 앱의 고성능, 그리고 실시간 동기화라는 세 가지 요소를 성공적으로 결합해냈습니다. ### 웹 기반 고성능 렌더링을 위한 C++와 WebAssembly 활용 * 피그마의 핵심 편집기 엔진은 자바스크립트가 아닌 C++로 작성되었으며, 이를 웹어셈블리(Wasm)로 컴파일하여 브라우저에서 실행합니다. * 이는 복잡한 벡터 계산과 대용량 그래픽 데이터 처리를 네이티브 앱에 가까운 속도로 수행하기 위함이며, 브라우저의 가비지 컬렉션으로 인한 성능 저하 문제를 방지합니다. * 단일 코드베이스를 유지함으로써 웹, 데스크톱 앱(Electron), 모바일 앱 등 다양한 플랫폼에서 동일한 렌더링 결과와 비즈니스 로직을 보장합니다. ### 멀티플레이어 서버와 실시간 상태 동기화 * 피그마의 실시간 협업 엔진은 '중앙 집중식 권한 서버' 모델을 따릅니다. 각 피그마 파일은 멀티플레이어 서버의 특정 프로세스에 할당되어 해당 파일의 유일한 진실 공급원(Source of Truth) 역할을 합니다. * 사용자가 수정을 하면 클라이언트는 변경 사항(Operation)을 서버로 보내고, 서버는 이를 검증한 뒤 파일의 현재 상태에 적용하고 다른 사용자들에게 즉시 전파합니다. * 일반적인 CRDT(Conflict-free Replicated Data Type) 방식의 복잡성을 피하기 위해, 서버가 작업 순서를 결정하는 방식을 채택하여 데이터 정합성을 엄격하게 유지합니다. ### LiveGraph를 통한 효율적인 데이터 구독 * 기존의 REST API 방식은 빈번하게 변하는 디자인 데이터의 업데이트를 실시간으로 반영하기에 비효율적이었습니다. * 이를 해결하기 위해 피그마는 'LiveGraph'라는 커스텀 리액티브 데이터 시스템을 구축했습니다. * 클라이언트가 필요한 데이터의 쿼리를 서버에 등록하면, 데이터베이스에 변경이 발생할 때마다 LiveGraph가 해당 변경 사항을 감지하여 관련 클라이언트에만 실시간으로 업데이트를 푸시합니다. ### 안정성과 확장성을 위한 인프라 계층 구조 * 피그마의 백엔드는 초기 Ruby on Rails 모놀리스에서 시작하여, 현재는 성능이 중요한 서비스들을 Go와 Rust 기반의 마이크로서비스로 점진적으로 분리하고 있습니다. * 데이터 저장소로는 AWS RDS(PostgreSQL)와 S3를 주로 사용하며, 전 세계 사용자에게 낮은 지연 시간을 제공하기 위해 에지 로케이션(PoP)을 활용하여 네트워크 경로를 최적화합니다. * 대규모 트래픽과 복잡한 파일 처리를 위해 수천 개의 멀티플레이어 서버 노드를 동적으로 스케일링하며, 특정 노드 장애 시에도 사용자의 작업을 보호할 수 있는 복구 메커니즘을 갖추고 있습니다. 피그마의 사례는 웹 기술의 한계를 넘기 위해 표준 기술(JS/HTML)에 안주하지 않고, 문제의 본질에 맞는 맞춤형 엔진과 프로토콜을 직접 설계하는 것이 중요하다는 것을 보여줍니다. 고성능 실시간 협업 서비스를 설계한다면 피그마처럼 "단일 소유권 기반의 동기화"와 "플랫폼 중립적인 고성능 코어 엔진"의 조합을 고려해 보는 것이 좋습니다.

BT가 통신 산업을 계속 (새 탭에서 열림)

Zoom은 제품 개발 과정의 일관성과 효율성을 높이기 위해 Figma를 도입하여 디자인 워크플로우를 전면 개편했습니다. 파편화된 도구들을 Figma라는 단일 플랫폼으로 통합함으로써, 디자이너와 엔지니어 간의 실시간 협업 체계를 구축하고 디자인 시스템의 관리 효율을 극대화했습니다. 이를 통해 Zoom은 글로벌 성장에 발맞추어 디자인 품질을 유지하면서도 배포 속도를 획기적으로 높일 수 있었습니다. ### 파편화된 도구 체계에서 단일 플랫폼으로의 전환 * 기존에는 기획, 디자인, 프로토타이핑, 개발 전달(Handoff) 단계에서 각기 다른 도구를 사용하여 정보의 파편화가 발생했습니다. * Figma를 도입함으로써 모든 디자인 자산을 하나의 공간에서 관리하게 되었으며, 팀원들이 최신 버전의 디자인을 즉각적으로 확인할 수 있게 되었습니다. * 클라우드 기반의 실시간 협업 기능을 통해 피드백 루프를 단축하고, 물리적 위치에 상관없이 동시 작업이 가능한 환경을 조성했습니다. ### 디자인 시스템을 통한 시각적 일관성 확보 * 'Zoom Design System'을 Figma 라이브러리로 구축하여 모든 제품군에서 일관된 UI/UX를 제공합니다. * 컴포넌트(Components)와 변체(Variants) 기능을 적극 활용해 버튼, 아이콘, 입력창 등 공통 요소를 규격화하고 재사용성을 높였습니다. * 오토 레이아웃(Auto Layout) 기능을 통해 다양한 화면 크기와 언어 설정에 유연하게 대응하는 반응형 디자인을 효율적으로 제작합니다. ### 개발자와의 협업 효율 및 핸드오프 개선 * 디자인에서 개발로 넘어가는 과정에서의 모호함을 줄이기 위해 개발자 모드(Dev Mode)를 활용하여 정확한 수치와 코드를 전달합니다. * 디자이너가 컴포넌트를 업데이트하면 해당 컴포넌트를 사용하는 모든 파일에 즉시 반영되므로, 개발자가 최신 사양을 확인하기 위해 소통하는 시간을 낭비하지 않게 되었습니다. * Figma 내에 기획서와 기술 문서를 함께 배치하여, 엔지니어가 디자인의 의도와 비즈니스 로직을 한눈에 파악할 수 있도록 구성했습니다. ### 워크플로우 최적화와 자동화 플러그인 활용 * 반복적인 작업을 줄이기 위해 다양한 Figma 플러그인을 도입하고, 자체적인 워크플로우에 최적화된 도구들을 사용합니다. * 브랜칭(Branching) 기능을 통해 메인 디자인 시스템을 해치지 않으면서 새로운 아이디어를 실험하고 검토한 뒤 병합하는 체계적인 프로세스를 운영합니다. * 디자인 자산의 버전 관리가 용이해짐에 따라 과거 의사결정 과정을 추적하거나 필요 시 이전 상태로 복구하는 작업이 간소화되었습니다. 성공적인 디자인 워크플로우 구축을 위해서는 단순히 좋은 도구를 사용하는 것을 넘어, '단일 진실 공급원(Single Source of Truth)'으로서의 디자인 시스템을 정립하는 것이 중요합니다. Figma의 컴포넌트 라이브러리와 협업 기능을 적극 활용하여 디자인과 코드 사이의 간극을 줄이고, 팀 전체가 동일한 디자인 언어를 공유하는 환경을 구축할 것을 추천합니다.