Figma/디자인 시스템

246 개의 포스트

figma3분 읽기큐레이션 요약

깃허브, 협업 문화를

GitHub는 원격 협업 환경에서 디자인 시스템을 효율적으로 운영하기 위해 Figma를 도입했다. Figma와 API를 활용해 아이콘·UI 컴포넌트 제작 과정을 자동화하고, 디자이너와 개발자가 같은 파일에서 실시간으로 협업할 수 있게 했다. 그 결과 디자인 시스템은 GitHub의 일하는 방식에 핵심 요소로 자리 잡았고, 반복 작업과 협업 장벽을 줄이는 기반이 되었다. ## 디자인 시스템 전담 조직의 성장 - 2015년 당시 GitHub에는 디자인 시스템을 전담하는 직원이 없었다. - 디자이너들이 동일한 요소를 반복해서 만들고, 문서가 부족하며, 패턴이 오래된 문제가 있었다. - 이를 해결하기 위해 디자인 시스템과 문서화된 워크플로를 구축하는 풀뿌리 활동을 시작했다. - 활동 시작 6개월 만에 전담 팀이 만들어졌으며, 이후 7명 규모로 성장했다. - 전체 제품 디자인 팀 25명 중 7명이 재사용 가능하고 교체 가능한 컴포넌트를 관리하게 되었다. - 디자인 시스템은 GitHub의 디자인·개발 프로세스를 효율적이고 반복 가능하며 확장 가능하게 만드는 핵심 기반이 되었다. ## 기존 디자인 워크플로의 문제점 - 전담 팀을 구성해도 디자인 시스템을 만들고 유지하는 과정 자체가 비효율적이었다. - SVG 아이콘 라이브러리인 **Octicons**를 수정하려면 특정 소프트웨어 설치와 관련 도구에 대한 지식이 필요했다. - 이런 복잡한 설정은 기여자가 아이콘을 수정하거나 업데이트하는 일을 어렵고 혼란스럽게 만들었다. - 결과적으로 디자인 시스템에 참여하려는 사람들의 진입 장벽이 높아졌다. ## Figma와 API를 통한 기여 과정 자동화 - GitHub는 Octicons를 Figma로 이전하는 실험을 시작했다. - Figma는 별도의 소프트웨어를 다운로드하거나 설치하지 않아도 브라우저에서 작업할 수 있었다. - Figma API를 함께 사용해 아이콘 업데이트 과정을 자동화할 수 있었다. - 디자이너와 개발자는 운영체제나 도구에 관계없이 복잡한 설정 없이 디자인 시스템에 기여할 수 있게 되었다. - Octicons에서 얻은 효과를 바탕으로 UI 컴포넌트도 Figma로 이전했다. - 이후 GitHub의 디자인과 개발에 필요한 대부분의 요소를 Figma에서 이용할 수 있게 되었다. ## 원격 팀을 위한 ‘DesignHub’ - GitHub는 원래 도구에 구애받지 않는 팀이었지만, Figma 사용은 빠르게 확산되었다. - 웹 기반 협업 기능 덕분에 서로 다른 장소에서 일하는 팀원들이 같은 파일에 동시에 참여할 수 있었다. - Figma는 물리적으로 함께 모여 화이트보드 앞에서 작업하는 경험을 대체했다. - 디자이너들은 실제로 한 공간에 있는 팀처럼 아이디어를 공유하고 발전시킬 수 있었다. - 여러 디자이너가 Figma 파일에서 즉석으로 아이디어를 결합하는 ‘디자인 잼’을 진행하며 창의적인 탐색을 활성화했다. ## 프로토타이핑과 스토리텔링의 통합 - GitHub의 디자이너들은 Figma를 디자인 과정뿐 아니라 스토리텔링 전반에 활용했다. - 디자인은 사용자 경험의 이야기를 전달하는 과정이며, 프로토타입은 그 이야기를 실제 흐름으로 보여주는 수단으로 여겨졌다. - Figma에서는 다른 도구로 전환하지 않고 요소를 빠르게 배치하고 이동해 화면 흐름을 제안할 수 있었다. - 프로토타이핑의 진입 장벽이 낮아지면서 아이디어를 빠르게 표현하고 검증할 수 있었다. ## 협업 중심 문화와 도구의 결합 - GitHub는 기능과 도구가 모두 협업을 촉진해야 한다는 문화를 갖고 있다. - Figma는 디자이너와 엔지니어가 함께 작업하도록 설계된 도구라는 점에서 GitHub의 문화와 잘 맞았다. - 디자인 시스템을 단순한 결과물이나 라이브러리가 아니라 여러 직군이 함께 개선하는 협업 공간으로 발전시켰다. - 웹 기반 편집, 실시간 공동 작업, API 자동화를 조합해 원격 협업의 물리적 한계를 줄였다. GitHub 사례는 디자인 시스템의 효과를 높이려면 컴포넌트를 만드는 것뿐 아니라 누구나 쉽게 기여할 수 있는 워크플로를 함께 설계해야 한다는 점을 보여준다. 특히 웹 기반 협업 도구와 API 자동화를 결합하면 원격 팀에서도 디자인·개발 간 피드백과 반복 작업을 크게 줄일 수 있다.

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

DesignSystems.com을

Figma는 디자인 시스템 구축과 운영에 관한 실용적인 지식 허브인 DesignSystems.com을 새롭게 개편해 다시 선보였다. 개편의 핵심은 바로 적용할 수 있는 콘텐츠를 제공하고, 초보자부터 숙련자까지 다양한 수준과 규모의 팀을 아우르며, 여러 관점을 소개하는 것이다. 사이트는 커뮤니티의 피드백을 반영해 지속적으로 콘텐츠를 업데이트하고 기여를 받을 예정이다. ## DesignSystems.com 재출시 배경 - Figma는 2018년 5월 DesignSystems.com을 처음 공개한 뒤 커뮤니티에 아이디어와 의견을 요청했다. - 디자이너, 개발자, 콘텐츠 전략가, 디자인 운영 담당자 등 다양한 직군과 대규모 브랜드부터 1인 팀까지 폭넓은 피드백을 수집했다. - 이러한 의견을 바탕으로 사이트의 목적과 콘텐츠 방향을 재정비했다. ## 실행 가능한 콘텐츠 제공 - 디자인 시스템을 만드는 사람과 운영하는 사람이 실제 업무에 적용할 수 있는 글과 자료를 제공한다. - 단순한 개념 소개보다 명확한 시사점과 실천 방법을 포함하는 것을 목표로 한다. - 샘플 코드, 디자인 파일, 가이드, 커뮤니티 사례 등을 통해 이론과 실무를 연결한다. ## 다양한 수준과 팀 규모 지원 - 디자인 시스템을 처음 시작하는 사람을 위한 입문 가이드를 제공한다. - 이미 성숙한 디자인 시스템을 운영하는 실무자를 위해 선도적인 기업의 사례와 경험도 소개한다. - Lyft, Asana, Harry’s 등 디자인 시스템 팀의 글을 통해 조직 규모와 성숙도에 따른 다양한 접근법을 보여준다. - 대기업뿐 아니라 소규모 팀이나 개인 단위의 실무자도 참고할 수 있도록 콘텐츠 범위를 넓힌다. ## 여러 관점과 사례 수집 - 디자인 시스템 문제에는 하나의 정답만 존재하지 않는다는 관점을 강조한다. - 같은 문제를 서로 다른 조직과 직군이 어떻게 해결했는지 비교할 수 있도록 다양한 목소리를 담는다. - 커뮤니티 구성원 간 경험과 지식을 공유하는 장으로 사이트를 발전시키려 한다. ## 지속적인 커뮤니티 참여 - 이번 재출시는 완성된 결과물이 아니라 지속적인 운영의 시작으로 소개된다. - 새로운 글과 자료를 정기적으로 추가할 예정이다. - 독자에게 사이트 콘텐츠에 대한 피드백과 기고 아이디어 제출을 요청한다. - 관심 있는 사람은 업데이트를 구독하거나 직접 콘텐츠 제작에 참여할 수 있다. 디자인 시스템을 도입하려는 팀은 입문 가이드로 기본 방향을 잡고, 성숙한 기업의 사례를 참고하되 자신의 조직 규모와 업무 방식에 맞게 적용하는 것이 좋다. 특히 여러 사례를 비교해 단일한 정답보다 팀에 적합한 원칙과 운영 방식을 찾는 접근이 권장된다.

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

Figma UI 개편:

