디자인시스템 관련 자료 모음집
튜토리얼, 레퍼런스, 공식 디자인 가이드 등을 모두 담았습니다.
제가 활동하고 있는 커뮤니티에서 공유된 다양한 자료들을 모아두었습니다.
혹시 들어오시면 '레오'를 찾아주세요! 반갑게 맞이해드리겠습니다 :)
1. 리메인 디자인 시스템 가이드 무료 튜토리얼
리메인에서 무료로 발행한 오픈 튜토리얼 디자인 시스템. 해상도와 그리드시스템, 타이포그래피, 컬러 ,아이콘, 컴포넌트, 계층구조 등 디자인시스템 구축을 위한 a to z에 대해서 살펴볼 수 있는 튜토리얼.
https://www.remain.co.kr/page/designsystem/icon-size.php
2. 디자인 콤패스 디자인 시스템 모음
디자인콤패스에서 뽑은 최고의 디자인시스템 top10! 애플의 Human interface Guideline, 구글의 Material Design, MS의 Fluent등 표준 디자인시스템들에 대한 지식도 얻을 수 있고 바로 공식가이드라인으로 이동할 수 있는 링크까지 연결되어있다.
https://designcompass.org/2022/01/23/top-10-design-system
3. 구글 머터리얼 디자인
구글해서 발행한 공식 가이드. 안드로이드 앱은 이렇게 디자인 하는 것이 좋습니다! 라는 가이드.
안드로이드 앱을 개발한다면, 안드로이드 앱을 디자인하거나 / 기획한다면 필수적으로 들어가봐야 하는 곳.
https://material.io
4. IBM 카본디자인시스템
https://www.ibm.com/design/language
5. apple 휴먼인터페이스 가이드라인
구글에 Material Design이 있다면 애플에는 HGI가 있다. IOS 앱을 만들거나 디자인하거나 기획한다면 꼭 봐야하는 가이드. 별개로 UX의 표준이 무엇일까? 깔끔한 디자인은 어떻게 하는 것일까? 에 대해서 감을 익히기에도 좋다고 생각한다. 애플의 철학이 묻어있는 디자인 가이드이기 때문.
https://developer.apple.com/design/human-interface-guidelines/platforms/designing-for-ios
6. 라인 디자인 시스템
7. 국내 해외 디자인 시스템 및 스타일 가이드 모음
https://brunch.co.kr/@5bb7412700ae45a/2
8. 해외기업들 디자인시스템
9. 소카 블로그에서 발행한 컴포넌트 제작 / 사용 관련 포스트
https://tech.socarcorp.kr/design/2020/07/31/component-01.html
10. 브런치 - 디자인 시스템 만들기 글
https://brunch.co.kr/@sylviasolution/67
11.DesignSystemsForFigma
figma에서 바로 사용할 수 있는 figma community 내 다양한 디자인 시스템 레퍼런스 모음.
https://www.designsystemsforfigma.com/
12. Components.gallery
디자인시스템 구축을 위해 필요한 알림/뱃지/버튼 등 컴포넌트들을 살펴볼 수 있는 사이트
https://component.gallery/components/
----11월 7일 추가 업데이트---
13. 개미는 뚠뚠 - 포트폴리오 레퍼런스 중 디자인시스템 잘 정리해둔 레퍼런스.
https://www.behance.net/gallery/147262623/-ANTOON-l-Webtoon-Community-Service
14. 에어비엔비의 디자인시스템에 대한 브런치 글
https://brunch.co.kr/@eunlune/15
15. 아카이빙 노션사이트
디자인시스템이 아카이빙된 노션 사이트 . 많은 양의 자료가 아카이빙 되어있습니다.
https://designshare.notion.site/2ab85db37e35456987abdece44d6a5bd
16. 핀터레스트의 디자인 시스템인 게슈탈트.
핀터레스트에서 볼 수 있는 독특한 수직정렬 레이아웃인 Mansory에 대한 내용도 담겨있고, 모달, 알림 등등을 자세히 구분해놓았다는 특징까지.
https://gestalt.pinterest.systems/home
17. HR 플랫폼 flex의 디자인 시스템 관련 슬라이드
디자인시스템의 정의에 대한 고민, flex의 디자인 시스템 linear에 담긴 철학 등이 담겨있다.
https://speakerdeck.com/soyoung210/dijain-siseutem-hyeongtaereul-neomeoseo?slide=1
