# 디자인 QC 노하우 (Design QC Know-How)

> **용도**: DQ 10항목 평가 기준 및 체크리스트
> **범위**: 광고 배너 이미지의 DQ(Design Quality) 100점 평가 시스템. DQ-01~DQ-10 항목별 성공/실패 패턴 + QC 피드백 로그 + Supanova Pre-flight 체크리스트.
> **대상 사용자**: QC 담당자 + 디자인팀 (배너 품질 평가/개선 시)
> **갱신 규칙**: 매 QC FAIL 시 아래 테이블에 항목 추가. Phase 1(카피/기획), Phase 3(디자인 실행) 시작 시 필독.

---

## 사용 방법

- 매 QC FAIL 시 아래 테이블에 항목 추가
- 날짜, 앵글, 실패 원인, 수정 방법 포함
- 다음 작업 시 필독하여 동일 실수 방지

---

## DQ 항목별 93점+ 달성 패턴

> task-1331.1에서 18/18장 93점+ 달성 시 축적된 DQ 항목별 성공/실패 패턴입니다.
> "이렇게 하면 PASS" 성공 패턴을 먼저 확인하고, 실패 패턴으로 검증하세요.

### DQ-01 레퍼런스 재현도 (10점 만점)
- **성공 (10/10)**: 서재/스터디 + 소품(램프, 책, 노트북) 디테일이 "전문가" 이미지 강화. 카메라 50mm 등가, 자연 실내 조명 + 따뜻한 색온도. m3-1 (97점) — "프리미엄 금융 광고의 교과서적 구성"
- **성공 (9/10)**: 모던 오피스/회의실 배경 + 반투명 오버레이 구조. 실제 사무 환경 분위기가 타겟 공감 유도
- **실패 (7/10 이하)**: 추상적 아이콘/그래픽 배경 → "파워포인트 느낌". Gemini 프롬프트에 "사진/장면" 키워드 누락