Figma는 기능 구조를 크게 바꾸기보다 타이포그래피, 레이아웃, 색상, 아이콘 등 UI 표면을 다듬는 방식으로 시각적 리프레시를 진행했다. 기존 UI가 제품 성장에 따라 일관성을 잃고 한계에 부딪혔기 때문에, 전사적 브레인스토밍과 이슈 통합, 정성·정량 조사를 거쳐 변경 범위를 결정했다. 핵심은 모든 사용자를 만족시키려 하기보다 문제를 체계적으로 수집하고, 중요한 개선점에 집중하는 것이었다. ## 리디자인이 필요해진 배경 - Figma의 UI는 제품과 기능이 성장하면서 점점 일관성을 잃었다. - 기존 컴포넌트로 새로운 기능을 표현하기 어려워질 때마다 팀이 임시 컴포넌트와 맞춤형 해결책을 만들었다. - 그 결과 다음과 같은 문제가 누적됐다. - 서로 다른 형태의 테이블, 버튼, 입력 컨트롤 - UI 곳곳에 흩어진 여러 색조의 회색·빨강·파랑 - 기능마다 다른 알림과 대화상자 처리 방식 - 가독성, 여백, 아이콘 체계의 불일치 - 마지막으로 UI 전체를 검토했을 때는 아직 Multiplayer나 Components 같은 핵심 기능이 없었다. - 즉, 기존 UI의 기반이 현재의 Figma를 충분히 반영하지 못하게 된 것이 리프레시의 주요 배경이었다. ## 표면적 변화에 집중한 전략 - 목표는 사용자가 큰 혼란 없이 새 UI를 받아들이도록 만드는 것이었다. - 정보 구조나 제품의 기본 동작을 재설계하기보다는 다음과 같은 시각적 요소를 중심으로 개선했다. - 타이포그래피 - 레이아웃 - 색상 - 아이콘 - 컴포넌트의 시각적 일관성 - 출시 전 수개월 동안 정성적·정량적 조사를 진행했다. - 세부 변경 사항마다 여러 팀이 깊이 논의해 최종 결과에 동의하도록 했다. - 특히 디자이너는 시각적 변화에 민감하므로, 리디자인이 모든 사람에게 동일하게 환영받을 수 없다는 점도 고려했다. ## 1단계: 제한 없이 문제 수집하기 - 전체 디자인 팀이 참여하는 2시간 브레인스토밍 세션을 열었다. - 팀원들은 실제로 Figma를 사용하면서 제품의 구석구석을 살펴봤다. - 발견한 내용을 다음 방식으로 기록했다. - UI의 문제점과 불편한 점 - 마음에 드는 부분 - 관련 스크린샷 - 특정 문제가 미치는 영향에 대한 메모 - 모든 결과물을 Figma 파일에 모아 공동으로 검토했다. - 팀원들이 강하게 반응한 문제, 즉 모두가 “이건 심각하다”고 느낀 항목을 별도로 표시했다. - 이 반응은 어떤 문제가 사용자 경험에 큰 영향을 줄 가능성이 있는지 판단하는 초기 신호로 활용됐다. - 브레인스토밍 직후 결론을 내리지 않고 며칠간 거리를 둔 것도 중요했다. 시간이 지나면서 문제의 우선순위와 구성원들의 의견이 자연스럽게 바뀌었기 때문이다. ## 2단계: 문제를 통합하고 범주화하기 - 후속 회의에서 각 문제를 다시 검토하며 처음의 판단을 재평가했다. - 일부 문제는 생각보다 중요하지 않다고 판단했고, 다른 문제는 해결 필요성을 더 강하게 주장할 수 있도록 논거를 보완했다. - 긴 문제 목록을 팀원들에게 나누어 전달하고, 각자가 이를 포스트잇 형태의 짧은 항목으로 재작성했다. - 이 과정에서는 개별적인 증상을 그대로 옮기기보다 공통된 근본 문제로 추상화했다. - 예: “특정 화면의 알림 모양이 다르다” - 통합된 표현: “제품 전체의 알림 처리 시스템이 필요하다” - 비슷한 포스트잇을 함께 묶어 반복적으로 나타나는 주제를 확인했다. - 그 결과 다음과 같은 범주가 도출됐다. - 아이콘, 타이포그래피, 가독성, 색상 - 대화상자, 툴바, 말투 - 에디터와 파일 브라우저 - 모드, 팀 페이지, 속성 사이드바 - 컴포넌트, 레이어, 히스토리 - 공유, 퍼블리싱, 내보내기 - 포스트잇의 반복은 단순한 중복이 아니라 중요한 문제가 여러 방식으로 나타나고 있다는 신호가 되었다. - 다만 범주를 다시 “시각적 문제에서 기초 구조적 문제까지”라는 축으로 정렬하려 한 것은 지나치게 복잡한 접근이었다. ## 범주화 과정에서 얻은 교훈 - 문제를 조직화할 때 지나치게 추상적인 기준을 만들면 오히려 판단이 어려워진다. - “제품의 개성”처럼 거의 모든 문제를 포함할 수 있는 범주는 유용하지 않다. - 반대로 특정 대화상자 하나처럼 지나치게 좁은 범주도 전체적인 개선 방향을 잡는 데 적합하지 않다. - 가장 좋은 범주는 서로 비슷한 문제를 묶으면서도, 실제 개선 작업으로 이어질 수 있을 만큼 구체적이어야 한다. - 완벽한 분류 체계를 만드는 것보다 중요한 문제의 신호를 잡음에서 분리하는 것이 우선이다. ## 실무에 적용할 때의 추천 - 리디자인을 시작할 때 바로 해결책을 만들기보다, 먼저 팀 전체가 제품을 직접 사용하며 문제를 폭넓게 수집한다. - 각 문제를 개별 사례가 아닌 반복되는 시스템적 문제로 재정의한다. - 브레인스토밍 직후 결론을 확정하지 말고 일정한 숙고 시간을 둔다. - 범주화는 단순하고 이해하기 쉽게 유지하며, 지나치게 추상적이거나 복잡한 분류 축은 피하는 것이 좋다.

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

#FigmaTip 모

Figma 파일과 디자인 시스템을 효율적으로 정리하려면 레이어, 파일, 컴포넌트, 페이지를 체계적으로 관리해야 한다. 이 글은 봄맞이 정리를 위한 Figma 활용법으로 일괄 이름 변경, 사용자 지정 썸네일, 파일 정렬, 라이브러리 정리, 프레임과 페이지 활용을 소개한다. 이러한 기능을 활용하면 파일을 빠르게 탐색하고 팀 협업 효율도 높일 수 있다. ### 레이어 일괄 이름 변경 - 장기간 진행한 프로젝트에서는 레이어가 복제·수정되며 이름이 뒤섞이기 쉽다. - 여러 레이어를 선택한 뒤 마우스 오른쪽 버튼의 **Rename**을 선택하거나 `Command + R`을 누르면 일괄 변경할 수 있다. - 다음과 같은 방식이 지원된다. - 모든 레이어를 동일한 이름으로 변경 - 숫자 접미사 추가 - 접두사 추가 - 기존 이름의 일부만 변경 - 정규 표현식을 이용한 고급 이름 변경 ### 사용자 지정 썸네일로 파일 구분 - 파일에 사용자 지정 썸네일을 설정하면 파일 브라우저에서 내용을 빠르게 식별할 수 있다. - 설정 방법: - 새 페이지를 만들고 페이지 목록의 가장 위로 이동 - `640x320` 크기의 프레임 하나를 생성 - 프레임 안에 제목, 설명, 이미지 등을 배치 - 프레임 배경색과 캔버스 배경색을 동일하게 설정 - 썸네일에 프로젝트 상태나 버전 정보를 표시하면 파일 탐색과 진행 상황 공유에 유용하다. ### 파일 브라우저 정렬 - 파일 브라우저의 정렬 기능을 사용하면 불필요한 파일을 쉽게 찾을 수 있다. - **File Name**으로 정렬하면 `Untitled`처럼 이름이 정리되지 않은 파일을 확인할 수 있다. - 다음 기준으로도 정렬할 수 있다. - 생성일 - 최종 수정일 ### 팀 라이브러리의 컴포넌트 정리 - 디자인 시스템을 정리할 때는 팀 라이브러리에 등록된 컴포넌트가 실제로 필요한지 검토해야 한다. - 중복되거나 더 이상 사용하지 않는 컴포넌트는 컴포넌트 탭에서 마우스 오른쪽 버튼을 클릭한 뒤 **Remove from Library**를 선택해 제거할 수 있다. - 컴포넌트 이름 앞에 `.` 또는 `_`를 붙이는 방식으로 라이브러리에서 제외할 수도 있다. - 이를 통해 팀원이 불필요한 컴포넌트를 찾느라 시간을 낭비하는 것을 줄일 수 있다. ### 프레임과 페이지로 라이브러리 구성 - 컴포넌트 라이브러리와 디자인 시스템은 프레임과 페이지를 사용해 논리적인 컬렉션으로 나누는 것이 좋다. - 이름에 슬래시(`/`)를 여러 번 사용해 계층 구조를 표현하는 대신, 프레임과 페이지로 분류하면 컴포넌트 이름을 더 단순하게 유지할 수 있다. - 체계적인 분류는 팀원이 필요한 컴포넌트를 쉽게 탐색하고 라이브러리를 이해하는 데 도움이 된다. ### 실용적인 정리 순서 - 먼저 파일 브라우저를 이름과 수정일 기준으로 정렬해 불필요한 파일을 선별한다. - 각 파일의 레이어를 일괄적으로 이름 변경해 검색과 탐색이 쉽게 만든다. - 중요한 파일에는 `640x320` 사용자 지정 썸네일을 추가한다. - 마지막으로 팀 라이브러리에서 중복·미사용 컴포넌트를 제거하고, 남은 컴포넌트를 프레임과 페이지로 분류하는 것이 좋다.

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

