디자인 시스템의 미래 (새 탭에서 열림)
디자인 시스템의 미래는 단순히 색상·간격 같은 값을 표준화하는 데서 나아가, 그 값의 의미와 사용 목적을 중심으로 설계하는 시맨틱 방식에 있다. 디자인 토큰과 Figma 변수는 디자인 결정을 여러 플랫폼과 코드에 일관되게 전달하고, 테마 변경과 동적 프로토타이핑까지 가능하게 한다. 따라서 변수는 디자인 시스템을 기록하는 도구를 넘어 디자인과 개발을 연결하는 핵심 기반으로 발전하고 있다. ## 디자인 시스템의 복잡성과 토큰의 필요성 - 시간이 지나면 제품 안에 동일한 목적의 색상·간격·타이포그래피 값이 중복되면서 디자인 시스템이 복잡해진다. - Google Maps는 제품에 700개가 넘는 색상이 사용되고 있음을 발견한 뒤, 이를 25개의 색조로 정리했다. - 축소된 색상 체계가 다시 무질서하게 늘어나지 않도록 디자인 토큰을 사용해 색상 팔레트를 문서화하고 배포했다. - 토큰은 색상, 숫자, 문자열, 테두리 반경, 크기, 글꼴 등 반복되는 디자인 결정을 표현하는 데이터다. - 특정 컴포넌트나 구현 방식에서 디자인 속성을 분리하므로 플랫폼에 종속되지 않고 여러 제품과 환경에서 재사용할 수 있다. - 예를 들어 모든 “나무” 요소의 색상을 변경해야 한다면, 개별 요소를 수정하지 않고 하나의 토큰만 바꿔 전체에 반영할 수 있다. ## 디자인 토큰에서 시맨틱 시스템으로 - 토큰은 디자인 결정을 코드나 특정 컴포넌트가 아닌 독립적인 값으로 관리해 일관성과 유지보수성을 높인다. - Salesforce는 2014년부터 여러 플랫폼과 소프트웨어에 동일한 디자인 원칙을 적용하기 위해 토큰을 활용한 사례로 자주 언급된다. - 토큰의 진정한 가치는 값 자체보다 값이 제품 안에서 어떤 역할을 하는지 표현하는 데 있다. - 예를 들어 단순히 `blue-500`처럼 색상 자체를 지정하기보다, `button-background-primary`처럼 사용 목적과 의미를 나타내면 테마나 브랜드가 바뀌어도 구조를 유지하기 쉽다. - 이런 시맨틱 접근은 디자인 시스템을 시각적 스타일 모음이 아니라 제품의 의도와 규칙을 표현하는 체계로 확장한다. ## Figma 변수의 역할 - Figma 변수는 디자인 속성과 프로토타이핑 동작에 재사용 가능한 값을 저장한다. - 색상, 숫자, 문자열 등 다양한 값을 한 곳에서 관리하고 여러 디자인 요소에 적용할 수 있다. - 기존 토큰의 사용 사례를 충족하면서도 값이 실제로 “변할 수 있다”는 점을 강조한다. - 변수는 디자인 시스템의 값을 중앙에서 관리해 반복 작업을 줄이고, 변경 사항을 여러 화면에 일관되게 적용한다. - 단순한 디자인 결정의 기록을 넘어 다음과 같은 기능을 지원한다. - 라이트·다크 모드와 같은 디자인 테마 전환 - 조건에 따른 프로토타이핑 로직 - 여러 플랫폼에 공유할 수 있는 재사용 가능한 값 관리 - 디자인과 코드 사이의 연결 강화 ## 디자인과 개발을 연결하는 기반 - Config 2023에서 Figma는 Dev Mode, 변수, 고급 프로토타이핑 기능 등을 공개하며 디자인에서 구현으로 이어지는 흐름을 강화했다. - 변수는 디자인 시스템이 디자인 파일 안에만 머무르지 않고 코드와 동일한 개념과 값을 공유하도록 돕는다. - 이후 공개된 Code Connect는 개발자가 실제 코드 컴포넌트와 디자인 컴포넌트를 연결하는 방향을 더욱 강화한다. - typography 및 gradient 변수, Library Analytics API 같은 기능은 디자인 시스템의 적용 범위를 넓히고 조직 전체의 사용 현황과 도입을 관리할 수 있게 한다. - 결과적으로 디자인 시스템은 디자이너만 관리하는 라이브러리가 아니라 디자인·개발·제품팀이 함께 사용하는 공통 언어가 된다. ## 실용적인 적용 방향 - 색상이나 간격 값을 무작정 늘리기보다 먼저 제품에서 각 값이 수행하는 역할을 정의한다. - 원시 값과 의미 기반 값을 구분해 관리한다. 예를 들어 `blue-500`과 `text-color-error`를 별도 계층으로 둘 수 있다. - 테마 변경 가능성을 고려해 컴포넌트에 구체적인 색상값을 직접 넣지 않는다. - 디자인 토큰을 코드와 공유할 수 있는 형식으로 관리하고, Figma 변수와 실제 구현 값의 동기화 방식을 마련한다. - 디자인 시스템의 성공 여부를 라이브러리의 크기보다 재사용성, 일관성, 코드와의 연결성, 조직 내 adoption으로 평가하는 것이 바람직하다.