01. 디자인 시스템 모아 보기
#DesignSystem #DesignComponent
UI/UX 디자이너로 일한 지 벌써 5년이 훌쩍 넘었다. 그동안 대기업, 에이전시, 스타트업 등 다양한 환경에서 여러 프로젝트를 진행하게 되었고 자연스럽게 디자인 시스템에 대한 관심이 많아지게 되었다. 물론 프로젝트의 규모, 분야, 기간에 따라 디자인 시스템의 범위와 내용이 달라져서 이걸 과연 '시스템'이라 부를 수 있을지 의문이 들기도 했지만, 프로젝트가 시작되면 디자인 시스템이나 가이드를 어떻게 구성할지는 항상 주된 고민거리가 되었다.
특히, 프로젝트 규모가 커질수록 디자인 시스템의 중요성도 높아졌다. 하나의 서비스가 모바일, 웹, 태블릿, TV 등 다양한 방식으로 제공되거나 여러 가지 서비스들이 하나의 브랜드로 런칭될 때 보다 섬세하게 디자인 시스템을 만들어야만 했다.
이런 과정을 거치다 보니 자연스럽게 디자인 시스템에 대한 리서치를 많이 하게 되었고, 최근 회사의 디자인 시스템을 개편하면서 더욱 다양한 자료를 찾아보게 되었다. 그러다 문득 그동안 흩어져 있던 정보들을 하나로 모아 공유하면 어떨까?하는 생각이 들었다. 다행히 요즘 많은 기업들이 자사의 디자인 시스템을 공개하고 그 구축 과정과 노하우를 자세히 설명하고 있다. 그래서 이번 기회를 통해 자료를 정리하고 스터디를 할 겸 '디자인 시스템 모아보기'라는 주제로 차근차근 글을 써보려 한다 :-D
1. Google Material Design & Apple HIG
먼저, 대부분의 디자이너 참고하고 있고 많은 시스템의 기준이 되는 대장 시스템! 구글과 애플의 디자인 시스템이다. 이 두개의 시스템은 어떤 프로젝트를 하던 항상 가장 먼저 찾아보게 되는데, 만약 신입 UX디자이너로 입사하게 되었다면 아래 두 사이트를 먼저 스터디하면 굉장히 도움이 되지 않을까 싶다.
▶ Google Material Deisgn
https://material.io/design/introduction#material-environment
▶ Apple Human Interface Guideline
https://developer.apple.com/design/human-interface-guidelines/
2. 스포티파이 디자인 시스템 (Encore)
https://spotify.design/article/reimagining-design-systems-at-spotify
위 아티클은 스포티파이의 디자인 시스템 개편에 대한 스토리를 담은 글인데, 내용이 참 흥미롭다. 항상 느끼지만 완벽한 디자인 시스템은 없는 것 같다. 실무를 하다 보면 단 하나의 규칙으로 적용되는 예외 없는 디자인 시스템은 허상이라는 것을 뼈저리게 느끼게 된다. 언제나 예외는 생기고 적용되지 못하는 규칙들이 늘 존재하기 때문이다. 이 글에서는 다양한 서비스에서 폭넓게 디자인 시스템을 적용하기 위한 스포티파이의 고군분투를 보여준다.
글을 읽어보면 스포티파이는 처음에 Centralized design system GULE라는 디자인 시스템을 구축했다. 하지만 이 중앙화 된 디자인 시스템은 결국은 스포티파이에 적절하지 않았고 이를 극복하고자 Local design systems인 Encore 디자인 시스템을 만들었다. 어떤 서비스 건 각자 다른 상황을 가지고 있고 그마다 다른 솔루션이 필요하다는 것을 글을 보면 다시 한번 느낄 수 있었다.
3. 쏘카 디자인 시스템 (SOCAR FRAME)
https://tech.socarcorp.kr/design/2020/06/23/socar-design-system-01.html
쏘카에서는 쏘카의 디자인 시스템 'FRAME'을 제작한 이야기를 공유했다. 실무에서 디자인 시스템을 구축하는 과정을 굉장히 상세하게 다루었고, 다섯 편에 걸쳐 그 내용을 소개하고 있다. 글을 쓴다는 것 자체가 많은 시간과 노력이 필요한 일이었을텐데 진행 과정부터 겪었던 어려움, 그리고 해결 방식까지 구체적으로 설명해주어 많은 도움이 되었다.
쏘카의 디자인 시스템(Socar Frame)도 공개했다.
https://socarframe.socar.kr/8bb3aba4a/p/5857a5-socar-frame
사실 이 아티클은 다크 모드 구축 방법을 검색하다 발견했는데, 쏘카에서는 다크 모드를 위한 시멘틱 컬러 컬러 체제를 실무에 도입한 것이 인상 깊었다. 요즘 많이들 다크 모드를 도입하는 추세이고, 시멘틱 컬러를 사용한다면 유지 보수가 수월해지니 참고하면 좋을 듯하다.
영상도 있으니 구경해보자 :-)
https://tv.naver.com/v/15842187
4. 라인 디자인 시스템(LDS)
라인의 디자인 시스템 LDS에 대한 이야기 이다.
"WE =/ USERS" : 우리는 유저가 아니다. 내가 원하는 아이디어가 유저가 원하는 아이디어가 아니다."
해당 아티클은 2020년 12월에 라인 앱을 개편한 내용인데, 대략적으로 디자인 시스템을 어떻게 정리했는지 확인할 수 있다. 하단에는 LDS 관련 영상들을 정리해보았다.
▶ 라인 디자인 시스템
해당 링크에서 실제 라인의 디자인 시스템을 구경할 수 있다.
▶ 라인 LDS 소개 영상
https://www.youtube.com/watch?v=7SSrCyb8XnU
Full 영상은 못 찾았는데 라인에 대한 이야기와 라인의 디자인 시스템에 대한 설명을 들을 수 있다.
▶ [2019 Spectrum con] 이정영 | 라인 UX & Interaction Lead
https://www.youtube.com/watch?v=mV5XtsX_9SY
▶ [원티드 플러스] Global Messenger Platform의 Design De-fecto
https://www.wanted.co.kr/wantedplus/177827?category=511
마케팅, 영업, 디자인, 개발까지! 업계 최고 전문가들이 알려주는 실무 인사이트, 원티드에서 만나보세요.
www.wanted.co.kr
해당 영상은 원티드 플러스의 유료 콘텐츠이긴 하지만 라인의 디자인 시스템 제작 과정에 대한 이야기를 들을 수 있다. 관심이 있다면 들어보는 것도 좋을 것 같다.
5. 토스 디자인 시스템(TDS)
토스는 워낙 공격적인 디자인을 하기도 하고 그 내용을 공유하는 것에도 열정적인 편이다. 해당 영상에선 실무적인 자료들은 많이 올라와 있지는 않지만 어떠한 방식과 생각으로 디자인 시스템을 만들었는지, 어떠한 결과를 냈는지에 대한 이야기를 들을 수 있다. 아래의 글은 위 영상을 정리해준 글이라고 보면 된다.
https://blog.toss.im/article/toss-design-conference
6. PXD 블로그 - 디자인 시스템
많은 디자이너들이 찾는 디자인 블로그! 신입 때 정말 많이 찾아봤던 것 같다. 이 글은 실무 이야기보다는 원론적인 이야기가 많다. 1~8편까지 상세하게 적어놓아서 나도 가끔씩 다시 찾아들어가 읽곤 한다.
7.Brainly - 디자인 시스템
https://design.brainly.com/8adfd5f36/p/10bcb9-pencil
깔끔하게 잘 정리된 Brainly의 디자인 시스템 가이드. 디자인 시스템에 모션 UX까지 정리된 경우가 많이 없는데, Brainly 디자인 시스템에선 모션 UX에 대한 정의도 깔끔하게 되어있어 인터렉션 정의 시 참고하기 좋다.
[참고자료]
이제부터는 디자인 시스템 제작 시 참고할 수 있는 자료들을 정리해보려고 한다.
1. Design System for Figma
https://www.designsystemsforfigma.com/
이 사이트는 글이라기보단 피그마에서 여러 가지 디자인 시스템 파일을 볼 수 있는 곳이다. 우버부터 시작하여 아우디, 마이크로소프트 팀즈, 슬랙 등 다양한 서비스의 디자인 시스템을 확인할 수 있다. 물론, 모든 리소스가 정리된 파일들은 아니지만 대략적인 디자인 시스템, UI kit 들을 볼 수 있어서 참고용으로 아주 좋다.
2. The Component Galley
컴포넌트 갤러리는 가장 최근에 발견한 사이트이다. 다양한 기업의 공개된 디자인 시스템 사이트에서 내가 검색한 컴포넌트를 찾아주는 아주 신박한 서비스! 실무적으로 유용하기도 하고, 컴포넌트별로 실제 적용된 케이스를 찾기에도 좋다. 아래 글은 컴포넌트 갤러리 사이트에 대해 설명해 놓은 글이니 한 번 참고해 보자.
3. 카카오 비지니스 가이드
https://kakaobusiness.gitbook.io/main/
디자인 시스템을 만들고 운영을 하다보면 UI스타일 뿐만아니라 배너, 프로모션 등 다양한 운영가이드를 제작하게된다. 카카오 비지니스 사이트는 이러한 운영가이드를 제작할 때 참고하기 좋은 사이트이다.