디자인 시스템 전파의

디자인 시스템의 확산은 UI 키트나 컴포넌트 라이브러리를 만드는 기술적 작업만으로 이루어지지 않으며, 사람과의 협업을 통해 조직 문화로 정착되어야 한다. 특히 페어링은 다른 디자이너·엔지니어와 함께 작업하며 시스템의 문제를 발견하고, 비판을 협력으로 전환하며, 시스템의 가치를 자연스럽게 전파하는 가장 효과적인 방법이다. 디자인 시스템 팀은 “규칙을 지키라”고 요구하기보다 사용자의 일을 더 빠르고 높은 품질로 만들어 주는 파트너가 되어야 한다. ## 디자인 시스템은 기술 프로젝트가 아니라 문화 프로젝트 - UI 키트나 컴포넌트 라이브러리를 혼자 구축하는 것만으로는 조직의 불일치를 해결할 수 없다. - 디자인 시스템은 디자이너, 엔지니어, 제품 관리자, 고객 사이의 관계와 조직 문화를 반영한다. - “파란색을 쓰지 마라”, “이 컴포넌트를 왜 새로 만들었나”처럼 잘못을 지적하는 방식은 디자인 시스템 팀과 다른 팀을 대립 구도로 만들 수 있다. - Gusto는 다음과 같은 소통 장치를 마련했다. - 피드백과 질문을 위한 Slack 채널 - 디자인 시스템 팀의 오피스 아워 - 신규 구성원을 위한 UI 소개 키트 - 그러나 가장 효과적으로 시스템을 전파한 방법은 직접 함께 작업하는 페어링이었다. ## 페어링은 디자인 시스템의 사용자 조사다 - 다른 디자이너와 나란히 작업하면 실제 사용 과정에서 다음을 관찰할 수 있다. - 어떤 컴포넌트와 패턴이 혼란스러운가 - 문서나 Figma 파일에서 어떤 정보가 부족한가 - 기존 시스템에서 이상하거나 잘 작동하지 않는 부분은 무엇인가 - 팀이 사용자의 필요를 추측하는 대신, 실제 사용 데이터를 바탕으로 컴포넌트와 문서를 개선할 수 있다. - 페어링 중에는 다음과 같은 질문에 답할 수 있다. - 디자이너와 엔지니어가 컴포넌트 라이브러리의 존재를 알고 있는가 - HTML·CSS의 최신 모범 사례를 이해하고 있는가 - 특정 컴포넌트를 사용하는 것이 조직 전체에 왜 유리한지 설명하고 있는가 - 개인 작업에서 유용한 레이아웃을 공식 패턴으로 발전시킬 수 있는가 - 오피스 아워는 사용자가 언제 도움을 받아야 하는지 판단하지 못해 참여율이 낮을 수 있지만, 페어링은 실제 작업 흐름 안에서 문제를 발견한다. ## 비판을 협업으로 전환하는 페어링 - 디자인 시스템 팀과의 협업은 추가적인 디자인 리뷰가 아니라, 작업 속도를 높이고 향후 버그를 줄이는 과정처럼 느껴져야 한다. - 초기 디자인 시스템은 복잡하고 문서화가 부족한 경우가 많다. - 사용할 수 있는 색상이 제한되어 있다는 사실 - 이미 동일한 용도의 컴포넌트가 존재한다는 사실 - 특정 구현 방식이 접근성 기준을 위반한다는 사실 - 이런 규칙을 한꺼번에 강요하면 통제적으로 보일 수 있고, 엔지니어는 문서를 무시하며 디자이너는 기존 시스템과 어울리지 않는 UI를 만들 수 있다. - 페어링은 디자인 시스템 팀이 머릿속에만 보관하던 코드베이스의 제약과 조직의 지식을 직접 전달하게 한다. - 동시에 디자인 시스템 팀도 제품 디자이너가 실제로 어떤 일을 해야 하는지 이해하게 된다. - 결과적으로 디자인 시스템 팀은 현장의 요구를 파악하고, 제품 팀은 프런트엔드 컴포넌트와 패턴을 배우면서 양쪽 모두 더 빠르게 작업할 수 있다. ## 시스템의 지지자를 만드는 방법 - 페어링을 경험한 디자이너와 엔지니어는 디자인 시스템을 단순한 규칙 모음이 아니라 자신의 작업을 개선하는 도구로 이해하게 된다. - 직접 협업을 통해 얻은 지식은 각 팀으로 돌아가 자연스럽게 공유될 수 있다. - 디자인 시스템의 채택을 높이려면 규칙 준수를 감시하기보다, 시스템이 창의성을 제한하는 것이 아니라 작업에 “추진력을 더해준다”는 경험을 제공해야 한다. - 이런 경험이 축적되면 디자인 시스템 팀 외에도 시스템을 설명하고 추천하는 내부 전도자(evangelist)가 늘어난다. 실무적으로는 정기적인 페어링 세션을 실제 디자인·개발 과제와 연결하고, 세션에서 발견한 혼란과 요구를 컴포넌트·문서 개선으로 바로 반영하는 것이 좋다.

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

Dribbble이 원격 팀

Dribbble은 완전 원격으로 일하는 디자인팀의 협업 문제를 Figma로 해결했다. 여러 도구와 파일을 오가던 방식을 하나의 온라인 파일과 실시간 공동 편집으로 통합해, 최신 디자인을 공유하고 피드백을 주고받는 과정을 단순화했다. 그 결과 디자인 페어 작업과 리뷰가 빨라졌고, 아이디어를 며칠이 아니라 수십 분 안에 구체화할 수 있었다. ## 여러 시간대에 걸친 원격 협업의 어려움 - Dribbble은 전 직원이 100% 원격으로 근무하며, 디자인팀은 제품 디자이너와 개발자 7명으로 구성되어 있다. - 원격 근무는 유연성과 인재 확보 측면에서 장점이 있지만, 사무실에서 자연스럽게 대화하는 방식의 협업은 어려웠다. - 팀은 화상회의와 여러 협업 도구를 함께 사용했지만, 작업 방식이 매끄럽게 연결되지 않았다. - 다른 디자이너의 작업 현황을 파악하기 어려웠고, 파일 관리와 다양한 피드백 흐름을 정리하는 데 시간이 소요됐다. ## Figma를 통한 단일 작업 공간 - Figma에서는 여러 사람이 동시에 하나의 파일에 접속해 회의실이나 화이트보드에서 함께 작업하는 경험을 재현할 수 있었다. - 온라인 기반이므로 최신 파일을 찾기 위해 동료에게 묻거나 여러 애플리케이션을 전환할 필요가 줄었다. - 디자인 파일, 버전 관리, 댓글, 리뷰를 한곳에서 처리해 팀의 ‘단일 진실 공급원(single source of truth)’을 마련했다. - 기존 디자인 파일 형식을 가져올 수 있어 새로운 도구로의 전환 부담도 낮췄다. - Dribbble은 기존 사용자 인터페이스를 Figma에서 다시 제작해 팀원들이 익숙한 구성 요소로 학습하도록 했다. ## 디자인 페어와 실시간 공동 작업 - Dribbble은 두 명의 디자이너가 함께 문제나 프로젝트를 해결하는 디자인 페어 방식을 활용한다. - 하나의 파일에서 동시에 작업하면서 도구 간 전환과 파일 주고받기에 드는 마찰을 제거했다. - 최신 변경 사항을 모든 팀원이 즉시 확인할 수 있어 커뮤니케이션 비용과 중복 작업이 감소했다. - 여러 사람이 스타일 가이드를 참고하거나 같은 디자인을 반복 수정해야 하는 대규모 작업에서도 일관성을 유지하기 쉬웠다. ## 더 빠른 디자인 리뷰와 피드백 - Figma의 멀티플레이어 기능을 활용해 모든 디자이너가 같은 파일에서 디자인 리뷰를 진행했다. - 팀원들은 프레임을 복제해 아이디어를 발전시키고, 댓글을 남기며, 실시간으로 수정 사항을 반영했다. - 피드백 루프가 짧아져 디자인 문제를 며칠이 아니라 몇 분 만에 해결할 수 있었다. - 한 사례에서는 화상회의 중 5명이 하나의 Figma 파일에 참여해 아이디어를 브레인스토밍하고 서로의 안을 비평했으며, 약 20분 만에 합의된 디자인을 완성했다. ## Figma와 Dribbble의 연동 - Dribbble은 Figma API를 활용해 작업물을 Figma에서 Dribbble로 직접 공유하는 통합 기능을 만들었다. - 사용자는 Figma에서 레이어를 선택한 뒤 `Integrations` ▸ `Dribbble`을 통해 Dribbble 업로드 화면으로 이동할 수 있다. - 이를 통해 디자인 제작과 게시 사이의 절차도 하나의 작업 흐름으로 연결했다. ## 실용적인 시사점 - 원격 디자인팀에는 화상회의만으로는 부족하며, 실시간 공동 편집과 최신 파일을 보장하는 중앙 작업 공간이 필요하다. - 도구를 통합하면 파일 관리와 커뮤니케이션에 쓰는 시간을 줄이고 디자인 자체에 집중할 수 있다. - 기존 자산을 가져오고 익숙한 UI를 재현하는 방식은 협업 도구 도입 시 팀의 학습 부담을 줄이는 효과적인 방법이다.

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

