# Loki 약점 분석 — Meta A그룹 Cycle 6
**날짜**: 2026-03-29
**분석자**: Loki (레드팀 Devil's Advocate)
**대상**: A-group-v6 Cycle 6 수정 3건 + 전체 5장 이미지 검증

---

## 요약

| 심각도 | 건수 |
|--------|------|
| CRITICAL | 2 |
| HIGH | 3 |
| MEDIUM | 3 |
| LOW | 2 |

---

## CRITICAL (수정 필수)

### C-1. A-2 하단 글래스모피즘 제거 — 배경과 텍스트 경계 붕괴

**코드**: `_a2_problem_template.html` L170–177 `.subcopy-wrap`

**설명**:
A-2 배경은 "비 오는 밤 사무실 창가 실루엣" — 중간~하단 구간에 외부 야경 빛과 실루엣이 분포한다. 하단 그라데이션 (`rgba(4, 5, 10, 0.00) 0% → 0.97 100%`)의 시작 지점(y=678, 비율 62.8%)이 텍스트 영역 시작점(bottom-zone top: 678px)과 동일하므로 **텍스트 상단부(678~780px 구간)는 그라데이션 opacity가 0.00~0.78에 불과**하다.

이미지에서 확인: 하단 서브카피 2줄이 배경의 실루엣 영역 위에 직접 얹혀 있고, 글래스 카드가 없어 텍스트-배경 경계가 모호하다. 실패패턴 #5("텍스트 영역에 반투명 오버레이 확보") 및 성공패턴 #7 위반.

**근거(정량적)**:
- subcopy-line1 top 위치: 1080 - 72(bottom) - 42(line-height×2줄≈135px) ≈ y=873px
- y=873 기준 overlay-dark opacity: `0.42+(0.96-0.42)×(873/1080)` ≈ 0.56 (배경이 절반 이상 비침)
- 이전 Cycle 5까지 있던 glass-sub 카드는 `background: rgba(8,10,18,0.20) + blur(18px)`로 텍스트를 보호했음
- 이미지 확인: 하단 텍스트 배경이 단순 검정 그라데이션이고 실루엣이 배어들어 가독성 저하 명확

**성공패턴 #9 적용 오류**:
성공패턴 #9 조건 (a) "텍스트 색상이 배경과 충돌하여 가독성 저하 시"에 해당함에도 "배경이 단순하다"고 판단한 것은 과도한 적용. A-2 배경은 그라데이션 밀도가 낮은 상단과 달리 하단은 야경 빛이 남아 있어 "단순 배경" 조건을 충족하지 못함.

**권장 조치**: glass-sub 카드 복원. 단, opacity를 0.15로 낮춰 과도한 불투명 방지.

---

### C-2. A-4 top-zone 높이 162px→80px 수정 — headline-zone 상향 이동으로 카드 잘림 재발 위험

**코드**: `_a4_proof_template.html` L89–96 `.top-zone { height: 80px; }`
`.content { padding: 48px 68px 52px 68px; }` (L86–88)

**설명**:
top-zone 높이를 162px에서 80px로 줄여서 전체 flex 컬럼의 상단 공간을 82px 축소했다. 그 결과 cards-zone(`flex: 1`)이 더 많은 공간을 차지하게 되어 quote-card 2장이 더 커지거나 더 아래로 밀린다. 문제는 **bottom-zone에 `margin-top: 24px` + `padding-bottom: 52px`(content)가 여전히 유지**되어 있다는 점이다.

이미지 확인: A-4 이미지에서 하단 귀속문("서울대보험쌤 팀의 5가지 시스템...") 텍스트가 캔버스 하단에 매우 근접하게 붙어 있다. 폰트 40px × line-height 1.55 = 62px 높이 + margin/padding = 실제로 bottom-divider + bottom-attribution 전체 높이 ≈ 1+18+62=81px인데, content padding-bottom 52px를 감안하면 bottom-attribution은 y≈947~1028px에 위치. **1080px 기준 하단 52px 이내에 텍스트가 걸친다.**

**근거(정량적)**:
- content 하단 padding: 52px (Cycle 6 미수정 — bottom-zone 수정은 A-5만 해당)
- bottom-attribution 예상 bottom edge: 1080 - 52(padding) ≈ y=1028px
- bottom-attribution 높이: font-size 40px × line-height 1.55 × 2줄 + divider 1px + margin 18px ≈ 143px
- 따라서 top edge ≈ y=885px → bottom edge ≈ y=1028px (캔버스 끝 기준 52px 여백만 남음)
- **이미지에서 실제 확인: 귀속문이 캔버스 가장자리에 거의 닿아 있음**

**권장 조치**: content `padding-bottom`을 52px → 36px로 소폭 조정하거나, bottom-zone `margin-top: 24px`를 12px로 감소.

---

## HIGH (권장 수정)

### H-1. A-1 하단 glass-card 제거 판단 — 성공패턴 #9 조건 (c) 미충족 검증 부재

**코드**: `_a1_hook_template.html` L175–183 `.subcopy-wrap` (glass-card 제거 코멘트)

**설명**:
A-1 배경은 "야경 + 노트북 + 서류 더미" 포토리얼 이미지. 하단 그라데이션 opacity가 0.88~0.97로 충분히 어둡다는 판단은 **중간 구간(0.88 시작점)이 bottom-zone top(y=702) 기준 35% 이후인 y=808px에 해당**하므로 y=702~808px 구간은 그라데이션이 0.0→0.88 전환 중이다.

subcopy-wrap의 bottom: 72px 기준 실제 텍스트 top ≈ y=873px로, 이 시점 그라데이션은 충분히 어둡다. 이미지 A-1 확인 시 텍스트 가독성은 육안상 허용 범위이나, 배경의 야경 빛(도시 불빛)이 하단까지 연장될 경우 **대비율 위협**이 존재한다.

**근거(정량적)**:
- subcopy font-color: `rgba(226,228,238,0.92)` — 밝은 회색
- bottom-gradient at y=873: `rgba(3,5,12,0.88)` 이상 (이미지 실제 배경 포함)
- 대비율: 밝은 텍스트 on 다크 배경 ≈ 안전하나 **야경 빛 빔이 하단 침범 시 7:1 미달 위험**
- 이미지 확인: A-1 하단 텍스트는 현재는 가독 가능이나 배경 이미지 교체/재생성 시 리스크 발생

**권장 조치**: 즉각 수정 불필요이나, 배경 이미지 변경 시 glass-card 복원 여부 재검토 필요. 현재 이미지 기준으로는 LOW로 하향 가능.

---

### H-2. A-3 `.bottom-zone` 글래스모피즘 — opacity 0.97 규정 이탈 (실패패턴 #21)

**코드**: `_a3_solution_template.html` L161 `.bottom-zone { background: rgba(4, 8, 22, 0.97); }`

**설명**:
실패패턴 #21: "glassmorphism 카드 opacity 규정 이탈 — 규정 0.15~0.30인데 0.97이면 불투명(글래스모피즘 아님)." A-3의 bottom-zone은 `background: rgba(4, 8, 22, **0.97**)` — 즉 알파값 0.97로 사실상 불투명 검정 박스다. backdrop-filter blur(12px)가 있어도 배경이 거의 보이지 않으므로 이는 **글래스모피즘이 아니라 불투명 패널**이다.

성공패턴 #9 "A-3/A-4/A-5 유지"로 Cycle 6에서 이 카드는 수정 범위에 들어가지 않았지만, Cycle 6 이후 처음 전체 검수하는 시점에서 기존 위반이 잔존함을 확인.

**근거(정량적)**:
- 규정 범위: 0.15–0.30 (가독성 문제 시 최대 0.50까지 허용)
- 실제값: 0.97 — 규정 상한(0.50) 대비 **+94%p 초과**
- 이미지 A-3 확인: 하단 카드가 완전 검정 배경으로 보임 (배경 전혀 비치지 않음)

**권장 조치**: `rgba(4, 8, 22, 0.97)` → `rgba(4, 8, 22, 0.82)` 로 조정. A-3 하단 밝은 크림 그라데이션 위이므로 과도하게 어두우면 불일치감.

---

### H-3. A-5 content 레이아웃 — .content에 brand-logo 섹션이 코드에 있으나 HTML에서 비어 있음

**코드**: `_a5_cta_template.html` L107–121 `.brand-logo` CSS 정의, L313 `<!-- 로고 제거 (Cycle 5) -->` 주석

**설명**:
`.brand-logo` CSS 클래스가 정의되어 있고 `margin-top: 48px`, `flex-shrink: 0`이 지정되어 있지만, HTML에서는 실제 `.brand-logo` div가 없다. 그러나 `.content`는 `flex-direction: column`이므로 **`.brand-logo` 미존재로 인해 `.headline-section`이 예상보다 위로 올라가는 레이아웃 변화**가 발생한다.

또한 `.brand-logo img { height: 68px }`와 `margin-top: 48px`에 해당하는 총 116px 공간이 계획에서 제거되었음에도, `.headline-section`의 `margin-top: -14px` 조정이 이 116px 감소를 **완전히 보상하지 못한다** (단 14px만 보상). 이로 인해 headline-section이 과도하게 상단으로 올라가 있다.

**근거(정량적)**:
- 제거된 brand-logo 높이: 68px + margin-top 48px = 116px
- headline-section margin-top 보정: -14px
- **미보상 공간: 102px** — headline이 계획된 위치보다 100px 위에 표시됨
- 이미지 A-5 확인: 헤드라인 패널이 중앙이 아닌 상단 쪽에 치우쳐 배치되어 하단 CTA와의 여백이 과소

**권장 조치**: `.headline-section`의 `margin-top: -14px` → `margin-top: -88px` 또는 `padding-top`을 통해 실질적 중앙 정렬 보정.

---

## MEDIUM (기존 이슈)

### M-1. A-4 `.headline .gold` — #C9A84C on 밝은 크림 배경 대비율 미달 (실패패턴 #12, 성공패턴 #11 미적용)

**코드**: `_a4_proof_template.html` L141–143
```css
.headline .gold { color: #C9A84C; }
```

**설명**:
성공패턴 #11 "밝은 배경에서 골드 강조색은 다크 골드(#A07828)로 변경 — #A07828이 7.1:1 달성"이라고 명시되어 있음에도 A-4 headline `.gold`는 여전히 `#C9A84C`를 사용. A-5는 `#A07828`로 수정되어 있는데 A-4는 누락.

**근거(정량적)**:
- `#C9A84C` on `#F5F0E8(크림)` 대비율: ~3.5:1 (WCAG AA 미달, AAA 기준 4.5:1 미달)
- `#A07828` on 크림 대비율: ~7.1:1 (AAA 충족)
- A-5와 동일 밝은 배경임에도 gold 컬러가 불일치

**권장 조치**: `.headline .gold` → `color: #A07828`으로 변경. Cycle 7 반영.

---

### M-2. A-4 `.quote-card .attr-name` — #C9A84C 동일 문제

**코드**: `_a4_proof_template.html` L222–226
```css
.attr-name { color: #C9A84C; }
```

**설명**:
M-1과 동일한 맥락. 인용 카드 배경이 `rgba(255,255,255,0.85)` 거의 흰색이므로 `#C9A84C` on 흰색 대비율 ≈ 2.9:1. 이름 태그 가독성 저하.

**근거(정량적)**:
- `#C9A84C` on `rgba(255,255,255,0.85)` ≈ 2.9:1 — WCAG AA(3:1) 미달
- font-size 40px은 대형 텍스트(18pt 이상)이므로 AA 기준 3:1 적용, 미달임

**권장 조치**: `.attr-name` → `color: #A07828`.

---

### M-3. A-3 `.eyebrow` CSS 잔존 — 미사용 클래스 (수정 범위 외 변경 위반 아님, 단 코드 오염)

**코드**: `_a3_solution_template.html` L121–129 `.eyebrow { font-size: 42px; ... }`

**설명**:
`.eyebrow` CSS가 정의되어 있으나 HTML에 `<div class="eyebrow">` 요소가 없다. 실패패턴 #20 "광고 내부 레이블 노출" 방지를 위해 이전 Cycle에서 제거된 것으로 보이지만 CSS는 잔존. 직접적 렌더링 문제는 없으나 코드 관리 품질 저하.

**근거**: HTML 내 `.eyebrow` 클래스 참조 0건 (L239–268 HTML 섹션 전체 검색).

**권장 조치**: CSS에서 `.eyebrow` 블록 삭제.

---

## LOW (참고)

### L-1. 수정 범위 외 변경 없음 — "나머지 수정 금지" 준수 확인

A-3 코드: Cycle 6에서 수정 없음 — 코드 동일성 확인.
A-1, A-2 하단 글래스 제거 외 변경 없음.
A-4 top-zone 수정만 수행.
A-5 bottom-section 패딩/갭/CTA 패딩만 수정.
범위 외 변경 없음으로 판정.

---

### L-2. A-3 `.brand-badge` 내 `.badge-logo img` — 로고 없는 빈 img 태그 위험

**코드**: `_a3_solution_template.html` L80–97 `.brand-badge`

**설명**:
`.brand-badge`가 CSS에 정의되어 있고 Cycle 5에서 로고 제거 이후 내부 콘텐츠 없이 빈 div만 남아 있다. `img` 태그가 없어 렌더링 오류는 없으나 상단에 빈 badge 박스(`background: rgba(13,30,58,0.65)` + border)가 표시될 수 있다. 이미지 A-3 확인 시 상단 좌측에 아무것도 없으므로 top-zone 자체가 비어 있어 문제는 없음.

**권장 조치**: `.brand-badge` CSS + 관련 HTML div 모두 제거하여 코드 정리.

---

## 실패패턴 21가지 위반 매핑

| 패턴 | 위반 여부 | 해당 슬라이드 |
|------|-----------|---------------|
| #5 글자 겹침/중복 | 주의 (A-2 하단 글래스 제거) | A-2 → C-1 |
| #12 포인트 컬러 배경 동조 | A-4 gold on cream | A-4 → M-1, M-2 |
| #17 최소 폰트 40px | 미위반 (전부 40px+) | — |
| #18 얇은 폰트+낮은 대비 | 미위반 | — |
| #19 CTA 흰색 텍스트 on 밝은 골드 | 수정 완료 (#1A0E00) | A-5 ✓ |
| #20 내부 레이블 노출 | 수정 완료 | — ✓ |
| #21 glassmorphism opacity 이탈 | A-3 bottom-zone 0.97 | A-3 → H-2 |

---

## 종합 판정

Cycle 6 수정 3건 중:
- **A-1 글래스 제거**: 현재 이미지 기준 허용 범위 (배경이 어두운 그라데이션으로 커버됨). 단, 배경 교체 시 위험.
- **A-2 글래스 제거**: **부적절** — 배경 복잡도가 "단순" 기준 미충족. glass-sub 복원 권장. → C-1
- **A-4 top-zone 수정**: 하단 귀속문 위치가 경계에 근접. → C-2
- **A-5 신뢰 앵커 수정**: 시각적으로 개선됨. 이미지 확인 시 CTA+신뢰 앵커 모두 표시됨. ✓

**가장 시급한 조치**: C-1(A-2 glass-sub 복원) → C-2(A-4 padding 조정) → H-2(A-3 opacity 수정) → M-1/M-2(A-4 gold 컬러)