figma2021년 7월 6일

News UK가 멀티 (새 탭에서 열림)

News UK는 서로 다른 역사와 요구사항을 가진 여러 브랜드를 하나의 디자인 시스템으로 통합했다. 기존에는 Sketch, Abstract, Zeplin, InVision을 조합하면서 라이브러리 유지보수와 브랜드별 변형 관리가 복잡해졌지만, Figma로 전환해 도구와 라이브러리를 중앙화했다. 또한 교육, 문서화, 디자이너 옹호자 제도를 통해 조직의 참여를 이끌어내면서 확장 가능한 시스템을 구축했다. ## 여러 브랜드를 하나로 통합해야 했던 배경 - News UK는 인쇄 매체뿐 아니라 온라인, 라디오, TV까지 사업을 확장했다. - The Times, The Sun 등 각 브랜드는 독립적인 디자인 조직, 제품 팀, 도구를 사용하고 있었다. - 브랜드마다 고유한 역사와 시각적 요구사항이 있어 단순히 동일한 디자인을 강제할 수 없었다. - 여러 브랜드와 제품에서 디자인·개발을 확장하려면 공통 요소를 재사용하면서도 브랜드별 차이를 유지할 수 있는 시스템이 필요했다. ## 기존 도구 조합의 문제점 - Sketch, Abstract, Zeplin, InVision을 함께 사용했지만 결과적으로 작업 흐름이 분절됐다. - 디자인 시스템 팀이 라이브러리 업데이트와 유지보수에 며칠에서 몇 주씩 소요됐다. - 브랜드별 변형을 지원하기 위해 수천 개의 텍스트 스타일과 컴포넌트 스타일이 생겼다. - 기존 테마 기능은 제품과 브랜드 요구가 늘어날수록 지나치게 복잡하고 경직됐다. - The Times의 라디오 사업처럼 새로운 유형의 제품이 시스템을 사용하기 시작하면서, 디자인 시스템 팀이 각 팀을 직접 지원해야 하는 부담이 커졌다. - 사용하기 어려운 시스템은 팀의 채택을 이끌어내지 못했기 때문에, 도구와 운영 방식 모두를 재검토해야 했다. ## Figma로 도구와 라이브러리 통합 - News UK는 Sketch와 여러 보조 도구를 Figma로 전환했다. - 전환의 목표는 다음과 같았다. - 여러 도구를 하나로 통합 - 라이브러리 관리의 중앙화 - 디자이너의 실제 사용과 기여 촉진 - Figma 도입 후 디자이너들은 디자인 시스템을 업무를 방해하는 제약이 아니라 효율을 높이는 기반으로 인식하기 시작했다. - 전체 마이그레이션은 약 몇 주 만에 진행됐다. ## 채택을 유도한 교육과 참여 방식 - 새로운 시스템을 배포하고 “사용하라”고 지시하는 것만으로는 충분하지 않다고 판단했다. - 디자인 시스템 팀이 각 디자이너의 Figma 작업 공간을 직접 설정하고 온보딩했다. - 다음과 같은 주제의 맞춤형 워크숍과 문서를 제공했다. - Sketch 파일 마이그레이션 - 파일 구조화와 관리 - 컴포넌트 사용법 - 댓글 작성과 디자인 검사 - Jira 등 외부 도구와의 연동 - 디자이너들과 함께 컴포넌트 사양과 재사용 가능한 디자인 패턴을 만들고 조직 전체에 공유했다. - 특정 상황에서 어떤 컴포넌트를 선택해야 하는지 안내하는 Figma 기반 도구와 프로토타입도 제작했다. ## 디자이너 옹호자 제도 - 각 제품 영역에서 디자인 시스템을 홍보할 디자이너 옹호자(designer advocate)를 모집했다. - 옹호자는 다음 역할을 맡았다. - 팀 내 디자인 시스템 사용 촉진 - 우수 사례와 사용법 공유 - 디자인 시스템 팀과 현업 팀 사이의 주요 연락 창구 - 시스템 변경 사항을 제품 팀에 전달 - 중앙 조직이 모든 팀을 직접 지원하는 대신, 각 조직 안에서 시스템이 확산되도록 만든 방식이다. ## 브랜드별 테마를 지원하는 시스템 - 동일한 컴포넌트에 서로 다른 브랜드 테마를 적용할 수 있도록 구성했다. - News UK는 자체 Themer 플러그인을 개발해 여러 브랜드에 적용할 컴포넌트를 쉽게 실험하고 구축했다. - 이를 통해 공통 컴포넌트의 구조와 동작은 재사용하면서도 색상, 스타일 등 브랜드별 표현을 유지할 수 있었다. - 디자인 시스템이 모든 브랜드에 억지로 동일하게 적용되는 대신, 각 브랜드에 맞게 제작된 것처럼 느껴지도록 했다. ## 확장 이후의 효과 - 디자이너들이 더 이른 시점에 협업하고 피드백을 주고받을 수 있게 됐다. - 팀 간 고립과 기존 솔루션의 중복 제작이 줄었다. - 모든 제품·디자인 팀에 시스템을 배포한 뒤 내부 NPS가 첫 분기에 23포인트 상승했다. - 제품 팀이 시스템에 실제로 참여하고, 업무 효율 향상과 재사용의 이점을 체감하기 시작했다. - 디자인 시스템은 완성된 결과물이 아니라 지속적으로 개선되는 확장 기반으로 자리 잡았다. ## 실용적인 결론 다중 브랜드 디자인 시스템의 성공은 컴포넌트와 도구만으로 결정되지 않는다. 브랜드별 차이를 수용할 수 있는 테마 구조, 중앙화된 라이브러리, 체계적인 온보딩, 현업 디자이너의 참여와 옹호자 네트워크를 함께 구축해야 한다. 특히 시스템을 일방적으로 배포하기보다 사용자가 이해하고 기여할 수 있도록 만드는 운영 체계가 중요하다.

