디자인 시스템 관련해서 무수히 많은 글들이 있다.
그 글들을 모두 지켜가면서 할순 없지만 그래도 읽으면 도움이 되는 것들을 조금씩 모아두고 가끔씩 본다.

https://so-so.dev/react/design-system-beyond-code/

이 글을 보고 문득 다시 봐야겠다는 생각이 들어서 정리해본다. (글 적어주셔서 감사 감사)

---

디자인시스템

디자인 시스템의 가치는 무엇인가?

https://zeroheight.com/blog/what-is-the-value-of-a-design-system/

디자인 시스템의 미래는 시멘틱이다.

https://www.figma.com/blog/the-future-of-design-systems-is-semantic/

개발자, 디자인시스템 해보니 어때요?

https://blog.wemakeprice.com/sub/detail/38

디자인 시스템 로드맵

https://roadmap.sh/design-system

UX 조직이 경계해야 할 11가지 편향

https://www.redbusbagman.com/11bias/

디자이너 처럼 바라보기

https://uxdesign.cc/scaling-the-design-ladder-1-seeing-like-a-designer-3b8c77214c9c

사람들에게 사랑받는 디자인 시스템 만들기

https://medium.com/@amster/building-design-systems-that-people-love-77bf04e72982

글로벌 디자인 시스템이란?

https://bradfrost.com/blog/post/a-global-design-system/

디자인 시스템, 코드를 넘어서

https://so-so.dev/react/design-system-beyond-code/

토큰

테마를 쉽게 변경하는 디자인 토큰 기반의 디자인 시스템

https://brunch.co.kr/@somgs34/22

figma 에서 spacing styles 을 어떻게 사용할 것인가?

https://forum.figma.com/t/spacing-styles-tokens/31727

디자인 시스템 시멘틱 컬러를 지정하기

https://www.emotion.co.kr/magazine/42

컴포넌트 특정 토큰

https://cloudfour.com/thinks/component-specific-design-tokens/

디자인 토큰 설계

https://backlight.dev/blog/design-tokens

시멘틱 컬러 토큰 정의

https://uxdesign.cc/how-to-define-color-usage-through-semantic-sets-for-design-systems-99445804233d

컬러

css 컬러 아키텍쳐 (css variable)

https://medium.com/appwrite-io/css-color-architecture-ca5de26f2df7

접근성을 위한 컬러시스템 만들기

https://wildbit.com/blog/accessible-palette-stop-using-hsl-for-color-systems

색 의미 설명해주기 사이트

https://words.github.io/color-description/

모션

애니메이션의 12가지 원칙

https://www.bloopanimation.com/the-12-principles-of-animation/
https://www.creativebloq.com/advice/understand-the-12-principles-of-animation

디자인 시스템에 모션 적용하기

http://uidesignguides.com/%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C%EC%97%90-%EB%AA%A8%EC%85%98%EC%9D%84-%EC%A0%81%EC%9A%A9%ED%95%98%EB%8A%94-5%EB%8B%A8%EA%B3%84/

원본: https://www.designsystems.com/5-steps-for-including-motion-design-in-your-system/
인터랙션 디자인 이야기

1: Motion

https://medium.com/@Kjoon/%EC%9D%B8%ED%84%B0%EB%9E%99%EC%85%98-%EB%94%94%EC%9E%90%EC%9D%B8-%EC%9D%B4%EC%95%BC%EA%B8%B0-1-motion-e3d979beae5e

2: Easing

https://medium.com/@Kjoon/%EC%9D%B8%ED%84%B0%EB%9E%99%EC%85%98-%EB%94%94%EC%9E%90%EC%9D%B8-%EC%9D%B4%EC%95%BC%EA%B8%B0-2-easing-functions-cf0f6cb213a2

motion design principles

https://www.toptal.com/designers/ux/motion-design-principles

Principles of UX in motion

https://app.uxcel.com/lessons/principles-of-ux-in-motion-959

모션 스크립트 제작 가이드

https://yozm.wishket.com/magazine/detail/2020/

웹 애니메이션 가이드

https://studiomeal.com/archives/1465

구현

인터랙션 디자인에서 보이지 않는 디테일

https://rauno.me/craft/interaction-design

컴포넌트 이름짓기

https://medium.com/@Mcondesa/naming-components-31c3180a50fd

컴포넌트 레벨의 디자인 토큰에 대한 경험 (저자 어도비 스펙트럼 디자인 시스템 개발 참여자)

https://medium.com/@NateBaldwin/component-level-design-tokens-are-they-worth-it-d1ae4c6b19d4

리액트 코드에 디자인 시스템 적용하기

https://baekkyoungjung.medium.com/react%EB%A1%9C-%ED%99%95%EC%9E%A5%EC%84%B1-%EC%9E%88%EA%B3%A0-%EC%9E%AC%EC%82%AC%EC%9A%A9%EC%84%B1%EB%8F%84-%EC%9E%88%EA%B3%A0-%EA%B0%80%EB%8F%85%EC%84%B1%EB%8F%84-%EC%9E%88%EC%9C%BC%EB%A9%B4%EC%84%9C-%EC%BD%94%EB%93%9C%EB%A5%BC-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0%EB%8F%84-%EC%89%BD%EA%B3%A0-%EB%8F%99%EC%8B%9C%EC%97%90-%EC%A0%9C%EA%B1%B0%ED%95%98%EA%B8%B0-%EC%89%AC%EC%9A%B4-%EC%BD%94%EB%93%9C-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%95%84%ED%86%A0%EB%AF%B9-%EC%BB%B4%ED%8C%8C%EC%9A%B4%EB%93%9C-%ED%8C%A8%ED%84%B4-7912f1b65a40

css 폰트 다루기

https://web.dev/adapting-typography-to-user-preferences-with-css/

피그마 Theme 통합 관리하기

https://medium.com/carbondesign/introducing-figma-variables-and-a-consolidated-all-themes-library-d4893d1b8920

반응형 디자인

https://ishadeed.com/article/responsive-design/

UI Overlay 계층 구조 설명

https://brunch.co.kr/@tigrisdesign/3

토스의 AI 그래픽 생성기, 토스트를 소개합니다.

https://toss.tech/article/ai-graphic-generator-1
https://toss.tech/article/ai-graphic-generator-2

참고 사이트

디자인 리소스 참고 사이트

https://refero.design/

프로덕트 디자인 로드맵

https://product-design-roadmap.com/

상황별 CSS 구현

https://defensivecss.dev/