한 가지 색깔로 완전한 UI 팔레트 만들기

1. 색상을 선택하기 전에 인터페이스 정의하기

색상 휠이 아닌 제품으로 시작하세요. 포트폴리오, 은행 대시보드, 레시피 응용 프로그램 및 어린이 학습 플랫폼은 완전히 다른 수준의 에너지, 신뢰성, 절제 및 시각적 명암이 필요할 수 있습니다. 디자인하고 있는 것, 누가 사용할 것인지, 사용자가 무엇을 달성해야 하는지 적으세요.

다음으로, 인터페이스의 주요 컴포넌트를 나열하세요. 여기에는 네비게이션 바, 카드, 양식, 버튼, 알림, 가격 책정 표 및 바닥글이 포함될 수 있습니다. 이 인벤토리는 필요한 기능 색상 역할의 수를 드러냅니다. 대부분의 인터페이스는 경험이 부족한 디자이너가 예상하는 것 보다 적은 역할을 필요로 합니다.

제품의 시각적 특성에 대한 3가지 설명적인 목표를 만드세요. 예를 들어 "차분하고, 신뢰할 수 있으며, 직접적인" 또는 "창의적이고, 역동적이며, 친근한"이 있습니다. 이러한 단어들은 생성된 팔레트를 평가하는 필터가 됩니다. 색깔은 그 자체로 매력적일 수 있지만, 여전히 구축하고 있는 경험에 잘못되었을 수 있습니다.

이 단계에서 파란색은 항상 신뢰를 의미하고 빨간색은 항상 긴급성을 의미한다고 결정하지 마세요. 색상 연결은 맥락, 문화, 주변 색상 및 이전 사용자 경험에 따라 달라집니다. 먼저 제품의 실용적인 요구사항을 정의하고, 색상이 어떻게 이를 지원하는지 평가하세요.

2. 선호하는 색을 안정적인 기본 색으로 변환하기

시작점은 로고, 사진, 물리적 제품 또는 개인 선호도의 색깔일 수 있습니다. 해당 색상을 HEX, RGB 또는 HSL과 같은 정확한 디지털 값으로 변환하세요. "진한 보라색"은 해석의 여지가 있습니다. #4F46E5와 같은 값은 일관되게 재현될 수 있습니다.

시작할 색상이 없으면 무작위 색 생성기 를 사용하여 가능성을 살펴보세요. 무작위로 생성된 색상을 최종 결정이 아닌 프롬프트로 취급하세요. 여러 옵션을 생성하고, 유망한 것들을 저장하고, 1단계에서 정의한 3가지 제품 특성과 비교하세요.

영감이 로고, 사진 또는 무드보드에서 오면, 시각을 이미지에서 팔레트 생성 도구 에 업로드하세요. 지배적인 색상을 식별하고 해당 코드를 복사하는 데 도움이 될 수 있습니다. 프로젝트를 나타내는 색상을 선택하되, 원본 이미지 외부에서도 계속 작동하는지 확인하세요.

따뜻한 사진으로 둘러싸인 색상은 일반 흰색 인터페이스에 배치할 때 다르게 느껴질 수 있습니다. 후보를 밝고 어두운 배경 모두에서 테스트하세요. 흐릿해지거나, 지나치게 밝거나, 구분하기 어려워지면, 기본 색상으로 선언하기 전에 밝기 또는 채도를 조정하세요.

3. 기본 색에 명확한 의미 있는 역할 부여하기

기본 색에는 역할이 필요합니다. 많은 제품에서 주 색상은 양식 제출, 평가판 시작 또는 변경 저장과 같은 중요한 작업을 나타냅니다. 다른 인터페이스에서 동일한 색상은 주로 링크, 선택된 네비게이션 항목 또는 장식적 브랜딩에 사용될 수 있습니다.

사용자가 색상을 볼 것으로 예상해야 할 위치를 결정하세요. 이것이 "대화형"을 의미한다면, 일반적인 제목과 장식적인 모양에 적용하는 것을 피하세요. 사용자는 시각적 패턴을 빠르게 배웁니다. 동일한 색상이 때로는 "여기를 클릭하세요"를 의미하고 때로는 아무것도 의미하지 않으면, 인터페이스는 예측 가능성이 낮아집니다.

