Adobe는 웹, 모바일 및 데스크탑 구현 전반에 걸쳐 수많은 프런트 엔드 프레임워크를 사용하는 100개 이상의 다양한 제품으로 구성된 매우 복잡한 브랜드 포트폴리오를 보유하고 있습니다. 그리고 사람들이 UI 개념에 대해 의사소통하는 데 사용하는 언어에는 미묘한 추상화 계층이 있습니다. 이를 위해서는 디자인 및 구현 세부 사항을 요약하기 위한 신뢰할 수 있는 "진실의 출처"가 필요합니다. Adobe의 Spectrum 규모의 디자인 시스템에서 작업할 때는 상황이 더욱 복잡해집니다 . Spectrum은 단어에 대해 끊임없이 생각합니다. 논리적이고 전략적으로 이름을 지정하고 추상적이고 복잡한 개념을 간단하고 명확한 방법으로 전달하고 자세한 문서를 작성해야 하는 필요성 사이에서 언어는 팀 대화의 핵심입니다. 우리는 우리 시스템의 패턴을 식별하고 쉽게 이해할 수 있는 방식으로 우리 시스템 과 소통 하기 위한 전략을 만듭니다 . 저는 언어와 글쓰기에 중점을 둔 콘텐츠 디자이너이자 UX 디자이너입니다. 내 전문 분야는 디자인 시스템이며 Spectrum의 수석 콘텐츠 디자이너로서 디자인 시스템 의 콘텐츠(문서, 이름 지정 및 정보 아키텍처) 및 디자인 시스템 의 콘텐츠 (제품 내 스타일 가이드, 용어 데이터베이스 및 콘텐츠) 작업을 합니다. 기준). 제 예술 배경 때문에 저는 디자인 시스템 구축의 특징인 개념적이고 모호한 것에 대해 생각하고 추상적인 아이디어를 유형의 것으로 바꾸는 것이 편합니다. 고도로 기술적이고 시스템 지향적인 팀에 추가할 수 있는 기술 세트입니다. 디자인 시스템에서 작업하는 사람이라면 누구나 알고 있듯이 디자인과 코드라는 두 가지 시스템을 조정해야 하기 때문입니다. 각각은 추상적이고 복잡한 개념을 이해하기 위해 특정 언어와 고유한 논리 및 구문을 사용합니다. 구성 요소, 스타일 및 동작은 요청하는 사람에 따라 다르게 생각되고 전달됩니다. 색상 이름 지정은 콘텐츠 디자인 관행을 디자인 시스템에 적용하는 방법과 언어가 미묘하고 종종 주관적인 주제에 논리를 가져올 수 있는 방법을 보여주는 훌륭한 예입니다. 디자인 시스템에서 색상 이름 지정 색상은 디자인 시스템의 토대입니다. 색상 시스템을 생성할 때 모든 다양한 측면과 용도에 대한 이름이 필요합니다. 많은 디자인 시스템에는 UI 색상 팔레트와 일러스트레이션 및 데이터 시각화와 같은 항목을 위한 추가 색상 팔레트가 있습니다. UI 색상 팔레트는 일반적으로 매우 일반적인 이름을 가지고 있는 반면, 다른 팔레트는 더 설명적이거나 덜 일반적이지만 여전히 인식 가능한 색상 이름을 사용합니다. 예를 들어, UI 또는 "핵심" 색상에 red , blue 또는 purple 과 같은 색상 계열의 명명법을 지정한 다음 증분 상태에서 100의 대비 척도에 값을 할당하고 추가 색상 팔레트 컬렉션의 이름을 지정할 수 있습니다. 특정 의도 또는 용도가 있는 색상은 생생한 파란색 또는 차분한 녹색 과 같은 접두사를 사용하여 용도를 전달할 수 있습니다 . 가장 성공적인 색상 명명법은 공통 언어를 고수합니다. 색상 이름이 엉뚱하거나 문화적 트렌드를 참조하거나 지나치게 브랜드화된 경우 색상이 하나의 시스템으로 작동하는 방식을 이해하기 어려워집니다. 몇 가지 예: 회사 이름이 Awesome Company이고 색상 중 하나를 Awesome Company Purple 로 지정했다면 보라색이 어떤 색인지 쉽게 이해할 수 있는 제한된 수의 사람들이 있을 것입니다. Raichu Orange (특정 포켓몬 참조) 색상의 이름을 지정하는 경우 사용자가 대중 문화 참조를 알고 있다고 가정합니다. 사람들은 디자인 시스템에 인지 부하를 추가하는 색상 이름 뒤에 있는 의미를 검색할 필요가 없습니다. 무서운 괴물이라는 색의 이름을 붙인다면 모든 사람이 "무서운 괴물"을 구성하는 요소에 대한 자신만의 생각을 가지고 있기 때문에 모든 종류의 이미지를 유발할 수 있습니다. dark blueish green 또는 teaal blue 와 같은 여러 형용사를 사용하여 특이성을 전달하려는 의도로 명명된 색상도 명확하지 않을 수 있습니다. 색상이 파란색인가요? 아니면 녹색? 아니면 청록? 색상 이름 지정은 콘텐츠 디자인 관행을 디자인 시스템에 적용하는 방법과 언어가 미묘하고 종종 주관적인 주제에 논리를 가져올 수 있는 방법을 보여주는 훌륭한 예입니다. Spectrum에서 색상 이름을 지정하는 방법 Spectrum의 색상은 간격, 색상, 타이포그래피, 개체 스타일 및 애니메이션과 같은 디자인 시스템을 구성하고 유지하는 데 필요한 모든 값인 디자인 토큰 에 매핑되어 데이터로 표현됩니다. Spectrum에 대한 우리의 명명 결정은 가능할 때마다 산업 용어와 일반적으로 알려진 용어를 활용하므로 디자인 및 개발 커뮤니티 외부에서 인식할 수 없는 색상 이름을 선택하지 않습니다. 또한 유행하거나 주관적이거나 미국 영어(제품 내 콘텐츠에 대한 Adobe의 소스 로케일) 이외의 언어로 된 이름은 피합니다. 광범위하고 다양한 사용자 기반의 요구를 염두에 두고 우리의 색상은 매우 일반적인 단어( 대양 이 아닌 파란색 )로 이름이 지정되고 증분 밝기 값 척도(50–900)와 쌍을 이룹니다. 예를 들어 gray-50 은 gray-100 보다 밝습니다 . 이 접근 방식은 Spectrum이 수년에 걸쳐 Adobe의 많은 제품의 요구 사항을 충족하도록 발전해 왔기 때문에 큰 영향을 주지 않고 꾸준히 변경하는 데 도움이 되었습니다. 이것은 우리가 당장 알아낸 것이 아닙니다. 디자인 시스템 내의 모든 것과 마찬가지로 색상도 점진적으로 변경되므로 때때로 방향을 바꿔야 했습니다. 또한 우리가 색상에 대해 생각하고 말하는 방식에 직접적인 영향을 미치는 색상에 대한 숫자 시스템을 개선하기 위해 몇 번의 반복이 필요했지만 공통 언어 색상 이름과 함께 할당된 숫자 값이 의미를 전달하는 데 똑같이 중요하다는 것을 배웠습니다. 색상 명명법 시스템이 등장합니다. 다른 복잡한 시스템의 설계와 마찬가지로 색상 시스템에는 논리, 초점 및 상당한 양의 분류 작업이 필요합니다. 특별한 이름은 드물게 사용하십시오 . 사람들이 저지르는 가장 큰 실수는 모든 단일 색상의 이름을 다른 색상과 맞지 않는 일회성 이름으로 지정하는 것입니다. 색상 시스템의 모든 색상에 매우 고유한 이름이 지정되면 이해와 유용성에 대한 큰 문제가 빠르게 추가됩니다. 중요한 브랜드 자산 또는 특정 용도의 색상 팔레트에 대한 특별한 이름을 예약하십시오. 서술적 명명을 위한 위치를 알아두십시오 . 특정 디자인 구성 요소에 매핑되지 않거나 특정 효과 또는 감정적 반응(예: 제품 내 일러스트레이션)을 생성하기 위해 다양한 시각적 톤의 배율과 함께 사용되는 색상은 표준 ROYGBIV 색상보다 더 설명적인 이름을 가질 수 있습니다. 이것은 종종 브랜드 보이스 또는 브랜드 원칙이 작용할 수 있는 곳입니다. 예를 들어, 화장품 제조업체를 위해 제품 이름을 지정하는 작업을 하고 있다면 연분홍 매니큐어 풍선 껌에 이름을 지정하여 한 종류의 분위기를 불러일으키고 벚꽃을 다른 느낌으로 불러올 수 있습니다. 단어와 값의 조합으로 작업합니다 . 이름 + 값 페어링 시스템을 제자리에 유지하십시오 (예: gray-100 ). 그런 식으로 (때와 같이) 더 많은 톤을 추가하면 더 많은 공간이 생깁니다. 번호가 매겨진 척도를 사용하기 위한 예측 가능성 요소도 있습니다. 예를 들어 Spectrum에서 우리 시스템은 밝기가 아닌 대비에 상대적입니다. 우리의 밝은 색상 테마는 blue-100이 blue-400 보다 가볍다는 것을 누군가가 쉽게 이해할 수 있는 방식으로 명명되었습니다 . 어두운 색상 테마에서 blue-100은 blue-400 보다 어둡습니다 . 모든 테마에서 blue-100은 blue-400 보다 배경과의 대비가 낮습니다 . 용어에 익숙해지십시오 . 사람마다 색상을 다르게 인식하는 것처럼 더 큰 디자인 및 개발 커뮤니티가 색상에 대해 소통하는 방식에도 차이가 있습니다. 팀이 색상의 다양한 특성을 무엇이라고 부를 것인지에 대해 일치하는지 확인하고 각 단어와 개념이 어떻게 관련되어 있는지 명확하게 정의하십시오. 더 좋은 점은 색상 차트나 디자인 토큰 목록과 함께 문서화하는 것입니다. 예를 들어 시스템의 색상 분류 종류를 설명하기 위해 색상 계열 및 색상 그룹이라는 용어를 사용하도록 결정할 수 있습니다 . 정의는 다음과 같습니다. 색상 계열은 색상 이론 및/또는 더 큰 제품 디자인 산업의 원칙에 따라 색상을 분류합니다. 예를 들어 청록색은 파란색 계열에 속한다고 말할 수 있습니다. 확장하면 특정 명명된 색상에 대한 값 척도를 구성하는 색상 세트를 의미하기도 합니다. 색상 그룹은 특정 사용 속성에 따라 함께 그룹화되어야 하는 주관적 엔터티가 지정하는 색상 집합입니다. 예를 들어 색상 그룹은 Brand Gray, Illustration 또는 Data Visualization 과 같은 이름을 지정할 수 있습니다 . 가장 성공적인 색상 명명법은 공통 언어를 고수합니다. 색상 이름이 엉뚱하거나 문화적 트렌드를 참조하거나 지나치게 브랜드화된 경우 색상이 하나의 시스템으로 작동하는 방식을 이해하기 어려워집니다. 색상 이름을 지정할 때 시도할 사항 가능한 한 이름 + 값 페어링 모델을 사용하십시오 . 훨씬 더 확장 가능하며 중단을 최소화하면서 향후 변경이 가능합니다. 표준 방법은 밝기 또는 대비 값 척도( 10이 더 밝고 100이 더 어두움) 와 쌍을 이루는 색상 계열 분류기(예: 녹색 또는 회색 )의 조합을 사용하는 것입니다. 여러 속성을 각 색상에 매핑합니다 . 예를 들어 연한 파란색에 blue-10이라는 이름을 사용하는 경우 색상 계열(파란색)과 값(10)을 나타내므로 blue-10은 UI 색상 이름 입니다 . 이 UI 색상의 별칭은 용도 나 목적을 설명하기 위한 "기본 클릭 유도문안 버튼"과 같은 것일 수 있습니다. 이렇게 하면 메타데이터 또는 색상 관련 동의어 레이어가 생성됩니다. 사용자가 더 넓은 시스템을 이해할 수 있도록 색상 이름과 함께 색상 코드를 전달하는 것이 문서에서 중요하지만 색상 이름에 16진수 코드나 RGB 또는 HSL과 같은 다른 색상 코드 값에 대한 참조를 사용하지 마십시오. 채도 및 기타 속성을 자주 변경하게 되며 색상 코드도 함께 변경되므로 이름을 많이 바꿔야 합니다. 전략적 네이밍 . 색상에 대한 설명적이지만 지나치게 감정적이지 않거나 특정 이름을 사용하는 것은 드물게 사용하는 경우 매우 효과적일 수 있습니다. 예를 들어 Mint ( Wintry Green 제외 ) 또는 Coral ( Tropical Vacation 제외 )입니다. 일러스트레이션 및 데이터 시각화 색상 그룹에 대해 더 설명적인 이름을 사용하는 것은 괜찮습니다. 이러한 색상은 UI에서 다른 것을 달성하는 것을 목표로 하기 때문입니다. 서면 언어의 어조와 마찬가지로 시각적 어조에 대한 다양한 접근 방식에 자주 사용됩니다. 색상 이름을 지정할 때 피해야 할 사항 일회성, 추상적 또는 지나치게 은유적인 이름 . 예를 들어 Odysseus Blue는 무엇을 의미합니까? 이와 같은 이름은 개인적인 해석의 여지가 있어 불일치할 가능성이 있습니다. 정밀도는 디자인 시스템 내의 색상, 시스템 사용자와 UI 사용자 모두에게 매우 중요하며 특히 액세스 가능한 인터페이스를 디자인할 때 중요합니다. 프로젝트 이름 또는 코드 이름 사용. 코드명이 "Ice Cream"인 프로젝트를 진행 중이라고 가정해 보겠습니다 . 회사의 브랜드 팔레트에서 강조 색상을 Ice Cream 으로 지정하여 다른 색상과 차별화하기로 했습니다. 코드 이름이 애매한 데에는 이유가 있으며 명확성과 이해의 용이함을 목표로 하는 디자인 시스템에서 자리를 차지하지 않습니다. "아이스크림"은 잠재적으로 모든 종류의 색상이 될 수 있습니다! 그리고 모든 코드 이름에는 그 의미에 대한 최종 만료일이 있으므로 조만간 이 색상의 이름을 변경해야 합니다. 타임스탬프 또는 상대 시간 . 색상의 업데이트된 버전을 "신규"라고 부르고 그대로 두고 싶은 유혹이 종종 있습니다. New Blue는 오랫동안 새롭습니다. 몇 년(또는 몇 달) 후에 또 다른 새로운 파란색이 나타나면 어떻게 됩니까? "특정 파란색의 더 이상 사용되지 않는 버전"을 의미하는 Heritage Blue 와 같은 이름은 동일한 문제로 이어질 수 있습니다. 이런 방식으로 이름을 지정하면 변경 사항을 깨뜨리고 전체 시스템을 다시 생각하는 데 시간을 소비해야 합니다. 디자인 언어 업데이트에 따른 이름 지정 . 상대적인 시간에 따라 이름을 지정하는 것과 같습니다. 색상의 이름을 Update 5 Blue 라고 하면 디자인 언어가 아니라 색상의 버전처럼 들립니다. 디자인 시스템에서 다른 이름을 지정하는 것과 같은 방식으로 색상 이름 지정 요약하면 색상 이름을 지정하는 모범 사례는 디자인 시스템 내에서 이름을 지정하는 것과 동일한 원칙을 따릅니다. 기존 패러다임에 의지하십시오. 명명 및 분류법에 대한 영감을 얻으려면 기성 지도자를 찾으십시오. 다양한 색상 선택과 잘 관리된 분류법으로 업계를 선도해 왔습니다. Google의 머티리얼 디자인 및 Apple의 휴먼 인터페이스 지침 과 같은 운영 수준 디자인 시스템은 명명을 포함하여 결정을 지원하기 위한 집중적인 연구 및 테스트를 통해 뒷받침됩니다. Spectrum을 확실한 예로 언급하지 않았다면 태만했을 것입니다 . 귀엽게 굴지마 . 디자인 시스템은 궁극적으로 유용성으로 귀결되며 사람들은 이해하기 쉬울 때 사용할 가능성이 더 큽니다. 당신의 색상을 처음 접하는 사람들은 회사에 처음 온 사람이든 제3자 사용자이든 내부 브랜딩 전문 용어나 팀 내부 농담에 익숙하지 않을 것입니다. 그리고 많은 사람들이 특정 문화적 참조 또는 하위 텍스트에 의존하는 이름을 인식하지 못할 것입니다. 전략적으로 디자인하십시오. 디자인 시스템 내의 모든 이름을 특별하거나 지나치게 감동적으로 만들면 비즈니스상의 이유로 고유해야 하는 중요한 브랜드 자산이 손상됩니다. 의미 전달 . 다시 말하지만, 디자인 시스템은 유용성과 확장성에 관한 것입니다. 의미를 전달하기 위해 숫자 척도와 같은 방법을 사용하면 성장하고 필연적으로 색상 시스템을 반복해서 변경함에 따라 많은 유연성을 얻을 수 있습니다. 마지막으로 이름은 언어 및 디자인 시스템의 다른 모든 부분과 마찬가지로 점진적으로 변경될 수 있고 변경될 것임을 기억하십시오. 따라서 조언을 고수하고 "복잡한 시스템을 점진적으로 발전시키십시오."