고전환 랜딩 페이지를 위한 색상 심리학

색상은 방문자가 텍스트를 읽기 전에 가장 먼저 처리하는 것입니다. 색상은 산업, 신뢰성 및 분위기를 밀리초 단위로 전달합니다. 또한 텍스트 가독성에 직접적인 영향을 미치며, 이는 사람들이 페이지에 머무르는지에 영향을 미칩니다.

이 게시물에서는 PAGEnza의 팔레트 시스템이 어떻게 작동하는지, 그리고 색상 선택에 부과하는 제약이 AI에게 무제한의 자유를 주는 것보다 실제로 더 나은 결과를 생성하는 이유를 설명합니다.

AI에게 "좋은 색상을 선택하라"고 요청하는 문제점

LLM에게 웹사이트 색상을 선택하라고 요청하면 헥스 코드를 받게 됩니다. 때로는 함께 보기 좋기도 합니다. 때로는 그렇지 않기도 합니다. 모델은 색상이 실제로 작동하는지 — 텍스트 가독성, 산업에 적합한지, 시각적으로 조화로운지 — 여부를 평가할 신뢰할 수 있는 방법이 없습니다.

초기 테스트에서 이 문제를 명확히 보았습니다. 제약 없는 색상 생성은 훌륭한 것부터 완전히 사용할 수 없는 것까지 다양한 팔레트를 생성했습니다. 일관성이 없었습니다.

해결책은 색상 선택을 전적으로 LLM의 손에서 벗어나 특정 속성을 보장하는 알고리즘 시스템을 구축하는 것이었습니다.

4색 시스템

모든 PAGEnza 사이트는 정확히 네 가지 명명된 색상을 사용합니다:

ink — 기본 텍스트 색상. 항상 어둡습니다(배경 대비 높은 휘도). 제목, 본문 텍스트 및 읽어야 하는 UI 요소에 사용됩니다.

bg1 — 기본 배경. 일반적으로 팔레트에서 가장 밝은 색상입니다. 메인 페이지 배경 및 밝은 섹션에 사용됩니다.

bg2 — 보조 배경. 섹션 간 시각적 다양성을 만듭니다. bg1과 다른 색온도를 가져야 합니다 — bg1이 따뜻한 크림색이라면 bg2는 시원한 회색 또는 파란색 톤의 흰색입니다.

accent — 브랜드 색상. 버튼, 링크, 강조 표시 및 장식 요소에 사용됩니다. 일반적으로 팔레트에서 가장 채도가 높은 색상입니다.

임의의 헥스 코드가 아닌 네 가지 명명된 역할에 대한 이 제약 조건이 팔레트 시스템을 작동시키는 핵심입니다. AI는 색상이 어디에 사용될지 결정하지 않고, 사전 감사된 세트에서 어떤 팔레트를 사용할지 선택할 뿐입니다.

팔레트 구성 방법

각 아키타입을 중심으로 구축된 20개 이상의 팔레트 그룹을 유지 관리합니다:

• Bold: 높은 대비, 채도 높은 액센트 — 기술, SaaS, 핀테크
• Soft: 차분한, 채도 낮은 — 웰빙, 코칭, 크리에이티브 서비스
• Luxury: 거의 검은색 배경에 금속 또는 보석 액센트 — 프리미엄 서비스, 고급 소매
• Earthy: 따뜻한 뉴트럴 색상에 테라코타 또는 세이지 액센트 — 식품, 지속 가능성, 공예
• Dark: 다크 모드 우선 팔레트 — 개발자, 에이전시, 게임
• Neutral: 안전하고 전문적인 — 법률, 금융, 의료

각 그룹 내에는 다른 색온도, 채도 수준 및 액센트 색조를 가진 여러 팔레트가 있습니다. 시스템은 산업 및 아키타입을 기반으로 그룹을 선택한 다음 그룹 내에서 특정 팔레트를 선택합니다.

WCAG 대비: 디자인을 개선하는 제약

WCAG AA는 일반 텍스트가 배경 대비 최소 4.5:1의 대비 비율을 가져야 한다고 요구합니다. 큰 텍스트는 3:1이 필요합니다. 대화형 요소는 인접 색상 대비 3:1이 필요합니다.

우리 시스템의 모든 팔레트는 포함되기 전에 이러한 비율에 대해 검증됩니다. 구체적으로:

