# 디자인 노하우 (Knowhow-Design)

> **용도**: 광고 배너 디자인 성공/실패 패턴 라이브러리
> **범위**: Meta/Google/네이버 GFA 등 유료 광고 배너 이미지 제작 전용. 랜딩페이지, 카드뉴스, 블로그 이미지는 범위 외.
> **대상 사용자**: 디자인팀 + 마케팅팀 (배너 기획/제작/QC 시)
> **갱신 규칙**: Phase -1에서 반드시 읽고 시작할 것. 매 QC 사이클에서 즉시 업데이트할 것.

---

## 성공 템플릿 라이브러리 (93점+ 달성 검증 완료)

> 아래 템플릿은 task-1331.1에서 18/18장 93점+ 달성한 실제 CSS 값입니다.
> 새 작업 시 가장 가까운 템플릿을 복사하여 시작하세요.

### 템플릿 A: 1200x628 가로형 (다크 배경) — 최고 97점 달성

**검증 배너**: m3-1-1200x628 (97점), m2-3-1200x628 (96점)

**구조**: 좌측 60% 텍스트 + 우측 40% Gemini 배경 노출

```css
/* 배경: 우측 65%에 Gemini 포토리얼 배경 배치 */
.bg-image {
  position: absolute;
  right: 0; top: 0;
  width: 65%; height: 100%;
  background-size: cover;
  background-position: center right;
}

/* 오버레이: 좌→우 딥 브라운 그라데이션 */
.gradient-overlay {
  background: linear-gradient(
    to right,
    rgba(62,39,35,0.78) 0%,
    rgba(62,39,35,0.78) 40%,
    rgba(62,39,35,0.70) 52%,
    rgba(62,39,35,0.40) 68%,
    rgba(62,39,35,0.10) 82%,
    transparent 100%
  );
}

/* 골드 세로 액센트바 — DQ-04/DQ-10 동시 상승 */
.accent-bar {
  position: absolute;
  top: 80px; left: 0;
  width: 4px; height: 460px;
  background: linear-gradient(to bottom, #C9A84C, #D4B87A);
  border-radius: 2px;
}

/* 텍스트 영역: 62%, padding 48-60px */
.text-area {
  width: 62%; padding: 48px 56px 48px 60px;
  display: flex; flex-direction: column;
  justify-content: center;
}

/* 브랜드 뱃지: 40px Bold, 골드 배경, 다크 텍스트 */
.brand-badge {
  font-size: 40px; font-weight: 700;
  background: #C9A84C; color: #1A0E00;
  height: 48px; padding: 0 20px;
  border-radius: 6px;
  margin-bottom: 26px;
}

/* 헤드라인: 54px Bold 크림, 핵심 키워드 1개 골드 강조 */
.headline {
  font-size: 54px; font-weight: 700;
  color: #FFF8E7; line-height: 1.2;
  letter-spacing: -1.2px;
  margin-bottom: 20px;
}
/* 골드 강조: <span style="color:#C9A84C">키워드</span> */

/* 서브카피: 44px Medium 골드 */
.sub-copy {
  font-size: 44px; font-weight: 500;
  color: #C9A84C;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  margin-bottom: 36px;
}

/* CTA: 골드 그라데이션 배경, 다크 텍스트, 화살표(→) 필수 */
.cta-btn {
  background: linear-gradient(135deg, #C9A84C 0%, #D4B87A 100%);
  color: #1A0E00;
  font-size: 44px; font-weight: 700;
  height: 56px; min-width: 220px;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(201,168,76,0.35);
}
```

**gap 규칙**: 뱃지→헤드라인 26px, 헤드라인→서브카피 20px, 서브카피→CTA 36px

### 템플릿 B: 1080x1080 정사각형 (중앙 크림 패널) — 최고 96점 달성

**검증 배너**: m3-1-1080x1080 (96점), m3-2-1080x1080 (96점)

**구조**: 전체 배경 + 반투명 오버레이 + 중앙 크림 패널

> ⚠️ 정사각형에서 전체 오버레이 단독 사용 금지! → 반드시 중앙 패널 구조 사용
> 전체 오버레이만 쓰면 opacity 낮추면 가독성↓, 높이면 CSS 단색 느낌 (78점 기록)

```css
/* 배경: 전체 Gemini 포토리얼 배경 */
.bg-image {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}

/* 딥 브라운 반투명 오버레이 opacity 0.58 */
.dark-overlay {
  position: absolute; inset: 0;
  background: rgba(62, 39, 35, 0.58);
}

/* 크림 반투명 텍스트 패널 — 핵심 구조 */
.text-panel {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 860px;
  padding: 56px 48px;
  background: rgba(255, 248, 231, 0.82);
  border-radius: 12px;
  backdrop-filter: blur(4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  display: flex; flex-direction: column;
  align-items: center;
  gap: 28px; text-align: center;
}

/* 브랜드 뱃지: 40px Bold, 골드 배경 */
.brand-badge {
  font-size: 40px; font-weight: 700;
  background: #C9A84C; color: #1A0E00;
  height: 52px; padding: 0 24px;
  border-radius: 6px;
}

/* 헤드라인: 60px Bold 다크 브라운, 중앙 정렬 */
.headline {
  font-size: 60px; font-weight: 700;
  color: #3E2723; line-height: 1.25;
  letter-spacing: -1.5px;
}
/* 골드 강조: <span style="color:#C9A84C">키워드</span> */

/* 서브카피: 44px Medium 다크 골드 */
.sub-copy {
  font-size: 44px; font-weight: 500;
  color: #A07828;
}

/* CTA: 골드 그라데이션, 다크 텍스트, 더 큰 사이즈 */
.cta-btn {
  background: linear-gradient(135deg, #C9A84C 0%, #D4B87A 100%);
  color: #1A0E00;
  font-size: 48px; font-weight: 700;
  height: 68px; min-width: 360px;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(201,168,76,0.45);
}
```

