디자인 시스템의 미래
디자인 시스템 콘퍼런스 요약을 공유하기 위한 글입니다.
요약
이 글은 지난 6월에 있었던 디자인 시스템 콘퍼런스에 대한 개인 요약입니다.
https://www.intodesignsystems.com/
디자인 시스템은 기업에서 사용하기 위해 개발된 사이드 프로젝트 성격의 제품을 넘어서 하나의 독립된 서비스를 책임지는 제품이 되어 가고 있습니다. 따라서 최근 몇 년간, 디자인 시스템 그리고 디자인 토큰은 계속 성장하며, 복잡해져서 대규모 엔터프라이즈 환경이나 멀티플 한 환경에서의 운영 및 관리도 점점 요구되고 있습니다. 이번 콘퍼런스에서는 이러한 상황에 맞는 디자인 시스템과 토큰의 운영을 자동화하는 유스케이스가 소개되었고, 지속적인 확장 가능한 토큰 생성 및 관리에 관한 기술들 그리고 그것을 커버하기 위한 여러 가지 툴들이 소개되었습니다.
토크는 실용적인 주제와 이론적인 주제가 섞여 있어, 요약에서는 임의로 순서를 조정하였습니다. 또한 디자인 시스템 마인드셋, 소프트 스킬 같은 스몰토크들은 제외했습니다.
The Future of Brand Management with Design Tokens
비디오 녹화본 이 공개되었습니다. https://youtu.be/Lr_XezioN3o?si=vQeOyPEdBauti9Yl
다양하고 복잡한 환경에서의 디자인 토큰 개발 및 운영에 관한 솔루션이었습니다. 토큰 생성에 있어서 정의가 다이내믹 해지려면 하드 코드가 아닌, 정의형으로 정의되어야 한다고 합니다. 예를 들면, 고정된 컬러 값이 아니라 레인지를 주고, 그 안에서 다이내믹하게 결정되도록 해야 한다고 합니다.
예를 들면 프라미머리 컬러는 고정된 컬러가 아니라, 특정 컬러 그레이딩 안에 레인지이고, 최종 값은 다이내믹하게 결정되어야 한다고 합니다. 또한 현재의 디자인 토큰의 핸드오프는 다소 매뉴얼 적이라고 하네요, (저희가 딱 그렇습니다. ^^;;) 이는 토큰 업데이트나 디자인 디시전에 대한 반영을 디자이너가 직접 개발자와 하고 있는 상황이라고 보시면 될 듯합니다.
토큰 스튜디오는 수동적인 프로세스를 줄여 빠르고 정확하게 토큰 딜리버리는 가능하게 해 준답니다. 또한 리졸버 툴을 사용하여 다이내믹한 토큰 생성 및 메인터넌스를 정확하게 할 수 있다고 합니다.
즉 다양한 브랜드를 위한 엔터프라이즈 디자인 토큰 셋을 셋업 하기 위해 고정된 값 정의보다는 한번 정의해 둔 여러 가지 다양한 토큰 셋을 생성하고 사용할 수 있다고 합니다.
Ref.
Token studio: https://tokens.studio/
Resolvers :https://resolver.dev.tokens.studio/
멀티 브랜드 디자인 토큰을 위한 툴을 개발했고 사용할 수 있다. 값이 하드 코드 되기보다는 특정된 키 벨류를 가지고 로직과 컨디션들을 조합하여 토큰 셋들을 다양하게 생성하여 배포할 수 있다. 인하우스 보다는 에이전시에서 유용할 듯합니다. 클라이언트들의 기존 값들을 미리 정의해 둔 로직이나 컨디션을 대입하여 검증된 토큰 셋을 빠르게 테스트하고 배포할 수 있을 듯합니다.
Deep Dive into headless Design systems
헤드리스 디자인 시스템에 관해 이야기했습니다. 이미 알고 계신 분들도 계시겠지만, 간략히 말씀드리면 헤드리스라는 개념은 프런트앤드와 백앤드를 분리하여 개발하는 방법론인데요, 이러면 서로 간에 종속성이 작아져서 유연하게 개발할 수 있는 방법론입니다. 여기에서는 디자인 시스템으로 확장하여, 디자인 컴포넌트에서 시각적인 엘리먼트와 컴포넌트 스트럭쳐를 분리하여 개발하는 방법이 헤드리스 디자인 시스템입니다.
헤드리스 시스템의 컴포넌트는 고정된 토큰 값이 아닌 컴포넌트 코튼으로 구성되어 있고 이는 시멘틱 토큰이나, 코어 토큰을 레퍼런스 하게 되면 토큰 셋(브랜딩)에 따라 제품이 유연하고 빠르게 배포할 수 있습니다.
예를 들어 버튼 컴포넌트는 컨테이너와 레이블로 구성되는데요, 각 엘리먼트의 어트리뷰트는 특정한 고정된 값이 아니라 입력되는 토큰의 값에 따라 테밍이 된다고 생각하시면 될 듯합니다.
왜 필요한지에 대한 이유
토크에서는 헤드리스 디자인 시스템이 필요한 이유와 유스 케이스(데모)를 이야기했습니다. 요약하면 헤드리스 디자인 시스템은 기본적은 코드로 구현된 것을 의미하며, 컴포넌트에 시각적 스타일 없이, 로직이나 작동방식이 구현된 것을 말합니다. 예를 들면 프러퍼티 세트를 테밍 하여 같은 프로퍼티를 쓰는 모든 컴포넌트 엘리먼트를 한꺼번에 바꿀 수 있도록 하여 빠르고 정확하게 제품에 적용할 수 있다고 합니다.
이것 역시 에이전시에 유용할 듯합니다. 즉 프로퍼티 세트를 토큰화하여 프러덕트 전체의 디자인을 바꿀 수 있도록 하면 기본적인 토큰 로직만( 예를 들면 A11y라든가, 브랜딩 로직등) 가지고 다양한 제품에 적용할 수 있다고 합니다.
또한 기존의 머티리얼과 다르다고 하는데요, 현재 머티리얼은 특정한 레인지 안에서만 작동하도록 설계되어 있지만, 진정한 헤드리스는 아예 디자인 토큰의 시스템을 오버라이딩 할 수 있는 접근이라고 합니다.
Ref.
Demo : https://youtu.be/yvblQEPGPkM?si=318Q2htPdBCTi9dz
→ 콘퍼런스 라이브는 아닌데, 내용이 이게 더 좋습니다. ( 같은 내용을 피그마 쪽이랑 공유했네요.)
Token zen garden: https://tokenzengarden.design/explore
The Future of design system is automated - Spotify
스포티파이 같은 엔터프라이즈 프러덕트와 대규모 디자인 팀을 위해서 여러 가지 툴들을 자체 개발하여 도입하고 사용하고 있습니다. 몇 가지 툴들이 소개되었고 그중에 한 가지는, 현재 스포티파이는 멀티 플랫폼, 프러덕트 별로 여러 개의 디자인 시스템을 운영하고 있고, 그중에 코어 벨류를 레퍼런스 하기 위해 앙코르 라고 하는 코어 디자인 시스템으로 운영하고 있습니다. 디자인 시스템이 여러 개가 운영되면서, 이들 간의 동기화가 문제였다고 하네요, 스타일이나 토큰 레벨뿐만 아니라 시스템끼리 동기화하는 것은 각각의 시스템 핸드오프가 수동으로 이루어질 경우 가능 큰 문제는 휴먼 에러였답니다. 따라서 이들 간 자동화 툴을 만들러 동기화한다고 하네요, 어차피 모든 피그마의 스타일이나 벨류는 노트와 인스턴스로 되어 있어서 스크립트로 해결할 수 있었답니다.
https://spotify.design/article/reimagining-design-systems-at-spotify
스크립트를 실행시키면, 피그마를 브라우저 열고 값을 동기화하는 데모가 있었습니다.
또한 자동화를 위해 여러 가지 플러그인을 만들어 쓰고 있습니다. 로컬리제이션(구글 번역 API 사용), A11y, 등에 대한 이슈를 플러그인을 통해 디자이너가 배포전 자체적으로 테스트를 해볼 수 있게 했습니다. 또한 디자인 시스템팀은 디자인 시스템에 디자인 컴포넌트 레벨에서의 트랙킹뿐 아니라 플러그인도 트래킹을 분석하여 실제 툴들이 얼마나 사용되고 디자인 프로세스나 디시전에 도움이 되고 있는지 확인하고 개선한다고 합니다.
→ 이 부분이 좀 부러운 부분입니다. 디자인 시스템을 회사의 사이드 프로젝트가 아니라 하나의 독립적인 제품으로 보고 사용자(사내 디자이너)를 분석하고 개선하여 자연스럽고 스무스하게 디자인 시스템을 독려?(거버넌싱) 하네요.
한 가지 더 흥미로운 것은, 대규모 디자인 팀이기에, 새로운 팀원 온보딩에 소요되는 커뮤니케이션 비용을 줄이기 위해 기존의 시스템 가이드라인 문서로 슬랙봇을 만들어 사용했답니다. 인원이 많아지면 일일이 온보딩 하는 것도 힘들기도 하고, 또한 양이 방대해지면, 휴먼 에러도 종종 발생하게 되기 때문에, 슬랫봇으로 만들어 봤는데, 꽤 반응이 좋았다고 하더라고요, 예를 들어 “새로운 아이콘이 필요한데, 어떻게 해야 하지?”라고 하면 아이콘 컨트리뷰션에 대한 문서를 알려주는 이런 식이었습니다.
그리고, 여기에 발전하여, ChatGPT로 테스트하고 있답니다. 충분히 가능할 듯하고요, 디자인 시스템이라는 것이 전부 구조화된 키와 벨류 들이고, 또한 자연어 같은 문서들도 트레이닝이 가능하기 때문에, 시작은 굉장히 멋지다고 하네요,
스샷이 있는데, 공유하기가 조금 예민하여, 대신 글로 설명드렸습니다^^;; 나중에 어느 정도 데이터가 싸이면, 스포티파이 디자인 블로그에 공유가 된다고 하네요.
결론
디자인 시스템의 미래는 자동화(현재 우리가 있는)와 AI 통합(앞으로 다가올 높은)의 가능성으로 보이는데요, 토큰 스튜디오의 셋업방법론이나 여러 가지 툴들은 인하우스 보다는 에이전시에 도움이 될듯하고요, 스포티파이 케이스처럼, 각각 회사에 맞는 툴들을 개발하여 사용하는 접근 방법도 인상적이었습니다.
이상은 디자인 시스템 디자이너로서, 회사 내부 디자인들과 공유한 내용을 언젠가 다른 디자이너 분들과 한국말로 이야기 나누길 기대하면서 글 공유 하였습니다! 혹시 부정확한 내용이 있을 수 있으니, 언제든 지적해 주시면 됩니다!
