auto-layout

21 개의 포스트

figma3분 읽기큐레이션 요약

Config Europe 발표: 발표자

Figma는 커뮤니티의 경험과 아이디어를 중심으로 한 가상 컨퍼런스 **Config Europe**를 2020년 9월 17일 개최한다고 발표했다. 온라인 전환을 통해 지역과 규모의 한계를 넘어 누구나 참여할 수 있도록 했으며, 발표자 제안과 무료 참가 신청을 모두 열었다. 특히 처음 발표하는 사람도 환영하고 지원하겠다는 점을 강조했다. ## Config Europe 개최 배경 - Figma는 앞서 샌프란시스코에서 첫 사용자 컨퍼런스 Config를 개최했다. - 약 1,200명이 현장에 참석했고 온라인으로도 많은 사용자가 참여했다. - 하지만 행사 장소와 규모 때문에 참석하고 싶어도 참여하지 못하는 사람들이 있었다. - 세계 여러 도시에서 행사를 열 계획이었지만, 코로나19로 인해 오프라인 계획을 잠정 중단했다. - 온라인 행사를 통해서도 Config의 핵심 목표인 커뮤니티의 목소리 확대, 지식 공유, 연결을 실현하고자 했다. ## 발표자 모집과 참여 방식 - 발표 제안 마감일은 **2020년 7월 31일**이었다. - 발표 형식은 다음과 같이 다양했다. - 일반 발표 - 패널 토론 - 라이트닝 토크 - 워크숍 - 발표 경험이 없는 사람도 지원할 수 있으며, 첫 발표자를 적극적으로 환영했다. - 발표자로 선정되면 다음과 같은 지원을 제공했다. - IT 지원 및 장비 - Figma 제품 전문가의 도움 - 발표 아이디어를 구체화하는 편집 지원 - 선정되지 않은 제안도 라이브스트림이나 블로그 글 등 다른 콘텐츠 기회에 적합하면 별도로 안내할 예정이었다. ## 주요 콘텐츠 트랙 ### 디자인 시스템 구축과 유지 - 디자인 시스템을 처음 시작하는 방법 - 규모가 커지는 조직에서 디자인 시스템을 확장하는 방법 - 컴포넌트 구축과 관리 - 스타일 가이드 개선 - 팀 구성원의 참여와 도입을 이끌어내는 방법 ### Figma 심층 활용 - Figma에서 디자인 작업 속도를 높이는 방법 - 플러그인 활용 - Auto Layout 사용법 - 컴포넌트 기반 작업 - 효율적인 디자인 워크플로 구축 ### 프로세스, 문화, 팀 빌딩 - 디자이너와 팀원 채용 및 채용 기준 - 팀 문화를 만드는 방법 - 조직 내 프로세스와 협업 규칙 수립 - 원격 근무 환경에서의 팀 운영과 커뮤니케이션 ### 디자인의 개방과 포용성 - 디자인 프로세스를 더 포괄적으로 만드는 방법 - 접근성을 고려한 디자인 - 디자이너가 아닌 사람도 디자인 과정에 참여시키는 방법 - 다양한 구성원의 의견을 반영하는 협업 방식 ## 참가자 모집과 행사 운영 - Config Europe는 전 세계 누구나 무료로 참가할 수 있도록 계획됐다. - 2020년 8월 20일에 행사 일정 공개와 참가 등록을 시작할 예정이었다. - 발표자 외에도 다음과 같은 커뮤니티 프로그램이 마련될 예정이었다. - 멘토링 - 네트워킹 세션 - 소셜 이벤트 - 발표 제안 결과는 2020년 8월 11일까지 안내할 계획이었다. 이번 발표는 온라인 행사를 단순히 오프라인 행사의 대체재로 보는 대신, 더 많은 사용자가 참여하고 자신의 경험을 공유할 수 있는 커뮤니티 플랫폼으로 활용하려는 시도였다. 기술 행사나 커뮤니티를 기획할 때도 규모나 장소보다 참여 장벽을 낮추고, 초보자와 다양한 배경의 참가자가 기여할 수 있도록 지원하는 것이 중요하다는 점을 보여준다.

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

교실에서 활용할 수 있는