• ink는 bg1, bg2 및 텍스트가 표시되는 모든 표면 색상에 대해 ≥4.5:1 대비를 달성해야 합니다.
• accent는 bg1 및 bg2에 대해 ≥3.0:1 대비를 달성해야 합니다(버튼 배경으로 사용 시).
• 검증은 근사치가 아닌 실제 휘도 수학(L = 0.2126R + 0.7152G + 0.0722B 감마 보정 후)을 사용합니다.

그 결과 모든 생성된 사이트는 기본적으로 읽기 쉽습니다. 하지만 부가적인 이점이 있습니다. 높은 대비 디자인은 전환율이 더 높습니다. 명확하게 보이는 버튼은 배경과 섞이는 버튼보다 더 많은 클릭을 유도합니다. 접근성 요구 사항은 전환율 요구 사항이 됩니다.

섹션 간 색온도 대비

간과하기 쉬운 한 가지 세부 사항: bg1과 bg2는 대비되는 색온도를 가져야 합니다. 두 배경이 모두 따뜻하면 섹션을 번갈아 사용하는 것이 단조롭게 느껴집니다 — 페이지가 구분된 콘텐츠 영역이라기보다는 하나의 연속적인 덩어리처럼 보입니다.

우리 시스템의 규칙: bg1이 따뜻한 색조(주황색/노란색 방향 또는 크림색과 같은 따뜻한 뉴트럴)를 가지면 bg2는 시원해야 합니다(파란색/회색 방향). bg1이 시원한 흰색이면 bg2는 따뜻한 미색일 수 있습니다.

이것이 무거운 구분선이나 그림자 없이도 섹션이 구분되어 보이는 이유입니다 — 배경 색온도 변화만으로도 명확한 시각적 구분이 생성됩니다.

산업별 색상 로직

일부 색상 선택은 산업별로 강하게 코딩됩니다. 방문자는 특정 범주의 웹사이트에 대한 수년간의 노출을 통해 구축된 기대치를 가지고 있습니다.

의료 및 웰빙: 파란색과 녹색은 신뢰와 평온을 나타냅니다. 이 맥락에서 채도 높은 빨간색과 주황색은 경고로 읽힙니다.

법률 및 금융: 어두운 네이비, 차콜, 보수적인 회색. 밝은 액센트는 허용되지만 절제되어야 합니다. 장난스러운 팔레트는 신뢰성을 떨어뜨립니다.

식음료 및 환대: 따뜻한 색조 — 테라코타, 호박색, 크림색 — 식욕 연상을 활성화합니다. 시원하고 임상적인 팔레트는 어색하게 느껴집니다.

기술 및 SaaS: 파란색이 지배적이지만 범위가 더 넓습니다. 일렉트릭 블루, 인디고, 심지어 보라색은 기술 지향적으로 읽힙니다. 순수한 검은색 배경은 개발자 도구에 적합합니다.

럭셔리 및 프리미엄: 핵심은 절제입니다. 제한된 색상 범위, 거의 검은색 또는 짙은 네이비를 기본 색상으로, 금색 또는 백금색 액센트. 높은 대비, 절대 채도 높지 않음.

디자인 지침의 아키타입 선택은 산업 + 비즈니스 유형을 적절한 팔레트 그룹에 매핑하므로, 웰빙 코치가 법률 회사와 같은 팔레트를 사용하지 않게 됩니다. 둘 다 "전문적인"으로 설명되더라도 말입니다.

고객이 변경할 수 있는 사항

생성 후 고객은 Gutenberg에서 사이트를 편집할 수 있습니다. 편집기의 색상 선택기는 네 가지 브랜드 색상만 표시합니다 — 그 외에는 아무것도 없습니다. 이것은 다음을 의미합니다:

• 섹션 배경을 bg1, bg2 및 표면 간에 변경할 수 있습니다.
• 버튼 및 링크 색상을 accent와 ink 간에 변경할 수 있습니다.
• 팔레트를 깨뜨리는 임의의 다섯 번째 색상을 도입할 수 없습니다.

이 제약은 의도적입니다. 고객이 전문적으로 디자인된 사이트를 망치는 가장 일반적인 방법은 전체 색상환에서 색상을 선택하는 것입니다. 팔레트를 네 가지 명명된 색상으로 제한하면 코드에 들어가지 않고는 불가능합니다.