디자인 시스템이란?

디자인 시스템은 팀이 제품을 일관되게 만들기 위해 공유하는 디자인 결정, 컴포넌트, 규칙의 집합입니다. 보통 디자인 토큰, 컴포넌트 라이브러리, 사용 지침, 문서를 포함하며 디자인과 코드 모두를 위한 단일 진실 공급원으로 관리됩니다.

무엇으로 이루어지는가

작동하는 디자인 시스템 대부분에는 네 개의 층이 있고, 실패하는 시스템에는 대개 첫 번째가 없습니다.

디자인 토큰: 모든 것의 밑바탕에 있는 이름 붙은 값. 색상, 타이포그래피, 여백, 반경, 그림자, 모션.

컴포넌트: 재사용되는 조각. 값을 직접 박는 대신 토큰을 참조하도록 만들어집니다. 버튼, 폼 필드, 모달.

가이드라인: 어떤 상황에 어떤 컴포넌트를 쓸지, 어떤 문구를 쓸지, 접근성이 무엇을 요구하는지.

문서: 위의 모든 것을 사람들이 찾을 수 있는 읽을 수 있는 표면.

컴포넌트 라이브러리가 아닙니다. 라이브러리는 하나의 층입니다. 토큰 없는 디자인 시스템은 일관성 없는 값 위에 일관된 컴포넌트를 얹는 셈입니다.

Figma 파일이 아닙니다. Figma 파일은 하나의 표현입니다. 코드가 같은 결정을 참조하지 않는다면, 우연히 닮은 디자인 시스템이 두 개 있는 것입니다.

문서가 아닙니다. 문서는 시스템을 서술합니다. 토큰을 정하기 전에 문서 사이트부터 만든 팀은 아무것도 아닌 것의 설명을 쓴 셈입니다.

디자인 시스템의 실패 방식은 붕괴가 아니라 침식입니다. 아무도 포기를 선언하지 않습니다. 그저 바깥에 값이 쌓일 뿐입니다.

각각은 따로 보면 납득이 갑니다. 모아 놓으면 아무도 만들기로 하지 않은 여러 디자인 시스템이 나란히 도는 코드베이스가 됩니다.

해법은 규율이 아닙니다. 규율은 규모를 감당하지 못합니다. 시스템을 가장 저항이 적은 길로 만드는 것, 즉 그것을 소비하는 모든 도구에서, 그 도구가 기대하는 형식으로, 수동 단계 없이 닿을 수 있게 만드는 것입니다.

수작업으로 하면 처음 일관된 체계까지 보통 며칠에서 몇 주가 걸립니다. 하나하나가 어려워서가 아니라 결정이 수백 개이고 서로 얽혀 있기 때문입니다. 모든 조합에서 대비를 유지하는 색 스케일, 단순 반전이 아닌 다크 모드, 리브랜딩을 견디는 시맨틱 명명.

Flash DS는 프롬프트, URL, Figma 파일, 스크린샷에서 토큰 층과 컴포넌트 명세를 만들고, 이후에도 코드·Figma·코드를 작성하는 AI 에이전트와 계속 동기화합니다.