벌써 마지막 포스팅이라니! 신난다(?) 오늘은 UI Library를 만드는 방법에 대해 알아보고 디자인시스템을 마무리해보려고 한다. ✅ Creating a user interface library 그런데 UI Library는 뭘까? 저번 포스팅에서는 Visual Language를 구축하는 법에 대해 배웠다. 그것에는 컬러, 간격, 마진 등의 와아아안전 기초적인 요소가 포함된다. 하지만 UI Library에는 카드, 버튼, 리스트 등의 한 묶음을 다룬다. Visual Language의 다음 단계라고 볼 수 있다. 그런데 UI Library에도 단계가 있다. 👉 Atomic Design 아톰 디자인은 디자인시스템을 만들 때 가장 보편적으로 사용하는 모델이라고 생각하면 된다. 원자에서부터 세포, 조직의 과학적..

오늘은 Visual Language를 어떠한 기준으로 분류하여 만들어야하는지 알아볼 것이다. 본 포스팅은 InVision에서 무료로 제공하는 핸드북을 번역하여, 내가 이해한대로 디자인시스템의 중요 포인트와 핵심만을 담았다. 🤔 Creating A Visual Design Language 이제 본격적으로 Visual Attributes에 해당하는 Visual Design Language를 제작해볼 것이다. 기본적으로는 다음과 같은 요소가 포함된다. 1. Color 2. typography (size, leading, typeface, ...) 3. Spacing (margins, paddings, positioning coordinates, border spacing, ...) 4. Images (icon..

오늘은 저번 포스팅에 이어 디자인시스템의 한계처럼 느껴지는 것이 무엇인지, 나의 디자인시스템을 구축할 때 무엇부터 시작해야 할지 알아보려고 한다. 본 포스팅은 InVision에서 무료로 제공하는 핸드북을 번역하여, 내가 이해한대로 디자인시스템의 중요 포인트와 핵심만을 담았다. 🖼 디자인시스템에 관한 걱정 디자인시스템을 만들기로 작정했다면 제일 먼저 이런 걱정이 들 것이다. '특정한 구역에 해당 컴포넌트가 잘 들어맞지 않는다면? 나는 그 구역에 제일 적합한 디자인은 포기하고 원래 있던 컴포넌트를 사용해서 디자인 채무(Design Debt)를 줄여야 하나?' 바로 Too Limiting에 관한 걱정인 것이다. 하지만 이 책에서는 이렇게 설명한다. 대부분의 디자이너들은 어떠한 문제가 생겼을 때 새로운 디자인을..