Figma를 활용한 실습 중심 수업은 학생들이 디자인 도구를 익히는 동시에 사고·제작·협업 능력을 기르는 데 효과적이다. 글에서는 초급부터 중급까지 다양한 수준의 학생을 대상으로, Figma의 협업 기능과 컴포넌트·오토 레이아웃·그리드 등을 활용하는 교실 활동을 소개한다. 활동 결과물을 하나의 파일에 모아 갤러리처럼 공유하면 서로의 작업 과정과 디자인 스타일을 관찰하고 피드백할 수 있다. ## 수업 첫 주에 적합한 학생 트레이딩 카드 - 학생들이 소셜 미디어 프로필 형태의 자기소개 카드를 제작한다. - 학생 간 친밀감을 높이는 동시에 Figma의 기본 기능을 익힐 수 있다. - **Auto Layout**과 **컴포넌트**를 활용해 재사용 가능한 프로필 요소를 만든다. - 모든 학생이 같은 파일에서 작업하도록 하면 서로의 제작 과정과 스타일을 볼 수 있다. - 완성 후 별도의 페이지를 만들어 결과물을 갤러리처럼 전시한다. - 숙련된 학생은 직접 질문이나 아이스브레이커 요소를 추가할 수 있다. - 난이도: 초급 - 주요 기능: Auto Layout, Multiplayer Editing ## 도형 제작으로 기본 도구 익히기 - 펜 도구, 레이아웃 그리드, 속성 패널을 사용해 하트 모양을 제작한다. - 단순한 형태를 직접 만들며 Figma의 주요 도구에 대한 자신감과 사용 능력을 높인다. - 완성된 하트를 학생별로 전시해 다양한 해석과 스타일을 비교한다. - 추가 과제로 Smart Animate를 사용해 하트가 뛰는 듯한 애니메이션을 만들 수 있다. - 하트 외에 다른 도형을 디자인하고 스타일을 적용하게 할 수도 있다. - 난이도: 초급 - 주요 기능: Pen Tool, Properties Panel, Layout Grid, Smart Animate ## 탱그램으로 형태와 기하학 탐구하기 - 일곱 개의 조각으로 구성된 탱그램 퍼즐을 활용해 형태와 기하학을 학습한다. - 기본 도형을 조합해 동물과 같은 인식 가능한 이미지를 만든다. - 추상적인 형태도 제작하게 하여 기하학적 탐구를 확장한다. - 활동 전에 기하학의 역사에 관한 짧은 설명을 제공하면 학습 맥락을 이해하는 데 도움이 된다. - 숙련도를 높이려면 학생들이 다른 퍼즐을 직접 조사하고 재사용 가능한 퍼즐 세트를 제작하도록 할 수 있다. - 난이도: 초급 - 주요 기능: Components, 회전 및 정렬 ## 연구 결과를 시각화하는 디자인 리서치 페이퍼 - 학생들이 조사한 연구 결과를 설득력 있는 시각 자료로 표현한다. - 완성된 결과물을 공동 문서에 모아 학생들이 서로 읽고 댓글을 남기도록 한다. - 정보를 어떻게 배치하고 전달할지 고민하면서 시각적 위계와 커뮤니케이션 디자인 원리를 익힌다. - 결과물에 대한 토론을 통해 연구 내용뿐 아니라 편집과 시각화 방식도 함께 비평할 수 있다. - 난이도: 초급 - 주요 기능: Layout Grids, Keyboard Shortcuts ## 재사용 가능한 채팅 창 컴포넌트 만들기 - 학생들이 협업 문서 안에서 대화하고 시각적 피드백을 주고받을 수 있는 채팅 창을 제작한다. - 각자 직접 커스텀 컴포넌트를 만들어 향후 프로젝트에도 사용할 수 있도록 한다. - 단순한 화면 제작을 넘어 재사용성과 확장성을 고려한 컴포넌트 설계를 연습한다. - 실제 협업 프로젝트에서 활용할 수 있다는 점 때문에 학생들의 참여도가 높다. - 난이도: 중급 - 주요 기능: Auto Layout ## 제약 조건이 있는 협업 일러스트레이션 - 공통된 제약 조건 아래에서 하나의 통일된 일러스트레이션 또는 아이콘 시스템을 공동 제작한다. - 제한된 색상 팔레트, 특정 그리드 등 명확한 규칙을 적용해 일관된 결과물을 만든다. - 예시에서는 각진 형태의 맞춤형 그리드와 제한된 색상을 사용해 모바일 핸드북 앱의 내용을 설명하는 그래픽을 제작했다. - 협업 과정에서 학생들이 서로 돕고 비평하도록 하면 디자인 시스템과 피드백 능력을 함께 기를 수 있다. - 개별 작품의 완성도보다 여러 결과물이 하나의 시각적 체계로 보이는지가 중요하다. - 난이도: 중급 - 주요 기능: 색상 스타일, 그리드 및 협업 기능 ## 수업에 적용할 때의 공통 원칙 - 결과물만 평가하기보다 학생들이 같은 파일에서 작업하며 과정과 선택을 공유하도록 한다. - 완성된 작업을 갤러리로 구성하면 학급 전체의 다양한 접근 방식을 비교할 수 있다. - 초급 활동에서는 기본 도구와 형태 제작에 집중하고, 중급 활동에서는 컴포넌트와 협업 시스템 설계로 확장한다. - 기본 과제에 선택형 도전 과제를 추가해 숙련도가 높은 학생도 계속 탐구할 수 있게 한다. - Figma의 실시간 협업 기능을 활용하면 제작, 피드백, 토론을 하나의 작업 흐름 안에서 진행할 수 있다. 수업에서는 하트 만들기나 트레이딩 카드처럼 진입 장벽이 낮은 과제로 시작한 뒤, 탱그램·연구 시각화·협업 일러스트레이션처럼 형태, 정보 구조, 디자인 시스템을 요구하는 활동으로 난도를 높이는 방식이 효과적이다.

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

