Figma - 디자인 시스템(Design System) 이론

디자인시스템

• 디자인과 개발에 사용되는 일관된 컴포넌트, 가이드라인, 디자인 가치를 포괄하는 체계적인 구조적 시스템을 말한다. 디자인시스템을 통해서 더 빠르고, 효과적으로 디자인 결정을 내릴수 있기 때문에 프로젝트의 방향성과 일관성을 유지할수 있는 장점이 있다 → (특히, 디자인시스템은 디자이너와 개발하는 사람 모두를 위한 일이기도 하지만 결국엔 사용자들에게 좋은 UX 경험을 선사하기 위해 이런 시스템을 구축하는데 목적을 두고 있음)

• 디자인 시스템 구조

  • Foundations : 디자인에 가장 기초적인 내용들을 담아둔 곳
    • 컬러
    • 타이포그래피
    • 아이콘
    • 레이아웃
    • 스페이싱 및 크기
    • 그래픽 에셋
  • Components : 실제 사용자들이 무언가를 행동할때 보거나 인터랙션을 할수있는 이런 컴포넌트들을 말함
    • 네비게이션 바
    • 버튼
    • 텍스트필드
    • 체크박스
    • 라디오버튼
    • 검색 바

• 디자인시스템 장점

  • 일관된 스타일
    • 사용자 인터페이스 요소, 컴포넌트, 패턴 등에 대한 표준화된 가이드라인을 제공함 이를 통해 사용자 경험의 일관성을 유지할수 있고 사용자 학습 곡선을 줄임과 동시에 제품에 대한 신뢰를 높이는데 도움이 된다
  • 생산성 향상
    • 재사용 가능한 컴포넌트를 제공하기 때문에, 디자이너와 개발자 모두가 더 빠르게 작업할수 있다 이를 통해 중복되고 불필요한 작업을 줄이고 효율적으로 프로젝트를 관리하는데 도움이 된다
  • 커뮤니케이션 개선
    • 디자인과 개발 팀간의 커뮤니케이션을 개선하는데 큰 도움이 됨 공통의 언어를 가지게 되므로 이해도와 협업 증진이 크게 개선되어 오해와 실수가 크게 줄어든다

• 디자인시스템 단점

  • 사람마다 원칙 준수를 위한 교육과 제대로된 숙지를 위한 가이드라인 공유가 필요함
    • 만약 디자인 담당자나 팀원이 퇴사를 하거나 어떤 사유로 인해 바뀌게 되는 경우가 생긴다. 이때 새로운 직원이 입사를 할경우 교육을 통해 비슷한 수준으로 사용을 할수 있도록 하고 있지만 사람마다 빨리 적용하고 늦게 적용하는등의 상황이 매우 달라 이를 신속하게 적용하기 어려움
  • 개발자와 잦은 소통과 싱크를 맞춰서 협업이 되어야함
    • 개발에도 변수상황에 맞게 코드를 리팩토링을 해야하는 경우가 생기는데 만약에 디자이너가 최근에 업데이트를 했다면 개발자도 이에 맞게 싱크를 맞춰야 하는데 일정이 딜레이 되거나 그외 변수로 인해서 프로젝트 진행에 문제가 생기면 이를 최적화 시키기엔 많은 어려움이 생기게 된다. 결국 이 부분도 누군가 담당해서 소통하며 관리해야 하는 번거로움이 있다
      • 리팩토링이란? → 기존의 코드의 동작이나 기능을 유지하면서 코드의 구조를 개선하는 작업
  • 디자인의 한계점
    • 디자인을 하다보면 여러가지 예외 케이스들이 생긴다 이때, 가이드라인에 맞춰서 진행해야 할것인지? 새롭게 만들어서 적용할지? 이런 부분에서 한두사람이 아닌 여러 부서에 있는 사람들과 소통하다보면 크게 꼬일 수 있는 문제가 있다

• Atomic Design System(아토믹 디자인 시스템)

  • url : https://atomicdesign.bradfrost.com/chapter-2/

    • 아토믹 디자인 시스템이란? 모든 UI 컴포넌트를 원자처럼 분해하고 조합하는 디자인 방법론을 말한다

      • Brad Frost에 의해 제안되었고 다음과 같은 계층 구조로 구성됨

        

        • 원자(Atoms)
          • 로고, 아이콘, 버튼, 스위치, 체크박스 등
        • 분자(Molecules)
          • 검색바, 탭바 등
        • 유기체(Organisms)
          • 해더, 푸터, 제품 리스트 등
        • 템플릿(Templates)
          • 와이어프레임
        • 페이지(Pages)
          • 실제 콘텐츠 및 텍스트가 들어간 완성된 페이지
        • 5단계의 각 개념은 UI 디자인시 계층 구조에서 중요한 역할을 수행하며 회사마다 정의하고 사용하는 범위가 모두 다르기 때문에 참고만 해도 충분함

• 디자인 토큰(Design Token)

  • 디자인 시스템의 가장 작은 구성 요소를 참조하는 변수와 상수를 의미함
    • 예) 컬러, 폰트, 간격 등
      • 참고) 변수란?
        • 숫자 및 데이터가 변하는 수를 변수라고 말하지만, 디자인에서는 일관된 디자인을 위해 사용되는 값 즉, ‘변하는 값’을 말함 → 디자인 요소들을 쉽게 업데이트하고 일관성 있는 디자인을 유지할 수 있음

디자인시스템 제작시 주의사항

1. 효율성을 유지하는 범위 안에서 제작해야 함
- 너무 가볍게 정의하면 비효율적이고 구성원들이 필요성을 느끼지 못해 각자 작업하는 경우가 생김
- 특히 조직이나 팀의 규모가 크고 여러부서가 협업하는 경우에는 특히 주의해야함

2. 모든 경우의 수를 대비해서 짜지 않아야 함
- 너무 디테일하게 만들면 큰 틀에 얽매여서 디자이너의 창의성이 떨어지고 새로운 창작 시도를 못하게 될수도 있음
- 복잡한 시스템은 컴포넌트 수정시에 악영향을 미치기 때문에 예상치 못한 문제가 생길 수 있고, 추후에 사용자 UX 경험에도 악영향을 미치게 될 수 있음