피그마 드래프트

Figma Drafts는 완성된 결과물을 공유하기 전, 아이디어를 자유롭게 실험하는 개인 작업 공간이다. 글쓴이는 공개 협업 환경에서 파일의 완성도나 정리 상태를 평가받을까 하는 두려움을 Drafts로 완화했고, 이를 디지털 노트처럼 활용했다. 핵심 원칙은 먼저 만들고 나중에 정리하며, 발전시킬 아이디어만 프로젝트로 옮기는 것이다. ## 공개 협업에서 생기는 부담 - 다른 사람이 작업 중인 파일을 볼 수 있으면 다음과 같은 걱정이 생길 수 있다. - 8px 그리드를 지키지 않았다는 평가 - 레이어 이름을 정리하지 않았다는 지적 - 아이콘을 만드는 과정이나 파일 구조가 미숙해 보일 가능성 - 이 부담 때문에 실제 문제 해결이나 다양한 시도보다 파일을 “보여줄 만한 상태”로 꾸미는 데 시간을 쓰게 된다. - 글쓴이는 이러한 두려움이 공개적이고 협력적인 디자인 환경에서 더 커졌다고 설명한다. ## Drafts의 역할과 장점 - Drafts는 팀이나 프로젝트와 마찬가지로 파일을 보관하는 조직 단위지만, 개인 폴더라는 점이 다르다. - 팀이나 프로젝트의 권한 및 공유 설정에 종속되지 않는다. - Drafts 전체를 다른 사람에게 공개할 수는 없고, 필요한 경우 개별 파일만 선택적으로 공유할 수 있다. - 완성품이 아니라는 의미가 이름에 내포되어 있어, 실험과 미완성 작업을 심리적으로 허용한다. - 디자이너의 블록을 극복하고 색상, 타이포그래피, 화면 흐름 등을 정하기 전에 우선 아이디어를 시각화하는 공간으로 활용할 수 있다. - 글쓴이는 Drafts를 낙서, 스케치, 미완성 목록이 섞여 있는 개인 노트의 디지털 버전으로 사용한다. ## “먼저 만들고, 나중에 정리하기” - Drafts에서는 iOS 앱 아이디어나 Figma 기능을 활용한 실험처럼 빠르게 떠오른 생각을 즉시 기록한다. - 파일 이름이 없거나, 기본 회색 도형만 있거나, 구조가 엉성해도 문제로 보지 않는다. - 중요한 원칙은 **Create first, organize second**이다. - 먼저 다양한 해결책을 시도한다. - 아이디어가 발전한 뒤 파일명, 레이어, 구성 등을 정리한다. - 초기 단계에서 정리와 완성도를 지나치게 신경 쓰면 탐색의 폭이 줄어들 수 있으므로, Drafts에서는 혼란스러운 상태를 작업 과정의 일부로 받아들인다. ## Drafts를 프로젝트로 옮기는 방법 - 아이디어가 더 발전해 팀과 공유하거나 체계적으로 관리해야 할 시점이 되면 Drafts 파일을 프로젝트로 이동한다. - 파일 브라우저에서 파일을 선택한 뒤 원하는 프로젝트로 드래그 앤 드롭하면 된다. - 파일 내부에서 파일명 왼쪽의 “Drafts” 메뉴를 클릭하고 이동할 프로젝트를 선택할 수도 있다. - 예를 들어 와이어프레임을 고해상도 화면으로 발전시키려는 경우, 전체 파일을 프로젝트로 옮기는 방식이 적절하다. ## 원본 보존과 반복 작업 - 아이디어를 여러 페이지나 파일에서 계속 발전시킬 예정이라면, 먼저 Drafts 파일을 복제한다. - 복제본은 Drafts에 남겨 초기 아이디어의 스냅샷으로 보존한다. - 복제한 파일을 프로젝트로 옮겨 팀 작업이나 정리 작업을 진행한다. - Drafts에는 정리되지 않은 원본을 유지하고, 프로젝트 파일에서는 실제 작업에 필요한 요소를 다듬는 방식이다. ## 파일 관리와 검색 - Drafts가 많아지면 파일 브라우저의 필터 기능을 활용할 수 있다. - 파일명, 생성일, 마지막 수정일 등을 기준으로 파일을 찾고 정렬할 수 있다. - 다만 정리 자체를 너무 일찍 시작하기보다, 아이디어가 충분히 발전한 뒤 필요한 파일만 프로젝트로 옮기는 흐름이 권장된다. 개인 작업에서는 Drafts를 “공개 전 검수 공간”이 아니라 자유롭게 실패하고 탐색하는 디지털 스케치북으로 사용하는 것이 좋다. 완성도와 정리는 아이디어가 검증된 뒤에 진행하고, 팀 공유가 필요해졌을 때 파일을 복제하거나 프로젝트로 이동하면 창의성과 협업을 모두 확보할 수 있다.

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

Bulb, 디자인 시스템 Solar

Bulb는 여러 제품의 디자인·코드베이스·패턴이 서로 달랐던 문제를 해결하기 위해 Figma로 디자인 시스템 ‘Solar’를 구축했다. Figma의 브라우저 기반 협업과 팀 라이브러리를 활용해 디자이너뿐 아니라 개발자, 연구자, 콘텐츠 작성자, 이해관계자까지 디자인 과정에 참여하도록 만들었다. 핵심 전략은 제품 전반을 조사한 뒤 디자인 원칙을 세우고, 작고 단순한 컴포넌트와 패턴부터 점진적으로 표준화하는 것이었다. ## Bulb의 성장과 디자인 조직의 과제 - 영국의 친환경 에너지 기업 Bulb는 18개월 동안 2,000% 성장했다. - 디자인팀은 13명 규모로, 여러 제품 그룹에서 엔지니어·PM·리서처·콘텐츠 작성자와 협업했다. - 기존 5~6개 제품은 서로 다른 에이전시가 제작해 다음 문제가 있었다. - 제품마다 다른 코드베이스 사용 - 버튼, 체크박스, 드롭다운 등 디자인 패턴의 불일치 - 시각적 브랜드는 통일되어도 실제 사용 경험은 일관되지 않음 - 새롭게 구성된 디자인팀은 디자인 시스템과 이를 지원할 도구를 처음부터 설계할 수 있었다. ## Figma를 통한 개방적인 협업 - Bulb의 조직 문화는 사업 부문 간 협업과 투명성을 중시했으며, 디자인 도구도 이러한 문화를 지원해야 했다. - 프로젝트별 ‘팟(pod)’에 디자이너, 리서처, 콘텐츠 작성자, 개발자가 함께 참여했다. - Figma에서는 디자이너의 별도 허가 없이도 다른 직군이 파일을 열어 다음 작업을 수행할 수 있었다. - 디자인에 의견과 제안 남기기 - 최신 작업 내용 확인 - 아이디어 스케치와 브레인스토밍 - 프로토타입 제작 및 검토 - 개발자와 디자이너가 설계 과정 전반에서 함께 논의하며 가이드라인과 품질 기준을 확인할 수 있었다. - 비디자이너에게도 복잡하거나 위협적인 도구가 아니어서 사용자 리서처가 디자이너와 직접 아이디어를 발전시키기 쉬웠다. ## Solar 디자인 시스템의 구축 과정 - 목표는 여러 제품에서 일관된 디자인을 보장하는 ‘단일 진실 공급원(single source of truth)’을 만드는 것이었다. - Figma 팀 라이브러리를 활용하면 마스터 컴포넌트를 수정했을 때 이를 사용하는 여러 디자인에 변경 사항이 동기화됐다. - 모든 파일을 브라우저에서 접근할 수 있어 빠르게 움직이는 팀에 적합했다. - 구축 초기에는 Bulb의 각 제품 페이지를 스크린샷으로 수집해 Figma에 시각적 사이트맵을 만들었다. - 이 사이트맵을 통해 제품별 차이와 불일치를 한눈에 파악했다. - 여러 직군이 참여해 디자인 원칙을 정의하고, 이를 기준으로 컴포넌트와 디자인 패턴을 정리했다. - 버튼·체크박스·드롭다운처럼 여러 버전이 존재하던 요소를 검토해 더 단순하고 견고한 패턴을 선택했다. - 정리한 패턴은 8개 제품에 단계적으로 적용됐다. ## 작고 단순하게 유지하는 원칙 - 디자인 시스템은 처음부터 모든 상황을 포괄하려 하기보다 작은 범위에서 시작해야 한다. - Solar는 다음과 같이 복잡도를 의도적으로 낮췄다. - 제한된 색상 팔레트 - 적은 수의 디자인 패턴 - 관리하기 쉬운 단순한 구조 - 시스템이 복잡해질수록 유지보수와 운영이 어려워지므로, 필요한 요소만 포함하고 지속적으로 단순화하는 것이 중요하다. - 디자인 시스템을 여러 직군이 함께 만들면 실제 구현과 사용 맥락을 반영한 표준을 정립할 수 있다. Bulb의 사례는 디자인 시스템을 단순한 UI 컴포넌트 모음이 아니라, 디자인·개발·리서치·콘텐츠가 함께 일하는 협업 기반으로 구축해야 한다는 점을 보여준다. 먼저 제품 간 불일치를 시각화하고, 명확한 원칙을 정한 뒤, 작은 패턴부터 라이브러리화해 점진적으로 확장하는 접근이 실용적이다.

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