더 개방적으로 창작하고 협

Figma는 Config 2020에서 디자인 제작, 협업, 커뮤니티 공유를 강화하는 7가지 기능을 발표했다. 반복 작업을 줄이고 반응형 디자인과 고품질 프로토타이핑을 지원하는 한편, 제품팀 간 맥락 공유와 외부 커뮤니티의 학습·재사용을 확대하는 것이 핵심이다. 이러한 기능의 기반으로 안정적이고 성능이 뛰어난 플랫폼에 대한 지속적인 투자도 강조했다. ## 2020년 Figma의 세 가지 방향 - **제작(Creation):** 반복적인 디자인 작업을 자동화해 더 빠르고 효율적으로 제작하도록 지원한다. - **협업(Collaboration):** 디자이너뿐 아니라 제품 개발에 참여하는 모든 구성원이 함께 작업할 수 있도록 한다. - **커뮤니티(Community):** 디자인 파일을 공개하고 서로 공유·학습·재사용할 수 있는 생태계를 만든다. - 위 기능들을 뒷받침하기 위해 안정성과 성능을 지속적으로 개선한다. ## Auto Layout 강화 - 컨테이너 크기에 맞춰 늘어나는 반응형 컴포넌트를 만들 수 있다. - 텍스트 길이에 따라 자동으로 크기가 바뀌는 버튼을 제작할 수 있다. - 리스트 항목을 쉽게 재배치할 수 있다. - 여러 디바이스 유형에 대응하는 디자인을 만드는 데 유용하다. ## 더 효율적인 글꼴 및 색상 관리 - 새 **Font Picker**는 자주 사용하는 글꼴, 조직에서 공유한 글꼴, 즐겨찾기 글꼴을 우선 표시한다. - 수많은 글꼴 중 원하는 글꼴을 빠르게 검색할 수 있다. - 현재 파일에서 사용된 모든 글꼴을 확인해 디자인 전반의 일관성을 점검할 수 있다. - **Selection Colors**를 사용하면 여러 객체의 채우기, 선, 텍스트 색상을 한 번에 변경할 수 있다. - 색상 속성을 개별적으로 조정하거나 동일한 색상으로 일괄 통일할 수 있다. ## 키보드와 게임패드를 지원하는 프로토타이핑 - 키보드, 게임패드, 접근성 컨트롤러를 프로토타입 상호작용의 트리거로 사용할 수 있다. - `Cmd + F`와 같은 애플리케이션 단축키를 시뮬레이션할 수 있다. - 게임 메뉴의 방향키 조작처럼 게임패드 기반 인터랙션도 표현할 수 있다. - 다양한 입력 장치를 사용하는 고충실도 프로토타입 제작을 지원한다. ## 링크를 통한 협업 맥락 보존 - 텍스트에 웹페이지 링크를 삽입할 수 있다. - Figma 파일 내부의 특정 페이지나 에디터의 특정 프레임으로 연결할 수 있다. - 제품 요구사항 문서 등 외부 자료를 직접 연결할 수 있다. - 클릭 가능한 목차를 만들어 대규모 파일에서 협업자가 원하는 화면으로 빠르게 이동하도록 할 수 있다. ## Plugin Inspector API - 플러그인이 속성 패널에 주요 정보를 표시할 수 있도록 새로운 API를 제공한다. - Notepad 같은 플러그인의 작업 항목을 현재 디자인 요소와 함께 확인할 수 있다. - Mapsicle처럼 특정 플러그인으로 생성된 콘텐츠의 출처를 확인하고 쉽게 업데이트할 수 있다. - 디자인 과정에서 사용한 도구와 결과물 사이의 연결성을 높인다. ## 프로토타입만 공유하는 권한 - 디자인 원본 파일은 공개하지 않고 프로토타입만 공유할 수 있는 권한을 추가한다. - 구현 전 아이디어를 외부 이해관계자에게 보여주면서 실제 디자인 파일은 보호할 수 있다. - 해당 기능은 Figma Professional 및 Organization 요금제에 제공될 예정이라고 발표됐다. ## Figma Community를 통한 공개와 학습 - 팀이나 조직 내부를 넘어 전체 디자인 커뮤니티와 파일을 공유하는 방향을 제시했다. - 공개된 라이브 디자인 파일을 다른 사용자가 직접 살펴보고, 수정하고, 학습할 수 있다. - 커뮤니티 베타 출시 후 수개월 동안 400명 이상의 제작자가 1,000개 이상의 파일을 공개했다. - 공유된 자료에는 와이어프레임 템플릿, 아이콘 세트, 디자인 시스템 예시, 디바이스 프레임, 프레젠테이션 템플릿, 일러스트 등이 포함됐다. Figma의 발표는 단순히 디자인 편집 기능을 늘리는 데 그치지 않고, 반응형 제작 자동화, 팀 간 정보 연결, 선택적 공유, 공개 리소스 재사용을 하나의 작업 흐름으로 통합하려는 전략을 보여준다. 실무에서는 Auto Layout과 Selection Colors로 반복 작업을 줄이고, 내부 문서 링크와 프로토타입 전용 공유를 활용해 협업 효율과 보안을 함께 높이는 것이 유용하다.

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