브랜드 인식을 인터페이스 동작과 분리하세요. 강력한 브랜드 색상이 전체 화면을 덮을 필요는 없습니다. 기본 버튼, 로고 세부 사항, 활성 탭 및 포커스 표시기에서 선택적으로 사용할 때 기억에 남을 수 있습니다. 절제는 모든 나타남이 의미를 지니기 때문에 종종 색상을 더 인식하게 만듭니다.

4. 유용한 틴트와 셰이드 생성하기

한 가지 색상 값은 거의 충분하지 않습니다. 버튼에는 호버 및 누름 상태가 필요하고, 선택된 영역에는 연한 배경이 필요할 수 있으며, 다크 모드에는 동일한 색조의 더 밝은 버전이 필요할 수 있습니다. 매우 밝은 틴트에서 깊은 셰이드까지 다양한 스케일을 만드세요.

색상 팔레트 생성기를 사용하여 단색 조합을 탐색하고 밝기 및 채도를 조정하세요. 기본 색상을 고정하여 주변 색상을 다시 생성할 때 안정적으로 유지하세요. 생성된 값을 팔레트에 나타난다고 해서 유지하지 마세요. 특정 역할을 수행하는 경우에만 유지하세요.

색상 혼합기 를 사용하여 두 HEX 색상 사이의 중간 값을 만들 수도 있습니다. 기본 색을 밝은 표면 색과 혼합하면 미묘한 선택된 배경을 제안할 수 있습니다. 더 어두운 끝점과 혼합하면 호버 및 누름 상태를 탐색하는 데 도움이 될 수 있습니다.

인접한 색상을 거의 구분할 수 없는 스케일을 피하세요. 유지된 각 단계는 맥락에서 눈에 띄는 차이를 만들어야 합니다. 소형의 유용한 스케일이 뚜렷한 기능을 수행하지 않는 10가지 색상 스케일보다 낫습니다.

5. 중립색 기초 구축하기

기능적 인터페이스의 대부분은 일반적으로 중립적입니다. 페이지 배경, 표면, 경계선, 본문 텍스트, 음소거된 레이블 및 비활성화된 컨트롤에는 주 작업과 경쟁하지 않는 색상이 필요합니다. 이것이 UI 팔레트가 밝은 브랜드 색상만으로 구성될 수 없는 이유입니다.

페이지 배경 및 표면 색상으로 시작하세요. 표면은 배경과 구분되어야 하지만 조각보 효과를 만들지 않아야 합니다. 다음으로, 강한 텍스트 색상, 더 부드러운 보조 텍스트 색상 및 미묘한 경계선 색상을 추가하세요.

중립색이 완벽하게 회색일 필요는 없습니다. 작은 양의 브랜드 색조는 시스템을 더 통합적으로 느끼게 할 수 있습니다. 예를 들어, 시원한 주 색상은 약간 차가운 회색과 잘 어울릴 수 있습니다. 콘텐츠가 편안하게 읽을 수 있도록 색조를 미묘하게 유지하세요.

음소거된 텍스트 또는 경계선을 만드는 유일한 방법으로 감소된 불투명도를 사용하지 마세요. 투명한 색상은 다양한 배경에 배치할 때 변합니다. 일관성이 중요한 경우, 명시적 값을 정의하고 나타날 모든 표면에서 테스트하세요.

6. 조절된 보조 색 선택하기

보조 색상은 차트, 삽화, 프로모션 영역 또는 선택된 카테고리를 지원할 수 있습니다. 시각적 언어를 확장해야 하지만, 주 작업과 경쟁하지 않아야 합니다. 주 색상과 보조 색상이 모두 동등하게 강하고 동등하게 자주 나타나면, 사용자는 어떤 요소가 주의를 기울어야 하는지 이해하기 어려울 수 있습니다.

차분한 관계를 원할 때 유사한 조합을 탐색하세요. 보완적 또는 분할 보완적 조합은 더 강한 분리를 만들 수 있지만, 더 많은 절제가 필요합니다. Adobe의 색상 이론 가이드 는 색상환 및 일반적인 조화 모델의 유용한 개요를 제공합니다.

