archuive

요약: DesignOps 팀의 구조는 팀의 특정 과제와 요구로부터 출발해야 합니다. 이러한 팀 구조는 DesignOps 팀을 지원할 수 있는 다양한 접근 방식을 보여줍니다. DesignOps는 일관되고 품질 높은 디자인을 가능하게 하는 것과 관련된 많은 요소들이 있기 때문에 광대한 기회를 가지고 있습니다. 조직이 DesignOps 실무에서 중점을 두는 것은 해당 조직의 요구와 목표가 반영된 것이어야 하며, 또한 DesignOps 팀이나 역할에 대한 해당 실무 구조도 반영해야 합니다. 이 기사에서는 DesignOps 팀의 일반적인 5가지 유형의 구조에 대해 설명합니다. 적합한 구조는 회사마다 정형화된 DesignOps 프로그램에 대한 전반적인 조직 구조, 목표 및 요구 수준에 따라 달라지며, 따라서 어디에..

colorbox.io 를 활용해 디자인 시스템의 컬러 팔레트를 구성해보자. lyft의 디자이너였던 Kevyn Arnott가 새로운 ColorBox를 만들었다. 간단하게 특징을 요약해보자. 멀티 컬러 생성 한 워크스페이스에서 여러 개의 색상 팔레트를 추가할 수 있다 접근성 표시 내장 색상을 알고리즘 접근 방식으로 풀어나간 이유는 모든 사람이 접근성에 최적화된 색상 시스템을 제작할 수 있도록 돕고싶었기 때문이라고 한다. ColorBox에서 접근성과 관련하여 디테일하게 라벨까지 선택이 가능하다. 오른쪽 패널에서 색상 대비 레벨도 껐다 켤 수 있다. Constast Colors에는 작성한 컬러 팔레트가 텍스트로 들어갈 배경 색상을 정의해준다고 생각하면 좋다. 다크 모드 컬러를 선택한 뒤, 옵션 탭에서 다크모드를..

포토샵과 같은 일부 현대 디자인 애플리케이션은 여전히 'leading'라는 용어를 사용하는 반면 HTML과 CSS에서는 이 속성을 'line-height'라고 부른다. leading, line spacing, line height는 모두 같은 것을 말합니다. line height 또는 line spacing은 일반적으로 글꼴 크기의 백분율로 측정됩니다. 일반적인 통념으로는 130-150%의 행간격이 가독성에 이상적이지만 200%까지 허용됩니다. 완벽한 line height는 글꼴 자체의 디자인과 크기에 따라 달라집니다. 모든 텍스트에 적용되는 매직 넘버는 없습니다. 글꼴 크기의 1.5배 선 높이로 시작하는 것이 좋은 시작이며, 그에 따라 조정할 수 있습니다. 1.5 라인 높이를 사용할 때는 8 포인트 그..

디자인 시스템에서 정의한 타이포그라피 규칙을 코드화해 편리하게 사용하고 싶었다. 타이포그래피 규칙은 font-size, font-weight, line-height, letter-spacing 등 복합적인 속성으로 구성되어 있어 변수만으로는 원하는 구조를 구현하기 힘들어 보였다. 위 타이포 규칙을 하나의 묶음으로 만들어 타이포그라피 규칙 중 이 유형 이라는 의미를 갖는 것이 원하는 형태였다. 방안 1. mixin으로 만들어 @include 로 사용하는 방법 방안 2. function으로 만들기? 1. map과 @function 을 사용하는 방법 map 정의 $typography-size-map: ( "heading-01": 72px, "heading-02": 48px, "heading-03": 32px,..