피그마, 세쿼이아

Figma는 Sequoia Capital이 주도한 4,000만 달러 규모의 Series C 투자를 유치했으며, 이를 통해 협업형 디자인 플랫폼으로서의 성장을 가속하려 한다. 회사는 조직·엔터프라이즈 기능, 성능과 디자인 시스템 지원, 플랫폼 확장성, 글로벌 커뮤니티에 집중할 계획이다. 궁극적으로 Figma는 디자인을 누구나 쉽게 표현하고 함께 작업할 수 있는 개방적이고 커뮤니티 중심의 공간으로 만들고자 한다. ## 투자 유치와 투자자 구성 - Series C 규모는 4,000만 달러다. - Sequoia Capital이 투자를 주도했다. - Coatue, Founders Fund, LinkedIn CEO 제프 와이너, Instagram 공동창업자 마이크 크리거, EA CEO 앤드루 윌슨, Facebook 파트너십 부사장 댄 로즈가 참여했다. - 기존 투자자인 Index, Greylock, KPCB도 함께 투자했다. - Figma는 단순한 자금보다 지속 가능한 기업과 커뮤니티를 구축한 경험이 있는 투자자를 확보하는 데 의미를 뒀다. ## 협업형 디자인 도구로의 확장 - 생산성 도구 전반이 공유와 협업을 중심으로 변화하고 있으며, 디자인 도구도 같은 방향으로 발전한다고 설명한다. - Square, Uber, Twitter, GitHub 등 주요 기업의 디자인 팀이 Figma를 전면적으로 도입하고 있다. - 투자금은 기업용 **Organization 제품**을 발전시키는 데 활용된다. - 동시에 개인 디자이너와 소규모 팀의 사용 경험도 개선할 예정이다. - 이는 Figma를 개인용 디자인 도구에서 대규모 조직의 표준 협업 플랫폼으로 확장하려는 전략이다. ## 성능과 디자인 시스템 - Figma는 네이티브 경쟁 제품보다 빠르다는 평가를 받고 있지만, 로딩과 렌더링 성능을 더 개선할 여지가 있다고 본다. - 가입자가 100만 명을 넘은 만큼, 사용자 규모가 커져도 안정적이고 높은 품질의 경험을 제공하는 것이 중요하다. - 특히 디자인 시스템을 만들고 관리하기에 가장 좋은 환경을 구축하는 데 집중한다. - 디자인 시스템은 여러 팀이 일관된 UI 요소와 규칙을 공유하도록 돕는 핵심 기업 기능으로 제시된다. ## 플랫폼과 확장성 - 디자인 프로세스가 진정으로 개방적이려면 다양한 사용 사례에 맞게 Figma를 확장할 수 있어야 한다. - 회사는 플랫폼 기능과 확장 기능을 개발하고 있다. - 다만 확장 기능의 안정성과 보안을 확보하는 것이 우선이므로 구체적인 출시 일정은 제시하지 않았다. - 향후 플러그인이나 외부 도구 연동을 통해 Figma의 활용 범위가 넓어질 가능성을 보여준다. ## 글로벌 커뮤니티 구축 - Figma의 주간 활성 사용자 중 80%가 미국 외 지역에서 활동한다. - 라고스부터 토론토까지 26개 도시에서 사용자 그룹이 운영되고 있다. - 회사는 서로 다른 지역의 사용자를 더 효과적으로 연결하고, 지역 커뮤니티가 성장하도록 지원할 계획이다. - Sequoia가 커뮤니티 중심 비즈니스 구축 경험을 갖췄다는 점도 투자 유치의 중요한 이유로 언급된다. - Figma는 커뮤니티를 제품 성장의 부수적 요소가 아니라 미래 전략의 기반으로 본다. Figma는 이번 투자를 바탕으로 기업용 협업 기능과 제품 품질을 강화하는 동시에, 확장 가능한 플랫폼과 글로벌 사용자 커뮤니티를 구축하려 한다. 기업이나 팀에서 디자인 협업 도구를 선택할 때는 실시간 공동 작업뿐 아니라 조직 관리, 디자인 시스템, 확장성, 커뮤니티 생태계까지 함께 고려할 필요가 있다.

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

Figma Organization을 소개

