TIL 71일차 - [UX/UI] Design System 1

들어가기에 앞서 check 해보기

앞선 섹션에서 학습한 전반적인 코딩을 위한 기본 지식들이 필요하다.

☑️ HTML / CSS / JavaScript
☑️ CDD와 CSS-in-JS
☑️ Figma 사용 방법
☑️ Styled Components 사용 방법
☑️ Storybook 사용 방법

• 디자인 시스템이란 무엇이며, 왜 중요한지 이해할 수 있다.

• 디자인 시스템을 적용함으로써 얻는 이점을 알 수 있다.

• 구글, 마이크로소프트 등 실제 유명 서비스에서 디자인 시스템을 어떻게 사용하는지 알 수 있다.

• 아토믹 디자인의 개념과 이를 구성하는 요소에 대해 알 수 있다.

• 아토믹 디자인 적용 시 얻는 이점에 대해 이해할 수 있다.

• 애플리케이션을 아토믹 디자인으로 구성하는 방법에 대해 이해할 수 있다.

과제 : Component Library

• Figma에 적용된 아토믹 디자인과 디자인 시스템의 역할을 이해할 수 있다.

• Figma에서 디자인 토큰을 추출하고 이를 코드로 적용할 수 있다.

• Styled Components를 사용해 재사용 가능한 컴포넌트를 만들 수 있다.

• 아토믹 디자인 원칙에 따라 분자 및 유기체 단위의 컴포넌트를 만들 수 있다.

• Storybook을 사용해 문서화된 컴포넌트 라이브러리를 만들 수 있다.

소감

🔡➡️💻➡️🤓👍