Figma에서 커뮤니티

Figma는 2020년의 성장 전략 중심에 사용자 커뮤니티를 두고, 온라인·오프라인·제품 내부에서 사용자를 더 closely 연결하겠다고 밝혔다. 이를 위해 사용자 컨퍼런스와 지역 모임, 글로벌 지원 체계, 팀 협업 기능, 파일 공유 기반의 Figma Community를 확대할 계획이다. 궁극적으로는 디자인을 더 많은 사람이 배우고 공유하며 함께 발전시키는 개방형 생태계를 구축하려는 것이다. ## 오프라인 만남과 지역 커뮤니티 확대 - 2020년 2월 샌프란시스코에서 첫 사용자 컨퍼런스 **Config**를 개최한다. - 프로그램 상당 부분을 커뮤니티가 직접 구성해, 일방적인 강연보다 참여형 행사로 운영한다. - 오픈소스 디자인, 차세대 디자이너 교육, 디자인 의사결정에 대한 자신감, Chicago.gov 재설계 경험 등 실무 중심 주제를 다룬다. - 샌프란시스코에 참석하지 못하는 사용자를 위해 온라인 시청도 제공한다. - 전 세계 도시의 커뮤니티 리더들과 협력해 지역별 Figma 이벤트와 사용자 그룹을 확대할 예정이다. ## 글로벌 고객 지원 강화 - 기존 고객 지원은 북미와 유럽 업무 시간 중심이었지만, Figma 활성 사용자의 80% 이상이 미국 외 지역에 있다는 점을 고려해 지원 체계를 확장한다. - Zendesk로 지원 기술 스택을 이전해 전 세계 고객을 더 효과적으로 지원할 기반을 마련했다. - 2020년 중 다음과 같은 지원 서비스를 선보일 계획이다. - 제품 지식을 직접 검색할 수 있는 새로운 Help Center - 사용자끼리 질문하고 답변하는 커뮤니티 포럼 - Figma 내부의 처리 절차 개선을 통한 더 빠른 고객 응대 ## 제품팀 전체를 위한 협업 기능 - 2019년에는 Plugins, Auto Layout, Smart Animate, OpenType 지원, Design System Analytics 등을 출시했다. - 앞으로도 반복적이고 수동적인 디자인 작업을 줄여 창의적 생산성을 높이는 기능 개발을 이어간다. - 디자인은 디자이너만의 작업이 아니라 엔지니어, 제품 관리자 등 여러 직군이 함께하는 과정이라는 점을 강조한다. - 따라서 Figma를 개인용 디자인 도구를 넘어 제품팀 전체가 사용할 수 있는 협업 플랫폼으로 발전시키려 한다. - 대규모 조직의 Figma 파일에는 평균 6명의 협업자가 참여한다는 데이터도 제품 방향의 근거로 제시했다. - 2020년 제품 로드맵은 Config에서 경영진이 추가로 공개할 예정이라고 밝혔다. ## 파일 공유를 중심으로 한 Figma Community - 디자이너들이 서로 작업물을 공유하고 배우는 관행에서 영감을 받아 Figma Community 베타를 시작했다. - 공개된 파일을 다른 사용자가 살펴보고, 수정하거나 재활용하며 학습할 수 있다. - 발표 당시 300명 이상의 크리에이터가 약 600개의 파일을 공개했다. - 공유된 자료에는 다음이 포함된다. - 디자인 템플릿 - 실습형 교육 가이드 - 공개 디자인 라이브러리 - 향후 더 많은 크리에이터가 자료를 게시하도록 지원해, 전문 디자이너와 예비 디자이너 모두가 유명 브랜드와 제작자의 작업에서 배울 수 있는 공간으로 만들 계획이다. ## 커뮤니티와 함께 만드는 성장 전략 - Figma는 단순히 사용자를 늘리는 것보다 사용자가 서로 연결되고 지식을 나누는 구조를 만드는 데 초점을 둔다. - 컨퍼런스와 지역 모임은 사람과 사람을 연결하고, 지원 포럼과 Community는 온라인 지식 교류를 활성화한다. - 제품 자체는 여러 직군이 실시간으로 협업하는 공간으로 확장된다. - 회사는 커뮤니티의 의견을 제품, 행사, 지원 정책에 반영하기 위해 사용자에게 직접 아이디어를 요청했다. Figma의 방향은 디자인 도구를 넘어, 작업물·지식·사람이 함께 모이는 협업 생태계를 구축하는 데 있다. 사용자는 Config나 지역 모임에 참여하고, Figma Community의 파일을 공유·재활용하며, 포럼을 통해 다른 사용자와 문제를 해결하는 방식으로 이 생태계를 적극 활용할 수 있다.

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

