https://www.figma.com/file/az6fxLor8gn9adM2euDPLp/[UIX]-Design_Kit?type=design&node-id=56-48336&mode=design&t=hbONjyScrduqqwkI-0

Design Token

• 피그마에서는 Variables 라는 기능으로 사용
• 디자인 토큰을 사용하는 이유
  • 일관성
    • 규칙으로 사용되어 시스템 내에서 시각 요소의 일관성을 유지
  • 효율성
    • 한 번의 변경으로 연결된 많은 시각 요소를 업데이트
  • 자동화
    • 디자이너와 개발자의 빠른 소통
  • 유연성
    • 추후 글로벌 테마 변경 등에 유연하게 대처
• Hierarchy
  • base
    • 실제 수치와 값을 1차로 토큰화
  • semantic
    • base token 을 참조하여 맥락에 부합하는 의미를 이름에 담은 토큰
• Theme
  • 각 제품에 맞는 테마 시스템을 제공

Foundation

• Color
  • Primary color
    • 디자인 시스템에서 사용되는 대부분의 색상을 구성하는 주요 색상
  • Status color
    • 속성이나 상태를 은유적으로 전달하며 시각 요소의 정보 전달을 보조
  • Secondary color
    • 시각 요소를 구성할 때 주요 색상을 보조하는 컬러
    • 속성이나 상태를 내포하지 않으며 제한된 영역에만 포인트로 시각 요소의 단순 컬러 구분 및 강조를 위해 사용
  • Semantic Color
    • 위 색상들에 의미를 내포한 이름을 부여하여 디자인-개발 간의 커뮤니케이션 비용을 줄이기 위함
• Typography
  • Heading
    • Heading 1
    • Heading 2
    • Heading 3
  • Title
    • Title 1
    • Title 2
    • Title 3
  • Body
    • Body 1
    • Body 2
    • Body 3
• Dimension
  • 간격, 사이즈, 모서리 표현 등에서의 규격화된 수치를 활용하여 시각적 연속성을 제공함.
  • 사전 정의된 단위 시스템은 제품 전반적인 품질과 접근성을 향상시킬 수 있음.
  • Radius
    • 0x, 0.25x, 0.5x, 0.75x, 1x, 1.5x, 2x, 3x, 4x
    • 0px, 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px
  • Space
    • 시각 요소간의 간격, 시각 요소의 내부 간격에 적용
    • 적절한 여백과 공간은 시각 요소의 안정적인 구성이 가능하며, 가독을 보조하고, 연관된 정보와 그렇지 않은 정보간의 구분을 용이하게 해줍니다.
    • 0x, 0.5x, 0.75x, 1x, 1.5x, 2x, 2.5x, 3x, 4x, 5x
    • 0px, 4px, 6px, 8px, 12px, 16px, 20px, 24px, 32px, 40px
  • Size
    • 규격화된 사이즈 적용을 통해 일관된 인상을 전달할 수 있으며, 시각 요소의 위계 구분을 용이하게 함
    • 0x, 0.125x, 0.25x, 0.5x, 0.75x, 1x, 1.25x, 1.5x, 2x, 2.25x, 2.5x, 3x, 3.5x, 3.75x, 4x, 4.5x, 5x
    • 0px, 1px, 2px, 4px, 6px, 8px, 10px, 12px, 16px, 18px, 20px, 24px, 28px, 30px, 32px, 36px, 40px
  • Elevation
    • 상황에 따라 변경되는 정보의 중요도나 맥락에 부합하도록 시각적으로 우선순위를 구분하는 계층의 표현
    • 팝업
      • 평면상에서 존재하는 정보보다 z축 기준 상위에 배치된 컨테이너를 활용해 사용자에게 정보를 전달
      • 일반적으로 사용자와 서비스간 상호작용의 결과로 나타나며, 기존 정보들은 유지된 상태로 맥락에 필요한 정보를 순간적으로 확인한 이후 이전 정보로 복귀할 수 있다.
    • Level of surface
      • Level 4
        • Dialog
      • Level 3
        • Toast
      • Level 2
        • Modal
      • Level 1
        • Select List, Dropdown List, Filter Popup, Picker Popup, Floating Toolbar
      • Level 0
        • Basic surface & component
      • 종류
        • Toast Message
          • 마우스 호버하는 동안 유지되며, 연속적으로 나타날 경우 마지막 메시지만 표시
        • Select List, Dropdown List
          • 동시에 1개만 열려있을 수 있음.
        • Notification
          • 시스템 상에서 발생하는 상황을 텍스트 정보의 형태로 사용자에게 전달.
          • 연속적으로 쌓일 수 있으며, 일정시간 이후 사라짐.
        • Tooltip
        • Dialog
        • Modal
    • 그림자 효과
• Layout
• Icon

Component

• 서비스 디자인을 구성하는 시각 요소의 작은 단위
• 컴포넌트 구성 방식
• 이미 uix 에 존재하는 컴포넌트중 모바일에 필요해 보이는 컴포넌트
• 하지만 위 컴포넌트를 구현한다고 해서 뉴로우의 얼마정도를 대체할 수 있을지 전혀 모르겠다..
• 구선님이 분리해주신 컴포넌트들은 완전히 뉴로우에서만 사용될 것 같은 컴포넌트들이라 사내 공통 사용을 목적으로 하는 모바일 uix 에 구현하는게 맞는지 모르겠다..

Transition

• 시각 요소에 적절한 움직임을 적용