디자인 시스템

디자인시스템: 팀이 응집된 제품을 구축하는 데 도움을 주는 재사용 가능한 컴포넌트, 가이드라인, 애셋의 집합.

디자인시스템은 중앙 집중화된 설계요소, 패턴, 가이드라인을 제공하며 개발 및 설계 프로세스의 일관성과 효율성을 보장함을 돕는다.

1. 코딩 스타일 가이드

코딩스타일가이드 는 규칙과 가이드라인의 집합이며, 팀 혹은 조직 전체의 코드에서 일관성을 보장한다. 코딩스타일 가이드는 이러한 역할을 한다

• 통일성: 규칙과 관습의 표준화된 집합은 통일성의 보장을 돕는다. 통일성은 개발 환경안의 일관성을 촉진한다.
• 모듈화된 코드 구조: 모듈화된, 재사용 가능한 컴포넌트의 생성을 독려한다. 서로다른 프로젝트와 팀 사이에서 컴포넌트를 매끄럽게 공유하고 재사용 가능하다.
• 응집의 미학: 디자인 원칙과 시각적 가이드 라인과 함께 사용하면 시각적 요소와 코드 구조를 항상 정렬 하도록 시도함으로써 일관적인 미학과 동작으로 컴포넌트를 렌더링하는 것을 돕는다.

ex) BEM 방법론. (블록,요소,수식자), tailwind(유틸리티 클래스 집합 제공)

코딩 스타일 가이드는 css구조화를 넘어 명명규칙, 들여쓰기, 형식, 주석등에 관한 가이드까지 포함할 수 있다.

스타일 가이드의 선택은 유연성과 확장성, 팀 협업과 효율성, 디자인 원칙들과의 정렬 등을 고려해 이뤄져야 한다.

2. 디자인 토큰

디자인토큰은 재사용 가능한 디자인 정보의 조각으로 색상, 타이포그래피, 간격 등이 있다. 이들은 중앙 집중된 영역에 정의되고 여러 프로젝트에서 접근 및 재사용될 수 있다.

디자인 토큰에 숨어 있는 주요 목적은 디자인 가치를 애플리케이션으로부터 추상화하는 것

토큰의 상당한 장점중 하나는 디자인 시스템 안에서 업데이트를 단순화할 수 있다는 점

3. 컴포넌트 라이브러리

컴포넌트 라이브러리는 사전 설계 및 사전 코딩된 UI 컴포넌트를 모은 것으로 디지털 제품의 다양한 부문이나 다양한 제품에 걸쳐 재사용할 수 있다. 이 라이브러리들은 서비스 설계의 빌딩 블록 역할을 하며 이들을 사용하면 모든 컴포넌트가 정의된 디자인 시스템에 일치하게 된다.

리액트 같은 프로엠웤들은 재사용 컴포넌트 생성을 쉽게 할 수 있게 해주며 prop과 상태를 조합해 동작과 렌더링을 통제한다.

• 컴포넌트 라이브러리 확장성
  • 프로젝트 규모가 커지고 보다 많은 컴포넌트들이 추가되면 컴포넌트 라이브러리는 유지보수 가능한 상태로 구조화되어야 한다. 기능 or 카테고리 기반해 폴더로 조직화하고, 명확한 명명규칙을 보장하고, 종합적인 문서화를 유지해야 한다.
• 주제화 및 커스터마이제이션
  • 종종 하나의 브랜드 아래 동일한 컴포넌트 라이브러리를 서로 다른 여러 제품에 걸쳐서 사용하기도 한다. 주제화 옵션은 컴포넌트 로직을 대체하지 않고 손쉽게 브랜딩을 변경할 수 있게 해준다.
• 의존성 관리
  • 디자인 라이브러리 안의 컴포넌트들이 최소 의존성을 갖도록 항상 보장해야 한다. 크기를 줄이는 점도 있지만 의존성 충돌이 발생할 가능성도 줄인다.

4. 접근성

UI 디자인에서, 접근성을 보장하는 것이 매우 중요하다. UI 컴포넌트에는 장애인을 포함한 모든 사람이 접근할 수 있어야 한다. 웹 콘텐츠 접근성 가이드라인 같은 접근성 가이드라인을 통해 접근 가능한 웹콘텐츠를 만드는 방법에 관한 정보를 얻을 수 있다. 시멘틱 태그, alt 등등

• 전경색조와 배경 색조 사이에 충분한 대비 (시력장애인 들을 위해)
• 모든 사용자 상호작용 컴포넌트들에 대해 키보드 친화적인 탐색을 통합.
• 빠르게 반복되는 깜빡이는 색상이 전화되는 콘텐츠 통합 피하기

5. 성능

디자인 시스템의 컴포넌트들은 높은 성능을 위해 최적화되어야 한다. 자주 재사용되며 한 페이지에서 여러차례 렌더링 되기때문이다. 모든 성능 이슈 혹은 병목은 애플리케이션의 전반적인 성능에 큰 영향을 미친다.

• UI 컴포넌트에 관한 지연로딩을 구현하여 성능 개선
• 다양한 화면 크기에 적응하는 이미지들을 활용해 성능 개선
• UI 컴포넌트 애셋에 관한 HTTP 요청을 줄여 성능 개선