Color Framework 실전 가이드 v2.3

원칙: 이론보다 실제 호환성과 가독성 최우선. 수치만 맞추고 눈으로 확인하지 않으면 실패한다.

4대 철학

  1. 배경이 주인공 — 배경 톤 먼저 판단, 그에 맞는 Accent 선택
  2. 60-30-10 Rule 엄격 적용
  3. 대비 WCAG AA 이상 (7:1 권장)
  4. 색상 심리학 + 배경 톤 + 내용 목적 종합 판단 (트렌드는 참고만)

슬라이드 요소별 60-30-10 매핑

비율역할해당 요소
60% Primary배경, 가장 넓은 영역slide 배경, 본문 영역 bg, 카드 기본 bg
30% Secondary구조 구분섹션 bg, 카드 테두리, 라인, 아이콘 배경
10% Accent핵심 강조만챕터 레이블, 키 숫자, CTA, 강조 라인

Accent 10% 원칙: 한 슬라이드에서 Accent 요소가 3개 초과 = 이미 10% 위반

배경-Accent 호환성 매트릭스

배경 타입배경 HexAccent 1순위HexAccent 2순위피할 것
Warm / Light Warm#FFFEF8 #F7F5EBCoral Red#EF4444 #F97316TerracottaCool Blue, Teal
Cool / Dark#0F172A #1E293BBright Orange#F97316Teal연한 Pastel
Neutral Gray#F1F5F9Teal / Emerald#14B8A6Orange강한 Warm Red
Pure White#FFFFFF #F8FAFCDeep Navy#1E3A5F #4F46E5Teal / Coral연한 Pastel
Black / Very Dark#0A0A0A #111827Neon Teal#2DD4BFGold / White연한 Gray

핵심 실전 교훈: Warm 배경 + Cool Blue = 항상 이질감. 무조건 Warm Accent로 변경.

혼합 덱 처리 (Light + Dark 슬라이드 공존)

Accent 색상 하나로 전체 통일 (예: #EF4444)
Light 슬라이드: 진하게 보임
Dark 슬라이드: 밝게 보임 → 같은 Hex, 자동으로 다른 느낌
Secondary만 배경에 따라 조정

전체화면 배경 이미지 레이어 구조 ⚠️ 필수

opacity 수치를 아무리 맞춰도 z-index 구조가 잘못되면 텍스트가 사라진다.

z-index: 1 — 배경 이미지
z-index: 2 — 어두운 오버레이
z-index: 3 — 콘텐츠 래퍼 (모든 텍스트/통계/버튼)

<section style="position:relative; overflow:hidden;">
  <img style="position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; opacity:0.45; z-index:1;">
  <div style="position:absolute; inset:0;
    background:rgba(10,15,30,0.75); z-index:2;"></div>
  <div style="position:relative; z-index:3;">
    <!-- 모든 콘텐츠 -->
  </div>
</section>

Opacity 기준

  • 어두운 이미지 + Dark 배경 → 이미지 0.35~0.50 / 오버레이 0.70~0.85
  • 밝은 이미지 + Warm 배경 → 이미지 0.20~0.35 / 오버레이 0.55~0.70

Style Library 매트릭스 매핑

매트릭스 행해당 스타일 파일
Warm / Light Warmorganic-editorial, warm-industrial-gray, softly-wellness, botanical-organic
Pure White / Lightcorporate-trust, linear-modern, minimalist-modern, echo-minimalist, clean-fluid, swiss-style
Cool / Darkcinematic-dark, midnight-editorial, neural-noir, futuristic-saas, synapse, tech-editorial
Black / Very Darkacid-graphic, neo-brutalism-acid, vaporwave-outrun, kinetic-orange

즉시 검증 체크리스트

  • 배경 타입에 맞는 Accent Hex + 심리학이 내용 목적과 맞는가?
  • 60-30-10 매핑 정확한가? (Accent 요소 3개 이하인가?)
  • 이미지 배경 사용 시 — z-index 3레이어 구조를 지켰는가?
  • 이미지 opacity + 오버레이 강도가 기준 범위 내인가?
  • 스크린샷으로 실제 가독성을 눈으로 확인했는가?
  • 썸네일 크기에서도 제목·통계가 읽히는가?
  • 전체 덱 Accent 색상이 통일되었는가?
  • 대비 충분한가? (WCAG AA)

색상 심리학 요약

색상심리 효과추천 용도
Blue / Navy신뢰, 전문성, 안정전략·기업 보고서
Teal / Green성장, 혁신, 지속가능성ESG, 기술, 웰니스
Orange / Coral에너지, 행동 유도, 친근함CTA, 마케팅
Red / Red-Orange긴급성, 열정, 주의 집중강한 강조 (소량만)
Purple창의성, 프리미엄혁신·럭셔리

관련 파일

그래프 뷰

백링크