디자인시스템, 스타일가이드 사례와 모음 (국내, 해외)

디자인시스템이란 웹이나 서비스 디자인에 적용된 디자인 스타일의 규칙이나 가이드 라인을 의미합니다. 공통으로 사용된 컬러, 폰트, 레이아웃, UI 컴포넌트들의 대한 정의라고 볼 수 있습니다. 이러한 디자인 시스템을 정의하고 정확하게 사용하는 것이 디자인작업을 효율적으로 만들고 디자인의 일관성을 유지 할 수 있습니다. 디자인 시스템을 철저하게 만들수록 커뮤니케이션 오류나 변수들의 대한 부분에 대한 수정이 현저히 적어질것입니다. 디자인 시스템은 목적에 맞는 디자인과 효율적인 작업을 위해서 꼭 필요한 부분입니다.

번외로 디자인 시스템이라하면 스타일 가이드나, 디자인 가이드와는 다릅니다.

도출된 컴포넌트를 변형을 하지않는게 디자인 시스템이라고 생각합니다.

 

디자인 시스템이 필요한 이유

내부
모든 디자이너는 추구하는 컨셉에 따라야하고, 모든 프로젝트에서 디자인 원칙을 탐조하여 제작해야 합니다. 내부에서 필요한 목적은 개발자나 디자이너에게 분명한 목표를 제공하는 것입니다.

외부
사용자에게 컬러, 인터넥션, 패턴은 친숙함과 정형화되고 안정된 느낌을 제공합니다. 잘 계획되고 실행된 디자인시스템은 사용자의 경험을 극대화 합니다.

 

성공적인 디자인시스템

집중 : 디자이너가 다른 프로젝트를 방해하지 않고 프로젝트에 집중할 수 있습니다.
명확성 : 디자이너가 플랫폼 전반에 걸친 제약뿐만 아니라 방향성에 관해 명확하게 생각하도록 합니다.
자신감 : 디자이너가 디자인 한 내용에 대해 완전히 확신하고 팀의 다른 사람들과 일맥 상통 할 수 있습니다.
일관성 : 제품 전반에 일관성을 유지하여 플랫폼 전반에 걸쳐 안전하고 친숙한 환경을 조성합니다.
효율성 : 팀 전체에 대한 이해를 도모하여 덜 중요한 세부 사항에 집중하여 시간을 덜어줍니다.

 

1. 다양한 디자인시스템 링크와 글을 모아놓은곳 / Design System repo  (Click)

 

2. 구글 머터리얼 디자인 시스템 / Google material Design System (Click)

 

 

3. 애플 디자인 시스템 / Apple Design System (Click)

 

 

4. 카카오 디자인 시스템 / Kakao Design System (Click)

 

 

5. 토스 디자인 시스템 컨퍼런스 / Toss Design System Conference (Click)

 

6. 네이버 디자인 시스템 / Naver Design System (Click)

 

 

7. 마이리얼트립 디자인 시스템 구축한 배재민 디자이너 인터뷰 / Interview with designer Bae Jaemin who established the My Real Trip design system. (Click)

 

 

8. 버즈빌 디자인 시스템 / Buzzvil Design System (Click Figma)

 

9. 스타벅스 디자인 가이드 / Starbucks Design guide (Click)

 

 

10. 어도비 디자인 시스템 / Adobe Design System (Click)

 

 

11. 쏘카 디자인 시스템 / Socar Design System (Click)

 

 

12. 스포카 디자인시스템 / Spoqa Design System (Click)

 

13. 리디 디자인 시스템 가이드 / Ridi Design System  (Click)

 

14. 리메인 스타일 가이드 / Rmain Style guide (Click)

 

 

 

15. 에어비엔비 디자인 시스템 / Airbnb Design System (Click)

 

16. 스포티파이 디자인 시스템 / Spotify Design System (Click)

 

17. 드롭박스 디자인 시스템 / DropBox Design System  (Click)

 

18. 쇼피파이 디자인 시스템 / Shopify Design Styem (Click)

 

19. 아틀라시안 디자인시스템 / Atlassian Design System (Click)

 

20. 허들 디자인 시스템 / Hudle Design System (Click)

 

21. 마이크로소프트 디자인 시스템 / Micro Softe Design System (Click)

 

22. 워크데이 플랫폼 디자인시스템 / Work day Design System (Click)

 

23. IBM 디자인 시스템 / IBM Design System (Click)

 

24. 비비씨 디자인 가이드 /  BBC Design guide (Click)

 

25. 스카이 스캐너 디자인 시스템 / SKYsncanner Design System (Click)

 

26. 우버 디자인 시스템 / Uber Design System (Click)

 

총 26개 해외, 국내 기업의 디자인 시스템, 디자인 가이드를 알아보았습니다.

디자인 시스템을 구축할때 도움이 되시길 바랍니다 !