Figma Persona 20 (새 탭에서 열림)
Frame 2021: Design by the numbers Insights Design Report Collaboration News
Magician이 Figma의 텍스트 (새 탭에서 열림)
FigJam AI는 팀이 협업 과정에서 겪는 '빈 캔버스 증후군'을 해결하고, 아이디어 구상부터 실행까지의 흐름을 가속화하기 위해 도입되었습니다. 생성형 AI 기술을 활용해 복잡한 보드 설정, 스티키 노트 정리, 미팅 내용 요약과 같은 반복적이고 소모적인 작업을 자동화합니다. 이를 통해 팀원들은 단순 행정 업무가 아닌 본질적인 문제 해결과 창의적인 협업에 더 많은 시간을 할애할 수 있습니다. **생성형 프롬프트를 통한 맞춤형 캔버스 구축** * 사용자가 간단한 텍스트 프롬프트를 입력하면 브레인스토밍, 회고, 프로젝트 계획을 위한 보드 레이아웃을 즉시 생성합니다. * 단순히 템플릿을 불러오는 것이 아니라, 사용자의 구체적인 상황과 요구사항을 반영하여 위젯, 스티키 노트, 섹션이 포함된 구조화된 작업 공간을 제공합니다. * 보드 준비 시간을 획기적으로 단축하여 팀이 즉시 핵심 논의에 집중할 수 있도록 돕습니다. **지능적인 데이터 분류 및 핵심 내용 요약** * 수백 개의 스티키 노트를 테마별로 자동 분류(Sort)하여 산재한 아이디어를 체계적인 그룹으로 구조화합니다. * '요약(Summarize)' 기능을 통해 캔버스에 기록된 방대한 피드백과 아이디어 중 핵심 인사이트와 다음 실행 단계(Action items)를 한 줄로 도출합니다. * 화이트보드 세션 이후 발생하는 정보 정리의 병목 현상을 해결하여 팀 간의 정렬(Alignment)을 돕습니다. **시각화 및 아이디어 확장을 돕는 위젯 활용** * Jambot과 같은 AI 위젯을 통해 스티키 노트의 내용을 바탕으로 마인드맵을 그리거나, 아이디어를 다각도로 확장할 수 있습니다. * 텍스트 기반의 아이디어를 시각적인 다이어그램이나 흐름도로 빠르게 변환하여 복잡한 개념을 쉽게 시각화합니다. * AI가 제안하는 질문이나 대안적 관점을 통해 브레인스토밍 과정에서 창의적인 자극을 제공합니다. **추천 활용 팁** FigJam AI를 처음 도입한다면 회의 직후 '스티키 노트 자동 분류'와 '요약' 기능부터 시작해 보시기 바랍니다. 수작업으로 정보를 정리하던 시간을 절약하는 것만으로도 협업의 리듬이 끊기지 않고 다음 단계로 나아가는 큰 효과를 경험할 수 있습니다.
WIP에 오신 것을 환영 (새 탭에서 열림)
피그마(Figma)의 제품 부사장 Sho Kuwamoto는 도구가 창작자의 사고 과정을 방해하지 않아야 한다는 '공예 정신(Craft)'을 피그마 제품 철학의 핵심으로 강조합니다. 그는 PM의 역할을 단순한 관리자가 아닌, 디자이너와 엔지니어가 최상의 결과물을 낼 수 있도록 마찰을 제거하고 제품의 직관성을 유지하는 조력자로 정의합니다. 피그마는 급격한 성장 속에서도 사용자의 복잡한 워크플로우를 깊이 이해하고, 기술적 탁월함과 사용 편의성 사이의 균형을 유지하는 데 전력을 다하고 있습니다. ### 피그마가 정의하는 '제품 공예(Product Craft)' * 단순히 기능이 작동하는 것을 넘어, 사용자가 도구를 사용할 때 느끼는 미세한 반응성과 직관적인 피드백을 최우선으로 여깁니다. * PM은 사용자 경험의 아주 작은 디테일에도 집착해야 하며, 이러한 작은 요소들이 모여 피그마만의 독보적인 전문성과 신뢰를 형성한다고 믿습니다. * 창작자를 위한 도구인 만큼, 도구가 사용자의 창의성을 제한하는 것이 아니라 사용자의 의도를 정확하게 구현하는 '확장된 손'의 역할을 수행해야 함을 강조합니다. ### FigJam의 탄생과 확장된 협업 가치 * FigJam은 피그마의 정교한 설계 도구와는 대조적으로, 아이디어 구상 단계에서의 '자유롭고 느슨한 사고'를 지원하기 위해 설계되었습니다. * 기존 피그마가 픽셀 단위의 완벽한 결과물을 만드는 데 집중했다면, FigJam은 팀원 간의 브레인스토밍과 정서적 교류를 위한 놀이터 같은 공간을 지향합니다. * 실시간 멀티플레이어 경험을 극대화하여 협업이 단순히 업무를 나누는 과정이 아닌, 함께 즐겁게 창작하는 과정이 되도록 설계상의 의도적인 재미 요소를 포함했습니다. ### 성장하는 조직에서의 PM의 역할과 역량 * 회사의 규모가 커지면서 비즈니스 지표와 사용자 가치 사이의 충돌이 발생할 수 있지만, 피그마는 항상 '사용자의 문제 해결'을 모든 의사결정의 최상위에 둡니다. * PM은 기술적 제약 사항을 깊이 있게 이해해야 하며, 엔지니어와 디자이너가 창의적인 해결책을 찾을 수 있도록 맥락을 제공하고 올바른 질문을 던지는 능력이 필수적입니다. * 모든 팀원이 제품에 대해 높은 기준을 가질 수 있도록 독려하고, 제품의 본질적인 품질을 훼손하지 않으면서 속도감 있게 기능을 배포하는 문화적 토대를 만듭니다. ### 실용적인 조언 피그마의 사례는 제품의 기능이 늘어난다고 해서 반드시 사용성이 복잡해질 필요는 없음을 보여줍니다. PM은 사용자에게 '마법 같은 경험'을 선사하기 위해 기술적 디테일을 놓치지 말아야 하며, 팀 전체가 도구에 대한 애정과 장인 정신을 공유할 때 비로소 시장에서 사랑받는 제품이 탄생할 수 있습니다.
피그마 접근성 팀과의 대화 | 피그마 블로그 (새 탭에서 열림)
Figma는 모든 사람이 디자인 과정에 참여할 수 있도록 시각적 캔버스의 장벽을 허물고, 보조 공학 기기 사용자들을 위한 접근성 혁신을 추진하고 있습니다. 단순히 UI를 수정하는 수준을 넘어, 복잡한 공간 정보를 시맨틱 데이터로 변환하여 스크린 리더와 키보드만으로도 디자인 구조를 이해할 수 있는 환경을 구축했습니다. 이러한 노력은 디자인 도구가 지향해야 할 포용성의 새로운 기준을 제시하며, 협업의 범위를 시각 장애인 및 운동 장애인 사용자에게까지 확장하는 결실을 보았습니다. ### 시각적 캔버스의 시맨틱 구조화 * 기존의 웹 접근성은 선형적인 문서 구조에 최적화되어 있으나, Figma의 캔버스는 비선형적이고 복합적인 레이어 구조를 가집니다. * 이를 해결하기 위해 Figma는 캔버스의 객체들을 스크린 리더가 해석할 수 있는 별도의 '시맨틱 레이어'로 매핑하여 시각적 정보를 텍스트와 구조 정보로 변환했습니다. * 디자인 파일 내의 레이어 계층 구조(부모-자식 관계)를 트리 형태로 전달하여, 시각 없이도 디자인의 맥락과 논리적 흐름을 파악할 수 있게 설계했습니다. ### 키보드 내비게이션 및 포커스 관리 최적화 * 마우스 없이도 복잡한 디자인 요소를 탐색할 수 있도록 포커스 트래킹 시스템을 개선하고, 시각적으로 명확한 포커스 표시기를 도입했습니다. * 캔버스 내 수많은 객체 사이를 빠르게 이동할 수 있는 '건너뛰기 링크'와 단축키 시스템을 정교화하여 탐색 효율성을 높였습니다. * 객체의 크기, 색상, 위치와 같은 속성 정보를 스크린 리더가 사용자에게 일관성 있게 전달하도록 ARIA(Accessible Rich Internet Applications) 속성을 고도화했습니다. ### 협업을 위한 접근성 기능 강화 * 디자인 검토 과정에서 주석(Comments)이나 피드백을 보조 공학 기기 사용자가 실시간으로 확인하고 응답할 수 있는 인터페이스를 마련했습니다. * 다양한 사용자가 동시에 작업하는 환경에서도 현재 누가 어디를 보고 있는지, 어떤 요소가 수정되었는지를 음성으로 안내받을 수 있는 기능을 강화했습니다. * 접근성 체크리스트와 플러그인을 통해 디자이너 스스로가 접근성이 높은 결과물을 만들 수 있도록 돕는 도구적 지원을 병행하고 있습니다. 접근성은 한 번의 업데이트로 완성되는 것이 아니라 지속적인 개선이 필요한 과정입니다. 개발자와 디자이너는 Figma가 제공하는 시맨틱 인프라를 적극 활용하여, 설계 초기 단계부터 대비 대비, 텍스트 크기, 논리적 레이어 순서를 고려하는 '접근성 우선 디자인(Accessibility-First Design)' 습관을 갖출 것을 권장합니다.
피그마의 피드백 선물 (새 탭에서 열림)
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에서 공유되는 세션들을 통해 최신 기술 트렌드를 파악하고 조직에 맞는 최적의 운영 전략을 수립하는 데 큰 도움을 얻을 수 있습니다.
DRUIDS, Datadog (새 탭에서 열림)
How we use RUM to make design decisions that enhance user experience
Datadog을 구동하는 디자인 시스템, DRUIDS (새 탭에서 열림)
데이터독(Datadog)은 제품군이 급격히 확장됨에 따라 사용자에게 일관된 경험을 제공하고 개발 효율성을 높이기 위해 자체 디자인 시스템인 **DRUIDS**(Datadog Reusable User Interface Design System)를 구축했습니다. DRUIDS는 단순히 디자인 가이드를 제공하는 것에 그치지 않고, 수백 명의 디자이너와 엔지니어가 시스템을 쉽게 이해하고 구현하며 직접 기여할 수 있는 선순환 구조를 만드는 데 집중합니다. 결과적으로 이 시스템은 데이터독의 다양한 제품들이 하나의 통합된 플랫폼처럼 느껴지게 만드는 핵심적인 역할을 수행하고 있습니다. ### 직관적인 탐색과 맥락 파악을 돕는 도구 * **Cmd+K 퀵 내비게이션**: 플랫폼 전반에서 사용되는 퀵 내비 패턴을 문서 사이트에도 적용하여, 사용자가 원하는 컴포넌트, 아이콘, 로고 등을 검색을 통해 즉시 찾을 수 있도록 지원합니다. * **DRUIDS Loupe**: 실제 데이터독 페이지 위에서 단축키를 통해 실행되는 검사 도구로, 화면에 사용된 컴포넌트가 무엇인지 확인하고 해당 소스 코드, 피그마(Figma) 디자인, 문서 페이지로 즉시 이동할 수 있는 링크를 제공합니다. * **개발 환경과의 유기적 연결**: VS Code용 JSDoc 주석을 통해 코드 레벨에서 문서 링크를 제공하며, 소스 코드와 디자인 도구 간의 양방향 연결을 강화하여 정보의 파편화를 방지합니다. ### 코드 중심의 구현 편의성 제공 * **실시간 플레이그라운드**: 디자인 도구만으로는 표현하기 힘든 복잡한 상태와 기능을 확인하기 위해 React, TypeScript, CSS 코드를 기반으로 한 편집 가능한 예제를 제공합니다. 개발자는 여기서 속성(Props)을 변경해보고 실제 운영 환경에 적용할 코드를 즉시 복사할 수 있습니다. * **코드 샌드박스**: 개별 컴포넌트를 조합하여 라이브 프리뷰를 생성하고, 상태값이 포함된 URL을 통해 동료와 공유하거나 버그를 리포트하는 용도로 활용합니다. * **자동 생성되는 API 테이블**: 150개 이상의 컴포넌트 속성이 문서와 불일치하는 것을 방지하기 위해, 소스 코드에서 직접 속성 리스트와 설명을 추출하여 API 테이블을 자동으로 생성함으로써 신뢰할 수 있는 단일 소스(Single Source of Truth)를 유지합니다. ### 표준화된 기여 프로세스와 자동화 * **명확한 기여 가이드라인**: 성능, 접근성, 테스트, 명명 규칙 등 핵심 고려 사항을 포함한 가이드라인을 제공하여, 전사 엔지니어가 베스트 프랙티스를 유지하며 시스템을 발전시킬 수 있도록 돕습니다. * **CLI 툴링을 통한 보일러플레이트 제거**: `yarn component [name]`과 같은 명령어를 통해 유닛 테스트, 문서 예제 등 컴포넌트 생성에 필요한 기본 파일 구조를 자동으로 생성해 줍니다. 이를 통해 기여자는 단순 반복 작업 대신 설계와 성능 개선에 더 집중할 수 있습니다. 데이터독은 최근 비공개였던 DRUIDS 문서 사이트를 외부에 공개하며 자사의 UX 패턴을 공유하기 시작했습니다. 대규모 엔터프라이즈 환경에서 디자인 시스템의 성공은 단순히 아름다운 컴포넌트를 만드는 것이 아니라, 개발자와 디자이너가 시스템을 신뢰하고 손쉽게 사용할 수 있는 도구와 문화를 구축하는 데 있음을 잘 보여줍니다.
디자인 인재 유치 (새 탭에서 열림)
Digital design is now a real job Insights Leadership Report Thought leadership