# LOKI DQ -- M2 배너 6장 디자인 QC 리포트

**평가자:** 로키 (보안팀/레드팀 팀장, Devil's Advocate)
**평가일:** 2026-04-01
**대상:** M2 GA 그린/화이트 계열 배너 6장

---

## M2-1-1200x628 (GA x 정당한 대우 / 가로)

### DQ-01: 레퍼런스 재현도 -- 1.5/2
- 헤드라인 "GA 수수료 구조, 제대로 비교하세요" 54px Bold #FAFAFA -- 디렉션 일치.
- 서브카피 "같은 일인데 수수료가 다르다면?" 44px Medium #A5D6A7 -- 디렉션 일치.
- 보조 "7월 규제 변화 전 지금 비교하세요" 40px Medium #FAFAFA -- 디렉션 일치.
- 좌측 720px 차콜 그린 #1B3A2D 오버레이 opacity 0.78 -- 그라데이션 fade 적용됨, 디렉션은 단일 opacity를 명시했으나 자연스러운 처리로 수용 가능.
- CTA "GA 비교하기 →" 틸 배경 #00897B, 딥다크그린 #1A3320 텍스트, round 4px -- 일치.
- **감점 요인:** CTA 버튼 높이 56px에 폰트 44px Bold를 넣었는데, 실제 렌더링 결과 CTA 텍스트가 버튼 높이 대비 꽉 차 있어 상하 padding이 거의 없음. CTA가 답답해 보임.

### DQ-02: 텍스트 가독성 -- 2/2
- #FAFAFA(white) on rgba(27,58,45,0.78) 차콜 그린 오버레이: 대비율 약 10:1 이상 -- WCAG AAA 충족.
- #A5D6A7(라이트 그린) on 동일 배경: 대비율 약 5.5:1 -- 44px(대형 텍스트) 기준 4.5:1 초과로 AAA 충족.
- 모든 텍스트 최소 40px, font-weight 최소 500 -- 규격 충족.
- 배경 서류 이미지가 오버레이 뒤에서 적절히 가려져 텍스트 판독에 간섭 없음.

### DQ-03: 레이아웃 밸런스 -- 1.5/2
- 좌측 텍스트 / 우측 이미지(서류+커피+펜) 구성 명확.
- 텍스트 3단 계층(헤드라인-서브-보조) 잘 분리됨.
- **감점 요인:** CTA 버튼 width 200px가 "GA 비교하기 →" 텍스트(44px Bold) 대비 지나치게 좁음. 시각적으로 텍스트가 버튼 양 옆 패딩 없이 꽉 차 있어, 클릭 유도력이 약화됨. 최소 width 260px 또는 padding 0 36px로 auto-width 전환 권장.

### DQ-04: 브랜드 일관성 -- 2/2
- 그린/화이트 계열 M2 컬러 시스템 완벽 준수.
- 차콜 그린 #1B3A2D, 포레스트 그린, 틸 CTA -- 모두 M2-1 디렉션 팔레트 내.
- 브랜드라인 없음 (중립 톤) -- 디렉션 준수. 특정 회사명 미노출.
- 톤앤매너: 정보 비교 유도형, 중립적 -- 적합.

### DQ-05: 프로 완성도 -- 1.5/2
- 전반적으로 깔끔하고 전문적인 느낌.
- 오버레이 그라데이션 fade-out이 자연스러움.
- **감점 요인:** CTA 버튼 내부 텍스트-버튼 비율 문제(위 DQ-03에서도 지적). 56px 높이 버튼에 44px 텍스트는 상하 여백이 6px밖에 안 됨. 프로급 배너에서는 버튼 높이 최소 64px 또는 폰트 36-40px로 조정해야 함.

### 총점: 8.5/10 -- PASS
### 수정 권고 (PASS이나 개선 권장):
```css
/* CTA 버튼: 내부 여백 확보 */
.cta-btn {
  width: auto;
  padding: 0 36px;
  height: 64px;    /* 56px -> 64px */
  font-size: 40px; /* 44px -> 40px */
}
```

---

## M2-1-1080x1080 (GA x 정당한 대우 / 정사각)

### DQ-01: 레퍼런스 재현도 -- 1.5/2
- 전체 차콜 그린 오버레이 opacity 0.62 -- CSS 확인: rgba(27,58,45,0.62) -- 디렉션 일치.
- 헤드라인 62px Bold #FAFAFA -- 디렉션에는 54px로 명시되어 있으나 1080x1080에서 크기 조정은 합리적. 단, 디렉션에 1080 전용 사이즈 미기재이므로 경미한 이탈.
- 서브카피 44px Medium #A5D6A7, 보조 40px Medium #FAFAFA -- 일치.
- CTA 48px Bold -- 1200 버전 대비 적절한 스케일업이나, 디렉션 원본(44px)과 차이.
- 중앙 정렬 레이아웃 -- 1080x1080에 적합한 전환.

### DQ-02: 텍스트 가독성 -- 2/2
- #FAFAFA on rgba(27,58,45,0.62): 배경 서류 이미지 투과 고려 시에도 대비율 충분 (오버레이 뒤 배경이 밝은 서류이므로 effective 배경색이 더 밝아져 white 텍스트 대비율은 약간 낮아질 수 있으나, 여전히 7:1 이상 유지).
- #A5D6A7 서브카피: 44px 대형 텍스트로 4.5:1 이상 충족.
- 모든 텍스트 40px 이상, weight 500 이상 -- 규격 충족.

### DQ-03: 레이아웃 밸런스 -- 2/2
- 중앙 정렬 세로 스택이 1080x1080 포맷에 매우 적합.
- 텍스트 계층 간격(gap 24px) 균일하고 시원함.
- CTA 버튼 300x68px -- 1080 포맷에서 적절한 크기.
- 상하좌우 패딩 96/72px로 충분한 여백 확보.

### DQ-04: 브랜드 일관성 -- 2/2
- 1200x628 버전과 동일한 컬러 시스템 유지.
- 중립 톤 유지, 회사명 미노출.
- 차콜 그린 오버레이로 다크 배경 톤 유지.

### DQ-05: 프로 완성도 -- 1.5/2
- 중앙 정렬 레이아웃이 깔끔하고 모바일 피드에서 잘 작동할 구성.
- **감점 요인:** 오버레이 opacity 0.62가 적용되어 배경 서류 이미지가 상당히 투과되어 보이는데, 시각적으로 서류 위의 체크마크/빨간 필기 등이 텍스트와 시각적으로 경합하는 구간이 존재. 특히 헤드라인 "GA 수수료 구조" 바로 위쪽에 서류 텍스트가 비침. 중대한 문제는 아니나 opacity를 0.68 정도로 미세 상향하면 더 깔끔해짐.

### 총점: 9/10 -- PASS
### 수정 권고 (PASS이나 개선 권장):
```css
/* 배경 비침 최소화: opacity 미세 상향 */
.overlay-full {
  background: rgba(27, 58, 45, 0.68); /* 0.62 -> 0.68 */
}
```

---

## M2-2-1200x628 (GA x 관리자 비전 / 가로)

### DQ-01: 레퍼런스 재현도 -- 2/2
- 배경: 오픈 오피스 + 서있는 인물(랩톱 사용) -- 디렉션 "서있는 리더" 부합.
- 좌측 660px 미드 그린 #2D5016 오버레이 opacity 0.72 -- CSS 확인 일치.
- 헤드라인 "GA 지점장, 가장 빠른 경로 안내" 54px Bold #FAFAFA -- 일치.
- 지원 "교육 | 인프라 | 운영 지원" 44px Medium #A5D6A7 -- 일치.
- 보조 "독립 운영 + GA의 안정적 지원" 40px Medium #FAFAFA -- 일치.
- CTA "지점장 경로 확인 →" 포레스트 그린 #2E7D32, 화이트 #FAFAFA 텍스트, round 4px -- 일치.
- 우측에 인물이 자연스럽게 노출, 좌측 오버레이가 텍스트 배경 역할 수행.

### DQ-02: 텍스트 가독성 -- 2/2
- #FAFAFA on rgba(45,80,22,0.72) 미드 그린 오버레이: 대비율 약 9:1 이상 -- WCAG AAA 충족.
- #A5D6A7 on 동일 배경: 44px 대형으로 4.5:1 이상 충족.
- CTA: #FAFAFA on #2E7D32 -- 대비율 약 6.5:1 -- 44px 대형 텍스트 기준 AAA(4.5:1) 충족.
- 모든 텍스트 40px 이상, weight 500 이상.

### DQ-03: 레이아웃 밸런스 -- 1.5/2
- 좌측 텍스트 / 우측 인물 구성 자연스러움.
- 텍스트 3단 계층 깔끔.
- **감점 요인:** CTA 버튼 width 240px, height 56px에 44px Bold 텍스트. "지점장 경로 확인 →"은 한글 8글자+화살표로 240px 안에 꽉 차게 들어감. M2-1과 동일한 버튼-텍스트 비율 문제. 좌우 패딩이 사실상 없어 보임. 또한 하단 아주 작은 회색 텍스트("이미지 출처: 실시, 그라스그래픽의 사진")가 보이는데, 이는 배경 이미지 크레딧으로 보이며 의도된 것이나 가독성/미관 측면에서 불필요한 noise.

### DQ-04: 브랜드 일관성 -- 2/2
- 미드 그린 #2D5016 오버레이 -- M2-2 전용 컬러로 디렉션 일치.
- 포레스트 그린 CTA -- M2-2 전용 CTA 스타일.
- 전체적으로 M2 그린/화이트 톤앤매너 유지.
- 중립 톤, 회사명 미노출.

### DQ-05: 프로 완성도 -- 2/2
- 오피스 환경 + 서있는 리더 이미지가 "관리자 비전" 콘셉트와 잘 맞음.
- 오버레이 그라데이션 fade가 인물과 자연스럽게 연결됨.
- 텍스트-이미지 간 겹침 없음.
- 전문적이고 신뢰감 있는 인상.

### 총점: 9.5/10 -- PASS
### 수정 권고 (PASS이나 개선 권장):
```css
/* CTA 버튼 내부 여백 확보 */
.cta-btn {
  width: auto;
  padding: 0 32px;  /* 고정 width 240px -> auto + padding */
  height: 64px;     /* 56px -> 64px */
  font-size: 40px;  /* 44px -> 40px */
}
```
하단 이미지 크레딧 텍스트 제거 또는 배경에 완전히 가리기 권장.

---

## M2-2-1080x1080 (GA x 관리자 비전 / 정사각)

### DQ-01: 레퍼런스 재현도 -- 2/2
- 그라데이션 오버레이: 상단 #2D5016 opacity 0.71 -> 하단 투명 -- CSS 확인 일치.
- 하단에 인물(서있는 리더)이 노출되는 구성 -- 디렉션 의도 충족.
- 헤드라인 60px Bold #FAFAFA -- 디렉션 "60px(1080)" 일치.
- 지원 44px Medium #A5D6A7, 보조 40px Medium #FAFAFA -- 일치.
- CTA 포레스트 그린 #2E7D32, 화이트 텍스트, round 4px -- 일치.

### DQ-02: 텍스트 가독성 -- 1.5/2
- 상단 오버레이 영역 텍스트: #FAFAFA on rgba(45,80,22,0.71) -- 대비율 충분.
- **감점 요인:** 시각적으로 확인했을 때 CTA "지점장 경로 확인 →" 버튼이 그라데이션의 중간 지대(opacity가 0.71에서 0.35로 전환되는 영역)에 위치. 이 위치에서 버튼 자체는 #2E7D32 solid 배경이므로 텍스트 가독성에는 문제 없으나, 보조 텍스트 "독립 운영 + GA의 안정적 지원"이 #FAFAFA white인데 그라데이션 전환 구간에서 배경이 반투명해져 뒤의 밝은 오피스 이미지가 비침. 밝은 배경 + 흰색 텍스트는 대비율이 떨어질 수 있음. 실제 렌더링에서 보조 텍스트 줄은 아직 충분히 진한 오버레이 영역에 있어 임계선상.

### DQ-03: 레이아웃 밸런스 -- 2/2
- 상단 텍스트 + 하단 인물 배경 노출 구성이 1080x1080에 최적.
- 그라데이션 전환이 인물의 상체-하체 경계에서 자연스러움.
- CTA 340x68px -- 1080 포맷에 적절한 크기.
- 텍스트-인물 겹침 없음 (인물은 하단, 텍스트는 상단).

### DQ-04: 브랜드 일관성 -- 2/2
- 1200x628 버전과 동일한 미드 그린 컬러 시스템.
- 포레스트 그린 CTA 유지.
- 중립 톤, 회사명 미노출.

### DQ-05: 프로 완성도 -- 2/2
- 그라데이션 투명도 전환이 매우 자연스러움.
- 상단 텍스트 영역 / 하단 이미지 영역이 명확히 분리되면서도 유기적으로 연결.
- 전문적이고 세련된 느낌. M2 6장 중 가장 완성도 높음.

### 총점: 9.5/10 -- PASS
### 수정 권고 (PASS이나 개선 권장):
보조 텍스트가 그라데이션 전환 구간에 걸리지 않도록 content-area padding-top을 약간 줄이거나, 그라데이션의 solid 구간을 50%까지 확장 검토:
```css
.overlay-top {
  background: linear-gradient(
    to bottom,
    rgba(45, 80, 22, 0.71) 0%,
    rgba(45, 80, 22, 0.71) 50%,  /* 45% -> 50% */
    rgba(45, 80, 22, 0.35) 72%,
    rgba(45, 80, 22, 0.0) 100%
  );
}
```

---

## M2-3-1200x628 (GA x 영업지원 / 가로)

### DQ-01: 레퍼런스 재현도 -- 2/2
- 배경: 소규모 협업 팀(노트북 앞에 앉아있는 남녀) -- 디렉션 "소규모 협업 팀" 부합.
- 좌측 720px 라이트 그린 #E8F5E9 패널 opacity 0.80 -- CSS 확인 일치.
- 헤드라인 "영업이 힘들다면, 시스템 있는 GA로" 52px Bold #2E7D32 -- 디렉션 "52px(1200)" 일치.
- 지원 "DB 제공 | 교육 | 함께 성장" 44px Medium #546E7A -- 일치.
- 보조 "혼자 뛰지 않는 보험영업 구조" 40px Medium #2E7D32 -- 일치.
- CTA "영업지원 GA 알아보기 →" 틸 배경 #00897B, 딥다크그린 #1A3320 텍스트, round 8px -- 일치.

### DQ-02: 텍스트 가독성 -- 1.5/2
- #2E7D32(포레스트 그린) on rgba(232,245,233,0.80) 라이트 그린 패널: 이 조합이 문제. #E8F5E9는 매우 밝은 연두색이고 #2E7D32는 중간 톤 녹색. 대비율 계산: #2E7D32의 상대 휘도 약 0.148, #E8F5E9의 상대 휘도 약 0.855. 대비율 = (0.855+0.05)/(0.148+0.05) = 약 4.57:1. 52px 대형 텍스트 기준 WCAG AAA는 4.5:1이므로 간신히 통과하나, 배경에 이미지가 투과되는 영역에서는 effective 대비가 변동될 수 있음.
- #546E7A(쿨 그레이) on 동일 배경: 대비율 약 4.2:1 -- 44px 대형 기준 AAA(4.5:1) **미달**. AA(3:1) 수준에는 충족.
- **감점 요인:** 서브카피 #546E7A의 대비율이 AAA 기준 미달. 밝은 라이트 그린 패널 위에서 쿨 그레이가 충분한 대비를 확보하지 못함.

### DQ-03: 레이아웃 밸런스 -- 2/2
- 좌측 텍스트 / 우측 협업 장면 구성 명확.
- 라이트 그린 패널이 밝은 톤으로 전체적으로 따뜻하고 친근한 느낌.
- CTA auto-width + padding 36px -- 적절한 크기감.
- 텍스트 계층 간격 균일.

### DQ-04: 브랜드 일관성 -- 2/2
- M2-3 밝은 톤 디렉션 정확히 재현.
- 포레스트 그린 텍스트 + 쿨 그레이 서브 + 틸 CTA -- M2-3 컬러 팔레트 일치.
- 중립 톤 유지, 회사명 미노출.
- canvas border-radius 8px -- 디렉션에 별도 명시 없으나 M2-3 CTA round 8px와 톤 매칭으로 수용.

### DQ-05: 프로 완성도 -- 2/2
- 밝은 톤 배너로서 따뜻하고 접근 가능한 느낌.
- 라이트 그린 패널 fade-out이 자연스러움.
- 배경 인물(협업 팀)과 텍스트 영역이 잘 분리됨.
- CTA "영업지원 GA 알아보기 →"가 주목성 충분.

### 총점: 9.5/10 -- PASS
### 수정 권고 (PASS이나 개선 권장):
```css
/* 서브카피 대비율 AAA 충족을 위해 쿨 그레이 진하게 조정 */
.subcopy {
  color: #455A64; /* #546E7A -> #455A64 (한 단계 진한 쿨 그레이) */
}
```
#455A64 상대 휘도 약 0.094, 대비율 = (0.855+0.05)/(0.094+0.05) = 약 6.28:1 -- AAA 충족.

---

## M2-3-1080x1080 (GA x 영업지원 / 정사각)

### DQ-01: 레퍼런스 재현도 -- 2/2
- 전체 라이트 그린 #E8F5E9 오버레이 opacity 0.35 -- CSS 확인 일치.
- 배경 협업 팀 장면이 잘 보임 -- 디렉션 "배경 인물 보여야 함" 충족.
- 헤드라인 58px Bold #2E7D32 -- 디렉션 "58px(1080)" 일치.
- 서브카피 44px Medium #546E7A, 보조 40px Medium #2E7D32 -- 일치.
- CTA 틸 배경, 딥다크그린 텍스트, round 8px -- 일치.
- 중앙 정렬 레이아웃.

### DQ-02: 텍스트 가독성 -- 1/2
- **심각한 감점:** opacity 0.35의 매우 얇은 오버레이 위에 텍스트가 놓임. 배경 이미지(노트북, 인물, 테이블 등)가 강하게 투과됨.
- #2E7D32(포레스트 그린) on 반투명 라이트 그린(0.35) + 실제 배경: 배경이 밝은 영역(흰 셔츠, 밝은 벽)에서는 대비율이 급격히 낮아짐. 시각적으로 확인했을 때 헤드라인은 배경 이미지와 경합하여 가독성이 저하됨.
- #546E7A(쿨 그레이) 서브카피: 배경 투과 상태에서 더 심각. 쿨 그레이가 배경 이미지 속 중간 톤과 뒤섞여 판독이 어려운 구간 존재.
- 시각적으로 "DB 제공 | 교육 | 함께 성장" 줄이 배경 인물의 어깨/팔 영역과 겹치며 가독성 저해.
- 디렉션 자체가 opacity 0.35를 지정했으므로 재현은 맞으나, 결과적으로 가독성 문제 발생.

### DQ-03: 레이아웃 밸런스 -- 1.5/2
- 중앙 정렬 세로 스택 레이아웃 자체는 적절.
- **감점 요인:** 텍스트-인물 겹침 발생. 중앙 정렬된 텍스트가 배경 인물들과 겹침. 특히 서브카피와 보조 텍스트 줄이 인물의 상체 영역에 걸침. 노하우 문서 "텍스트-인물 겹침 주의 (특히 1080x1080)" 규칙에 저촉.

### DQ-04: 브랜드 일관성 -- 2/2
- 1200x628 버전과 동일한 M2-3 밝은 톤 컬러 시스템.
- 라이트 그린 오버레이 + 포레스트 그린 텍스트 + 틸 CTA 유지.
- 중립 톤, 회사명 미노출.

### DQ-05: 프로 완성도 -- 1/2
- **감점 요인:** 전체적으로 배경과 텍스트의 분리가 불충분하여 "아마추어 합성" 느낌이 남. 0.35 opacity는 디렉션 지시사항이나, 실제 결과물에서 텍스트 판독성과 시각적 정돈감이 부족.
- 특히 Google Ads 모바일 피드에서 축소 표시될 때 가독성이 더 악화될 수 있음.
- 같은 M2-3 세트의 1200x628 버전과 비교 시 완성도 격차가 크게 느껴짐.

### 총점: 7.5/10 -- CONDITIONAL PASS
### 수정 지시 (CONDITIONAL PASS -- 수정 권고):
**방법 1: 텍스트 영역 배경 강화 (권장)**
```css
/* 텍스트 영역에 반투명 배경 패널 추가 */
.content-area {
  /* 기존 속성 유지하되 아래 추가 */
}

/* 텍스트 그룹을 감싸는 반투명 패널 신규 추가 */
.text-panel {
  background: rgba(232, 245, 233, 0.55);
  border-radius: 12px;
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
```
HTML 구조 변경:
```html
<div class="content-area">
  <div class="text-panel">
    <div class="headline">...</div>
    <div class="subcopy">...</div>
    <div class="aux-info">...</div>
    <div class="cta-btn">...</div>
  </div>
</div>
```

**방법 2: 전체 오버레이 opacity 상향 (간단)**
```css
.overlay-full {
  background: rgba(232, 245, 233, 0.55); /* 0.35 -> 0.55 */
}
```
단, 방법 2는 디렉션 스펙(0.35)을 벗어나므로 디자인 디렉터 승인 필요. 배경 인물 가시성과 텍스트 가독성의 트레이드오프.

**방법 3: 서브카피 색상 진하게 (최소 수정)**
```css
.subcopy {
  color: #37474F; /* #546E7A -> #37474F */
}
.headline, .aux-info {
  color: #1B5E20; /* #2E7D32 -> #1B5E20 (한 단계 진한 그린) */
}
```

---

# 종합 요약

| 배너 | DQ-01 | DQ-02 | DQ-03 | DQ-04 | DQ-05 | 총점 | 판정 |
|------|-------|-------|-------|-------|-------|------|------|
| M2-1-1200x628 | 1.5 | 2.0 | 1.5 | 2.0 | 1.5 | **8.5** | PASS |
| M2-1-1080x1080 | 1.5 | 2.0 | 2.0 | 2.0 | 1.5 | **9.0** | PASS |
| M2-2-1200x628 | 2.0 | 2.0 | 1.5 | 2.0 | 2.0 | **9.5** | PASS |
| M2-2-1080x1080 | 2.0 | 1.5 | 2.0 | 2.0 | 2.0 | **9.5** | PASS |
| M2-3-1200x628 | 2.0 | 1.5 | 2.0 | 2.0 | 2.0 | **9.5** | PASS |
| M2-3-1080x1080 | 2.0 | 1.0 | 1.5 | 2.0 | 1.0 | **7.5** | CONDITIONAL PASS |

### 전체 판정

- **PASS:** 5장 (M2-1 양쪽, M2-2 양쪽, M2-3-1200x628)
- **CONDITIONAL PASS:** 1장 (M2-3-1080x1080)
- **FAIL:** 0장

### 공통 이슈 패턴
1. **CTA 버튼 내부 여백 부족** -- M2-1, M2-2의 1200x628 버전에서 height 56px + font-size 44px 조합이 상하 패딩 6px만 남김. 전체적으로 CTA 높이 64px 이상 또는 font-size 40px 이하로 조정 권고.
2. **M2-3 1080x1080 가독성** -- opacity 0.35 디렉션 자체가 텍스트 가독성과 충돌. 텍스트 배경 패널 추가 또는 opacity 상향 필요.
3. **서브카피 #546E7A 대비율** -- M2-3 밝은 배경에서 WCAG AAA 미달 (4.2:1). #455A64 이상으로 조정 권고.

---

*LOKI -- Devil's Advocate Protocol. Fantasy Approval 방지를 위해 최소 1개 이상의 이슈를 모든 배너에서 식별함.*
*"완벽한 배너는 없다. 더 나은 배너만 있을 뿐."*