디자인 시스템과 컴포넌트

Collection of design systems & creating reusable design systems

디자인 시스템 모음 & 재사용 가능한 디자인 시스템 만들기

디자인 시스템

Design System

A Design System is a set of interconnected patterns and shared practices coherently organized to aid in digital product design and development of products such as apps or websites. It may contain, but is not limited to, pattern libraries and design language, style guides, coded components, brand language and documentation for use of these.

디자인 시스템은 디지털 제품 디자인 및 앱 또는 웹 사이트와 같은 제품 개발을 지원하기 위해 일관되게 구성된 상호 연결된 패턴 및 공유 방식이다.

컴포넌트

Component

A component in the Unified Modeling Language represents a modular part of a system that encapsulates the state and behavior of a number of classifiers.

컴포넌트는 프로그래밍의 한 부분을 의미하며 재사용이 가능한 최소 단위를 말한다. 객체지향언어를 사용할 때 자주 사용되며 재사용이 가능하기 때문에 컴포넌트 단위로 분류하거나 이동 가능하다는 특징이 있다.

이는 모듈(Module)과 혼동될 수 있는데 모듈은 특정 기능을 온전히 수행할 수 있도록 만들어 졌다면 그 모듈 내에서도 재사용이 가능한 단위가 컴포넌트라 할 수 있다.

웹사이트를 구축할 경우 모든 것을 새로 만드는 웹 사이트를 상상조차 할 수 없는게 현실이다. 대부분이 라이브러리, 플러그인, 모듈 그리고 컴포넌트로 재사용이 되는 부분들이 대단히 많다 하겠으며 이를 얼만큼 효과적으로 가장 적합한 어떤 것을 찾고 적용하는 역량이 더 중요해졌다 말할 수 있다.

디자인 시스템을 만들때 고려해야 할 것

• 일관성
• 독립형
• 재사용성
• 접근성
• 견고함

일관성

시스템의 규칙 을 정의하고 문서화하고 모든 사람이이를 따르도록 하는 것이다. 코드 표준과 모범 사례를 명확하게 문서화하면 조직 전체의 디자이너와 개발자가 쉽게 사용할 수 있으며 더 중요한 것은 디자인 시스템에 기여할 수 있다.

독립형

캡슐화를 통한 유지 관리. 독립형 디자인 시스템 리포지토리는 단일 소스로 작동한다. 구성 요소가 정의 된 위치는 단 한 곳이며, 이는 개별 종속성으로 다른 코드베이스에 공유된다. 모든 사용이 정식 구현을 가리 키기 때문에 한 곳의 변경 사항이 전체 시스템에 전파된다.

재사용성

디자인 시스템의 목표는 재사용 가능한 패턴을 만들어 개발을 건조하고 중복을 줄이는 것이다.

성공적인 설계 시스템은 재사용 가능성이 높다. 역대 가장 많이 사용되는 프런트 엔드 라이브러리인 Bootstrap은 재사용성을 염두에두고 설계 되었기 때문에 수백 (수천은 아니더라도)의 웹 사이트를 지원한다.

재사용 및 확장이 가능하려면 패턴이 모듈화되고 구성 가능하며 일반적이며 유연해야한다.

접근성

모든 사람이 액세스 가능한 사이트, 기능 및 앱을 만든다.

웹은 기본적으로 하드웨어, 소프트웨어, 언어, 문화, 위치 또는 신체적 또는 정신적 능력에 관계없이 모든 사람을 위해 작동하도록 설계되었다. 이 목표를 달성하면 다양한 청각, 움직임, 시각 및인지 능력을 가진 사람들이 웹에 액세스 할 수 있어야 한다.

• 설정된 색상 대비 지침에 따라 색상 사용 테스트
• 키보드 전용 탐색 및 화면 판독기와 같은 보조 기술 장치를 사용하여 코드 테스트
• 더 크고 읽기 쉬운 텍스트 크기 사용, 양식 필드를 레이블과 연결, 이미지에 대체 텍스트 속성을 적절하게 추가

견고함

사용자는 예기치 않은 방식으로 중단되지 않고 UI를 업그레이드하거나 변경할 수 있음을 알아야 한다. 또한 디자인 시스템은 코드를 강력하게 테스트하기위한 기반을 형성 할 수 있어야한다.

설계 시스템의 안정성을 보장하기 위해 단위 테스트, 기능 테스트, 접근성 테스트를 적극 사용한다.