Figma Organization은 웹 기반 디자인 협업을 대기업 규모로 확장하기 위해 출시된 Figma의 첫 엔터프라이즈급 요금제다. 무제한 팀, 세밀한 권한 관리, 통합 결제와 감사 보고서, 공유 폰트 및 조직 전체 디자인 시스템을 제공해 여러 부서와 제품이 하나의 작업 환경에서 협업하도록 돕는다. 글은 Uber, Volvo, Square 등의 사례를 통해 중앙화와 자율성을 동시에 확보할 수 있다고 설명한다. ## 엔터프라이즈 시장으로의 확장 - Figma는 디자인이 데스크톱과 로컬 파일이 아니라 웹에서 이루어져야 한다는 비전을 바탕으로 성장했다. - 초기에는 새로운 기술을 빠르게 받아들이는 스타트업이 주요 고객이었지만, 5년 후에는 다양한 규모와 산업의 기업이 웹 기반 디자인 프로세스를 채택했다. - Figma Organization은 기업 리더에게 필요한 기능과 디자이너를 위한 협업 기능을 함께 제공한다. - 통합 결제 - 감사 보고서 - 강화된 보안 및 관리 기능 - 공유 폰트 - 무제한 팀 - 조직 전체에서 사용하는 디자인 시스템 ## 무제한 팀과 중앙화된 작업 공간 - 사용자가 만들거나 참여할 수 있는 팀 수에 제한이 없어 조직 내 다양한 제품과 부서가 독립적으로 운영될 수 있다. - 모든 팀의 프로토타입, 디자인 파일, 코드 내보내기, 에셋을 한곳에서 탐색할 수 있다. - 웹 기반이므로 파일과 작업 결과가 항상 최신 상태로 유지된다. - Volvo Cars처럼 여러 브랜드와 사무실, 팀을 관리해야 하는 오래된 대기업은 파일과 디자인 프로세스를 중앙화할 수 있다. - Uber는 과거 파일이 하드 드라이브, 클라우드 저장소, 외부 플러그인 등 여러 장소에 흩어져 있었다. - Figma 도입 후 각 제품 조직이 자율적으로 운영되면서도 전체 조직의 작업과 에셋을 확인할 수 있게 됐다. - 베타 이후 Uber는 전사적으로 Figma를 도입했고, 제품 디자인 작업의 약 90%를 Figma에서 수행하게 됐다. ## 세분화된 팀 공개 범위와 권한 관리 Figma Organization은 기존 프로젝트·파일 단위 권한에 더해 팀 단위의 공개 범위를 설정할 수 있도록 했다. - **Open** - 누구나 팀에 가입할 수 있다. - **Closed** - 누구나 팀을 볼 수 있지만, 가입하거나 프로젝트를 편집하려면 접근 요청이 필요하다. - **Secret** - 초대받은 사람만 팀의 존재를 확인할 수 있다. 이 구조를 사용하면 조직은 공개 협업이 필요한 팀과 제한적인 접근이 필요한 팀을 구분하면서도, 각 제품 조직의 자율성을 유지할 수 있다. ## 조직 전체 디자인 시스템 - 여러 팀이 공통 Component와 Style 라이브러리를 공유할 수 있다. - 디자인 시스템을 별도의 도구가 아니라 실제 디자인 작업이 이루어지는 Figma 안에서 관리할 수 있다. - Square는 100명 이상의 디자이너와 25개 이상의 제품을 Figma로 이전하고, iOS·Android·웹을 위한 6개의 디자인 시스템을 관리했다. - 한 제품의 디자인 시스템을 다른 제품 팀이 탐색해 유사한 문제를 해결하는 방식을 참고할 수 있다. - 예를 들어 Square for Restaurants 팀이 Point of Sale 제품의 고객 프로필 양식을 참고할 수 있다. - 구조는 재사용하되 제품별 브랜드와 맥락에 맞게 조정할 수 있다. - 모든 팀이 동일한 컴포넌트와 동일한 버전을 바라보므로 디자인 시스템의 단일 진실 공급원(single source of truth)을 확보할 수 있다. ## 변경 사항의 자동 전파 - 디자이너는 마스터 디자인 시스템 파일에서 컴포넌트와 스타일을 추가하거나 수정할 수 있다. - 변경 사항을 반영하기 위해 별도의 수동 배포 절차를 거치지 않고, 간단한 작업만으로 사용하는 팀에 업데이트를 알릴 수 있다. - 웹에서 자산이 연결되어 있기 때문에 여러 파일에 흩어진 디자인 요소를 최신 상태로 유지하기 쉽다. - 이를 통해 조직 전체의 일관성을 유지하면서 디자인 시스템 변경 속도도 높일 수 있다. ## 실용적인 시사점 대규모 조직에서는 팀별 자율성을 없애기보다, 중앙화된 파일 구조와 공유 디자인 시스템을 제공하는 방식이 효과적이다. 팀 공개 범위와 권한을 제품·조직의 보안 요구에 맞게 설정하고, 공통 컴포넌트와 스타일을 단일 라이브러리로 관리하면 협업 효율성과 제품 일관성을 함께 높일 수 있다.

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

디자인 시스템 현황

디자인 시스템은 아직 초기 단계지만, 반응형 디자인처럼 조직의 표준적인 업무 방식으로 자리 잡고 있다. 499명 설문 결과, 전담 팀이나 공개 문서를 갖춘 조직은 많지 않았지만 대부분은 더 성숙한 시스템을 원했다. 디자인 시스템은 단순한 컴포넌트 모음이 아니라 원칙·가이드·문서·운영 프로세스를 포함하는 지속적인 설계 방식이라는 것이 글의 핵심 결론이다. ## 1. 디자인 시스템은 아직 초기 단계 - 응답자의 약 3분의 2가 디자인 시스템의 초기 단계인 1~2단계에 해당했다. - 1단계: 시스템이 문서화되지 않음 - 2단계: 전담 팀이 없음 - 반면 86%는 전담 인력이 유지·관리하고 외부에도 공개된 3~4단계의 시스템을 원했다. - 브래드 프로스트의 아토믹 디자인과 2014년 구글 머티리얼 디자인 이후 관련 방법론이 확산됐지만, 많은 기업에서는 여전히 정착 과정에 있다. - 디자인 시스템은 일시적인 유행이 아니라 “조직이 일하는 방식”으로 자리 잡을 가능성이 높다고 평가된다. ## 2. 전담 팀이 없어도 시작할 수 있다 - 응답자의 절반은 디자인 시스템을 관리하는 전담 팀이 있는 회사에 근무했다. - 그러나 전담 팀이 반드시 필요하다고 생각한 사람은 약 3분의 1에 불과했다. - 특히 1인 디자이너나 소규모 팀도 시스템의 일부를 먼저 구축할 수 있다. - 전체 시스템을 한 번에 만들기보다 다음과 같이 작은 단위로 시작하는 접근이 권장된다. - 줄 간격(line height) 정의 - 색상과 타이포그래피 표준화 - 반복적으로 사용하는 버튼·입력창 등 컴포넌트 정리 - 중요한 것은 완벽한 시스템을 계획하는 것보다 작게 시작해 실제 제품에 적용하고 개선하는 것이다. ## 3. 디자인 시스템은 제품 이후에 만들어지는 경우가 많다 - 이상적으로는 제품 개발과 디자인 시스템 구축을 동시에 진행할 수 있지만, 실제로 그렇게 한 응답자는 41%였다. - 52%는 이미 존재하는 제품을 바탕으로 디자인 시스템을 만들었다. - 7%는 신규 제품과 기존 제품 모두를 지원하는 방식으로 구축했거나, 여러 회사에서 서로 다른 경험을 가진 경우였다. - 기존 제품에서 출발하면 실제 사용 사례와 문제를 기반으로 컴포넌트를 설계할 수 있다. - 처음부터 추상적인 컴포넌트를 무작정 만드는 것보다, 레거시 화면에서 반복되는 패턴을 찾아 체계화하는 방식이 현실적일 수 있다. ## 4. 컴포넌트 라이브러리와 스타일 가이드가 대표적인 산출물이다 - 디자인 시스템에 포함된 요소로 가장 많이 언급된 것은 다음과 같다. - 컴포넌트 라이브러리: 90% - 스타일 가이드: 83% - 디자인 원칙: 57% - 콘텐츠 가이드라인: 47% - 일부 응답자는 다음과 같은 코드 기반 요소도 디자인 시스템에 포함한다고 답했다. - React 컴포넌트 - 믹스인 라이브러리 - 디자인 토큰 저장소 - iOS·Android 개발 리소스 - 코드 관련 응답이 별도 선택지 없이 자유 응답으로 제시됐다는 점은 디자인 시스템의 범위가 시각 디자인을 넘어 개발 구현까지 확장되고 있음을 보여준다. - 당시 설문은 이러한 다양성을 충분히 측정하지 못했으며, 향후에는 더 폭넓은 항목이 필요하다고 지적한다. ## 5. 산출물만으로는 디자인 시스템이 될 수 없다 - 가장 큰 오해는 디자인 시스템을 정적인 패턴 라이브러리나 컴포넌트 모음으로만 보는 것이다. - 디자인 시스템은 다음을 포함하는 지속적인 프로세스에 가깝다. - 디자인 원칙 - 사용 지침 - 의사결정 기준 - 조직의 디자인 철학 - 산출물의 유지·개선 방식 - 컴포넌트 라이브러리와 스타일 가이드는 시스템의 결과물이자 살아 있는 산출물일 뿐, 시스템 전체와 동일하지 않다. - 문서화가 중요한 이유는 구성원들이 단순히 컴포넌트를 복사하는 데 그치지 않고, 언제·왜·어떻게 사용해야 하는지 이해해야 하기 때문이다. - 아무리 훌륭한 컴포넌트라도 올바른 문서와 사용 맥락이 없으면 실제 조직에서 제대로 활용되기 어렵다. 작은 반복 문제부터 실제 제품에 적용해 디자인 시스템을 시작하고, 컴포넌트뿐 아니라 원칙과 사용 지침까지 함께 문서화하는 것이 현실적인 접근이다. 전담 팀이 없더라도 점진적으로 운영 체계를 만들며 확장할 수 있다.

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

딜리버루, 피그마

