[아티클 인사이트 #19] 디자인 시스템에 관련 아티클 모음

#1 오늘의 아티클

▼ 디자인 시스템에 관련 아티클 모음

millie Design Library 2.0

디자인 시스템에 적용 가능한 시멘틱 컬러를 알아보자 | e · motion

07화 UI를 위한 타이포그래피

디자인 시스템 구축하기 - 폰트 스타일 가이드

 

#2 아티클 정보 요약

 1. 밀리 디자인 라이브러리

  ❑ 밀리의 디자인 시스템 개선

• 밀리 디자인 프로세스 문제점
  → 다양한 상황에 대응이나 가이드가 부족하여 컴포넌트 수정이 빈번함
  → 문서화가 아닌 디자이너만의 구두 약속으로만 남음
• 디자인 시스템 개선 목적
  → 실용성 높은 스토리북 구축, 개발 시간 단축 및 UI 통일성 강화, 커뮤니케이션 비용 절감
• 스토리북(Storybook) : 컴포넌트의 다양한 경우를 정리할 수 있도록 도와주는 시각화 도구(tool).
  -> 버튼 컴포넌트가 있다고 하면 상태(데이터)에 따라서 UI나 액션이 달라질 수 있다.

 2. 시멘틱 컬러

• Sementic Color : 시멘틱은 색상이 아닌 사용 방법에 따라 색상 이름을 지정하는 방법을 말함
• Color Palette
  • Gray Scale Colors
    - 업을 하기 전 정보의 계층구조를 나타낼 때 사용하며 텍스트, 정보를 나누기 위한 구분선 요소에 사용
  • Brand Colors
    - Primary Color는 눈에 띄는 버튼, 활성 상태 및 높은 표면의 색조와 같은 UI 전체의 주요 구성 요소에 대한 역할로 사용
    - Secondary Color는 필터, 칩과 같이 UI에서 덜 눈에 띄는 구성 요소에 사용되며 색상 표현의 기회를 확장
    
• 작업자와 사용자를 위한 구글의 머터리얼 디자인 시스템이 구축
• 사용자들의 시각적 편의를 위한 애플의 다크 모드의 출시로 인해 큰 발자국을 시작함
• UX작업자들을 위한 툴의 진화로 컬러 네이밍이 디자인 토큰으로 진화
  ☞ 색상과 타이포그래피, 간격, 크기 등 기본 단위의 디자인 속성을 재사용할 수 있는 변수로 정리하여 사용하는 방식

 3. 폰트스타일

✲ 하나의 연속된 컨텐츠에서 각기 다른 폰트 스타일을 사용한다면 사용자가 인식하는 과정에서 걸림돌이 됨은 물론, 하나의 컨텐츠로 보이지 않게 된다.

• 폰트 스타일 가이드의 개념 : 반복되는 텍스트 요소들을 규격화 해놓은 문서

• 폰트 스타일 가이드의 용도
  1. 효과적인 협업을 위해
     - 유관 부서와 UI 관련 커뮤니케이션이 선명 -> 스타일명을 동기화
  2. 유지보수성
     - 공통 스타일을 바꿀 때 디자인 전부를 확인하고 개별 수정해야 하는 상황에 이를 수 있다. 스타일 가이드를 만들고 이를 지켰다면 디자인 전부를 손쉽게 일괄 수정 가능
  3. 디자인팀의 효과적인 생산성 / 유지보수성을 위해
     - 기존 스타일이 상당 부분 재사용되므로 생산성에 큰 도움이 된다.
  4. 개발팀의 효과적인 생산성 / 유지보수성을 위해
     - 가이드에 정의된 요소들을 미리 파악하여 일괄적으로 스타일 적용이 가능

※ 하나의 연속된 컨텐츠에서 각기 다른 폰트 스타일을 사용한다면 사용자가 인식하는 과정에서 걸림돌이 됨은 물론, 하나의 콘텐츠로 보이지 않게 된다.