고립된 색상을 비교하는 대신 컴포넌트 내에서 테스트하여 보조 색상을 선택하세요. 작은 차트, 태그, 삽화 또는 정보 카드에 배치하세요. 그런 다음 주 버튼 옆에서 봅니다. 보조 요소가 먼저 주의를 끌면, 채도를 줄이거나, 밝게 하거나, 나타나는 빈도를 제한하세요.

7. 인터페이스 역할에 색 할당하기

이것이 색상 수집이 디자인 시스템이 되는 지점입니다. "파란색", "보라색" 및 "회색 2"와 같은 색상 기반 이름을 역할 기반 이름으로 바꾸세요. 의미 있는 이름을 사용하면 모든 컴포넌트 이름을 바꾸도록 강요하지 않고 나중에 값을 변경할 수 있습니다.

역할 목록을 처음에는 짧게 유지하세요. 반복되는 디자인 문제를 기존 역할로 해결할 수 없을 때만 다른 토큰을 추가하세요. 이것은 거의 동일한 수십 개의 값이 인터페이스에 들어가는 것을 방지합니다.

8. 호버, 포커스 및 비활성화 상태 만들기

인터페이스는 사람들에게 반응합니다. 버튼은 유휴 상태, 호버 상태, 포커스 상태, 누름 상태, 로딩 또는 비활성화 상태일 수 있습니다. 이 모든 상태가 동일하게 보이면, 사용자는 인터페이스가 그들의 작업을 주목했다는 확인을 거의 받지 못합니다.

컴포넌트의 기본 색상의 제어된 변형으로 상태 색상을 만드세요. 호버 상태는 약간 더 어둡거나 밝을 수 있으며, 누름 상태는 더 강한 시각적 변화를 만들 수 있습니다. 포커스 표시기는 컴포넌트와 주변 배경 모두에 대해 표시된 상태로 유지되어야 합니다.

색상만으로 상태를 전달하지 마세요. 아이콘, 밑줄, 윤곽선, 메시지 또는 모양의 변화와 같은 다른 단서와 색상을 결합하세요. 예를 들어, 유효하지 않은 양식 필드는 오류 색상 경계선, 오류 아이콘 및 설명 텍스트와 함께 사용할 수 있습니다.

비활성화된 컨트롤은 특히 주의가 필요합니다. 사용할 수 없어 보이면서도 읽을 수 없게 되지 않아야 합니다. 지나치게 밝은 텍스트는 접근성 문제를 만들 수 있으며, 활성화된 것처럼 보이는 비활성화 버튼은 혼동을 만들 수 있습니다. 채우기 색상만 판단하지 말고 전체 컴포넌트를 테스트하세요.

9. 색상 명암 및 접근성 테스트하기

시각적 조화는 읽을 수 있는 콘텐츠를 보장하지 않습니다. 모든 중요한 전경과 배경 쌍은 명암을 테스트해야 합니다. W3C 웹 콘텐츠 접근성 지침 2.2 는 성공 기준 1.4.3에서 일반 텍스트의 최소 명암 비율 4.5:1과 큰 텍스트의 3:1을 지정합니다.

접근성 테스트는 인터페이스 전체를 구축한 후가 아닌 팔레트 생성 중에 발생해야 합니다. 쌍이 실패하면, 색조를 무작위로 변경하기 전에 밝기를 조정하세요. 각 상태가 다른 전경-배경 관계를 만들기 때문에 호버, 누름, 선택 및 비활성화 버전을 개별적으로 다시 테스트하세요.

10. 라이트 및 다크 모드 팔레트 준비하기

다크 모드는 검은색과 흰색을 반전시켜 만들어지지 않습니다. 색상은 어두운 표면에서 다르게 동작합니다. 밝은 포화 색상이 진동할 수 있고, 그림자는 덜 유용해지며, 순수 흰색 텍스트는 거칠게 느껴질 수 있습니다. 각 의미 있는 역할의 의미를 유지하면서 계층 구조를 다시 구축하세요.

