AI 시대의 디자인 시스템을 (새 탭에서 열림)
Schema 2025에서 피그마(Figma)는 디자인 시스템이 단순한 UI 컴포넌트 모음을 넘어, 디자인과 엔지니어링의 경계를 허무는 '제품 시스템(Product Systems)'으로 진화해야 한다는 비전을 제시했습니다. 이제 디자인 시스템은 정적인 가이드를 제공하는 수준을 지나, AI와 강력한 코드 연결성을 바탕으로 제품 개발 전체 프로세스를 가속화하는 핵심 인프라로 자리 잡아야 합니다. 이를 통해 조직은 단순 반복 작업에서 벗어나 더 수준 높은 사용자 경험을 설계하는 데 집중할 수 있게 됩니다.
디자인 시스템에서 제품 시스템으로의 패러다임 전환
- 기존의 디자인 시스템이 디자이너를 위한 UI 키트 제작에 치중했다면, 새로운 시대의 시스템은 기획, 디자인, 개발을 아우르는 '제품 전체의 언어'가 되어야 합니다.
- 디자인 자산과 실제 프로덕션 코드가 분리되지 않고 하나의 파이프라인으로 연결되는 환경을 구축하는 것이 핵심입니다.
- 이를 통해 제품의 일관성을 유지하면서도 변화에 유연하게 대응할 수 있는 확장성을 확보합니다.
코드 커넥트(Code Connect)를 통한 엔지니어링 협업 강화
- 디자인 시스템의 컴포넌트가 코드 상에서 어떻게 구현되는지 피그마 내에서 직접 확인할 수 있는 'Code Connect'가 더욱 강화되었습니다.
- 개발자는 디자인 도구 내에서 실제 사용되는 React, SwiftUI, Jetpack Compose 코드를 즉시 참조하여 구현의 정확도를 높일 수 있습니다.
- W3C 디자인 토큰 표준을 준수하여 디자인 시스템 데이터가 플랫폼에 구애받지 않고 엔지니어링 환경으로 원활하게 전달되도록 지원합니다.
AI 기반의 시스템 구축 및 문서화 자동화
- AI를 활용하여 수동으로 진행하던 번거로운 문서화 작업을 자동화하고, 컴포넌트 간의 관계를 지능적으로 매핑합니다.
- 시스템 구축 초기 단계에서 AI가 최적의 구조를 제안하거나, 기존 디자인을 시스템 컴포넌트로 변환하는 시간을 획기적으로 단축합니다.
- 단순한 제작을 넘어 시스템의 상태를 진단하고 유지보수가 필요한 지점을 사전에 파악하는 지능형 관리 기능을 도입합니다.
변수(Variables)와 다중 플랫폼 최적화
- 피그마의 변수 기능을 확장하여 테마(Dark/Light Mode), 화면 크기, 지역별 언어 설정 등에 따라 유연하게 대응하는 시스템을 구축합니다.
- 단일 소스(Single Source of Truth)를 통해 웹, 모바일, 데스크톱 등 다양한 플랫폼에 적용되는 디자인 속성을 통합 관리합니다.
- 복잡한 로직을 변수에 담아 디자인 단계에서 미리 테스트함으로써 개발 단계에서의 시행착오를 줄입니다.
결론 및 권고 성공적인 디자인 시스템 운영을 위해서는 이제 UI 컴포넌트를 만드는 것보다 '코드와의 연결성'과 '워크플로우 자동화'에 더 큰 비중을 두어야 합니다. 특히 피그마의 Code Connect와 변수 기능을 적극적으로 도입하여 디자이너와 개발자가 동일한 속성값과 컴포넌트 구조를 공유하는 환경을 만드는 것이 중요합니다. 또한 AI 도구를 활용해 시스템 유지보수의 부하를 줄임으로써, 디자인 시스템이 조직의 성장을 가로막는 병목이 아닌 성장을 돕는 도구가 되도록 체질을 개선할 것을 권장합니다.