코드에서 영감 얻기 | Figma (새 탭에서 열림)
디자인 시스템이 복잡성과 규모를 감당하려면 코드의 설계 원칙에서 배울 필요가 있다. 특히 고정된 컴포넌트와 과도한 변형 조합 대신 구성(composition), 구조와 표현의 분리, 체계적인 변경 관리가 중요하다. 궁극적으로 디자인 시스템은 창의성을 제한하는 규칙 모음이 아니라, 유연성과 일관성을 함께 제공하는 제품처럼 운영되어야 한다. ### 디자인의 복잡성과 코드에서 얻는 교훈 - 과거에는 디자인 파일이 개인 컴퓨터에 저장되어 협업이나 파일 간 의존성을 크게 신경 쓰지 않아도 됐다. - 오늘날에는 여러 팀과 기여자가 서로 연결된 시스템을 동시에 다루므로 일관성, 품질, 확장성을 관리해야 한다. - 디자인 시스템은 복잡성을 줄이는 데 도움을 주지만, 구조가 지나치게 강해지면 자유로운 탐색과 표현을 방해할 수 있다. - Figma는 이러한 문제에 대응하기 위해 디자인이 코드의 엔지니어링 프레임워크를 차용하고 있다고 설명한다. ### 중첩 컴포넌트로 유연한 레이아웃 구성 - 단순한 시스템에서는 하나의 컴포넌트에 몇 가지 변형(variant)만 정의하면 된다. - 카드처럼 가로형·세로형 등 레이아웃이 다양해지면 모든 경우를 variant로 만드는 방식은 유지보수가 어려워진다. - 컴포넌트 속성으로 이미지, 인용문 등 선택적 요소를 제어할 수 있지만, 구조 자체가 크게 다른 레이아웃에는 한계가 있다. - 작은 하위 컴포넌트를 만든 뒤 이를 큰 컴포넌트 안에 중첩하는 **구성(composition)** 방식을 사용할 수 있다. - 이미지, 제목, 가격, 버튼 같은 하위 컴포넌트를 다양한 방식으로 조합하면 시스템 관리자가 미리 예상하지 못한 레이아웃도 유연하게 만들 수 있다. - 이는 코드에서 재사용 가능한 모듈을 조합해 여러 기능을 구현하는 방식과 유사하다. ### 구조와 표현의 분리 - 초기 디자인 시스템은 컴포넌트에 특정 색상을 직접 지정하는 단순한 형태로 시작하는 경우가 많다. - 이후 다크 모드가 필요해지고, 제품·브랜드별 색상까지 추가되면서 테마 관리가 복잡해진다. - 제품과 하위 브랜드가 늘어날수록 각 컴포넌트에 색상과 스타일을 직접 넣는 방식은 조직의 관리 부담을 키운다. - 이러한 문제를 해결하려면 컴포넌트의 구조와 시각적 표현을 분리하는 새로운 아키텍처가 필요하다. - 글에서는 그 대안으로 **헤드리스 디자인 시스템(headless design system)**을 소개하려 하지만, 제공된 본문은 해당 설명 중간에서 끝난다. ### 실용적인 결론 컴포넌트의 모든 경우를 미리 variant로 만들기보다, 재사용 가능한 하위 컴포넌트를 조합하는 구조를 우선 고려하는 것이 좋다. 또한 색상·테마 같은 표현 요소를 구조와 분리하면 다크 모드, 멀티브랜드, 하위 제품 확장에 더 효과적으로 대응할 수 있다.