invisionfigmadesign-systemsjira+4

figma2020년 7월 6일

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

174년 역사의 통신 기업 BT는 빠르게 변화하는 기술과 높아진 사용자 기대에 대응하기 위해 제품 개발 방식을 전환했다. 제품·엔지니어링·디자인 인력을 소규모 제품 스쿼드로 재편하고 Figma를 도입하면서 협업과 의사결정의 속도, 투명성을 높였다. 그 결과 도구 비용을 50% 절감하고, 원격근무 상황에서도 혁신을 지속할 수 있었다. ## 제품 스쿼드 모델로의 전환 - BT는 제품, 엔지니어링, 디자인 조직을 제품 스쿼드 중심으로 재구성했다. - 각 스쿼드는 특정 제품의 기획부터 출시까지 전 과정을 책임지는 소규모·유연한 팀으로 운영됐다. - 디자이너는 더 이상 디자이너끼리만 일하지 않고, 제품 담당자, 엔지니어, 콘텐츠 디자이너와 함께 협업했다. - 그러나 기존에는 문서, Sketch, InVision, Jira 등 여러 도구를 병행해야 했다. - 파일 이동과 여러 피드백 채널 관리에 시간이 소요되어 실제 디자인 작업과 팀 간 소통이 비효율적이었다. ## Figma 도입과 협업 방식 개선 - 180명 이상의 디자이너가 있는 만큼, BT는 먼저 한 제품 스쿼드에서 2개월간 Figma를 시험 운영했다. - 몇 주 만에 실시간 협업, 디자인 핸드오프, 파일 관리가 쉬워졌다는 긍정적인 피드백을 얻었다. - 디자인, 프로토타이핑, 발표를 하나의 도구에서 처리하면서 Sketch와 InVision 사이에서 파일을 옮길 필요가 줄었다. - 제품 담당자와 엔지니어도 진행 중인 디자인을 직접 확인하고 초기 단계부터 의견을 제시할 수 있게 됐다. - Figma 파일 링크만 공유하면 임원과 외부 이해관계자도 기기와 장소에 관계없이 디자인을 보고 댓글을 남길 수 있었다. - 파일럿 이후 BT는 모든 제품 스쿼드에 Figma를 확대 적용했다. ## 협업을 넘어선 효과 - **비용 50% 절감:** Sketch와 InVision을 Figma로 대체하고 디자인 도구를 통합했다. - **디자인의 의사결정 참여 확대:** 이해관계자가 디자인 과정에 더 잘 접근하게 되면서 디자인이 사업 의사결정과 투자 논의의 핵심 요소가 됐다. - **디자인 일관성 강화:** 브랜드, 제품, 여러 사업부를 아우르는 중앙화된 디자인 시스템 구축의 기반을 마련했다. - **업무 연속성 확보:** 코로나19로 재택근무가 시행된 뒤에도 구성원들이 Figma에서 함께 아이디어를 공유하고 문제를 해결할 수 있었다. - **발표 방식 변화:** 완성된 프레젠테이션을 만드는 대신 CEO와 라이브 디자인 파일을 함께 보며 ‘경험 walkthrough’를 진행했다. - **투명성과 효율 향상:** 팀 전체가 동일한 작업물을 실시간으로 확인해 공동의 이해를 빠르게 형성하고, 제품과 기능을 더 자신 있게 출시할 수 있었다. ## 실용적인 시사점 협업 도구 도입만으로 변화가 완성되는 것은 아니며, 먼저 조직을 제품 중심의 소규모 팀으로 재편하고 팀 간 공동 책임 구조를 만들어야 한다. 이후 파일럿 운영으로 효과를 검증한 뒤 도구를 확산하면 구성원의 수용성을 높이면서 비용 절감, 의사결정 가속화, 원격 협업 강화까지 함께 달성할 수 있다.

invisionfigmadesign-systemsprototyping+3