벌써 마지막 포스팅이라니! 신난다(?) 오늘은 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에 관한 걱정인 것이다. 하지만 이 책에서는 이렇게 설명한다. 대부분의 디자이너들은 어떠한 문제가 생겼을 때 새로운 디자인을..

UIUX 공부를 시작하면서 한번쯤은 접하게 될 디자인시스템! 처음엔 그런가보다 하고 넘겼지만, 접하면 접할수록 디자인시스템은 중요한 개념인 것 같아 시리즈로 포스팅을 제작하기로 했다. 이 포스팅은 외국 디자인회사 InVision에서 제작한 핸드북을 바탕으로 요약 및 정리해 본 자료다. 참고로 저 핸드북은 모조리 영어다.. 내가 영어를 잘 하는 것은 아니지만 그래도 열심히 혼자 읽으며 정리했다 ㅠ 🖼 디자인시스템은 왜 존재할까? 디자인시스템은 Reusability(재사용성) 단 하나를 위해 존재한다고 해도 과언이 아니다. 큰 회사의 경우에는 많은 디자이너가 같은 디자인 형태를 만들어내야 하기 때문에, 기존에 썼던 디자인 요소를 반복해서 사용하는 경우가 많을 것이다. 그런데 디자인시스템이 존재하지 않는다면,..