디자인 시스템 구축 도입기.pptx

디자인 시스템이란?

• 공통의 언어와 시각적 일관성을 만들고 반복되는 작업을 줄임으로써, 규모에 맞게 디자인을 관리하기 위한 표준 집합.
• 디자인 시스템은 디자이너들을 위한 시스템이아닌, 전체 조직 구성원을 대상으로 ‘제품을 만드는 방법’을 다룸.
• UI 툴킷, 프레임워크, 컴포넌트 라이브러리, 스타일가이드 등의 집합을 넘어 제품을 구성하는 표준 집합.

진행 및 구성

• 지난 9월부터 알툴즈 리브랜딩 홈페이지 개발 시작시 디자인 시스템 초기 구축.
• 화면 설계시 퍼블리싱 팀과 같이 컴포넌트 및 아토믹 디자인 패턴을 고려하여 화면 작업 진행
• (UX)퍼블 1인 + (UX)디자이너 + (FrontEnd)개발자 2인

알툴즈 리브랜딩 디자인 시스템 스펙

• 아토믹 디자인 (UI 컴포넌트 패턴)
• Storybook (React 기반 UI 툴킷)
• 스타일 가이드 (SASS 7-1 패턴, BEM 방법론 방법론 적용)

✅ 아토믹 디자인 패턴

[참고] 카카오페이지 아토믹 디자인을 활용한 디자인 시스템 도입기

• 위와 같은 구성요소로 재사용 가능한 컴포넌트 구조로써 사용

아토믹 화면 설계