오토 레이아웃

Figma의 Auto Layout은 자유로운 디자인 탐색과 HTML/CSS·SwiftUI 같은 개발 환경의 구조적 레이아웃 장점을 결합한 기능이다. 텍스트나 콘텐츠가 바뀌면 버튼과 주변 요소의 크기·위치가 자동으로 조정되어 반복적인 수작업을 줄인다. 또한 프레임 중첩을 통해 콘텐츠에 반응하는 복잡한 인터페이스와 재사용 가능한 컴포넌트를 만들 수 있다. ## 디자인과 개발 환경의 간극 - Figma의 기존 자유 배치 방식은 창의적인 탐색에는 유리하지만 반복 작업이 많았다. - 버튼 문구를 수정하려면 텍스트 편집, 버튼 크기 조정, 인접 버튼 이동을 각각 수행해야 했다. - HTML/CSS나 SwiftUI는 객체 간 구조와 관계를 표현하므로 콘텐츠 변경에 강하지만, 자유로운 시각적 실험에는 불편하다. - Auto Layout은 CSS 박스 모델, 특히 flexbox의 핵심 개념을 Figma에 도입해 두 환경의 장점을 결합했다. - 프레임의 속성으로 제공되므로 컴포넌트뿐 아니라 일반 프레임에도 적용할 수 있다. ## 콘텐츠에 따라 자동으로 변하는 레이아웃 - Auto Layout을 적용하면 내부 요소가 가로 또는 세로 방향으로 순서대로 배치된다. - 컨테이너의 크기는 내부 요소들의 전체 크기에 맞춰 자동으로 결정된다. - 프레임 자체에 패딩, 채우기, 선, 모서리 반경을 설정할 수 있어 버튼 제작에 별도 레이어가 필요하지 않다. - “Buy”를 “Add to basket”으로 변경하면 버튼이 텍스트 길이에 맞춰 자동으로 늘어난다. - 인접한 버튼이나 요소도 레이아웃 흐름에 맞춰 함께 이동한다. - 요소 간 간격은 개별 요소가 아니라 컨테이너 수준에서 설정된다. 특정 요소 사이만 다르게 조정하려면 추가 작업이 필요하다. ## 리스트와 메뉴의 자동 재정렬 - 반복되는 UI 요소를 배치하는 리스트와 메뉴 제작에 특히 유용하다. - 요소를 드래그해 순서를 바꾸면 나머지 요소가 자동으로 재배치된다. - 항목을 하나씩 올바른 위치로 옮기던 반복적인 클릭 작업을 줄일 수 있다. - 기존 컴포넌트 라이브러리와 디자인 시스템에도 적용할 수 있으며, `Shift + A` 또는 옵션 메뉴에서 활성화할 수 있다. ## 중첩 프레임으로 복잡한 인터페이스 구성 - 여러 Auto Layout 프레임을 HTML의 중첩된 `div`처럼 조합할 수 있다. - 버튼, 카드, 리스트, 화면 전체를 계층적으로 구성하면서 각 영역이 콘텐츠 변화에 반응하도록 만들 수 있다. - 콘텐츠를 수정하거나 요소를 다른 Auto Layout 프레임 안팎으로 이동하기 쉽다. - 의도하지 않은 배치를 막기 위해 큰 이미지를 버튼 안에 넣는 등의 작업에는 안전장치가 작동한다. - 실제로 원하는 작업이라면 macOS에서는 `Command`, Windows에서는 `Ctrl` 키를 눌러 안전장치를 무시할 수 있다. - 콘텐츠 변형마다 별도 컴포넌트를 만들기보다, 다양한 콘텐츠를 수용하는 범용 컴포넌트를 제작할 수 있다. ## 향후 발전 방향 - Figma는 Auto Layout을 첫 출시로 보고, 향후 더 많은 기능을 추가할 계획이라고 밝혔다. - 사용자는 플레이그라운드 파일, 동영상, 공식 문서를 통해 기능을 학습할 수 있다. - 기능 사용 후 피드백과 개선 요청을 공유하도록 독려했다. 실무에서는 텍스트 길이가 달라지는 버튼, 반복 목록, 카드와 메뉴처럼 콘텐츠 변화가 잦은 UI부터 Auto Layout을 적용하는 것이 효과적이다. 이후 프레임을 중첩해 디자인 시스템 전반을 반응형이고 재사용 가능한 구조로 확장할 수 있다.

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