### DQ-02 시각적 계층 구조 (10점 만점)
- **성공 (10/10)**: 브랜드 뱃지 → 대형 헤드라인 → 서브카피 → CTA 4단 계층 완벽 구현. 크림 패널 안에서 구현 시 패널이 자연스러운 시선 유도 프레임 역할. m3-1-1080 (96점)
- **성공 (10/10)**: 헤드라인 핵심 키워드 1개 골드 강조 → 5개 DQ 동시 상승. m3-2 "지점장" 골드(#C9A84C) 강조만으로 89→95 달성
- **실패 (8/10 이하)**: 텍스트 크기 차이 불충분 (헤드라인 40px + 서브카피 36px → 계층 불분명)
- **실패**: 서브카피2(선택사항) 누락으로 빈 공간 → DQ-06 동시 감점

### DQ-03 프로 완성도 (10점 만점)
- **성공 (10/10)**: 크림 패널 + 모서리 라운딩(12px) + box-shadow + 배경과 자연스러운 대비 → "전문 디자이너 수준". m3-1-1080 (96점)
- **성공 (10/10)**: Gemini 배경 소품 디테일(데스크 램프, 책, 안경)이 "전문가" 이미지 강화. m3-1-1200 (97점)
- **실패 (7/10 이하)**: 정사각형 전체 오버레이 opacity 0.45 → CSS 단색처럼 보임 (m1-3 78점)
- **실패**: 반투명 그라데이션이 상단에만 적용 → 배경과 통합감 부족
- **[세부 감점 기준]**:
  - 텍스트가 컨테이너 밖으로 넘치는 곳이 1개라도 있으면 -3점
  - CTA 텍스트가 버튼 영역 밖에 있으면 -3점

### DQ-04 피드 차별화 (10점 만점)
- **성공 (10/10)**: 역발상 카피 "영업 못하는 게 아닙니다 — 시스템이 없었을 뿐" → 즉각적 차별 포인트. m3-3-1200 (94점)
- **성공 (9/10)**: 골드 세로 액센트바(4px) → "일반 분할 광고"와 시각 구분 + 브랜드 시그니처. DQ-10 동시 상승
- **실패 (7/10 이하)**: 캐러셀 5장이 동일 레이아웃 반복 → 광고 피로도 상승

### DQ-05 감정적 임팩트 (10점 만점)
- **성공 (10/10)**: "함께 시작합니다" — 불안한 영업 시작을 안심시키는 동행/파트너십 감성. m3-2-1080 (96점)
- **성공 (10/10)**: 실패 경험자의 자존감을 건드리는 카피. "네 잘못이 아니다" → 즉각적 공감과 안도
- **성공**: Gemini 배경이 감정 강도를 결정. "비 오는 밤 혼자 앉은 뒷모습"처럼 구체적 장면 프롬프트 → DQ-03 8.5→9.0
- **실패**: 모호한 실루엣 배경 → DQ-03/DQ-05 동시 감점

### DQ-06 여백/레이아웃 밸런스 (10점 만점)
- **성공 (10/10)**: 중앙 크림 패널이 정사각형 중앙에 정확히 배치 + 상하좌우 배경 노출 비율 균등. m3-1-1080 (96점)
- **성공 (10/10)**: 좌측 텍스트/우측 배경 비율 55:45 → 1200x628 가로형 최적. m3-1-1200 (97점)
- **실패 (7/10)**: 텍스트가 상단 40%에 과밀집, 하단 60% 배경만 노출 → 공간 활용 심각히 불균형 (m1-3 86점)
- **실패**: 서브카피-CTA 간 빈 공간 과다 → 서브카피2 추가로 해결 (m1-1 89→94)
- **[세부 감점 기준]**:
  - 1080x1080: 콘텐츠 세로 중앙 배치 안 되면 -4점
  - 상단 70% 이상에 콘텐츠 몰려있으면 -3점

### DQ-07 색상 가시성/조화 (10점 만점)
- **성공 (10/10)**: 다크 우드 배경 위 화이트+골드 조합. "지점장" 골드 강조가 서재 따뜻한 톤과 자연 조화. m3-1-1200 (97점)
- **성공 (10/10)**: 크림(#FFF8F0) 패널 위 다크 텍스트(#3E2723) + 골드 강조(#C9A84C) — 따뜻한 서재 톤과 완벽 조화. m3-1-1080 (96점)
- **실패 (8/10 이하)**: 서브카피 라이트블루(#5B9BD5) 48px → AA Large 경계, AAA 미달 (대비율 4.8:1). 화이트(#F0F4F8, 12.5:1)로 변경해야 함
- **실패**: 골드 CTA 배경 위 흰색(#fff) 텍스트 → 대비율 2.1~3.1:1로 WCAG AA 미달. 다크 텍스트(#1A0E00) 필수

### DQ-08 타이포그래피 품질 (10점 만점)
- **성공 (10/10)**: 헤드라인 54-60px Bold + 서브카피 44px Medium + gap 20-28px → 크기/굵기 대비 명확. m1-2-1080 (94점)
- **성공**: 혜택 텍스트 40→44px 증가로 가독성 확실히 개선. m1-2-1080에서 +2점
- **실패 (5/10 이하)**: 헤드라인 40px + 서브카피 36px → "밋밋", 계층 불분명
- **[세부 감점 기준]**:
  - 줄바꿈이 의미 단위가 아닌 곳에서 발생하면 -2점
  - 헤드라인 vs 서브카피 크기 비율 1.3배 미만이면 -3점
  - 1080x1080 헤드라인 60px 미만이면 -2점

### DQ-09 CTA 효과성 (10점 만점)
- **성공 (10/10)**: "무료 상담 신청 →" 골드 배경 버튼이 배경과 조화 + 확실히 눈에 띔. m3-1-1200 (97점)
- **성공 (10/10)**: "조직 설계 상담 받기 →" 구체적이고 높은 가치 암시. 행동 유도력 강함. m3-2-1080 (96점)
- **성공**: CTA에 " →" 화살표 추가 → DQ-09 +1점 (클릭 유도 시각 장치)
- **실패**: "→" 화살표 누락 → 클릭 유도 시각 장치 약화
- **실패**: "지금 확인하세요" 수준 CTA → 클릭 동기 부족

### DQ-10 브랜드 일관성 (10점 만점)
- **성공 (10/10)**: 골드/크림 컬러 시스템 + 브랜드 네이밍 일관 유지 + 크로스 포맷(1200/1080) 동일 메시지/컬러. m3-1 (97+96점)
- **성공**: 골든 액센트(#C9A84C) 통일 — 뱃지, 키워드 강조, 카드 보더, CTA 버튼 전부 골드 계열
- **실패**: 캐러셀 배경 스타일 혼재 (포토리얼→테크그래픽→플랫UI) → "다른 담당자가 만든 5장" 느낌

---

## 카피/기획 QC 노하우

### 공통 실패 패턴

1. **크리에이티브 브리프 부재** — 디자인 착수 전 반드시 브리프(앵글, 타겟 감정, 핵심 메시지, CTA) 문서를 작성하고 승인받은 후 진행할 것. 브리프 없이 시작한 작업은 전량 재작업 리스크 있음.
2. **감정적 목표 미정의** — "어떤 감정을 유발할 것인가"를 Phase 1에서 명시적으로 기술할 것. 감정 목표 없이 작성된 카피는 메시지 방향이 흔들려 QC FAIL 확률 높음.
3. **앵글 중복/차별화 부재** — 동일 캠페인 내 여러 소재가 같은 앵글을 반복하면 광고 피로도가 올라감. Phase 1에서 앵글 맵을 작성하고 중복 여부를 사전 점검할 것.
4. **CTA 모호함** — "지금 확인하세요" 수준의 CTA는 클릭 동기 부여 부족. CTA는 혜택 또는 행동 결과를 구체적으로 포함해야 함 (예: "30초 무료 비교하기").

---

## 디자인 실행 QC 노하우

### 공통 실패 패턴

1. **글자 겹침/중복** — AI 생성 배경 위에 텍스트를 배치할 때 배경의 텍스처·객체와 겹쳐 가독성이 저하됨. 텍스트 영역에는 반투명 오버레이 또는 여백 영역을 확보할 것. 최종 산출물에서 글자 겹침 여부를 100% 확대 상태로 반드시 점검.
2. **빈 공간 과다** — 레이아웃에서 텍스트 블록과 이미지 사이에 의도 없는 여백이 발생하여 전문성이 낮아 보임. 그리드 기준을 명시하고 여백 비율(상하 패딩 등)을 수치로 지정할 것.
3. **AI 배경과 텍스트 불일치** — AI가 생성한 배경 이미지의 분위기(밝음/어두움, 따뜻함/차가움)와 텍스트 톤이 충돌함. 배경 생성 프롬프트에 "텍스트 가독성을 위한 저채도 배경" 등 조건을 명시할 것.
4. **레이아웃 차별화 부재** — 여러 소재가 동일한 레이아웃 구조(상단 헤드라인, 중앙 이미지, 하단 CTA)를 반복하면 광고 피로도 상승. 소재별로 레이아웃 유형(좌/우 분할, 풀블리드, 타이포 중심 등)을 다양화할 것.
5. **폰트 규칙 미준수** — 브랜드 가이드라인에 명시된 폰트 패밀리·웨이트·사이즈 체계를 어기고 임의 폰트를 사용함. 작업 시작 전 폰트 스펙 시트를 확인하고, 미허용 폰트 사용 시 자동 QC FAIL 처리.
6. **브랜드 색상 불일치** — 프라이머리/세컨더리 색상 코드를 잘못 적용하거나 유사 색상으로 대체함. 색상 코드는 반드시 브랜드 가이드의 HEX값을 복사하여 사용하고, 육안 판단 금지.

---

## QC 피드백 로그

| 날짜 | 앵글 | Phase | 실패 원인 | 수정 방법 | 결과 |
|------|------|-------|-----------|-----------|------|
| 2026-03-01 | 비용 절감 소구 | Phase 4 (디자인) | 글자가 배경 이미지 객체와 겹쳐 가독성 0% | 텍스트 하단에 반투명 검정 그라디언트 오버레이 추가 | PASS (재작업 1회) |
| 2026-03-05 | 신뢰/안심 소구 | Phase 4 (디자인) | 빈 공간 과다 — 하단 40% 여백 발생 | 하단 영역에 수혜 사례 텍스트 블록 추가, 패딩 재조정 | PASS (재작업 1회) |
| 2026-03-10 | 긴급성/한정 혜택 | Phase 4 (디자인) | AI 배경(밝고 화사한 톤) + 다크 텍스트 충돌 | 배경 재생성 프롬프트에 "저채도, 소프트 그레이 배경" 명시 | PASS (재작업 1회) |
| 2026-03-12 | 비교/경쟁 우위 | Phase 1 (기획) | 크리에이티브 브리프 없이 착수하여 방향 전환 3회 발생 | Phase 1 완료 기준에 브리프 승인 필수 추가 | PASS (브리프 작성 후 진행) |
| 2026-03-15 | 감성/공감 소구 | Phase 4 (디자인) | 6개 소재 전체가 동일 레이아웃(상단 헤드 + 중앙 이미지 + 하단 CTA) 반복 | 레이아웃 유형 3종(타이포 중심, 좌우 분할, 풀블리드)으로 분산 배정 | PASS (재작업 2회) |
| 2026-03-18 | 가격 비교 소구 | Phase 4 (디자인) | 폰트 임의 변경 (브랜드 폰트 미사용) | 브랜드 폰트 스펙 시트 공유, 작업 전 필독 프로세스 추가 | PASS (재작업 1회) |
| 2026-03-20 | 리워드/혜택 강조 | Phase 4 (디자인) | 프라이머리 컬러 HEX 오입력 (#FF5500 → #FF5050) | 색상 코드 복붙 강제화, 팀 공유 색상 팔레트 파일 등록 | PASS (재작업 1회) |
| 2026-03-22 | 라이프스타일 공감 | Phase 1 (기획) | 감정적 목표 미기술로 카피 톤이 3회 변경 | Phase 1 체크리스트에 "감정 목표 1문장 명시" 항목 추가 | PASS (브리프 수정 후 진행) |
| 2026-04-01 | Google RSA 9세트 | DQ 100점 평가 | 정사각형 전체 오버레이(0.45)가 CSS 단색처럼 보여 DQ-03/04/05 동시 감점 (m1-3 78점) | 전체 오버레이→중앙 패널(opacity 0.85, blur 6px) 구조 변경 | PASS (Cycle 4, 93+점) |
| 2026-04-01 | Google RSA 9세트 | DQ 100점 평가 | 서브카피 라이트블루(#5B9BD5) 48px AA Large 경계 — WCAG AAA 미달 논란 | 서브카피 색상을 #F0F4F8(화이트)로 변경, AAA 확보 | PASS (Cycle 2, 91→93) |
| 2026-04-05 | SNU 3셀 2라운드 | DQ 100점 평가 | 1200x628에서 84px 한글 헤드라인이 텍스트 패널 폭 초과 → 단어 중간 절단("수수/료", "바꿨/어요") | word-break:keep-all + 패널 폭 확대(780px) + 텍스트 압축. 한글 Black 900은 글자당 ~76-84px 너비이므로 10자 이상은 84px에서 패널 폭 검증 필수 | PASS (수정 2회) |
| 2026-04-05 | SNU 3셀 2라운드 | DQ 100점 평가 | 1200x628에서 콘텐츠 총 높이가 text-panel 고정 높이(460px) 초과 → CTA 버튼 누락 | mega-number 축소(140→100px) + 서브카피 압축 + 마진 축소. 628px 세로 제약에서 84px 헤드라인 3줄은 277px 소모하므로 나머지 ~180px 내 서브+CTA 배치 필수 | PASS (수정 3회) |
| 2026-04-05 | SNU 3셀 2라운드 | DQ 100점 평가 | 초기 렌더링에서 뉴스플래시 라벨/날짜(22-28px), 나이키 서브카피(26-36px) 등 40px 미만 텍스트 다수 존재 → DQ 즉시 FAIL | 전 텍스트 40px+ 강제 상향. 컨셉 원본 스펙의 작은 텍스트도 DQ 절대최소(40px) 위반이면 반드시 상향 | PASS (수정 1회) |
| 2026-04-01 | Google RSA 9세트 | DQ 100점 평가 | CTA "→" 화살표 누락으로 클릭 유도 시각 장치 약화 | CTA 텍스트에 " →" 추가 | PASS (Cycle 2, DQ-09 +1) |
| 2026-04-01 | Google RSA 9세트 | DQ 100점 평가 | M3 정사각 오버레이 opacity 부족→배경 간섭으로 텍스트 가독성 불균일 (m3-2 79점) | 오버레이 0.55 + 크림 텍스트 패널(0.82) + font-weight 800 조합 | PASS (Cycle 3, 79→96) |
| 2026-04-02 | Google RSA 9세트 QC | DQ 100점 평가 | M1 구분자 `·`(middot)가 렌더링에서 마침표처럼 보여 DQ-02/03/08 각 -1점 | `·` → `|` (파이프)로 전환, 시각적 명확성 확보 | PASS (Cycle 3, 90→93+) |
| 2026-04-02 | Google RSA 9세트 QC | DQ 100점 평가 | M1-3-1080 흰 카드 패널로 디자인 시스템 이탈 (DQ-10 5/10, 총 70점) | 딥 네이비 오버레이로 전면 재설계, M1 시스템 복원 | PASS (Cycle 2, 70→91→93) |
| 2026-04-02 | Google RSA 9세트 QC | DQ 100점 평가 | M2 CTA #1A3320 on #00897B = 3.16:1 — 전 6장 WCAG AAA 미달 | 배경 #00695C + 텍스트 #FFFFFF = ~5.8:1로 교정 | PASS (Cycle 2, 73~87→93~95) |
| 2026-04-02 | Google RSA 9세트 QC | DQ 100점 평가 | M2-3 border-radius 8px (스펙 4px), CTA 클리핑, 색상 3건 스펙 이탈 | radius 4px, CTA 400px 확대, 색상 #2E7D32/#546E7A 복원 | PASS (Cycle 2, 73→94) |
| 2026-04-02 | Google RSA 9세트 QC | DQ 100점 평가 | M3-3-1200 밝은 배경+노트북이 가장 generic한 구글 광고 레이아웃 (81점) | 딥 브라운 그라데이션 오버레이 전환 + 텍스트 라이트 계열 + 골드 CTA | PASS (Cycle 2, 81→95) |
| 2026-04-02 | 배너 18장 피드백 수정 | DQ 100점 평가 | 1080x1080 benefit 텍스트 #E8F0FA가 배경에 묻힘 (m1-2 91점) | #FFFFFF + text-shadow 0.6으로 대비 강화 | PASS (Cycle 2, 91→96) |
| 2026-04-02 | 배너 18장 피드백 수정 | DQ 100점 평가 | 서브카피/강조서브카피 동일 44px→계층 불명확 (m1-3 92점) | subcopy 40px + highlight 48px로 계층 분리 | PASS (Cycle 2, 92→97) |
| 2026-04-02 | 배너 18장 피드백 수정 | DQ 100점 평가 | M2-2 CTA height 68px 정사각에서 시인성 부족 (91점) | height 76px + padding 40px 확대 | PASS (Cycle 2, 91→94) |
| 2026-04-02 | 배너 18장 피드백 수정 | DQ 100점 평가 | M2-3 라이트그린 overlay 0.25 + panel 0.80→배경 간섭 (92점) | overlay 0.35 + panel 0.88 | PASS (Cycle 2, 92→94) |
| 2026-04-02 | 배너 18장 피드백 수정 | DQ 100점 평가 | M3-1-1200 서브카피 1줄만으로 혜택 전달력/여백 밸런스 부족 (90점) | sub-copy-2 "DB영업|멘토링|정착금 1,000만원" 추가 + text-shadow 강화 | PASS (Cycle 2, 90→98) |

---

## Supanova Pre-flight 체크리스트 (랜딩페이지/프론트엔드)

> Supanova Design Engine의 Pre-flight Check 항목을 우리 DQ 체계에 통합. 랜딩페이지/웹 프론트엔드 디자인 시 적용.

### 폰트 검증
- [ ] Pretendard 폰트 사용 여부 (금지: Inter, Noto Sans KR 메인, Roboto, Arial, Open Sans, Helvetica, Malgun Gothic)
- [ ] `word-break: keep-all` 적용 여부 (한국어 줄바꿈)
- [ ] `leading-tight` ~ `leading-snug` 적용 여부 (한국어 수직 간격)

### 색상 일관성
- [ ] 악센트 컬러 1개 이하, 채도 80% 미만
- [ ] warm/cool 그레이 혼용 없음
- [ ] AI 퍼플(보라/파랑 그라디언트) 미사용
- [ ] 순수 검정(#000000) 미사용

### 레이아웃 다양성
- [ ] 3-Column Equal Card 미사용
- [ ] 인접 섹션 동일 레이아웃 미사용
- [ ] 중앙 정렬 Hero 미사용 (실험적 레이아웃 시)

### 한국어 품질
- [ ] AI 클리셰 용어 미사용 ("혁신적인", "원활한", "차세대", "최적화된")
- [ ] 존댓말 일관성 (합니다/하세요 통일)
- [ ] 번역체 표현 없음
- [ ] 유기적 숫자 사용 (라운드 넘버 회피)
- [ ] 현대적 한국어 이름 사용 (김철수/이영희 회피)

### 모바일 대응
- [ ] `min-h-[100dvh]` 사용 (`h-screen` 금지)
- [ ] CTA 터치 타겟 48px+ 높이
- [ ] 768px 이하 단일 컬럼 collapse

### 인터랙션
- [ ] 호버/액티브 상태 존재 여부
- [ ] 스크롤 애니메이션 유무
- [ ] 트랜지션 `cubic-bezier(0.16, 1, 0.3, 1)` 사용 (`linear`/`ease-in-out` 금지)

### 퍼포먼스
- [ ] `transform`/`opacity`만 애니메이션
- [ ] `backdrop-blur` fixed/sticky 요소에만 사용
- [ ] 이미지 `loading="lazy"` 적용

### 코드 품질
- [ ] 시맨틱 HTML 사용
- [ ] 메타태그 완전성
- [ ] `lang="ko"` 설정
- [ ] 플레이스홀더(`<!-- ... -->`, `// TODO`) 없음

---

## UI 코드 디자인 QC 로그

### 2026-04-04 — task-1404.1 InsuRo P0 디자인 업그레이드 6건 (PASS)
- **h1 크기 역전**: MarketNewsletter/PremiumComparison에서 h1이 `text-base`로 h2보다 작았음 → `text-2xl font-bold`로 표준화. 교훈: 새 페이지 생성 시 h1/h2 계층 크기 검증 필수
- **하드코딩 색상**: Pricing.tsx에 `bg-blue-500` 3곳 → `bg-primary` 통일. 교훈: 디자인 토큰(primary, foreground 등) 외 직접 색상 사용 금지
- **Skeleton 로딩**: CrmDashboard에서 텍스트 로딩을 Skeleton으로 교체. 교훈: 로딩 UI는 실제 레이아웃 구조를 반영하여 CLS 최소화
- **ErrorBoundary**: White Screen 방지 — 시맨틱 토큰(bg-background, text-foreground) 사용하여 다크/라이트 호환
- **premiumOnly 보존**: UpgradeModal 연결 시 시각적 처리(text-muted-foreground/50, PREMIUM 배지)는 건드리지 않고 클릭 동작만 변경

### 2026-04-04 — task-1403.1 InsuRo P0 디자인 업그레이드 6건 검증 (전수 PASS)
- **교훈**: 디자인 감사 시점과 코드 수정 시점 간 시간차로 인해 이미 수정된 이슈가 재등록됨. 감사 결과 기반 태스크 생성 시 최신 코드 상태 재확인 필요
- **bg-blue-500 잔존**: Pricing.tsx 외에 MyPage.tsx:247, AdminCrmConfig.tsx:206, ActivityTimelineTab.tsx:58-59에 bg-blue-500 잔존. 단 이들은 상태/이벤트 유형별 의도적 색상 구분으로 primary 대체 부적절

### 2026-04-11 — task-1664.1 블로그 이미지 품질 개선 (PASS)
- **폰트 크기 미달**: Claude CLI HTML→PNG 프롬프트에서 제목 24px, 본문 14px → 블로그 이미지로 너무 작음. 교훈: 블로그/인포그래픽 이미지는 제목 32px+, 본문 18px+ 필수
- **한글 줄바꿈 깨짐**: word-break: keep-all 미적용 → 조사("를", "의") 단독 줄바꿈. 교훈: 한글 콘텐츠는 반드시 word-break: keep-all + line-height 1.7 적용
- **빈 이미지 미감지**: 생성은 성공했으나 내용이 거의 없는 이미지(단색 배경만) 품질 검증 없음. 교훈: 생성 후 _validate_image_quality로 파일 크기(10KB+), 너비(600px+), 표준편차(>5) 자동 검증
- **WCAG 대비**: 중간 톤 배경+중간 톤 텍스트 → 가독성 저하. 교훈: 4.5:1 대비비 필수. 진한 배경+밝은 텍스트 or 밝은 배경+진한 텍스트만 허용