스포트라이트 · Digital Brains
과학자 빌더를 위한 디자인 시스템
우리의 디자인 시스템은 디자이너만 쓸 수 있는 Figma에 있었습니다. 이를 웹 앱으로 다시 만들어, 과학자 프로덕트 오너, 과학자, 엔지니어가 직접 새 워크플로를 만들고 프로덕션에서 실행 중인 것과 자동으로 대조해 검증할 수 있게 했습니다.
01
소개
과학자 프로덕트 오너들은 제품의 새 기능을 더 빨리 만들어야 합니다. 이는 새 워크플로의 생성을 거치며, 이 워크플로는 매주 열리는 과학 회의에서 발표되어야 합니다. 팀의 일부는 POC도 만들며, 현실에 더 가까운 프로토타입을 원했습니다.
그래서 우리는 디자인 시스템을 파일이 아니라 애플리케이션으로 만들었습니다. 디자이너가 아니어도 실제 인터페이스 조각을 조립하고, 테스트하고, 보여 줄 수 있는 곳입니다.
토큰 — 기능으로 이름 붙인 색상, HEX·RGB·RGBA로 복사
02
과제
디자인 시스템은 처음에 수많은 컴포넌트와 변형이 있는 Figma에서 관리되었습니다. 이를 쓰려면 Figma 고유의 방식, CSS, 프론트엔드 개발을 이해해야 했습니다. 우리는 앱에서 만든 것들의 누렇게 바랜 사진으로 가득한 먼지 쌓인 종이 상자를 원하지 않았습니다. 1) 읽기 전용이 아니어야 했고, 2) 디자인 팀만의 일이 아니어야 했습니다.
또한 프로덕트 오너, 과학자, 소프트웨어 엔지니어, AI 에이전트 네 부류에게 동시에 작동해야 했습니다. 타협은 불가능했습니다. 그러면 아무에게도 쓸모가 없어지니까요. 기술 부채와 Figma와 프로덕션 사이의 불일치까지 있었기에, 배포된 앱에서 컴포넌트, 세그먼트, 분자가 최신이 아닐 때 디자인 시스템에 알려 줄 수 있는 검증기도 필요했습니다.
03
우리가 바꾼 것
우리는 React 컴포넌트를 공통 방법론에 맞게 조정한 다음, 그 방법론을 디자인 시스템 안에 다시 구축했습니다. 프로덕션이든 디자인 시스템이든 모든 새 요소는 자동 검증기를 거칩니다. 컴포넌트 빌더에서는 분자나 컴포넌트에서 시작해 구성하고, 검증을 받고, 게시합니다.
우리는 토큰과 타이포그래피를 디자인 어휘에 덜 의존하도록 만들었습니다. 색상은 어떻게 보이는지가 아니라 무슨 역할을 하는지로 이름을 붙이고, 사전이 모든 디자인·프론트엔드 용어를 설명합니다. 접근성, 그리고 토큰·분자·컴포넌트가 전달하는 어포던스처럼 과학자들이 제기한 제약은 구체적인 사례를 두고 함께 나눈 논의에서 나왔습니다.
01 / 06
타이포그래피 — 모든 스타일의 서체, 크기, 행간, 자간
04
실제 영향
우리는 새 기능과 새 신경과학 워크플로의 검증 속도를 60% 넘게 높였습니다. 이 변경을 검증하는 모든 사람이 POC나 프로토타입을 바로 열어 볼 수 있었고, 그것을 만드는 데 쓰인 요소가 유효한지 신경 쓸 필요가 없었습니다. 엔지니어들도 디자인 시스템 위에서 개발된 라이브러리 덕분에 더 빨리 구현했습니다.
돌이켜 보면 우리는 이 일을 훨씬 더 일찍 했을 것이고, Figma를 진실의 원천이 아니라 다리로 사용했을 것입니다.
AI 어시스턴트 — 토큰, 컴포넌트, 용어에 대한 답변