01. 디자인 시스템 모아 보기
#DesignSystem #DesignComponent
UI/UX 디자이너가 된 지 벌써 4년이 넘었고, 일을 하다 보니 다양한 디자인 시스템을 자연스레 접하게 되었다. 프로젝트 규모에 따라, 분야에 따라 혹은 프로젝트 기간에 따라 만들어지는 범위도 내용도 각양각색이이라서 프로젝트가 시작되면 디자인 시스템을 어떻게 구성해야 할지는 항상 주된 고민거리가 되었다.
당연히 프로젝트 규모가 크면 클수록 디자인 시스템은 중요해진다. 특히나 하나의 서비스가 모바일, 웹, 태블릿, TV 등 다양한 플랫폼으로 제공될 때, 혹은 여러 가지 서비스들이 하나의 브랜드로 런칭이 될 때 디자인 시스템은 더욱 빛을 발한다.
아무튼, 그렇다 보니 자연스럽게 디자인 시스템에 관심이 많아졌고 디자인 시스템, 컴포넌트에 관한 글들을 많이 찾아보게 되었는데, 다행히도 요즘은 많은 회사들이 자신의 디자인 시스템을 공개하고 그 과정을 자세히 설명하고 있다. 그래서 평소에 자료를 많이 찾아보던 중 아무래도 찾은 자료들이 여기저기 흩어져 있어 보기 불편하기도 하고, 나도 다시 정리하며 공부도 할 겸 이 글에 차곡차곡 모아보려고 한다. 앞으로도 계속 관련 자료를 찾으면 계속 추가할 예정이다☺️
1. Google Material Design & Apple HIG
우선 대부분의 디자이너 참고하고 있고 많은 시스템의 기준이 되는 대장 시스템! 구글과 애플의 디자인 시스템이다. 어떤 프로젝트를 하던 항상 제일 먼저 찾아보게 된다. 처음 신입으로 입사하게 된다면 이 두 가지를 먼저 스터디해보는 것이 굉장히 도움이 되지 않을까 싶다.
- 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 디자인 시스템인 GULE라는 디자인 시스템을 구축했다. 하지만 이 중앙화 된 디자인 시스템은 결국은 스포티파이에 적절하지 않았다. 그래서 만든 것이 Encore 디자인 시스템! Local design systems을 활용했다. 어떤 서비스 건 각자 다른 상황을 가지고 있고 그마다 다른 솔루션이 필요하다는 것을 글을 보면 다시 한번 느낄 수 있다.
3. 쏘카 디자인 시스템 (SOCAR FRAME)
https://tech.socarcorp.kr/design/2020/06/23/socar-design-system-01.html
실무를 하다 보니 쏘카의 디자인 시스템 포스팅처럼 실무에서 겪는 이야기들이 정말 도움이 많이 된다. 글을 보면 디자인 시스템을 구축하는 과정을 굉장히 자세히 써놨다. 글이 한 다섯 개쯤 있는 것 같다. 아시는 분들은 아시겠지만 글을 쓴다는 것 자체가 굉장히 시간이 많이 걸리는 일이었을 텐데 어떻게 진행했고 어떤 어려움이 있었는지, 어떻게 해결했는지를 상세히 이야기해주어서 많은 도움이 되었다.
쏘카의 디자인 시스템(Socar Frame)도 공개했다.
https://socarframe.socar.kr/8bb3aba4a/p/5857a5-socar-frame
이 글은 사실 진행하던 프로젝트의 다크 모드 때문에 검색하다 발견했는데, 다크 모드를 위한 시멘틱 컬러 컬러 체제를 실무에 도입한 것이 인상 깊었다. 요즘은 많이들 다크 모드에서 시멘틱 컬러를 도입하는 추세이고, 유지 보수가 수월하니 좋은 방식인 듯하다. 참고하면 좋을 듯하다.
영상도 있으니 참고해보자 :-)
https://tv.naver.com/v/15842187
4. 라인 디자인 시스템(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까지 정리된 경우가 많이 없는데, 이 디자인 시스템은 모션 UX에 대한 정의도 깔끔하게 잘 되어있어 인터렉션 정의 시 참고하기 좋다.
이제부터는 디자인 시스템 제작 시 참고할 수 있는 자료들을 정리해보려고 한다.
1. Design System for Figma
https://www.designsystemsforfigma.com/
이 사이트는 글이라기보단 피그마에서 여러 가지 디자인 시스템 파일을 볼 수 있는 곳이다. 우버부터 시작하여 아우디, 마이크로소프트 팀즈, 슬랙 등 다양한 서비스의 디자인 시스템을 확인할 수 있다. 물론, 모든 리소스가 정리된 파일들은 아니지만 대략적인 디자인 시스템, UI kit 들을 볼 수 있어서 참고용으로 아주 좋다.
2. The Component Galley
해당 사이트는 최근에 발견한 사이트이다. 공개된 여러 기업의 디자인 시스템 사이트에서 내가 검색한 컴포넌트를 찾아주는 신박한 서비스이다. 컴포넌트별로 실제 적용된 케이스를 찾는데 아주 유용할 것 같다. 아래 글은 컴포넌트 갤러리 사이트에 대해 설명해 놓은 글이니 참고하면 좋을 것 같다.
3. 카카오 비지니스 가이드
https://kakaobusiness.gitbook.io/main/
디자인 시스템을 만들고 운영을 하다보면 UI스타일 뿐만아니라 배너, 프로모션 등 운영가이드를 제작하는 경우가 많이 발생한다. 이 카카오 비지니스 사이트는 이러한 운영가이드를 제작할 때 참고하기 좋은 사이트이다.