디자인 시스템을 뒷받침

Figma는 디자인 시스템의 사용 데이터를 분석하면 팀이 실제로 어떤 라이브러리와 컴포넌트를 사용하는지 파악하고, 이를 바탕으로 시스템을 지속적으로 개선할 수 있다고 주장합니다. Design System Analytics는 라이브러리 사용 추이, 라이브러리 간 채택률, 개별 컴포넌트의 삽입·분리 현황을 제공해 디자인 시스템 운영을 정성적 피드백에서 정량적 개선으로 확장합니다. 다만 목적은 디자이너를 감시하는 것이 아니라 사용 패턴을 이해하고 더 나은 컴포넌트와 라이브러리를 만드는 데 있습니다. ## 디자인 시스템 사용 데이터를 분석하는 이유 - Figma는 클라우드 기반 브라우저 도구이므로 디자이너들이 디자인 시스템을 어떻게 사용하는지 데이터를 통해 파악할 수 있습니다. - Design System Analytics를 사용하면 다음 정보를 확인할 수 있습니다. - 라이브러리 사용량의 시간별 추이 - 여러 라이브러리 간 사용량 비교 - 개별 컴포넌트의 사용, 삽입, 분리 현황 - 분석 결과는 조직 내 누구나 확인할 수 있어 디자이너와 관리자가 필요한 리포트를 직접 살펴볼 수 있습니다. - Figma는 분석 기능을 설계할 때 디자이너의 모든 행동을 통제하거나 감시하지 않는 방향을 강조했습니다. ## 사용되지 않거나 개선이 필요한 컴포넌트 찾기 - 라이브러리와 컴포넌트별 사용량을 보면 어떤 요소가 실제 업무에 기여하는지 파악할 수 있습니다. - Microsoft의 Fluent 디자인 시스템은 다음과 같은 질문에 데이터를 활용합니다. - 거의 사용되지 않는 컴포넌트는 무엇인가? - 자주 분리(detach)되는 컴포넌트는 무엇인가? - 유지보수가 불필요하거나 개선이 필요한 컴포넌트는 무엇인가? - Google Material Design 팀은 버튼 컴포넌트가 가장 많이 사용되는 동시에 가장 많이 분리되는 현상을 발견했습니다. - 이를 통해 기존 버튼 컴포넌트가 지나치게 복잡하다는 점을 파악하고, 더 단순한 대체 컴포넌트를 추가하는 개선으로 이어졌습니다. - 즉, 높은 사용량만 보는 것이 아니라 높은 분리율도 컴포넌트 설계가 실제 요구와 맞지 않는다는 신호로 활용할 수 있습니다. ## 라이브러리 채택과 마이그레이션 추적 - 두 라이브러리의 사용량을 시간에 따라 비교해 새 라이브러리로의 전환이 제대로 진행되는지 확인할 수 있습니다. - Squarespace는 기존 공유 라이브러리를 Auto Layout 기반의 새 라이브러리로 교체하는 과정에서 이 기능을 활용하려 했습니다. - 분석 화면에서는 다음과 같은 정보를 확인할 수 있습니다. - 기간별 컴포넌트 삽입 수 - 구버전과 신버전 라이브러리의 사용량 비교 - 새 라이브러리를 적극적으로 사용하는 상위 팀 - 컴포넌트별 전체 인스턴스 수, 최근 삽입 수, 분리 수 - 이를 통해 새 라이브러리의 채택률을 측정하고, 구버전 라이브러리의 폐기(deprecation)를 관리할 수 있습니다. - 예시 화면에는 최근 60일간의 삽입 추이와 팀별 사용 비중, 개별 버튼 컴포넌트의 인스턴스·삽입·분리 통계가 표시됩니다. ## 개별 컴포넌트 사용 방식 파악 - 단순히 라이브러리 전체의 사용량만 보는 것을 넘어 개별 컴포넌트가 실제로 어떻게 활용되는지 조사할 수 있습니다. - Pluralsight는 공유 컴포넌트가 팀원들의 작업에서 어떻게 사용되는지 파악하는 데 Analytics를 활용하려 했습니다. - 조직 내 모든 디자이너와 관리자가 분석 결과와 사용 사례를 확인할 수 있으므로: - 특정 컴포넌트의 실제 활용 사례를 빠르게 찾을 수 있습니다. - 다른 팀의 사용 방식을 참고할 수 있습니다. - 디자인 시스템 팀이 개선 우선순위를 정하기 쉬워집니다. ## 디자인 초기 단계에서 영향 측정 - 기존에는 디자인 시스템 도입 효과를 개발 단계에서 측정하는 경우가 많았습니다. - Design System Analytics를 이용하면 제품 개발이 개발 단계에 도달하기 전, 디자인 과정에서 시스템이 얼마나 채택되고 있는지도 확인할 수 있습니다. - 따라서 디자인 시스템 팀은 다음을 더 일찍 파악할 수 있습니다. - 제품팀이 공통 컴포넌트를 실제로 사용하고 있는지 - 새 라이브러리가 설계 작업에 자연스럽게 도입되고 있는지 - 특정 팀이나 프로젝트가 시스템에서 이탈하고 있는지 - 이는 개발 단계의 준수 여부를 사후 점검하는 방식에서, 디자인 단계부터 채택을 높이는 방식으로 관점을 바꿉니다. ## 기능의 변화 - 원문은 2019년 발표 내용을 다루지만, 안내문에 따르면 2025년 2월 기준 Figma Library Analytics는 컴포넌트뿐 아니라 스타일과 변수 데이터도 지원합니다. - Organization 및 Enterprise 고객에게 관련 데이터가 제공되며, Enterprise 고객은 Library Analytics API를 통해 확장된 기능을 사용할 수 있습니다. - 따라서 현재 기능은 원문에 설명된 초기 버전보다 범위가 넓어졌을 수 있습니다. 실무적으로는 사용량이 낮은 컴포넌트를 무조건 제거하기보다, 삽입 수와 분리율을 함께 분석하는 것이 좋습니다. 또한 라이브러리 마이그레이션 시 팀별 채택률과 구버전 사용량을 지속적으로 추적하면 디자인 시스템 개선과 폐기 계획을 데이터에 근거해 운영할 수 있습니다.

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