**밝은 배경 텍스트 규칙**: 크림 패널 위 텍스트는 다크 계열(#3E2723), 골드 강조(#C9A84C), 서브카피 다크 골드(#A07828)

### 제이회장님 피드백 수정 패턴 (2026-04-02, task-1342.1)

**검증 완료**: 아래 규칙으로 18/18장 93점+ 달성 (Cycle 2)

1. **뱃지 오버플로우**: letter-spacing -0.03em으로 컨테이너 100% 수용
2. **서브카피 줄바꿈**: white-space: nowrap 필수 적용
3. **1080x1080 최소 크기**: 헤드라인 ≥60px, 서브카피 ≥44px
4. **1080x1080 상단 쏠림**: justify-content: center 적용
5. **헤드라인 임팩트**: 서브카피 대비 1.3배 이상 (예: 58px/44px=1.32)
6. **서브카피 계층**: 동일 크기 금지 — 일반 40px vs 강조 48px 차이 필수
7. **1080 CTA 크기**: 정사각에서 height 76px+, padding 40px+ (68px에서는 시인성 부족)
8. **텍스트 가시성**: 반투명 배경 위 텍스트는 #FFFFFF + text-shadow rgba(0,0,0,0.6) 이상
9. **M2-3 밝은 톤**: overlay 최소 0.35, text-panel 최소 0.88 (낮으면 배경 간섭)

### 템플릿 C: 1200x628 가로형 (밝은 배경)

**검증 배너**: m3-3-1200x628 (94점)

**구조**: 좌측 55% 텍스트 + 우측 45% 밝은 Gemini 배경

```css
/* 오버레이: 화이트→투명 소프트 그라데이션 */
.gradient-overlay {
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.90) 35%,
    rgba(255,255,255,0.60) 55%,
    rgba(255,255,255,0.20) 75%,
    transparent 100%
  );
}

/* 텍스트: 다크 계열 필수 */
.headline {
  font-size: 54px; font-weight: 700;
  color: #333333; line-height: 1.2;
}

/* 서브카피: 다크 골드 (밝은 배경이므로 #A07828, AAA 7.1:1) */
.sub-copy {
  font-size: 44px; font-weight: 500;
  color: #A07828;
}

/* CTA: 블루/틸 또는 다크 골드 배경 + 크림 텍스트 */
.cta-btn {
  background: linear-gradient(135deg, #A07828 0%, #C9A84C 100%);
  color: #FFF8E7;
  font-size: 44px; font-weight: 700;
  height: 56px; min-width: 220px;
  border-radius: 6px;
}
```

**밝은 배경 주의**: 화이트 텍스트 지양, 골드 강조색은 다크 골드(#A07828)로 변경 필수 (밝은 #C9A84C는 대비율 3.5:1로 AAA 미달)

### 공통 규칙 (전 템플릿 적용)

- **최소 폰트**: 모든 텍스트 요소 40px 이상 (예외 없음)
- **폰트 무게**: font-weight 400 이상 (300 이하 금지)
- **대비율**: WCAG AAA 기준 (7:1, 대형텍스트 4.5:1)
- **CTA 화살표**: " →" 필수 포함
- **골드 강조**: 헤드라인 핵심 키워드 1개만 `<span style="color:#C9A84C">키워드</span>`
- **Gemini 배경 프롬프트**: "사진/장면" 키워드 필수, "아이콘/그래픽" 금지
- **글래스모피즘**: 필요시에만 사용 (조건: 가독성 저하/배경 패턴 간섭/영역 분리 필요)

---

## 실패 패턴 (감점 기록)

1. **CSS 단색 배경으로 "프로" 시도** — CSS 그라디언트/단색만으로는 프로 수준 광고를 만들 수 없음. Gemini 배경 생성을 적극 활용할 것. (2026-03-29 파일럿 v1)
2. **자체 평가 "재현도 높음"** — 본인이 만든 걸 본인이 "잘 됐다"고 하는 Fantasy Approval. 마아트가 판정, 자체평가 금지. (2026-03-29 파일럿 v1)
3. **레퍼런스 스타일 미재현** — 50개 컨셉 선택→생산에서 망가진 근본 원인. 레퍼런스 sample.png의 색감/구도/느낌을 반드시 분석 후 제작. (2026-03-29)
4. **텍스트 "대충 배치"** — 왼쪽 상단에 글자만 놓으면 파워포인트 느낌. 시각적 계층/긴장감/리듬이 필요. (2026-03-29 파일럿 v1)
5. **글자 겹침/중복** — AI 배경 위 텍스트 배치 시 배경 객체와 겹침. 텍스트 영역에 반투명 오버레이 확보. (design-qc-knowhow.md 참조)
6. **빈 공간 과다** — 의도 없는 여백은 전문성 저하. 그리드 기준 명시, 패딩 수치 지정. (design-qc-knowhow.md 참조)
7. **레이아웃 차별화 부재** — 여러 소재가 동일 레이아웃 반복하면 광고 피로도 상승. 소재별 유형 다양화. (design-qc-knowhow.md 참조)
8. **QC 8항목 PASS인데 아마추어** — 기술 스펙만 통과하면 끝이 아님. "세계 최고 수준인가?" 질문에 답할 수 있어야 함. (2026-03-29)
9. **Gemini 배경에 아이콘을 넣으면 파워포인트 느낌** — A-2에서 Gemini 배경 자체가 라인 아이콘 그래픽으로 생성되어 사진이 아닌 CSS/그래픽 느낌. 배경 프롬프트에 "사진/장면" 키워드를 반드시 포함할 것. (2026-03-29 a-group-v6 QC)
10. **같은 아이콘 이중 레이어** — 배경에 이미 아이콘이 있는데 HTML SVG로 동일 아이콘 추가하면 시각적 혼란. 배경과 오버레이 요소가 중복되지 않도록 확인. (2026-03-29 a-group-v6 QC)
11. **캐러셀 내 1장만 비주얼 품질 낮으면 전체 인상 하락** — 5장 중 A-2만 CSS/아이콘 기반이고 나머지 4장은 포토 배경이면 A-2에서 일관성 깨짐. DQ-03/DQ-05에서 동시 감점. (2026-03-29 a-group-v6 QC)
12. **포인트 컬러와 배경 컬러 동조** — 오렌지 텍스트 강조를 오렌지 톤 배경(야경, 가로등 빛 등) 위에 사용하면 강조 효과가 희석됨. 포인트 컬러는 배경 색상과 충분히 분리되는 색으로 선택할 것. (2026-03-29 a-group-v6 Cycle 2 QC)
13. **캐러셀 배경 스타일 혼재** — 포토리얼→테크 그래픽→플랫 UI→포토리얼 순으로 배경 처리가 뒤섞이면 "각각 다른 담당자가 만든 5장"처럼 보임. 캐러셀 전체의 디자인 언어(배경 처리 방식) 통일 필요. (2026-03-29 a-group-v6 Cycle 2 QC)
14. **어둠→빛 서사 아크의 급격한 단절** — 연속 슬라이드 간 밝기 전환이 점진적이어야 함. A-3(어둠)→A-4(밝음) 같은 급격한 전환은 "같은 캠페인인가?" 의문을 유발. 전환 슬라이드에 하단 밝은 그라데이션 등 시각적 브릿지 필수. (2026-03-29 a-group-v6 Cycle 2 QC)
15. **보색/대비색으로 캐러셀 컬러 시스템 파괴** — 포인트 컬러가 배경과 동조되는 문제를 해결할 때, 캐러셀 전체 컬러 시스템(예: 골드)을 유지하면서 해결해야 함. 스카이 블루 등 완전히 다른 색상을 투입하면 "1장만 다른 캠페인" 느낌 발생. 같은 컬러 패밀리 내에서 명도/채도를 조절하여 분리할 것. (2026-03-29 a-group-v6 Cycle 3 QC)
16. **밝기 전환 슬라이드에서 미약한 그라데이션** — 하단 그라데이션 opacity 0.2~0.3 수준은 육안 식별 불가. 전환 브릿지가 "있다"고 코드에 작성되어 있어도 "보인다"와 다름. 최소 opacity 0.5+ / 높이 400px+ 필요. (2026-03-29 a-group-v6 Cycle 3 QC)
17. **최소 폰트 40px 미적용** — 페이지 인디케이터, 브랜드 태그, 면책 문구 등 "보조 정보"에 40px 미만 폰트 사용. "보조 정보이므로 허용"은 인정하지 않음. 모든 텍스트 요소 예외 없이 최소 40px. (2026-03-29 제이회장님 피드백)
18. **얇은 폰트(light/thin, weight 300 이하) + 낮은 대비 조합** — 글자 색상과 얇은 폰트 weight 조합으로 가독성 저하. font-weight 300 이하 사용 금지. 대비율 기준 WCAG AAA(7:1, 대형텍스트 4.5:1)로 상향. (2026-03-29 제이회장님 피드백)
19. **CTA 버튼 흰색 텍스트 on 밝은 골드 배경** — 골드 그라데이션(#C9A84C~#E8C870) 위 흰색(#fff) 텍스트는 대비율 2.1~3.1:1로 WCAG AA도 미달. CTA 버튼은 다크 텍스트(#1A0E00) 사용하거나 배경을 다크 골드(#8B6200 이하)로 변경할 것. (2026-03-29 a-group-v6 Cycle 4 QC)
20. **광고 내부 레이블(A-3, SOLUTION 등) 노출** — "SOLUTION · A-3" 같은 제작 코드명이 소비자 대면 광고에 노출되면 감정 몰입 파괴. 내부 레이블은 반드시 제거하거나 브랜드 슬로건으로 대체. (2026-03-29 a-group-v6 Cycle 4 QC)
21. **glassmorphism 카드 opacity 규정 이탈** — 규정 0.15~0.30인데 0.08이면 카드 인지 불가, 0.97이면 불투명(글래스모피즘 아님). 규정 범위를 정확히 준수하되, 가독성 문제 시 0.30~0.50까지 조정 가능. (2026-03-29 a-group-v6 Cycle 4 QC)
22. **광고 배너에 슬라이드 번호(1/5, 2/5...) 표시** — 카드뉴스가 아닌 광고 배너에는 슬라이드 번호 인디케이터 불필요. 소비자 관점에서 "제작 과정이 드러나는" 느낌. 광고 배너에서는 제거할 것. (2026-03-29 제이회장님 피드백)
23. **반투명 레이어가 배경 메인 피사체를 가림** — 텍스트 가독성을 위한 반투명 레이어가 너무 넓으면 배경 이미지의 핵심 장면을 가려서 배경 의미를 상실시킴. 레이어는 텍스트 영역에만 최소한으로 적용하고, 배경이 충분히 보여야 함. (2026-03-29 제이회장님 피드백, A-2)
24. **반투명 레이어 과다 사용** — 한 슬라이드에 반투명 레이어가 여러 개 겹치면 디자인이 산만해지고 각 레이어의 목적이 불분명해짐. 레이어는 하나, 최대 두 개로 제한. (2026-03-29 제이회장님 피드백, A-3)
25. **"팀장" → "지점장" 호칭 오류** — 서울대보험쌤은 팀장이 아닌 **지점장**. 카피 기획서(copy-plan.md)부터 잘못되어 있으면 모든 하위 산출물에 전파됨. 카피 기획서 단계에서 호칭 정확도 검수 필수. (2026-03-29 제이회장님 피드백)
26. **텍스트가 컨테이너(뱃지/CTA) 밖으로 삐져나감** — DQ-03 감점, 아마추어 느낌 직결. 모든 텍스트 컨테이너는 `white-space: nowrap` + `letter-spacing: -0.02em ~ -0.05em`으로 반드시 컨테이너 안에 수용할 것. 넘치면 자간을 축소하여 해결. (2026-04-02 제이회장님 1339 피드백)
27. **서브카피 자동 줄바꿈이 의미 단위가 아닌 곳에서 발생** — 가독성 파괴. 서브카피는 가능한 한 줄로 작성하고, 두 줄 필요 시 `<br>`로 의미 단위에서 수동 줄바꿈할 것. 자동 줄바꿈 금지. (2026-04-02 제이회장님 1339 피드백)
28. **1080x1080 콘텐츠가 상단에 몰려있고 하단이 빈 배경만** — 밸런스 붕괴. 1080x1080은 `justify-content: center` + `align-items: center` 필수. 콘텐츠가 세로 중앙 배치되어야 하며, 상단 쏠림 절대 금지. (2026-04-02 제이회장님 1339 피드백)
29. **헤드라인과 서브카피 크기 차이 부족** — 시각적 계층 무너짐, 메인 메시지 역할 못함. 헤드라인 vs 서브카피 크기 비율 최소 1.3배 필수 (예: 헤드라인 60px → 서브카피 44px 이하). (2026-04-02 제이회장님 1339 피드백)
30. **CTA 버튼 고정 너비로 텍스트가 잘리거나 삐져나감** — CTA 버튼은 `width: auto` + `padding: 0 32px` + `min-width: 220px` 사용 필수. 고정 너비(예: `width: 300px`) 금지. (2026-04-02 제이회장님 1339 피드백)
31. **서브헤드 64px 미만으로 DQ-08 최대 6점 제한** — dq_rules.py 기준 서브헤드(주요 서브카피)는 64px+, weight 600-700 필수. 44px으로 설정하면 아무리 다른 항목이 완벽해도 DQ-08이 최대 6점으로 캡되어 93점+ 불가. 초기 설정 시 반드시 서브헤드 64px 이상으로 시작할 것. (2026-04-05 task-1463.1 Cycle 1 로키 DQ 평가)
32. **배경 URL에 file:// 프리픽스 누락** — Playwright headless 렌더링 시 `url('/home/jay/...')`로 쓰면 배경이 로드되지 않음. 반드시 `url('file:///home/jay/...')`로 작성할 것. (2026-04-05 task-1463.1)
33. **1200x628 가로형에서 서브헤드 64px 적용 시 공간 부족** — 628px 높이에서 서브헤드 64px는 큰 공간을 차지함. 텍스트 축약(불필요한 "TOP사업단" 등 중복 제거)과 마진 축소, 요소 병합(sub-copy-2를 sub-copy에 통합)으로 해결. (2026-04-05 task-1463.1 Cycle 2)

---

## 성공 패턴 ("이렇게 했더니 점수가 올랐다")

1. **포토리얼 Gemini 배경 + 무거운 오버레이 조합** — A-1(노트북), A-3(회로판), A-5(빛문)처럼 감정적 장면을 Gemini로 생성하고 반투명 오버레이를 얹으면 프로 수준 달성. DQ-03에서 높은 점수. (2026-03-29 a-group-v6 QC)
2. **캐러셀 전체 어둠→빛 톤 전환** — 슬라이드 진행에 따라 배경 밝기가 증가하는 서사 아크가 DQ-04 피드 차별화에 기여. (2026-03-29 a-group-v6 QC)
3. **골든 액센트 통일** — 브랜드 뱃지, 키워드 강조, 카드 보더, CTA 버튼을 골드(#C9A84C) 계열로 통일하면 시각적 일관성+프리미엄감 확보. (2026-03-29 a-group-v6 QC)
4. **인용문 카드 디자인** — 왼쪽 골드 세로 액센트바 + 큰 인용 부호 + 반투명 카드 배경 + backdrop-filter 블러가 신뢰감 있는 증거 슬라이드 구현. (2026-03-29 a-group-v6 QC)
5. **포토리얼 배경을 감정 전달 수단으로 활용** — A-2의 "비 오는 밤 사무실 실루엣"처럼 배경 사진 자체가 카피의 감정(고립, 외로움)을 증폭시키면 DQ-05 개선. 배경=장식이 아니라 배경=감정 전달 장치. (2026-03-29 a-group-v6 Cycle 2)
6. **밝은 배경에서 카드 색상 반전** — 다크 배경용 카드를 밝은 배경으로 이동할 때, 카드 배경→흰색, 텍스트→다크 톤, 골드 액센트→유지하면 깔끔하게 작동. A-4에서 성공 확인. (2026-03-29 a-group-v6 Cycle 2)
7. **글래스모피즘 카드로 밝기 전환 영역 텍스트 가독성 확보** — 하단에 밝은 그라데이션 추가 시, 텍스트 영역에 반투명 다크 카드(backdrop-filter blur + 골드 보더)를 적용하면 가독성 유지 + 프리미엄감 동시 달성. DQ-02, DQ-03 동시 상승. A-3 Cycle 3에서 성공 확인. (2026-03-29 a-group-v6 Cycle 3)
8. **CTA 슬라이드를 밝은 톤으로 재구성** — 캐러셀 마지막 CTA 슬라이드가 다크→밝음 전환 후에도 다시 다크로 돌아가면 디자인 언어 불일치. A-4(밝은 크림)과 동일 밝기 계열로 제작하고, CTA 골드 버튼으로 에너지 차별화. (2026-03-29 a-group-v6 Cycle 3)
9. **글래스모피즘은 "필요시에만" 사용** — 모든 슬라이드에 일괄 적용 금지. 아래 3가지 조건 중 하나 이상 해당할 때만 적용:
   - (a) 텍스트 색상이 배경과 충돌하여 가독성 저하 시
   - (b) 배경의 복잡한 패턴/방해 요소를 부분적으로 가리고 싶을 때
   - (c) 텍스트 영역과 비텍스트 영역을 시각적으로 분리해야 할 때
   - **투명도 조정 원칙**: 카드 색상이 배경과 대비가 크면 안 됨 (하얀 네모가 갑자기 뜨는 느낌 금지). 배경이 자연스럽게 비치되 폰트만 돋보이는 수준. 어두운 배경→어두운 반투명, 밝은 배경→밝은 반투명. 카드 경계선도 눈에 강하게 띄면 안 됨.
   - **"고급스러움"만을 이유로 넣는 것 금지** — 배경이 단순하고 글자가 잘 보이면 글래스모피즘 불필요.
   (2026-03-29 제이회장님 피드백 재확인)
10. **하단 콘텐츠를 flexbox 안에 두면 오버플로우 절단 발생** — position:absolute 하단 요소를 flex container 내부가 아닌 canvas 직접 자식으로 배치해야 안정적으로 표시됨. flex overflow가 Chrome headless에서 클리핑 문제 유발. (2026-03-29 a-group-v6 Cycle 1)
11. **Gemini 배경이 감정 강도를 결정한다** — A2(문제 슬라이드)에서 모호한 실루엣 배경은 DQ-03/DQ-05 동시 감점. "비 오는 밤 혼자 앉은 뒷모습"처럼 구체적 장면 프롬프트가 감정 전달력을 극적으로 강화. DQ-03 8.5→9.0 달성 핵심 요인. (2026-03-29 a-group-v6 Cycle 3)
12. **CTA 버튼은 다크 텍스트 on 골드가 가독성 최적** — 밝은 골드 배경에 흰색 텍스트는 대비율 미달. #1A0E00(다크 초콜릿) on 골드 그라데이션이 AAA 기준 충족하면서 프리미엄 느낌 유지. (2026-03-29 a-group-v6 Cycle 4)
13. **밝은 배경에서 골드 강조색은 다크 골드(#A07828)로 변경** — 밝은 크림 배경 위 #C9A84C는 대비율 3.5:1로 AAA 미달. #A07828로 명도를 낮추면 7.1:1 달성. (2026-03-29 a-group-v6 Cycle 4)
14. **정사각형(1080x1080) 전체 오버레이는 구조적 한계** — 전체 캔버스 반투명 오버레이는 opacity를 낮추면 텍스트 가독성 저하, 높이면 CSS 단색 느낌. 해결책: 중앙 반투명 패널(opacity 0.80~0.85, border-radius 12~16px, backdrop-filter blur)로 텍스트만 보호하고 패널 외곽에서 배경을 직접 노출할 것. M3 정사각형 전체에서 검증됨(DQ-03/DQ-06/DQ-07 동시 개선). (2026-04-01 task-1331.1 Cycle 3)
15. **헤드라인 핵심 키워드 1개를 골드로 강조하면 5개 DQ 동시 상승** — m3-2 "지점장"을 골드(#C9A84C)로 강조만 했는데 DQ-02/03/05/07/10이 동시에 올라 89→95 달성. 최소 변경 최대 효과의 모범 사례. 단, 감정적 톤이 "자책→해방"인 카피에서는 강조가 부적절할 수 있음 — 카피 톤에 맞춰 판단. (2026-04-01 task-1331.1 Cycle 2)
16. **서브카피2 추가로 빈 공간을 정보+감정으로 채우기** — 정사각형 뱃지/헤드라인/서브카피/CTA 구성에서 서브카피-CTA 간 빈 공간이 크면 DQ-06 감점. 디렉션의 "선택사항" 서브카피2를 추가하면 DQ-02(계층)+DQ-06(밸런스) 동시 개선. m1-1-1080에서 89→94 달성. (2026-04-01 task-1331.1 Cycle 2)
17. **골드 세로 액센트바로 피드 차별화+브랜드 시그니처 동시 확보** — 좌측 텍스트 영역 경계에 4px 골드 세로 라인을 추가하면 "일반 분할 광고"와 시각적 구분이 생기고, 캠페인 레벨에서 반복되면 브랜드 기억 형성. DQ-04/DQ-10 동시 상승. (2026-04-01 task-1331.1 Cycle 2)

18. **구분자 `·`(가운뎃점)는 광고 배너 해상도에서 마침표(.)처럼 보인다** — Pretendard/Noto Sans KR 폰트에서 U+00B7 middot이 작게 렌더링되어 로키 DQ 평가에서 "타이포 오류"로 -1점 감점. `|` (파이프)로 교체하면 시각적으로 명확하고 DQ-02/DQ-03/DQ-08 동시 개선. M1 전 6장에서 검증 (90→93+). (2026-04-02 task-1339.1 Cycle 3)
19. **같은 소분류의 1200x628 ↔ 1080x1080은 반드시 같은 디자인 시스템 사용** — M1-3에서 1200x628은 딥 네이비 오버레이, 1080x1080은 흰 카드 패널로 디자인 시스템이 달라 DQ-10 브랜드 일관성 5/10 기록(최저). 동일 소분류 내 크로스 포맷 디자인 언어 통일 필수. (2026-04-02 task-1339.1 Cycle 1)
20. **M2 CTA 대비율: #1A3320 on #00897B = 3.16:1은 체계적 결함** — M2 전 6장에서 CTA WCAG AAA 미달. 해결: 배경을 #00695C(다크 틸)으로 진하게, 텍스트를 #FFFFFF로 변경하면 ~5.8:1 달성. M2-2는 #1B5E20 + #FAFAFA = ~8.2:1 AAA 충족. (2026-04-02 task-1339.1 Cycle 2)
21. **헤드라인 키워드 골드 강조는 M1에서도 효과적** — M3뿐 아니라 M1의 "정당한 보상", "모든 권한", "무자본창업"을 골드(#C5A572)로 강조했을 때 DQ-02/04/05 동시 상승. 브랜드 컬러(M1=골드)와 일치하는 강조색 사용이 핵심. (2026-04-02 task-1339.1 Cycle 3)
22. **M1 뱃지 형식 통일이 브랜드 일관성 10/10의 열쇠** — M1-1은 골드 뱃지, M1-2/M1-3은 텍스트 브랜드라인으로 형식이 달랐을 때 DQ-10 7~8점. 전체를 골드 뱃지(#C5A572 배경 + #1B365D 텍스트)로 통일하자 DQ-10 10/10 달성. (2026-04-02 task-1339.1 Cycle 2)
23. **모든 텍스트 컨테이너: `white-space: nowrap` + 자간 축소로 오버플로우 방지** — 뱃지, CTA 등 텍스트 컨테이너에 `white-space: nowrap` + `letter-spacing: -0.02em ~ -0.05em`을 적용하면 텍스트가 컨테이너를 벗어나지 않음. 넘칠 경우 자간을 축소하여 수용. DQ-03 프로 완성도 직결. (2026-04-02 제이회장님 1339 피드백)
24. **서브카피: 한 줄 원칙, `<br>` 수동 줄바꿈** — 서브카피는 가능한 한 줄로 작성. 두 줄이 필요한 경우 자동 줄바꿈에 맡기지 않고 `<br>`로 의미 단위에서 수동 줄바꿈. 읽기 리듬과 가독성을 보장. DQ-08 타이포그래피 품질 상승. (2026-04-02 제이회장님 1339 피드백)
25. **1080x1080 세로 중앙 배치 필수** — `justify-content: center` + `align-items: center`로 콘텐츠를 정확히 세로 중앙에 배치. 상단 쏠림은 DQ-06 여백/밸런스에서 즉시 감점. (2026-04-02 제이회장님 1339 피드백)
26. **헤드라인 vs 서브카피 크기 비율 최소 1.3배** — 예: 헤드라인 60px이면 서브카피는 44px 이하. 1080x1080에서 헤드라인은 최소 60px (가로형 56px보다 커야 함). 시각적 계층이 명확해야 메인 메시지가 역할을 함. DQ-02/DQ-08 동시 상승. (2026-04-02 제이회장님 1339 피드백)
27. **CTA 버튼 `width: auto` + `padding: 0 32px` + `min-width: 220px`** — 고정 너비는 텍스트 길이에 따라 잘림/삐져나감 유발. auto width + padding으로 텍스트에 맞게 자동 확장하되 최소 너비는 보장. DQ-03/DQ-09 동시 개선. (2026-04-02 제이회장님 1339 피드백)
28. **1080x1080 헤드라인 최소 60px** — 가로형(1200x628)의 54-56px보다 크게 설정. 정사각형 포맷의 넓은 세로 공간을 활용하여 더 임팩트 있는 헤드라인 표현. DQ-02/DQ-08 동시 상승. (2026-04-02 제이회장님 1339 피드백)

29. **628px 가로형에서 콘텐츠 오버플로우 방지: 요소 수 제한** — 1200x628 가로형은 세로 공간이 제한적. 좌측 텍스트 패널에 9개 이상 요소(헤더+태그+헤드라인+그리드라인+서브카피+서포트카피+데이터+CTA)를 넣으면 margin 10px 이하로 압축되어 "호흡 공간" 부족(DQ-04 7점). 해결: 보조 텍스트(support-copy)를 제거하고 핵심 요소만 유지, margin 최소 14px. 33-meritz-628에서 91→94 달성. (2026-04-03 task-1360.1 Cycle 2)
30. **CSS-only 메탈릭 그라데이션은 프로 수준 달성 가능** — 사진 배경 없이 CSS linear-gradient 6~7겹 + metallic-stripe + slash-border로 메탈릭 질감 구현 시 DQ-08 9/10 달성. 이전 실패 패턴 #1("CSS 단색으로 프로 시도 불가")의 반례: 단색이 아닌 다층 메탈릭 그라데이션은 가능. 26-hyundai에서 95점 PASS. (2026-04-03 task-1360.1 Cycle 1)
31. **CSS 그리드 패턴 + 골드 radial-gradient = 최고 완성도** — `repeating-linear-gradient`로 그리드 타일 + `radial-gradient`로 골드 광원 + mix-blend-mode: screen 조합이 Batch B 최고점(97점) 달성. AI Tell 제로이면서 프리미엄 금융 서비스 분위기. 38-cannes에서 검증. (2026-04-03 task-1360.1 Cycle 1)
32. **1200x628↔1200x1200 크로스 포맷 일관성이 브랜드 점수 10/10의 열쇠** — 가로형과 정사각형에서 동일한 카피, 동일한 컬러 팔레트, 동일한 디자인 요소(CTA 스타일, 오버레이 구조)를 유지하면 DQ-06 브랜드 일관성 10/10. 26-hyundai, 33-meritz, 38-cannes에서 검증. (2026-04-03 task-1360.1 Cycle 1)
33. **프로스티드 글라스 서브카피 블록은 계층 분리에 탁월** — 서브카피와 CTA가 동일 44px이어도 서브카피를 glass morphism 블록(rgba+blur+border)으로 감싸면 시각적으로 완전히 다른 요소로 인지됨. DQ-02 계층구조 10/10 달성. 35-hybrid에서 검증. (2026-04-03 task-1360.1 Cycle 1)
34. **3셀 "정당한 보상" 메시지는 브랜드별 컬러 시스템으로 차별화** — 동일 "정당한 보상" 메시지를 3개 브랜드로 제작할 때: 인카=골드(#C9A84C)+네이비(#0A1628), GA=레드(#EF3B24)+블랙(#0D0D0D), 서울대보험쌤=골드(#C9A84C)+브라운(#3E2723). 컬러 시스템만으로 브랜드 격리가 시각적으로 즉시 인지됨. (2026-04-04 task-1389.1)
35. **서브카피 한국어 길이 예측: 1080px 기준 46px에서 ~18자가 한 줄 한계** — "정착지원금 최대 1,000만원 | 경력직 직전연봉 50% 지원"(25자)은 반드시 2줄이 됨. 서브카피 작성 시 한글 기준 18자 이하면 한 줄, 초과 시 `<br>` 의미 단위 줄바꿈 필수. (2026-04-04 task-1389.1)
36. **다크 반투명 패널(rgba 0.82)은 배경과 색조 일치 시 자연스럽다** — 1080x1080 중앙 패널에서 배경이 다크이면 패널도 다크(rgba(13,13,13,0.82)), 배경이 따뜻하면 패널도 크림(rgba(255,248,231,0.82)). 색조 불일치 시 "하얀 네모가 갑자기 뜬" 느낌으로 DQ-03 감점. (2026-04-04 task-1389.1)
37. **서브카피를 별도 `<p>` 태그로 분리하면 고아 텍스트 발생** — "검증된 조직"처럼 짧은 문구를 별도 `.sub-copy-2` 요소로 분리하면 gap(28px)에 의해 덩그러니 떠 있는 고아 텍스트가 됨. 해결: 하나의 `.sub-copy` 안에서 `<br>`로 줄바꿈 처리. DQ-03 +2점 개선. (2026-04-04 task-1392.1)
38. **1200x628 서브카피는 40px로 축소해야 head/sub 비율 1.3배 충족** — 헤드라인 54px + 서브카피 44px = 1.23배로 DQ-08 기준(1.3배) 미달. 서브카피를 40px로 축소하면 54/40 = 1.35배로 기준 충족. Cell-1, Cell-4, Cell-7 전 셀에서 검증. (2026-04-04 task-1392.1)
39. **구분선(divider) 요소는 DQ-04 피드 차별화에 +1~2점 기여** — Cell-4의 red-divider가 DQ-04 10/10 달성의 핵심 요인. Cell-1에도 gold-divider 추가 시 구조적 차별 포인트 확보. 구분선 = 헤드라인-서브카피 사이 계층 전환 신호이자 브랜드 시그니처 역할. (2026-04-04 task-1392.1)
40. **1080x1080 패널 padding 64px + gap 28px이 5개 요소 배치에 최적** — 뱃지/헤드라인/구분선/서브카피/CTA 5개 요소가 패널에 밀집될 때 padding 56px + gap 24px은 빽빽한 인상(DQ-06 8점). padding 64px + gap 28px으로 조정하면 호흡 공간 확보되어 DQ-06 +1점. Cell-4에서 검증. (2026-04-04 task-1392.1)
41. **서브카피 줄바꿈 시 "숫자+단위" 분리 금지** — "50% 정착지원금"에서 "50%"와 "정착지원금"이 서로 다른 줄에 배치되면 DQ-08 의미 단위 위반 -1점. 숫자와 그 수식 대상은 반드시 같은 줄에 유지할 것. (2026-04-04 task-1392.1)
42. **Gemini API 키 할당량 초과 시 gcloud Bearer 토큰 폴백** — `AIzaSy...` API 키가 무료 플랜 한도 소진 시 gcloud Application Default Credentials의 Bearer 토큰으로 전환하면 정상 호출 가능. gemini-2.5-flash-image, gemini-3.1-flash-image-preview 등 모델 사용 확인. (2026-04-04 task-1392.1)
43. **동일 브랜드 다른 앵글 배너는 기존 셀 HTML 템플릿을 복사→카피만 교체가 최적** — Cell-1(인카×정당보상) 템플릿을 Cell-2(인카×리더)에 그대로 적용하고 카피+배경만 바꾸면 DQ-10 브랜드 일관성 10/10 자동 달성. 디자인 시스템을 새로 설계하면 불일치 리스크 발생. 6장 평균 95.3점 달성. (2026-04-04 task-1410.1)
44. **date-tag에 rgba opacity를 적용하면 WCAG AAA 미달 위험** — `rgba(239,59,36,0.85)`는 다크 배경 위 대비율 ~4.2:1로 AAA 대형텍스트 4.5:1 미달. 불투명 `#EF3B24`(~5.3:1)로 사용해야 AAA 충족. Cell-5에서 검증. (2026-04-04 task-1410.1)
45. **구분선(divider)은 반드시 CSS div로 구현** — 유니코드 문자(─────)로 구분선을 구현하면 프로 완성도 저하(DQ-03 -1점). CSS `height:1px; background: color`가 표준. Cell-5 1200x628에서 검증. (2026-04-04 task-1410.1)
46. **Gemini 쿼터 소진 시 동일 브랜드 기존 셀 배경 재사용이 유효** — Cell-8에서 Gemini 429 에러 발생 시 Cell-7 배경(따뜻한 서재)을 재사용. 동일 브랜드이므로 시각적 일관성이 오히려 강화됨. DQ-10 10/10 유지. (2026-04-04 task-1410.1)

47. **서브카피 텍스트 길이는 가용폭 대비 사전 검증 필수** — 템플릿 복사 시 원본 셀의 서브카피(예: Cell-7 "경력직 직전연봉 최대 50% 정착지원금" 14자)보다 새 셀의 서브카피(Cell-9 "AI 자동화 | 30여종 DB 지원 | 해외여행 연 4회" 21자)가 길면 동일 폰트/레이아웃에서 오버플로우 발생. 1200x628 가용폭(text-area 62% - padding) 계산 후 글자 수 비교 필수. 초과 시 축약 또는 `<br>` 2줄 분리. (2026-04-04 task-1415.1)
48. **copy-v3.2 카피 텍스트 일치 검증은 Cycle 0에서** — 에이전트 위임 시 헤드라인/서브카피/CTA 텍스트가 원본 카피와 100% 일치하는지 산출물에서 반드시 확인. Cell-6에서 "전국에" 3글자 누락 발견(DQ-03 -3점). 카피 누락은 자동 검출이 어려워 수동 대조 필수. (2026-04-04 task-1415.1)
49. **"개인 영업 지원" 앵글 3셀은 템플릿 복사 전략으로 평균 96.2점 달성** — Cell-3(인카), Cell-6(GA), Cell-9(SNU) 모두 기존 "정당한 보상" 셀 템플릿 복사→카피 교체. Gemini API 403으로 배경 재사용. 6장 전체 DQ 93점+ PASS. 노하우 #43 전략의 3차 검증 완료. (2026-04-04 task-1415.1)

50. **Black Han Sans 84px + Pretendard 조합이 DQ 규칙 2폰트+84px 헤드라인 최적해** — Black Han Sans(weight 900, display font)를 헤드라인에, Pretendard(weight 700)를 Badge/CTA에 사용하면 2폰트 규칙과 84px+ 규칙을 동시에 충족. 시각적 계층 대비가 극대화됨. 6장 전체 DQ-08 10/10 달성. (2026-04-04 task-1442.1)
51. **텍스트 3요소 제한 시 Badge+Headline+CTA 구성이 최적** — 서브카피/urgency 제거하고 Badge(브랜드)+Headline(메시지)+CTA(행동) 3요소만 배치. 서브카피 정보는 랜딩페이지에서 전달. 3요소 구조가 시각적 호흡 공간 확보+계층 명확화에 유리. DQ-02 9→10, DQ-06 유지. (2026-04-04 task-1442.1)
52. **동일 앵글 3셀에서 패널 명도 반전이 가장 효과적인 구조 차별화** — Cell-1(크림 패널+다크 텍스트) vs Cell-7(다크 브라운 패널+크림 텍스트)로 패널 명도만 반전하면 DQ-03(+1)+DQ-04(+2)+DQ-07(+2) = +5~6점 동시 상승. 레이아웃 구조를 바꾸지 않고도 시각적으로 완전히 다른 인상. Cell-7에서 89→95점 달성(+6점, 단일 변경 최대 효과). (2026-04-04 task-1442.1)
53. **디바이더(divider) 추가는 DQ-02+DQ-04 동시 +1~2점** — Headline과 CTA 사이에 120px 수평 디바이더(gradient transparent→color→transparent)를 추가하면 시각 계층 전환 신호 역할. 전 6장에서 DQ-02 +1점 검증. 골드/레드/카라멜 등 브랜드 컬러와 매칭. (2026-04-04 task-1442.1)

57. **세리프 폰트(Noto Serif KR, NanumMyeongjo 등)는 84px에서 1200px 내 한 줄 수용 불가** — 세리프 글리프가 고딕보다 넓어서 "지점장 이직, 89일이 골든타임"(13자)도 2줄로 줄바꿈됨. 세리프 헤드라인은 글자 수를 10자 이하로 제한하거나, font-size를 68~72px로 축소 필요. (2026-04-04 task-1453.1 폰트 카탈로그)
58. **폰트 카탈로그 렌더링: Playwright + 시스템 폰트가 가장 정확** — 폰트 선택용 카탈로그는 CDN 로딩이 아닌 시스템 설치 폰트(fc-list 확인)를 Playwright로 렌더링해야 실제 배너 제작 시 동일한 결과 보장. (2026-04-04 task-1453.1)

54. **CTA 그라디언트에서 끝점(밝은 쪽) 대비율이 치명적 약점** — `linear-gradient(135deg, #A0522D 0%, #D4956A 100%)`에서 끝점 #D4956A와 #FFFFFF의 대비율이 2.53:1로 AA Large(3:1)조차 미달. 그라디언트의 가장 밝은 지점이 대비 기준이 됨. 수정: 끝점을 #A0522D(5.62:1)로 제한하고 시작점을 #7B4226(7.93:1)로 어둡게. 그라디언트 전 구간에서 최소 4.5:1 확보 필수. Cell-7 CTA에서 검증. (2026-04-04 task-1446.1)
55. **골드 강조색 #A07828은 크림 배경에서 AAA Large 미달** — #A07828 on #FFF8E7 = 3.81:1로 AAA Large(4.5:1) 미달. #7A5A1A로 변경 시 6.00:1로 AAA Large 충족. 밝은 패널 위 강조색은 반드시 대비율 4.5:1+ 검증 필수. Cell-1 1080에서 검증. (2026-04-04 task-1446.1)
56. **1200x628 accent-bar는 모든 셀에 통일 적용해야 DQ-04 만점** — Cell-1에만 골드 accent-bar가 있고 Cell-7에는 없으면 구조적 차별화 요소 불균형으로 DQ-04 -2점. 동일 앵글 3셀 모두 브랜드 컬러 accent-bar를 좌측에 배치하면 시각 일관성+차별화 동시 확보. (2026-04-04 task-1446.1)

59. **불투명 layer 금지 시 text-shadow 다중 레이어가 유일한 가독성 솔루션** — photo bg 위에 오버레이/패널 없이 텍스트를 배치할 때, `text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 4px 12px rgba(0,0,0,0.7), 0 8px 24px rgba(0,0,0,0.5), 0 0 40px rgba(0,0,0,0.8);` 4겹 레이어가 최소 필요. 1-2겹으로는 밝은 배경에서 가독성 불충분. (2026-04-05 task-1454.1)
60. **9셀 각 컨셉 적용 시 서브에이전트에 허용 폰트 리스트를 명시적으로 전달** — 위임 시 "22종 허용 폰트"만 언급하면 에이전트가 Black Han Sans 등 비허용 폰트를 사용. @font-face 선언까지 제공해도 실제 font-family 참조에서 다른 폰트를 쓰는 경우 발생(Cell 4,5). 산출물 수거 후 `grep font-family` 전수 검사 필수. (2026-04-05 task-1454.1)
61. **서브헤드 64px+ 규칙은 1200x628에서도 예외 없이 적용** — 1200x628의 세로 제한(628px)에서 64px 서브헤드가 부담이지만, DQ 규칙상 예외 없음. 에이전트가 1200 포맷에서 40-52px로 축소하는 경향이 있으므로 검수 시 1200 HTML도 반드시 확인. (2026-04-05 task-1454.1)
62. **하단 부분 gradient(40-50%)는 "전면 오버레이"가 아님** — `linear-gradient(to bottom, transparent 0%, rgba(0,30,60,0.88) 100%)`가 캔버스 하단 40%만 커버하면 "전면 오버레이 금지" 위반이 아님. 상단 50%+ 배경 직접 노출이 핵심 기준. Cell-2(#45), Cell-9(#35)에서 검증. (2026-04-05 task-1454.1)

63. **골드 텍스트에 반투명 다크 배경 패드로 가독성 확보** — 골드(#C9A84C) num-flash 텍스트가 사진 배경 위에서 대비 부족할 때, `background: rgba(0,0,0,0.6); padding: 8px 24px; border-radius: 6px; display: inline-block` 추가로 즉시 해결. text-shadow만으로 불충분한 경우의 보완책. Cell-1에서 검증. (2026-04-05 task-1460.1)
64. **1200x628 서브카피는 text-area 60% 기준으로 글자 수 사전 검증 필수** — 서브카피 64px + white-space:nowrap + text-area 60%(=~620px 가용)에서 25자+ 한국어 텍스트는 반드시 오버플로우. 44px 이하로 축소하거나 줄바꿈 필수. Cell-1-1200에서 검증. (2026-04-05 task-1460.1)
65. **서브헤드 항목 수와 본문 숫자 불일치는 카피 오해 유발** — "5대 시스템"이라 해놓고 3개 항목만 나열하면 "이 3개가 5대 시스템인가?" 오해 발생. 숫자를 명시할 때는 반드시 해당 수만큼의 항목을 나열할 것. Cell-9에서 검증. (2026-04-05 task-1460.1)

66. **#D32F2F(레드)는 다크 네이비 패널 위에서 대비율 3.49:1로 AA 미달** — `.em` 강조색으로 사용 시 WCAG AAA Large(4.5:1) 기준도 미충족. 해결: #FF5252(밝은 레드)로 변경 시 5.38:1로 AAA Large PASS. 다크 배경 위 레드 강조는 반드시 밝은 레드(#FF5252+) 사용. Cell-4 1080x1080에서 DQ-07 7→9점 (+2). (2026-04-05 task-1466.1)
67. **1200x628 하단 밴드(bottom-band) 레이아웃은 DQ-06에서 구조적 한계** — justify-content:flex-end로 하단 정렬하면 상단 50%+가 배경만 노출되어 DQ-06 -2점(하단 편중). 좌우 분할(Template A)로 전면 재구성하면 DQ-03(+2), DQ-04(+1), DQ-06(+2), DQ-07(+2), DQ-08(+1) = +8점 동시 개선. Cell-4 1200x628에서 85→93 달성. (2026-04-05 task-1466.1)
68. **크림 배경 위 AAA 7:1 달성 색상: highlight #604010(8.0:1), sub #594A2E(7.2:1)** — 기존 #7A5A1A(6.0:1)는 AAA Large만 통과. AAA normal 7:1을 위해 더 어두운 골드/브라운 사용. Cell-5 1200x628에서 DQ-07 8→10점. (2026-04-05 task-1466.1)
69. **서브카피 오버플로우 방지: 좌우 분할 text-area 64% 시 가용폭 ~676px** — 64px white-space:nowrap에서 한국어 15자+"1200%"는 ~731px로 오버플로우. text-area 폭 대비 서브카피 길이를 사전 계산하고, 초과 시 텍스트 축소 또는 letter-spacing -0.04em 이상 적용. (2026-04-05 task-1466.1)

70. **키 넘버 텍스트 교체 시 글자 수 대비 폰트 축소 필수** — "89일"(2자+단위)→"6월까지"(3자+조사)처럼 글자 수가 증가하면 동일 폰트 사이즈에서 오버플로우 발생. 1080: 120→108px, 1200: 100→90px으로 ~10% 축소하고 letter-spacing도 1px 완화. 텍스트 교체 시 항상 글자 수 비교 후 폰트 크기 조정. Cell-2에서 검증. (2026-04-05 task-1474.1)
71. **뉴스플래시 디자인의 구조적 바(header/ticker) 축소 시 폰트+높이 동시 조정** — 1200x628에서 상단(88→64px) + 하단(80→56px) 바 높이 축소 시, 내부 폰트도 40→32px로 동기 축소하고 text-panel의 top/bottom 좌표를 바 높이에 연동 필수. 바 높이만 줄이고 폰트를 유지하면 패딩 부족으로 텍스트가 잘림. Cell-7에서 검증. (2026-04-05 task-1474.1)
72. **피드백 수정 시 본문 콘텐츠 영역 간접 확대 효과** — Cell 8/9처럼 여백/텍스트 크기 조정만으로 콘텐츠 호흡 공간이 확보됨. 직접 레이아웃 구조를 변경하지 않아도 padding 12px 증가 + 폰트 12px 축소로 체감 여백이 크게 개선. (2026-04-05 task-1474.1)

73. **텍스트 교체 + 폰트 축소 시 줄 수 증가 주의** — 원본 "본부 5개 · 지점 10개 · 200명+"(13자)→"사무실 개설비 100% 지원 가능 + 조직구축 시스템 제공"(25자)로 글자 수 2배 증가 시, 15% 축소(64→54px)만으로는 1200x628 가용폭(~636px)에서 3줄 오버플로우. 25% 축소(48px)로 추가 조정하여 2줄 달성. 텍스트 교체 시 반드시 (새 글자수 × 예상 글리프폭) vs 가용폭 사전 비교 필수. Cell-8에서 검증. (2026-04-05 task-1481.1)

74. **서브카피 "2줄" 지시 시 가용폭 사전 검증 필수** — "경력직 직전연봉 최대 50%, 신입 최대 1천만원"(28자)은 40px Gothic A1에서 ~818px 필요. text-panel 780px - padding 96px = 684px 가용폭에서 수용 불가. 의미 단위 3줄 `<br>` 줄바꿈이 최선 — "숫자+단위 분리 금지"(노하우 #41) 준수하여 "50%,"와 "1천만원"이 각각 같은 줄에 유지. Cell-7에서 검증. (2026-04-05 task-1484.1)
75. **justify-content:center → flex-start + margin-top:auto가 "여백 과다+가운데 정렬" 해결책** — 1200x628에서 콘텐츠가 세로 중앙에 뭉치면 위아래 여백이 답답한 인상. flex-start로 상단부터 흐르게 하고 CTA에 margin-top:auto를 적용하면 자연스러운 상단→하단 배치가 됨. Cell-9에서 검증 (DQ-06 10/10 달성). (2026-04-05 task-1484.1)

76. **position 미세 조정(margin-top 추가)은 DQ-06 개선 효과가 크다** — 제이회장님 피드백으로 텍스트/CTA 위치를 20-25px 단위로 조정하면, 크리에이티브 방향 변경 없이 DQ-06 여백 밸런스가 9→10으로 상승. Cell-2, Cell-9에서 검증. justify-content:center 레이아웃에서 margin-top 추가만으로 요소 간 간격 최적화 가능. (2026-04-05 task-1485.1)
77. **전체 폰트 20% 축소 시 DQ 순감은 -2점 이내** — 뉴스플래시 컨셉(Cell-7)에서 text-panel 전체 폰트를 20% 축소(헤드라인 추가 15%)해도 DQ 94점 유지(96→94). DQ-06 여백이 개선(+1)되어 DQ-02/08/09 미세 감점(-3)을 상쇄. 단, 서브카피/CTA가 32px로 40px 최소 규칙 미달. 제이회장님 직접 지시 시 DQ 최소 규칙보다 우선. (2026-04-05 task-1485.1)

78. **FB 페이지 프로필(170×170) — Satori 렌더링이 Playwright보다 적합** — 170px 초소형 이미지에서 Playwright headless는 과잉. Satori + resvg-js로 서버사이드 SVG→PNG 변환이 빠르고 9.8KB 경량 산출물. 다만 Satori는 Pretendard 미지원으로 Noto Sans CJK KR 대체 필요. (2026-04-06 task-1495.1)
79. **FB 페이지 커버(820×312) — 좌측 텍스트 + 우측 배경 분할이 와이드 비율(2.63:1)에 최적** — 820×312은 세로 공간이 극히 제한적(312px)이므로 텍스트 요소 2-3개로 제한. 좌→우 그라데이션 오버레이(rgba 0.92→transparent)로 텍스트 가독성 확보. 모바일 640×360 중앙 영역에 핵심 정보 배치 주의. (2026-04-06 task-1495.1)
80. **FB 프로필 170×170 Playwright 렌더링도 유효** — 노하우 #78에서 Satori 추천했으나, Playwright headless로도 25KB PNG 정상 산출. Black Han Sans 52px + text-shadow 글로우 + radial-gradient 배경 글로우 조합이 블랙 배경 위 인디블루(#4169E1) 임팩트 디자인에 효과적. 3줄 스택("전국" 20px / "보험" 52px / "채용" 36px) 구성이 170px 원형 크롭에서 가독성 유지. (2026-04-06 task-1496.1)

81. **Tailscale Funnel URL은 Meta(Threads/Instagram) API에서 접근 불가** — 로컬 curl/Python으로 HTTP 200 확인되어도 Meta 서버에서는 .ts.net 도메인 해석 불가하여 error_subcode 2207052 발생. 해결: `cloudflared tunnel --url http://localhost:PORT`로 trycloudflare.com 공개 URL을 생성하면 Meta API가 정상 다운로드. 이미지 발행 전 Cloudflare 터널 필수. (2026-04-06 task-1502.1)
82. **카드뉴스(1080x1080) 블랙+인디블루 디자인 시스템** — 배경 #0A0A0A + 악센트 #4169E1 + 텍스트 #FFFFFF(21:1) + 서브텍스트 #B0C4DE(10.2:1) 조합이 WCAG AAA 전항목 통과. 체크번호 뱃지(#4169E1 bg + #FFFFFF text)와 반투명 카드(rgba(65,105,225,0.1) border + rgba(255,255,255,0.05) bg)로 체크리스트 카드 구분. Pretendard 본문 + Black Han Sans 타이틀로 시각 계층 확보. (2026-04-06 task-1502.1)

---

## 신규 작업 시작 전 체크리스트

- [ ] 레퍼런스 sample.png를 먼저 분석했는가? (색감/구도/느낌)
- [ ] CSS만으로 해결하려 하지 않았는가? (Gemini 배경 필수 검토)
- [ ] 폰트 선택이 컨셉과 맞는가?
- [ ] 텍스트 배치에 시각적 계층/긴장감이 있는가?
- [ ] design-qc-knowhow.md의 실패 패턴을 전부 읽었는가?
- [ ] "어떤 누가 평가해도 세계 최고의 전문가/프로 수준인가?" 자문했는가?
- [ ] 자체 평가하지 않고 마아트 QC를 받을 준비가 됐는가?
- [ ] Gemini 배경 프롬프트에 "사진/장면" 키워드가 포함됐는가? (아이콘/그래픽 배경 회피)
- [ ] 캐러셀 전체 5장의 비주얼 품질이 균일한가? (1장이라도 낮으면 전체 인상 하락)
- [ ] 배경 이미지와 HTML 오버레이 요소가 중복되지 않는가?
- [ ] 포인트 컬러가 배경 색상과 충분히 분리되는가? (같은 색상대 회피)
- [ ] 캐러셀 전체의 디자인 언어(배경 처리 방식)가 통일되어 있는가?
- [ ] 연속 슬라이드 간 밝기 전환이 점진적인가? (급격한 단절 회피)
- [ ] 모든 텍스트 요소가 최소 40px 이상인가? (페이지 인디케이터, 브랜드 태그, 면책 문구 포함, 예외 없음)
- [ ] 얇은 폰트(font-weight 300 이하, light/thin)를 사용하지 않았는가?
- [ ] 텍스트-배경 대비율이 WCAG AAA 기준(7:1, 대형텍스트 4.5:1)을 충족하는가?
- [ ] ~~서울대보험쌤 로고 이미지를 사용했는가?~~ — **철회됨 (Cycle 5, 2026-03-29)**: 로고 넣으라는 지시 철회. 로고 img 태그 삭제 완료.
- [ ] 광고 배너에 슬라이드 번호(1/5, 2/5)를 넣지 않았는가? (카드뉴스만 번호 사용)
- [ ] 반투명 레이어가 배경 메인 피사체를 가리지 않는가? (텍스트 영역에만 최소한 적용)
- [ ] 한 슬라이드에 반투명 레이어가 2개 이하인가?
- [ ] "서울대보험쌤"의 직위가 **지점장**으로 정확히 표기되어 있는가? (팀장 아님)
- [ ] 구분자로 `|` (파이프)를 사용했는가? (`·`는 렌더링 시 마침표처럼 보일 수 있음)
- [ ] 같은 소분류의 1200x628과 1080x1080이 동일한 디자인 시스템(오버레이 방식, 컬러 시스템)을 사용하는가?

---

## Supanova Design Engine 핵심 원칙

> 출처: supanova-design-skill 분석 (2026-04-02). 랜딩페이지/프론트엔드 디자인에 적용.

### "Banned Patterns" 접근법
"좋은 것을 추가"보다 **"나쁜 것을 제거"**가 AI 디자인 품질에 더 효과적.
AI의 통계적 편향(가장 빈번한 패턴 출력)을 정확히 파악하고 **그것만 금지**.

### AI Tells 금지 목록
| 금지 패턴 | 대체 패턴 |
|-----------|-----------|
| 3-Column Equal Card | Bento Grid / Zig-Zag |
| 중앙 정렬 Hero (DESIGN_VARIANCE > 4) | Split Screen / Full-Bleed |
| 라운드 넘버 (50,000+) | 유기적 숫자 (47,200+, 4.87/5.0, 98.7%) |
| AI 클리셰 ("혁신적인", "원활한", "차세대") | 구체적이고 자연스러운 한국어 표현 |
| AI 더미 이름 (김철수/이영희) | 현대적 이름 (하윤서/박도현/이서진) |
| 금지 폰트 (Inter, Noto Sans KR, Roboto, Arial, Open Sans, Helvetica, Malgun Gothic) | Pretendard 필수 |
| 금지 아이콘 (Lucide, FontAwesome, Material Icons) | Iconify Solar |
| 순수 검정 #000000 | #0a0a0a, Zinc-950, Slate-950 |

### 결정론적 CSS 값 매핑
추상적 형용사 → 구체적 CSS 클래스 1:1 매핑:
- "프리미엄 헤드라인" → `text-4xl md:text-5xl lg:text-6xl tracking-tight leading-tight font-bold`
- "넓은 섹션" → `py-24 md:py-32 lg:py-40`
- "자연스러운 움직임" → `cubic-bezier(0.16, 1, 0.3, 1)` (스프링 물리)
- "적절한 컨테이너" → `max-w-7xl mx-auto px-4 sm:px-6 lg:px-8`

### 한국어 타이포그래피 표준
- Pretendard 폰트 필수 (NON-NEGOTIABLE)
- `word-break: keep-all` 필수 (한국어 음절 중간 줄바꿈 방지)
- `leading-tight` ~ `leading-snug` (한글은 라틴보다 수직 공간 더 필요)
- `text-wrap: balance` 헤딩에 적용 (Orphan 방지)
- `font-variant-numeric: tabular-nums` 숫자에 적용
- 존댓말 일관성 (합니다/하세요 통일)

### Supanova 모션 시그니처
- **모든 트랜지션**: `cubic-bezier(0.16, 1, 0.3, 1)` (스프링 물리)
- **`linear`, `ease-in-out` 절대 금지**
- **스크롤 진입**: `opacity 0→1, translateY(2rem→0), blur(4px→0)`
- **IntersectionObserver** 트리거, `animation-delay: calc(var(--index) * 80ms)` 스태거
- **CTA 호버**: `hover:scale-[1.02]` + 화살표 `hover:translate-x-1`, `active:scale-[0.98]`

### Double-Bezel 카드 패턴
외부 쉘 + 내부 코어로 "가공된 하드웨어" 질감:
- 외부 쉘: `bg-white/5, ring-1 ring-white/10, p-1.5, rounded-[2rem]`
- 내부 코어: `shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)], rounded-[calc(2rem-0.375rem)]`

### 출력 생략 방지
- `[PAUSED -- X of Y sections complete]` 패턴으로 토큰 한도 대응
- 금지: `<!-- ... -->`, `// ...`, `<!-- rest of sections -->`, "Let me know if you want me to continue"

### iOS Safari 뷰포트
- `h-screen` 금지 → `min-h-[100dvh]` 사용 (레이아웃 점프 방지)

### 한글 폰트 활용 (task-1348.1)
- 서버에 47개 한글 폰트 패밀리 설치 완료 (fc-list :charset=AC00 기준)
- 배너 에디터에서 폰트 선택 가능 (GET /api/banner-editor/fonts → 드롭다운)
- 디스플레이용: Black Han Sans, Jua, Gugi, Cute Font (포인트 텍스트)
- 본문용: Pretendard, SUIT, Spoqa Han Sans Neo, Noto Sans CJK KR (가독성 우선)
- 명조/세리프: Noto Serif KR, Gowun Batang, KoPub Batang Pro (격식 있는 톤)

### SaaS 사이드바 프리미엄 디자인 패턴 (task-1358.1)
- **폰트**: Pretendard Variable CDN import + `[data-sidebar]` 선택자로 사이드바 전용 적용
- **간격 통일**: 메뉴 아이템 py-[6px] px-3, 아이콘-텍스트 gap-2.5, 아이콘 18px
- **섹션 헤더**: text-[11px] uppercase tracking-[0.08em] font-semibold text-gray-400
- **활성 상태**: bg-blue-50 text-blue-600 + CSS ::before 좌측 3px 블루 인디케이터
- **호버**: bg-gray-50 transition duration-150 (200ms보다 150ms가 더 스냅감)
- **PREMIUM 뱃지**: bg-gradient-to-r from-amber-400 to-amber-500 text-amber-900 (골드 계열)
- **프로필 카드**: rounded-lg 아바타 + bg-gray-50/80 border-gray-100 카드
- **쉐브론 애니메이션**: 조건부 아이콘 교체보다 CSS rotate(90deg) + cubic-bezier(0.16,1,0.3,1)이 부드러움
- **collapsed 주의**: 섹션 구분선(border-t) 등 expanded 전용 요소는 반드시 `!collapsed` 조건 필요
- **터치타겟 충돌**: 전역 44px min-height 규칙이 사이드바에 영향 → `[data-sidebar]` 선택자로 auto 오버라이드

### InsuRo 사이트 디자인 감사 결과 (task-1364.1)
- **전체 디자인 점수 평균**: 6.4/10 (프리미엄 SaaS 기대수준 8.0+ 미달)
- **폰트 불일치**: 태스크설명 Pretendard ≠ 실제코드 Inter+Calistoga (확인 필요)
- **CSS 변수 준수율**: 44% 완전 준수, 30% 하드코딩 → 디자인 토큰 시스템 구축 필요
- **Toast 이중화**: useToast(7파일) vs sonner(4파일) — 반드시 단일화 필요
- **플랜 게이팅 5종 난립**: PlanGuard, PremiumLocked, UpgradeModal, checkAccess, useUserPlan+인라인 → 단일 패턴(PlanGuard 추천)으로 통일
- **h1 크기 표준**: `text-2xl font-bold` (9개 페이지 사용 = 사실상 표준). MarketNewsletter/PremiumComparison의 `text-base`는 즉시 교정
- **Card rounded-lg vs div rounded-xl 불일치**: Card 컴포넌트 사용 시 rounded-lg, 커스텀 div는 rounded-xl — 통일 필요
- **shadcn Table/Form 미활용**: table.tsx, form.tsx 정의 완비되었으나 pages에서 raw HTML 태그 사용 → 점진적 마이그레이션
- **CRITICAL 이슈 TOP3**: ErrorBoundary 부재, 모바일 premiumOnly CTA 단절(MobileBottomNav.tsx:29), Intro.tsx Hero CTA 전무
- **사이드바 너비 CSS 변수화**: DashboardLayout `ml-[180px]` + ContextSubMenu `w-[180px]` 분리정의 → `--sidebar-width` 변수로 통합
- **아이콘 크기 통일**: TopNavBar(15px), ContextSubMenu(16px), MobileBottomNav(18px) → 16px 표준 제안