Deliveroo는 빠른 성장으로 디자인 조직이 커지면서 도구와 파일이 분산되고, 디자이너·콘텐츠·엔지니어 간 협업이 느려지는 문제를 겪었다. Figma의 실시간 공동 편집과 한 문서 내 협업을 도입한 뒤, 팀은 디자인 과정과 의사결정을 투명하게 공유하고 피드백을 더 빠르게 주고받을 수 있게 됐다. 결과적으로 Figma는 Deliveroo의 디자인 문화를 개방적이고 협력적인 방식으로 전환하는 기반이 되었다. ## 빠른 성장으로 생긴 디자인 사일로 - Deliveroo는 2013년 설립 이후 13개 시장, 500개 이상의 도시와 지역으로 확장했다. - 소비자, 배달원, 레스토랑을 위한 제품을 만들기 위해 콘텐츠·리서치·디자인 분야에서 40명 이상의 인력이 협업했다. - 조직이 커지면서 제품 그룹별 사일로가 생겼고, Sketch, Dropbox, Zeplin, Abstract 등 여러 도구가 분산 사용됐다. - 서로 다른 앱 버전의 파일을 동기화하기 어려워 이메일로 파일을 주고받는 일이 잦았다. - 콘텐츠 디자이너와 제품 디자이너가 같은 파일을 동시에 다루지 못해, 한 사람이 오전에 파일을 사용하고 다른 사람이 오후에 이어받는 방식으로 작업했다. - 스크린샷, Slack 메시지, 이메일 등을 통해 변경 사항을 재확인해야 했고 불필요한 커뮤니케이션이 반복됐다. ## 하나의 파일에서 시작된 협업 - Deliveroo 팀은 Figma의 실시간 공동 편집 기능을 통해 여러 사람이 하나의 문서에서 작업할 수 있다는 점에 주목했다. - 초기에는 도구 변경에 대한 우려가 있었지만, 파일을 따로 관리하고 동기화해야 하는 부담이 줄어들면서 빠르게 도입에 동의했다. - 콘텐츠 디자이너와 제품 디자이너가 같은 파일에서 작업하면서 디자인과 콘텐츠 아이디어를 동시에 발전시킬 수 있었다. - 파일 버전을 관리하거나 별도 문서로 콘텐츠를 공유하는 작업이 줄어들었다. - 파일 관리에 들던 시간을 줄이고 실제 제품 아이디어와 문제 해결에 더 집중할 수 있게 됐다. ## 디자인 과정을 공개하는 문화 - Figma를 통해 디자인 결과물뿐 아니라 작업 과정과 사고방식까지 팀 전체가 확인할 수 있게 됐다. - 제품 디자이너, 리서처, 엔지니어, 프로덕트 매니저가 같은 문서에서 콘텐츠 디자인 과정을 볼 수 있었다. - 디자인에 익숙하지 않은 조직 구성원도 작업물을 쉽게 확인하고 의견을 제시할 수 있었다. - 엔지니어가 디자인의 의도를 이해한 상태에서 예외 상황(edge case)을 제안하고 함께 정의할 수 있게 됐다. - 디자인이 특정 담당자만 이해하는 비공개 작업이 아니라, 여러 직군이 참여하는 공개적인 과정으로 바뀌었다. ## 온보딩과 지식 공유의 간소화 - 새로 합류한 디자이너는 여러 도구를 따로 익히는 대신 Figma를 중심으로 팀의 작업 방식을 빠르게 파악할 수 있었다. - 기존 파일과 프로젝트를 직접 둘러보며 팀의 디자인 기준과 진행 방식을 스스로 학습할 수 있었다. - 콘텐츠 디자이너처럼 다양한 이해관계자와 협업해야 하는 구성원에게 특히 도구 학습 부담이 줄었다. - 업무 결과물뿐 아니라 과거의 논의와 디자인 맥락도 한곳에서 확인할 수 있어 팀 지식 공유가 쉬워졌다. ## 한 문서에 모인 피드백 - 댓글과 의견을 디자인 파일 안에 직접 남길 수 있어 프로젝트 관련 논의가 여러 채널로 흩어지지 않았다. - 담당자가 별도로 작업 내용을 설명하지 않아도 문서와 댓글만으로 프로젝트의 진행 상황을 파악할 수 있었다. - 파일을 보면서 질문하고 답변할 수 있어 피드백 전달과 응답 속도가 빨라졌다. - 의견과 결정 사항이 디자인과 함께 남기 때문에, 팀원들이 작업의 맥락을 더 쉽게 이해할 수 있었다. ## 실용적인 결론 빠르게 성장하는 디자인 조직이라면 도구의 개수보다 모든 구성원이 같은 작업 공간과 최신 파일을 공유하는지가 중요하다. 실시간 공동 편집, 문서 내 댓글, 직군 간 접근 권한을 활용하면 파일 동기화와 반복적인 확인 작업을 줄이고 디자인·콘텐츠·개발 간 협업을 더 투명하고 효율적으로 만들 수 있다.

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

Zoom, Figma로 디자인 워크

Zoom은 Sketch, InVision·Framer, Zeplin으로 분리된 디자인 workflow를 Figma로 통합해 반복 작업과 협업 마찰을 줄였다. 실시간 공동 편집, 디자인 문서 내 댓글, 공유 라이브러리를 통해 디자이너뿐 아니라 엔지니어·PM·데이터 과학자까지 같은 맥락에서 참여할 수 있게 되었고, 피드백의 양과 품질도 크게 향상됐다. Figma는 Zoom의 단일 기준 문서이자 디자인 시스템 구축의 기반으로 자리 잡았다. ## 분산된 디자인 도구가 만든 비효율 - Zoom의 디자인팀은 여러 국가와 시간대에 걸쳐 원격으로 협업했다. - 디자이너 1명이 엔지니어 약 10명을 지원하는 구조였기 때문에, 디자인 의도를 일일이 설명하기 어려웠다. - Sketch에서 디자인하고, InVision이나 Framer에서 프로토타입을 만들고, Zeplin으로 개발자에게 전달하는 방식이었다. - 디자인 수정 때마다 여러 도구 간 파일을 동기화해야 했다. - 한 프로젝트에서 수정본을 10~20회씩 각 도구에 반영하고, 버전과 이해관계자별 리뷰를 따로 관리해야 했다. - 이 과정은 창의적인 작업보다 파일 관리와 수동 반복 작업에 시간을 쓰게 만들었다. ## Figma를 통해 발견한 전환점 - 디자이너 Steven Crosby는 Figma의 빠른 렌더링과 높은 프레임 속도에 주목했다. - 여러 사람이 하나의 디자인 파일에서 동시에 작업할 수 있는 실시간 협업 기능이 핵심적인 장점으로 평가됐다. - 댓글 기능을 통해 디자인 문서 안에서 직접 피드백을 남길 수 있었다. - 정적인 스크린샷을 공유하는 방식과 달리, 전체 화면 흐름과 해당 요소가 사용되는 맥락을 유지한 채 의견을 주고받을 수 있었다. - 별도의 다운로드, 파일 동기화, 정적 파일 공유 없이 링크만으로 협업할 수 있었다. ## 디자이너와 다른 직군의 협업 강화 - Figma는 디자이너뿐 아니라 프로젝트 매니저, 제품 매니저, 엔지니어까지 동일한 문서에 참여하게 했다. - 디자인 의사소통이 구두 설명이나 이미지 첨부 중심에서 문서 내 직접 피드백 중심으로 바뀌었다. - Zoom은 이전보다 피드백의 양과 품질이 크게 향상됐다고 평가했다. - 실시간으로 같은 화면을 보며 작업하므로, 원격 근무자와 다른 시간대의 팀원도 협업하기 쉬워졌다. ## 단일 기준이 된 디자인 시스템 - Figma를 팀의 단일 기준 문서로 사용하면서 디자인 시스템의 기반을 마련했다. - Team Libraries를 통해 여러 프로젝트에서 공통 컴포넌트를 공유할 수 있었다. - 아이콘 세트와 다양한 UI 컴포넌트를 마스터 파일에 모아 지속적으로 업데이트했다. - 라이브 업데이트를 통해 모든 디자이너가 최신 컴포넌트를 사용할 수 있었다. - Constraints 기능을 활용해 화면 크기가 바뀌어도 요소가 특정 방향에 고정되도록 만들고, 일관된 디자인 패턴을 구축했다. - 컴포넌트 중심의 작업 방식은 디자인 재사용성과 유지보수성을 높였다. ## 비디자이너도 참여한 브레인스토밍 - Zoom은 데이터 과학팀과 투자회사 소속 디자인 파트너를 제품 메시지 브레인스토밍에 초대했다. - 참가자들은 Figma를 처음 사용했지만 별도의 긴 교육 없이 바로 디자인 파일에 참여했다. - 각자 화면의 영역을 맡아 문구와 요소를 직접 배치하고, 다른 사람의 아이디어를 참고하거나 변형했다. - 실시간으로 서로의 커서를 확인하며 아이디어를 발전시킬 수 있었다. - Figma의 낮은 학습 곡선 덕분에 디자인 작업이 특정 직군만의 활동이 아니라 공동 창작 과정으로 확장됐다. ## 실용적인 결론 여러 도구와 파일 형식으로 나뉜 디자인 프로세스는 반복적인 동기화와 맥락 손실을 만든다. 팀 규모가 작거나 원격 협업이 많다면, 디자인·프로토타이핑·피드백·개발 전달을 하나의 공유 문서와 컴포넌트 라이브러리로 통합하는 방식이 효율적이다. Figma의 강점은 단순한 디자인 도구가 아니라 모든 직군이 같은 맥락에서 협업하는 공통 작업 공간을 제공한다는 데 있다.

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

