브랜딩에서의 색상 팔레트: Logto에서 맞춤형 색상 스키마를 생성하는 방법

색채 심리학은 청중이 브랜드를 어떻게 인식하는지에 중요한 역할을 합니다. 잘 구성된 색상 팔레트는 브랜드 인식을 높이고 강렬한 인상을 남길 수 있습니다. 이를 달성하기 위해, 우리는 HSL 색상 모델을 활용하여 하나의 기본 색상에서 조화로운 색상 테마를 생성하는 시스템을 개발했습니다. 이 글에서는 우리 색상 생성 과정의 비밀을 공개합니다.

HSL 색상 모델이란?#

HSL (Hue, Saturation, Lightness) 색상 모델은 색상 조작에 대한 직관적인 접근 방식으로 인해 디지털 디자인에서 널리 사용되는 표현입니다. HSL은 색상의 색채적 측면을 세 가지 고유 구성 요소로 분리합니다:

1. 색상(Hue):

   Hue는 우리가 보는 색상의 종류를 나타내며 360° 원 위의 각도로 표현됩니다. 각도는 색상 원 위의 특정 색상에 해당하며 — 0°는 빨간색, 120°는 녹색, 240°는 파란색 등을 나타냅니다. Hue 값을 조정하여 한 색상에서 다른 색상으로 전환할 수 있어, 보색이나 유사 색상 스키마를 생성하는 강력한 도구입니다.

2. 채도(Saturation):

   Saturation은 색상의 강도나 순도를 결정합니다. 이는 0%에서 100%까지 범위로, 0%는 완전히 탈채 된 색상으로 본질적으로 회색 음영을 나타내고, 100%는 완전한, 생생한 색상을 나타냅니다. 채도를 조정하여 디자이너는 동일한 Hue의 생생한 버전과 muted 버전을 만들어 색상 계층 구조를 생성하거나 특정 요소를 강조할 수 있습니다.

3. 밝기(Lightness):

   Lightness는 색상의 밝기를 제어하며, 0% (검정색)에서 100% (흰색)까지 범위로 나타냅니다. 50%의 밝기에서는 색상이 가장 순수해지며, 0% 또는 100%로 이동하면 색상은 각각 더 어두워지거나 밝아집니다. 이는 기본 색상의 다양한 쉐이드와 틴트를 생성하는 데 특히 유용하며, 이를 통해 디자인 내에서 시각적 깊이와 대조를 정의할 수 있습니다.

왜 HSL 색상 모델을 사용하는 것이 중요한가?#

Logto의 맥락에서 HSL 모델을 사용하면 유연하고 동적인 색상 테마 생성을 가능하게 합니다. 고객이 자기 브랜드 색상을 입력할 때, HSL은 기본 Hue의 밝기와 채도의 변형을 계산하여 관련된 색상 계통을 계산하는 것을 더 쉽게 만듭니다. 이 기능은 생성된 테마가 일관되고 조화롭게 유지되어 브랜드의 정체성을 강화하면서 최적의 사용자 경험을 보장합니다. HSL 모델의 직관적인 특성은 색상 조정에 대한 더 세밀한 제어를 가능하게 하여 디자이너와 개발자 모두에게 선호되는 선택입니다.

Logto에서의 색상 팔레트#

우리의 색상 팔레트 모델은 HSL 색상 공간을 기반으로 설계되었습니다. 기본 색상으로부터 시작하여 Hue, Saturation 및 Lightness 값을 조정하여 색상 계통을 생성합니다. 이러한 접근 방식은 팔레트의 모든 색상이 시각적으로 호환되며 조화로운 브랜드 경험을 창출할 수 있도록 보장합니다.

다음은 우리가 로그인 경험 제품에서 사용하는 기본 색상 팔레트 모델의 예입니다:

프론트엔드 코드 베이스에서 기본 색상 계통은 CSS 변수로 정의됩니다. 예를 들어, 기본 색상 계통은 다음과 같이 정의됩니다:

이 변수들을 CSS 스타일 시트에서 참조하여, 플랫폼 전반에 걸쳐 일관된 시각적 스타일을 쉽게 유지할 수 있습니다.

맞춤형 브랜딩 색상 팔레트 생성#

앞서 언급했듯이, 개발자는 자신의 브랜딩 색상을 가져와 맞춤형 브랜딩 색상 팔레트를 생성할 수 있습니다. 이를 위해, 우리는 기본 색상을 가져와 해당 색상 계통을 생성하는 간단한 색상 계산 유닛을 제공합니다.

내부적으로, 우리는 color.js를 사용하여 색상 조작 과정을 관리합니다. 색상 생성 함수는 기본 색상을 가져와 해당 HSL 값을 계산하고 그에 따라 색상 계통의 HEX 값을 생성합니다.

1. 기본 색상 요소 생성:

2. HSL 기반 색상 계산 함수 정의:

3. 색상 계통 생성:

쉽죠? 위의 단계를 반복하면 어떤 브랜딩 색상에 대해서도 맞춤형 색상 팔레트를 생성할 수 있습니다. 이러한 접근 방식은 생성된 색상 팔레트가 브랜드의 정체성과 일치하면서도 사용자에게 시각적으로 매력적인 경험을 제공할 수 있도록 보장합니다.