테마 간에 토큰 이름을 일관되게 유지하세요. background에 할당된 값은 변경될 수 있지만, 그 목적은 동일하게 유지됩니다. 동일한 원칙이 표면, 텍스트, 경계선 및 주 작업에 적용됩니다. 이를 통해 컴포넌트는 테마별 로직을 포함하지 않고 테마를 전환할 수 있습니다.

Apple의 색상에 대한 인간 인터페이스 지침 은 다양한 모양을 고려하고 의사소통을 위해 색상을 일관되게 사용할 것을 권장합니다. 컨텍스트에서 두 테마를 모두 테스트하고 중요한 정보가 색상만으로 표현되지 않는지 확인하세요.

가능하면 밝고 어두운 환경에서 화면을 검토하세요. 어두운 방에서 우아해 보이는 다크 팔레트는 낮에 분리가 부족할 수 있습니다. 또한 이미지, 차트, 삽화 및 로고를 검사하세요. 이러한 자산은 단순한 배경 변경보다는 테마 인식 버전이 필요할 수 있습니다.

11. 실제 컴포넌트 내에서 팔레트 테스트하기

팔레트는 색상 견본의 행으로 승인되어야 하지 않습니다. 제목, 단락, 링크, 주 버튼, 보조 버튼, 양식 필드, 카드, 네비게이션 항목 및 경고가 포함된 작은 테스트 페이지를 만드세요. 이것은 팔레트 미리보기에서 보이지 않는 문제를 드러냅니다.

다양한 길이의 콘텐츠를 테스트하세요. 짧은 영어 레이블은 편하게 맞을 수 있지만 번역된 버전은 두 줄로 줄 바꿈됩니다. 모바일 및 데스크톱 크기에서 팔레트를 확인하고, 키보드 포커스가 표시되고, 현실적인 오류 메시지가 표시됩니다.

콘텐츠가 풍부한 레이아웃은 절제를 테스트하는 데 특히 유용합니다. 예를 들어, 무료 이력서 작성기 는 계층 구조 및 가독성이 장식보다 중요한 인터페이스 유형을 나타냅니다. 팔레트가 사용자가 섹션을 스캔하도록 도와주는지 아니면 정보를 산만하게 하는지 묻습니다.

실제 문제를 해결하지 않는 색상을 제거하세요. 두 값이 시각적으로 바뀔 수 있다면, 하나를 유지하세요. 보조 색상이 주 작업과 반복적으로 경쟁한다면, 삽화용으로 예약하거나 인터페이스 팔레트에서 완전히 제거하세요.

12. 시스템 문서화, 내보내기 및 유지하기

팔레트가 실제 컴포넌트에서 작동하면, 문서화하세요. 모든 색상의 값, 의미 있는 이름, 허용된 용도 및 중요한 제한 사항을 기록하세요. 테스트된 텍스트 조합 및 색상을 사용하지 않는 방법의 예를 포함하세요.

색상 팔레트 생성기를 사용하면 CSS를 복사할 수 있으며, 이는 유용한 시작점을 제공합니다. 내보낸 변수의 이름을 역할에 따라 바꾸어 개발자가 각 HEX 값의 의미를 기억할 필요가 없도록 하세요.

:root {
  --color-background: #ffffff;
  --color-surface: #f7f7fa;
  --color-text-primary: #17171c;
  --color-text-muted: #5f606b;
  --color-primary: #4f46e5;
  --color-on-primary: #ffffff;
  --color-border: #d9dae2;
  --color-success: #16794b;
  --color-warning: #9a6700;
  --color-error: #b42318;
}

PNG로 시각적 팔레트 보드를 만드는 경우, PNG에서 PDF로 변환기 를 사용하여 공유 또는 보관용 편리한 PDF로 변환할 수 있습니다. 그러나 시각적 문서에만 의존하지 마세요. 최종 토큰을 프로젝트의 디자인 시스템 또는 코드베이스에 저장하여 값이 일관되게 유지되도록 하세요.

팔레트를 유지 관리되는 시스템으로 취급하세요. 값이 변경되면, 그것을 사용하는 모든 역할과 상태를 테스트하세요. 변경이 이루어진 이유를 기록하고 거의 동일한 교체가 쌓이도록 허용하지 않고 이전 값을 제거하세요.