Figma에서 페이지를

Figma의 Pages는 하나의 파일 안에서 작업을 목적별로 나누어 정리하는 유연한 구조다. 글은 플랫폼, 기능, 디자인 단계, 원자적 디자인 방법론에 따라 Pages를 구성하는 네 가지 방식을 소개하며, 팀 규모와 프로젝트 특성에 맞는 체계를 선택하라고 제안한다. 적절히 나누면 협업, 프로토타이핑, 검색, 개발자 전달이 쉬워진다. ## Pages를 활용한 파일 구조화 - Figma 파일의 왼쪽 탭에 여러 Pages를 만들어 디자인을 분류할 수 있다. - 조직 방식에는 정답이 없으며 회사, 팀, 개인의 작업 방식에 따라 달라진다. - 디자인 파일을 무작정 한 곳에 쌓기보다 작업 목적에 맞게 구분하면 정리보다 디자인 자체에 집중할 수 있다. ## 플랫폼 또는 화면 크기별 구성 - Android, iOS, 데스크톱처럼 여러 플랫폼을 지원하는 제품에 적합하다. - 플랫폼별로 Page를 나누면 각 환경의 프레임 프리셋과 제약 조건을 적용하기 쉽다. - 각 Page에 독립적인 프로토타입을 구성할 수 있어 플랫폼별 사용자 테스트가 간편하다. - 반응형 디자인을 플랫폼별로 비교하고 관리하기에도 유리하다. ## 앱 기능별 구성 - 여러 디자이너가 다양한 기능을 동시에 개발하는 대규모 앱에 적합하다. - 프로필, 홈 화면 등 제품의 주요 기능을 각각 별도의 Page로 분리한다. - 담당 디자이너는 특정 기능에 집중하면서도 다른 Page를 참고해 전체 제품과의 일관성을 유지할 수 있다. - 기능별로 별도의 프로토타입을 만들어 특정 사용자 흐름만 독립적으로 테스트할 수 있다. ## 디자인 프로세스 단계별 구성 - 아이디어부터 최종 결과물까지 작업 진행 상태를 명확히 보여줄 수 있다. - 예를 들어 다음과 같이 Page를 구성할 수 있다. - 썸네일 → 와이어프레임 → 디자인 → 아카이브 - 문서·리서치 → 작업 중인 시안 → 리뷰 준비 - 사이트맵 → 와이어프레임 → 목업 → QA → 마케팅용 스크린샷 - `Done` Page에 완료된 디자인을 모으면 개발자는 실제로 구현해야 할 결과물을 쉽게 확인할 수 있다. - 초기 아이디어와 브레인스토밍을 별도 Page에 두면 완성도 높은 화면이 작업 중인 시안에 묻히지 않는다. - 팀이 복잡한 체계를 원하지 않는다면 단순히 “진행 중”과 “완료” 정도로 나누는 방식도 가능하다. ## Atomic Design 방법론에 따른 구성 - 디자인 시스템을 원자적 디자인 방식으로 운영할 때 적합하다. - 구성 요소의 계층에 따라 Page를 분리한다. - Atoms: 타이포그래피, 아이콘 등 기본 요소 - Molecules: 버튼 등 조합된 컴포넌트 - Organisms: 전체 페이지처럼 복잡한 구성 - Team Library에서 Page 이름을 기준으로 컴포넌트를 찾기 쉬워진다. - 레이어 이름에 컴포넌트 유형을 반복해서 넣지 않아도 된다. - 예: `button-selected`, `button-hovered` 대신 `selected`, `hovered`처럼 상태만 이름에 표시 - 결과적으로 레이어 패널이 단순해지고 컴포넌트 검색과 관리가 쉬워진다. 프로젝트의 핵심 기준을 먼저 정한 뒤 Pages를 구성하는 것이 좋다. 여러 플랫폼을 지원하면 플랫폼별로, 협업 규모가 크면 기능별로, 개발 전달이 중요하면 프로세스 단계별로 나누고, 디자인 시스템 중심이라면 Atomic Design 구조를 적용하면 된다.

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

Figma에서 제약 조건과 매

LittleBits 팀은 여러 플랫폼과 화면 크기에 대응하기 위해 Figma의 제약 조건과 8px 기반의 ‘매직 넘버’ 시스템을 결합했다. 주요 크기와 여백을 일정한 배수로 통일하고, 화면 비율별 스케일링 규칙을 React 코드에도 적용해 하나의 템플릿으로 모바일·태블릿 레이아웃을 관리했다. 그 결과 작은 팀으로도 다양한 기기에서 일관된 디자인을 유지하면서 추가적인 화면별 조정을 줄일 수 있었다. ## 8px 기반의 매직 넘버 시스템 - 텍스트, 버튼, 그래픽, 여백, 패딩 등의 크기가 공통 숫자 배수를 따르도록 설계했다. - 기존 시안을 분석한 결과 대부분의 값이 8의 배수에 가까웠기 때문에 8px을 기준 단위로 채택했다. - 버튼과 입력 요소의 높이는 32, 48, 56, 64, 96px로 구성했다. - 주요 텍스트 크기는 16, 24, 32, 48px을 사용했다. - 패딩과 거터는 16, 24, 32px을 중심으로 정의했으며, 큰 카드 높이는 240px로 설정했다. - 공통 단위를 사용하면 컴포넌트 간 간격과 크기를 조정하기 쉽고 전체 디자인의 조화도 높아진다. ## Figma 제약 조건과 화면 크기 대응 - Figma의 constraints를 활용해 요소를 화면이나 그리드의 가장자리에 고정하고, 프레임 크기 변화에 따라 레이아웃이 반응하도록 만들었다. - 하나의 레이아웃이 일반적인 스마트폰, 작은 화면의 iPhone SE, 태블릿에서 모두 자연스럽게 보이도록 화면 간 비율을 분석했다. - 화면 크기 사이의 비율을 계산한 뒤 소수 값을 반올림해 실용적인 정수 기반 스케일링 규칙으로 정리했다. - 이 규칙을 React 코드의 크기 계산 로직에 적용해 디자인과 실제 구현이 같은 방식으로 동작하도록 했다. - Figma에서는 scale 도구와 프레임 크기 조절을 함께 사용해 하나의 템플릿으로 다양한 기기 화면을 미리 확인했다. - 템플릿이 처음부터 스케일링 규칙을 고려해 설계되었기 때문에 태블릿과 작은 스마트폰에서도 별도의 대규모 수정 없이 안정적으로 표시됐다. ## 다양한 화면 비율을 위한 콘텐츠 설계 - 앱에는 많은 영상과 애니메이션이 포함되어 있어 화면별로 콘텐츠 파일을 여러 버전 제작하는 방식은 피하고자 했다. - 모든 영상과 애니메이션을 4:3 비율을 기준으로 제작했다. - 16:9 화면에서 일부가 잘리더라도 핵심 내용이 유지되도록 안전 영역(safe area)을 설정했다. - 이 방식으로 콘텐츠 파일은 하나만 유지하면서 다양한 화면 비율에 대응할 수 있었다. ## 텍스트 크기와 다국어 지원 - 8px 규칙이 모든 텍스트에 적합한 것은 아니므로 작은 글자에는 4px 단위의 예외를 허용했다. - 예를 들어 12px과 20px 같은 크기를 사용해 가독성과 시각적 균형을 맞췄다. - 앱을 6개 언어로 번역하면서 독일어처럼 단어가 긴 언어가 정해진 영역을 넘는 문제가 발생했다. - 이를 해결하기 위해 텍스트가 영역에 맞지 않으면 코드가 다음으로 작은 제목 크기를 자동 선택하도록 구현했다. - 그 결과 실제 사용 가능한 제목 크기는 기본 디자인보다 많아졌지만, H1부터 H6까지 단계적으로 자연스럽게 작아지는 체계를 유지했다. ## 단순한 레이아웃에 맞춘 체계적인 접근 - 대부분의 화면은 중앙 정렬 요소나 2~3열 콘텐츠처럼 비교적 단순한 구조였다. - 복잡한 반응형 패턴을 많이 사용하지 않고, 기본 제약 조건과 스케일링 시스템만으로 요구사항을 충족했다. - 디자인 시스템을 Figma와 React 양쪽에 동일하게 적용한 것이 다양한 화면 크기를 효율적으로 관리한 핵심이었다. 실무에서는 먼저 기존 디자인에서 반복되는 크기와 간격을 찾아 기준 단위를 정하고, Figma constraints와 코드의 반응형 규칙을 함께 설계하는 것이 좋다. 다만 텍스트와 다국어처럼 예외가 잦은 영역에는 고정 규칙을 강제하기보다 단계적 축소나 안전 영역 같은 유연한 예외 처리를 마련해야 한다.

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