# DQ 평가 보고서 — task-1442.1

## 평가 요약
- 평가자: 로키 (Opus) — 보안팀(레드팀) 팀장, Devil's Advocate
- 일시: 2026-04-04
- PASS 기준: 93점+
- 평가 대상: 6개 배너 (Cell-1, Cell-4, Cell-7 각 2사이즈)

---

## 배너별 DQ 점수

### 1. Cell-1 인카 — Meta Feed 1080x1080

| DQ | 항목 | 점수 | 근거 |
|----|------|------|------|
| DQ-01 | 레퍼런스 재현도 | 9/10 | 금융 프리미엄 톤, 문서/계약 이미지 배경에 크림패널 오버레이 — 보험업 광고 컨벤션 충실 재현 |
| DQ-02 | 시각적 계층 구조 | 9/10 | Badge(40px w700) → Headline(84px w900) → CTA(48px w700) 3단 계층 명확; 비율 2.1x로 규격(1.3x+) 초과 달성 |
| DQ-03 | 프로 완성도 | 9/10 | backdrop-filter:blur(4px), box-shadow, border-radius 등 디테일 처리 우수; 크림패널 opacity 0.82로 배경 투과감 적절 |
| DQ-04 | 피드 차별화 | 8/10 | 골드+크림 조합은 보험업 피드에서 시선 확보 가능하나, 정방형 중앙정렬 구도 자체는 매우 전통적 |
| DQ-05 | 감정적 임팩트 | 9/10 | "같은 계약, 수수료가 왜 다른가요?" — 불공정 분노 유발, 보험설계사 핵심 페인포인트 정조준 |
| DQ-06 | 여백/레이아웃 밸런스 | 9/10 | 패널 900/1080=83% 점유, padding 64px/44px 상하좌우 균일; 요소간 gap 28px 일관 |
| DQ-07 | 색상 가시성/조화 | 8/10 | Headline.gold(#C9A84C) on Cream(#FFF8E7) 대비율 2.16:1 — WCAG AA Large(3:1) 미달; 다만 84px 대형 텍스트+font-weight 900이므로 시각적 판독은 가능 |
| DQ-08 | 타이포그래피 품질 | 10/10 | Black Han Sans(w900) + Pretendard(w700) 2종 사용; letter-spacing -2px/-0.03em 한글 자간 최적화; 절대최소 40px 충족 |
| DQ-09 | CTA 효과성 | 9/10 | "수익 구조 지금 확인 →" — 구체적 행동유도+긴급성(지금); gradient+box-shadow로 입체감; 48px w700 규격 준수 |
| DQ-10 | 브랜드 일관성 | 9/10 | 네이비(오버레이 rgba 10,22,40)+골드(#C9A84C) 브랜드 컬러 시스템 정확 적용 |
| **총점** | | **89/100** | **FAIL** |

**핵심 이슈**: DQ-07 골드 강조색 on 크림 배경 대비율 2.16:1 (WCAG AA Large 3:1 미달)

---

### 2. Cell-1 인카 — Google Responsive 1200x628

| DQ | 항목 | 점수 | 근거 |
|----|------|------|------|
| DQ-01 | 레퍼런스 재현도 | 9/10 | 좌측 텍스트+우측 이미지 분할 레이아웃 — Google 반응형 배너 정석 |
| DQ-02 | 시각적 계층 구조 | 9/10 | Badge(40px) → Headline(84px) → CTA(44px) 좌정렬 3단 계층; accent-bar(4px, 500px) 수직 가이드라인 보조 |
| DQ-03 | 프로 완성도 | 9/10 | gradient-overlay 6단계 그라데이션(0.95→transparent)으로 텍스트-이미지 자연 병합; accent-bar 디테일 |
| DQ-04 | 피드 차별화 | 8/10 | 가로형 특성 활용한 좌우 분할은 효과적이나, 1080 대비 차별화 포인트가 레이아웃 변환 이외 부재 |
| DQ-05 | 감정적 임팩트 | 9/10 | 동일 카피의 가로형 전개; 현대적 오피스 배경이 "전문 금융" 맥락 강화 |
| DQ-06 | 여백/레이아웃 밸런스 | 9/10 | text-area 66% / 이미지 65% 겹침 영역 자연; padding 44px/56px 좌측 여유 적절 |
| DQ-07 | 색상 가시성/조화 | 9/10 | Cream(#FFF8E7) on Navy 17.12:1, Gold on Navy 7.93:1 — 어두운 배경 전환으로 1080 대비율 문제 해소 |
| DQ-08 | 타이포그래피 품질 | 10/10 | 동일 폰트 시스템; 84px/44px/40px 모두 규격 충족; word-break:keep-all 한글 줄바꿈 제어 |
| DQ-09 | CTA 효과성 | 9/10 | 좌정렬 align-self:flex-start로 시선 흐름 종착점 역할; 44px ≥ 40px 규격 준수 |
| DQ-10 | 브랜드 일관성 | 10/10 | 네이비+골드 시스템 동일; 1080→1200 컬러 매핑 완벽 |
| **총점** | | **91/100** | **FAIL** |

**핵심 이슈**: DQ-04 사이즈간 크리에이티브 변주 부족 (레이아웃 변환만 존재)

---

### 3. Cell-4 GA — Meta Feed 1080x1080

| DQ | 항목 | 점수 | 근거 |
|----|------|------|------|
| DQ-01 | 레퍼런스 재현도 | 9/10 | 야경 도시+빨간 조명 배경 — GA 이직 긴장감/도시적 에너지 컨셉 충실 |
| DQ-02 | 시각적 계층 구조 | 9/10 | Badge(40px) → Headline(84px) → CTA(48px); red-glow 레이어로 시선 좌하단→중앙 유도 |
| DQ-03 | 프로 완성도 | 9/10 | dark-overlay(0.48) + red-glow(radial-gradient) + text-panel(0.82) 3중 레이어 정교 |
| DQ-04 | 피드 차별화 | 9/10 | 블랙+레드 강렬 대비는 보험 피드 내 확실한 시선 차단 효과; Cell-1 대비 톤 완전 차별화 |
| DQ-05 | 감정적 임팩트 | 10/10 | "GA 이동 전, 이것부터 확인하세요" — 경고+호기심 듀얼 트리거; 레드 강조로 긴급성 극대화 |
| DQ-06 | 여백/레이아웃 밸런스 | 9/10 | 1080 정방형 중앙 패널 구도; gap 28px 일관; 패널-배경 관계 적절 |
| DQ-07 | 색상 가시성/조화 | 7/10 | White on Red(#EF3B24) CTA/Badge 대비율 3.95:1 — WCAG AA 대형텍스트(3:1) 통과하나 AA Normal(4.5:1) 미달; Red on Black(#0D0D0D) 4.92:1로 양호 |
| DQ-08 | 타이포그래피 품질 | 10/10 | 동일 2종 폰트 시스템; 모든 사이즈 규격 준수; headline .red 강조 효과적 |
| DQ-09 | CTA 효과성 | 9/10 | "조건 비교 지금 확인 →" — 비교 행위+긴급성; 레드 배경+그림자 시각적 돌출감 |
| DQ-10 | 브랜드 일관성 | 10/10 | 블랙(#0D0D0D)+레드(#EF3B24) 컬러 시스템 정확 적용; dark-overlay, red-glow 톤 일관 |
| **총점** | | **91/100** | **FAIL** |

**핵심 이슈**: DQ-07 White on Red 3.95:1 — AA Normal 미달 (Badge/CTA 가독성 리스크)

---

### 4. Cell-4 GA — Google Responsive 1200x628

| DQ | 항목 | 점수 | 근거 |
|----|------|------|------|
| DQ-01 | 레퍼런스 재현도 | 9/10 | 도시 야경 거리뷰, 빨간 신호등/간판 조명 — 광고주 기대 "전문성+긴장감" 충족 |
| DQ-02 | 시각적 계층 구조 | 9/10 | 좌정렬 3단 계층 + accent-bar(Red) 수직 가이드; 가로형 시선 흐름 좌→우 자연 |
| DQ-03 | 프로 완성도 | 9/10 | gradient-overlay 5단계 + red-glow 보조; accent-bar 4px 레드 라인 세밀 |
| DQ-04 | 피드 차별화 | 9/10 | 1080→1200 전환시 배경 이미지 변경(밤하늘→거리뷰)으로 시각적 신선도 유지 |
| DQ-05 | 감정적 임팩트 | 10/10 | 동일 카피; 가로 레이아웃에서 "이것부터" 레드 강조가 더 크게 시야 차지 |
| DQ-06 | 여백/레이아웃 밸런스 | 9/10 | text-area 66% + padding 56px 좌측; 이미지 65% 우측 배치 균형 |
| DQ-07 | 색상 가시성/조화 | 7/10 | 동일 White/Red 대비율 이슈 (3.95:1); 다만 어두운 gradient 배경 위 텍스트 White on Dark는 19.44:1로 우수 |
| DQ-08 | 타이포그래피 품질 | 10/10 | 84px/44px/40px 규격 전체 충족; 가로형에서 줄바꿈 3행 처리 적절 |
| DQ-09 | CTA 효과성 | 9/10 | 좌정렬 CTA align-self:flex-start; 44px w700 규격 충족; box-shadow 적용 |
| DQ-10 | 브랜드 일관성 | 10/10 | 블랙+레드 시스템 1080→1200 완벽 이관 |
| **총점** | | **91/100** | **FAIL** |

**핵심 이슈**: DQ-07 동일 — White on Red CTA/Badge 대비율 3.95:1

---

### 5. Cell-7 SNU — Meta Feed 1080x1080

| DQ | 항목 | 점수 | 근거 |
|----|------|------|------|
| DQ-01 | 레퍼런스 재현도 | 9/10 | 고급 서재/도서관 배경 — "서울대보험쌤" 학구적+신뢰 컨셉 정확 재현 |
| DQ-02 | 시각적 계층 구조 | 9/10 | Badge(40px) → Headline(84px) → CTA(48px) 3단; 크림 패널 중앙 배치로 시선 집중 |
| DQ-03 | 프로 완성도 | 9/10 | Cell-1과 동일 패널 구조이나 브라운 오버레이(rgba 62,39,35,0.58)로 톤 차별화; backdrop-filter 일관 |
| DQ-04 | 피드 차별화 | 7/10 | Cell-1 인카 1080과 구조적으로 거의 동일 (크림패널 중앙 정렬); 컬러만 골드→카라멜 변경; 동일 계열 3셀 내 혼동 위험 |
| DQ-05 | 감정적 임팩트 | 10/10 | "3년째 참았던 수수료, 저는 바꿨어요" — 개인 스토리텔링+변화 선언; 가장 감정적 호소력 강한 카피 |
| DQ-06 | 여백/레이아웃 밸런스 | 9/10 | 동일 900/1080 패널 비율, gap 28px, padding 64/44px |
| DQ-07 | 색상 가시성/조화 | 8/10 | Caramel(#A0522D) on Cream 5.30:1 — AA Normal 통과; Brown on Cream 13.05:1 우수; White on Caramel CTA 5.62:1 양호 |
| DQ-08 | 타이포그래피 품질 | 10/10 | 동일 폰트 시스템 규격 전체 충족 |
| DQ-09 | CTA 효과성 | 9/10 | "수익 구조 직접 확인 →" — "직접"이 주체성 강조; gradient(#A0522D→#C07540) 카라멜 계열 CTA |
| DQ-10 | 브랜드 일관성 | 9/10 | 브라운(#3E2723)+카라멜(#A0522D) 시스템 준수; 서재 배경과 컬러 톤 매치 우수 |
| **총점** | | **89/100** | **FAIL** |

**핵심 이슈**: DQ-04 Cell-1과 레이아웃 구조 거의 동일 — 피드 차별화 부족

---

### 6. Cell-7 SNU — Google Responsive 1200x628

| DQ | 항목 | 점수 | 근거 |
|----|------|------|------|
| DQ-01 | 레퍼런스 재현도 | 9/10 | 고급 서재+책상+램프 배경; 학구적 전문가 이미지 가로형에서도 유지 |
| DQ-02 | 시각적 계층 구조 | 9/10 | 좌정렬 3단 + accent-bar(카라멜 그라데이션); 가로형 계층 흐름 양호 |
| DQ-03 | 프로 완성도 | 9/10 | gradient-overlay 6단계(0.95→transparent) + accent-bar; 배경-텍스트 병합 세밀 |
| DQ-04 | 피드 차별화 | 7/10 | Cell-1 google-resp와 구조 동일 (좌텍스트+우이미지+accent-bar); 컬러 외 차이 미미 |
| DQ-05 | 감정적 임팩트 | 10/10 | 동일 카피; 가로형에서 "바꿨어요" 카라멜 강조가 3행 독립 배치되어 시각적 무게감 증가 |
| DQ-06 | 여백/레이아웃 밸런스 | 9/10 | text-area 66% + padding 56px; gap 24px 가로형 표준 |
| DQ-07 | 색상 가시성/조화 | 8/10 | #D4956A on Brown(#3E2723) 5.47:1 — AA Normal 통과; Cream on Brown 13.05:1 우수 |
| DQ-08 | 타이포그래피 품질 | 10/10 | 84px/44px/40px 전체 규격 충족; 가로형 3행 줄바꿈 자연스러움 |
| DQ-09 | CTA 효과성 | 9/10 | 동일 CTA; 좌정렬 배치로 시선 종착점 명확 |
| DQ-10 | 브랜드 일관성 | 10/10 | 브라운+카라멜 시스템; 1080→1200 카라멜 강조색 #A0522D→#D4956A 밝기 조정 (어두운 배경 보정)은 적절한 적응 |
| **총점** | | **90/100** | **FAIL** |

**핵심 이슈**: DQ-04 구조적 동질성 — Cell-1 google-resp와 템플릿 차이 미미

---

## 전체 종합 점수

| 배너 | 총점 | 판정 |
|------|------|------|
| Cell-1 Meta 1080x1080 | 89/100 | FAIL |
| Cell-1 Google 1200x628 | 91/100 | FAIL |
| Cell-4 Meta 1080x1080 | 91/100 | FAIL |
| Cell-4 Google 1200x628 | 91/100 | FAIL |
| Cell-7 Meta 1080x1080 | 89/100 | FAIL |
| Cell-7 Google 1200x628 | 90/100 | FAIL |
| **평균** | **90.2/100** | **FAIL** |

---

## 발견된 이슈 목록 (6건)

### ISSUE-1: Gold on Cream 대비율 미달 (심각도: HIGH)
- **위치**: Cell-1 Meta 1080x1080, `.headline .gold` (#C9A84C) on cream panel (#FFF8E7 @0.82 opacity)
- **측정값**: 2.16:1 — WCAG AA Large Text 기준 3:1 미달
- **영향**: "다른가요?" 강조 텍스트 가독성 저하, 특히 모바일 소형 디스플레이
- **수정안**: 골드 강조색을 #8B7328 수준으로 어둡게 조정하거나, 텍스트에 text-shadow 추가

### ISSUE-2: White on Red 대비율 취약 (심각도: MEDIUM)
- **위치**: Cell-4 전체 (1080+1200), `.badge` 및 `.cta-btn` (#FFFFFF on #EF3B24)
- **측정값**: 3.95:1 — WCAG AA Normal(4.5:1) 미달, AA Large(3:1) 통과
- **영향**: Badge 40px 및 CTA 48px는 "대형 텍스트"로 분류되어 기술적으로 통과하나, 40px Badge는 경계선
- **수정안**: 레드를 #D42B17 정도로 어둡게 하면 4.5:1+ 확보 가능

### ISSUE-3: Cell간 레이아웃 구조 동질성 (심각도: MEDIUM)
- **위치**: Cell-1 vs Cell-7, 양쪽 1080 및 1200 모두
- **현상**: 1080 = 동일한 크림패널 중앙정렬, 1200 = 동일한 좌텍스트+우이미지+accent-bar 구조
- **영향**: 피드에서 3개 셀이 동시 노출 시 "같은 광고" 인상; 컬러 외 차별화 요소 부재
- **수정안**: Cell별 패널 위치(상단/하단/좌측), 패널 형태(둥근/각진/무패널), 또는 텍스트 정렬 방향 변주

### ISSUE-4: 서브헤드라인 부재 (심각도: LOW)
- **위치**: 전체 6개 배너
- **현상**: DQ 규칙에 "서브헤드: 64px+ (weight 600-700)" 명시되어 있으나, 실제 구현에는 서브헤드라인 없음; Badge(40px w700)가 서브헤드 역할을 대체
- **영향**: 텍스트 요소 3개(Badge+Headline+CTA) 규격은 충족하나, 64px+ 서브헤드 규격은 미적용
- **수정안**: Badge가 컨텍스트 태그 역할이므로 구조적으로 합리적; 다만 규격 문서와의 정합성 재확인 필요

### ISSUE-5: 전면 불투명 오버레이 경계선 (심각도: LOW)
- **위치**: Cell-1 Google 1200x628, gradient-overlay 좌측 영역
- **현상**: rgba(10,22,40,0.95) 0%~40% 구간 = 사실상 불투명(95%); 규칙 "전면 불투명 오버레이 금지"와의 해석 여지
- **영향**: gradient이므로 "전면"은 아님 — 좌측 40%만 해당; 규칙 위반은 아니나 경계선
- **수정안**: 좌측 최대 opacity를 0.90으로 낮추면 안전 마진 확보

### ISSUE-6: CTA 텍스트 내 화살표(→) 렌더링 일관성 (심각도: LOW)
- **위치**: 전체 6개 배너
- **현상**: HTML 엔티티가 아닌 유니코드 화살표(→) 사용; 폰트에 따라 렌더링 차이 가능
- **영향**: Black Han Sans / Pretendard 모두 → 글리프 포함하므로 현재는 문제 없으나, 폰트 변경 시 리스크
- **수정안**: CSS ::after pseudo-element로 SVG 화살표 아이콘 사용 권장

---

## 규격 준수 체크리스트

| 규칙 | 기준 | 실제 | 판정 |
|------|------|------|------|
| 헤드라인 84px+ (w800-900) | 84px, w900 | 84px, w900 | PASS |
| 서브헤드 64px+ (w600-700) | 64px+ | 미사용 (Badge 40px 대체) | WARN |
| CTA 40px+ (w700-800) | 40px+ | 48px(1080) / 44px(1200), w700 | PASS |
| 절대 최소 40px | 40px | Badge 40px = 최소값 정확 일치 | PASS |
| 폰트 최소 2종 | 2종+ | Black Han Sans + Pretendard = 2종 | PASS |
| 텍스트 요소 최대 3개 | ≤3 | Badge + Headline + CTA = 3개 | PASS |
| 전면 불투명 오버레이 금지 | 금지 | gradient/semi-transparent 사용 | PASS |
| 헤드:서브 1.3배+ | 1.3x+ | 84:40 = 2.1x (Badge 기준) | PASS |

---

## 종합 소견

6개 배너 모두 **기본기가 견고**하다. 폰트 시스템(2종), 사이즈 규격(84/48/44/40px), 텍스트 요소 수(3개), 오버레이 처리 모두 DQ 규칙을 준수한다. 카피 품질은 특히 우수하여 Cell-4("이것부터 확인하세요")와 Cell-7("3년째 참았던 수수료, 저는 바꿨어요")이 감정적 훅으로 강력하다.

그러나 **93점 PASS 기준을 충족하는 배너는 0개**다. 핵심 병목은 3가지:

1. **색상 대비율 취약** — Cell-1 골드/크림 2.16:1(WCAG 미달), Cell-4 백/적 3.95:1(경계선). 광고 배너는 다양한 디바이스/밝기에서 소비되므로 대비율 마진이 중요.
2. **셀간 구조 동질성** — Cell-1과 Cell-7이 1080/1200 양쪽 모두 동일 템플릿 구조를 공유. 피드 동시 노출 시 "같은 광고주의 같은 광고"로 인식될 위험.
3. **서브헤드 규격 미적용** — 64px+ 서브헤드라인이 설계에 없음. Badge가 대체하고 있으나 규격 문서와의 gap 존재.

**권고 우선순위**: ISSUE-1(골드 대비율) > ISSUE-3(구조 차별화) > ISSUE-2(레드 대비율) 순으로 수정 시 93점+ 달성 가능성 높음.