디자인 시스템

디자인 시스템

팀이 응집된 제품을 구축하는데 도움을 주는 재사용 가능한 컴포넌트, 가이드라인, 에셋의 집합

  • 디자인 시스템은 사용자와 팀이 사용자에게 유용한 디지털 경험을 만들 수 있도록 안내하는 나침반

  • 가장 중요한 목표는 사용자 경험을 향상시키는 것

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

  • 가장 중요한 것은 접근성일관성

코딩 스타일 가이드

규칙과 가이드라인의 집합

  • 조직 전체의 코드에서 일관성을 보장

  • 디자인 시스템의 컨텍스트에서 핵심적인 역할

  • 통일성: 규칙과 관습, 표준화된 집합은 통일성의 보장을 도움, 개발 환경안의 일관성을 촉진

  • 모듈화된 코드 구조: 모듈화된, 재사용 가능한 컴포넌트의 생성을 독려함

    • 디자인 시스템 효율성의 핵심

  • 응집의 미학: 코딩 스타일 가이드를 디자인 원칙과 시각적 가이드라인과 함께 사용시 코드 구조와 시각적 요소를 정렬함으로써 일관적인 미학과 동작으로 렌더링하는 것을 도움

고려사항

  • 유연성과 확장성 : 변화를 수용할만큼 유연해야하며, 프로젝트의 성장을 다룰 수 있을만큼 확장 가능해야함

    • 새로운 컴포넌트를 쉽게 통합할 수 있고, 기존 시스템을 망가뜨리지 않고 스타일링할 수 있어야함

  • 팀 협업과 효율성 : 팀 멤버 사이의 효율적인 협업을 촉진

    • 명확하고, 간결하며 모든 팀 멤버들의 경험 수준에 관계없이 쉽게 이해할 수 있어야함

  • 디자인 원칙들과의 정렬 : 시스템의 중요한 디자인 원칙과 정렬되어 있어야함

    • 코드가 깨끗하게 보이고, 디자인 의도와 사용자 경험 목표를 반영함

디자인 시스템에서 스타일 가이드의 선택은 프로젝트 요구사항, 팀 선호, 디자인 시스템의 전반적인 목표를 고려해 이뤄져야함

디자인 토큰

재사용 가능한 디자인 정보 조각

  • 색상, 타이포그래피, 간격 등

  • 중앙 집중된 영역에 정의되고 여러 프로젝트에서 접근 및 재사용될 수 있음

  • 주요 목적은 디자인 가치를 애플리케이션으로부터 추상화하는 것

  • 설계 토큰의 큰 장점은 디자인 시스템 안에서 업데이트를 단순화 할 수 있음

컴포넌트 라이브러리

사전 설계 및 사전 코딩된 UI 컴포넌트들 모음

  • 웹 애플리케이션 설계의 빌딩 블록 역할

  • 컴포넌트 라이브러리를 구축하고 사용함으로써 앱 전체의 일관성을 보장

  • 일관성은 개발 시간 및 비용을 줄이고, 유지보수를 쉽게 해줌

  • "최고의 설계 도구는 효율적이지만 단순하다"

    • 너무 많은 일을 하려드는 도구는 신뢰할 수 없거나 사용하기 불펴해진다.

    • 하나의 컴포넌트 API에는 너무 많은 옵션을 넣으려하면 불필요하게 경직됨 (유지보수 어려움)

확장성

프로젝트 규모가 커지면서 보다 많은 컴포넌트들이 추가되면 컴포넌트 라이브러리는 유지보수 가능한 상태로 구조화되어야 한다.

  • UI 카테고리에 기반해 폴더로 조직화

  • 명확한 명명 규칙을 보장해야함

  • 종합적인 문서화를 유지해야함

의존성 관리

디자인 라이브러리 내 컴포넌트들은 최소 의존성을 갖도록 항상 보장해야한다.

  • 라이브러리 크기를 줄일 수 있음

  • 해당 라이브러리를 사용하는 프로젝트 안에서 의존성 충돌 발생 가능성도 줄임

접근성

디자인 시스템 내부 요소들 안에서 접근성을 보장하는 것은 매우 중요

  • UI 컴포넌트에는 장애인을 포함해 모든 사용자들이 접근할 수 있어야 함

  • 비-텍스트 컨텐츠(이미지, 비디오, 오디오)를 위해 대체 텍스트 제공

  • 시맨틱 HTML 활용

  • 전경색과 배경색 사이에 색상 대비

  • 키보드 인터렉션

  • 빠르게 반복되는, 깜박거림, 색상 전환되는 컨텐츠 통합 피하기

성능

디자인 시스템의 컴포넌트들은 높은 성능을 위해 최적화되어야함

  • 애플리케이션 내부에서 자주 재사용되고, 한 페이지에서 여러 차례 렌더링되기 때문

  • 이 컴포넌트들의 모든 성능 이슈, 병목은 애플리케이션 전반적인 성능에 큰 영향을 미침

  • UI 컴포넌트에 관해 지연 로딩 구현

    • 이미지, 비디오 같은 리소스를 온디맨드로 로딩

  • 다양한 화면 크기에 적응하는 이미지 활용

    • 이미지를 통합하거나, 사용자 기기 화면 크기에 맞춰 제공

  • UI 컴포넌트 에셋에 관한 HTTP 요청 줄이기

    • 스크립트 혹은 스타일 파일을 하나의 파일로 합치기

    • 이미지 스프라이트 사용하기 (이미지 여러개 합침)

문서화

좋은 디자인 시스템 및 컴포넌트 라이브러리의 뼈대

  • 컴포넌트와 디자인 토큰을 효과적으로 사용하는데 필요한 명확성, 컨텍스트, 지시를 제공하는 가이드북 역할

  • 새로운 팀 구성원의 온보딩 프로세스를 쉽게 만듦

  • 컴포넌트 사용과 관련된 잘못된 소통 및 잠재적인 오해를 최소화

  • 디자이너와 개발자가 동일한 방향성을 가지고 작업할 수 있도록 돕는 기준점 역할\

명확한 문서화 작성 요소

  • 컴포넌트 설명: 각 컴포넌트에 대한 간략한 개요 및 목적, 사용 방법

  • 사용 가이드라인: 해당 컴포넌트 구현 방법에 관한 단계적 설명, 코드 스니핏, 시각적 참조 자료 등

  • props 및 API 참조: 컴포넌트의 모든 속성의 세부 목록 및 타입, 속성들이 컴포넌트 동작이나 형태에 미치는 영향

  • 예시: 다양한 컴포넌트 혹은 prop 조합을 보여주는 컴포넌트 예시

  • 접근성 노트: 컴포넌트가 접근성 표준을 얼마나 준수하는지에 관한 구체적인 세부 사항 및 일관성 있는 접근성 보장하기 위한 모든 특별 지시사항 등

  • 버저닝 및 변경이력: 컴포넌트의 다른 버전들에 관한 정보, 변경사항 등

DLS

디자인과 개발에서 일관된 UI/UX를 유지하기 위한 원칙, 컴포넌트, 스타일 가이드 등을 체계적으로 정리한 시스템

Last updated