# 디자인 컨셉 카탈로그 (20선)
> **작성일**: 2026-03-28 | **작성자**: 나부 (UX/UI 디자이너)
> **목적**: 4개 벤치마킹 트랙에서 추출한 20개 디자인 컨셉을 통합 정리하여 제이회장님이 한눈에 보고 선택할 수 있도록 작성

---

## 1. 개요

### 이 카탈로그는 무엇인가

리쿠르팅·보험·브랜딩 광고 배너 및 카드뉴스 제작 시, 어떤 디자인 방향으로 갈지 빠르게 결정하기 위한 선택지 목록이다. 4개 트랙의 리서치 결과물을 한 문서에 통합 정리했다.

- **Track 1 (글로벌 어워드)**: Cannes Lions, D&AD 등 수상작에서 뽑은 보편적 디자인 전략 5선
- **Track 2 (금융/보험/리쿠르팅 실전)**: 실제 집행 중인 산업 광고 패턴 5선
- **Track 3 (GitHub 기술 인프라)**: 이미지 생성 도구 관점의 기술적 구현 방법론 5선 — 디자인 컨셉보다는 **제작 인프라** 성격
- **Track 4 (레퍼런스 PDF)**: 제이회장님이 직접 제공한 리쿠르팅 광고 레퍼런스에서 추출한 5선

### 사용법

1. **요약 매트릭스**(섹션 2)로 20개를 한 줄씩 훑는다
2. 관심 가는 컨셉 번호를 골라 **상세 설명**(섹션 3)을 읽는다
3. 비슷해 보이는 컨셉은 **유사 컨셉 매핑**(섹션 4)에서 차이를 확인한다
4. 바로 제작에 들어가고 싶다면 **추천 TOP 5**(섹션 5)를 본다

> **광고 이미지 제작 도구**: hybrid-image (Gemini AI 배경 + HTML 오버레이), gemini-image (포토리얼 이미지), Playwright HTML→PNG (CSS 기반 정밀 레이아웃)

---

## 2. 요약 매트릭스

| # | 컨셉명 (한글 / 영문) | 트랙 | 복제가능성 | 적합 용도 | 구현 난이도 | 비고 |
|---|---|---|---|---|---|---|
| 1 | 제약을 캔버스로 / Constraint-as-Canvas | 글로벌 어워드 | 상 | 보험·법적 메시지 | 쉬움 | 텍스트+하이라이트만 필요 |
| 2 | 감정 타이포 시스템 / Expressive Typography System | 글로벌 어워드 | 중상 | 브랜딩·감성 광고 | 보통 | Variable Font 환경 필요 |
| 3 | 비완성의 진정성 / Anti-Polish Authenticity | 글로벌 어워드 | 상 | SNS 리쿠르팅 | 쉬움 | UGC 스타일 연출 |
| 4 | 현실-판타지 해체 / Reality-Fantasy Dissolution | 글로벌 어워드 | 하 | 브랜딩·게임 연계 | 어려움 | VFX 합성 필요 |
| 5 | 단일 상징 캠페인 / Symbol-as-Campaign | 글로벌 어워드 | 중상 | 브랜딩·시리즈 광고 | 보통 | 모듈 설계 선행 필요 |
| 6 | 다크 프리미엄 / Dark Premium | 금융/보험 실전 | 상 | 보험·금융 신뢰 광고 | 쉬움 | CSS만으로 구현 가능 |
| 7 | 임팩트 넘버 / Impact Number | 금융/보험 실전 | 상 | 보험·리쿠르팅 | 쉬움 | 즉시 제작 가능 |
| 8 | 감성 내러티브 / Emotional Narrative | 금융/보험 실전 | 중 | 보험·FA 모집 | 보통 | 인물 사진 필요 |
| 9 | 미니멀 타이포 / Minimal Typography | 금융/보험 실전 | 상 | 리쿠르팅·브랜딩 | 쉬움 | 이미지 불필요 |
| 10 | 활력 그라디언트 / Vitality Gradient | 금융/보험 실전 | 중상 | MZ 리쿠르팅 | 보통 | CSS 그라디언트로 구현 |
| 11 | JSX 선언적 템플릿 / JSX Declarative Template | 기술 인프라 | 상 | 대량 배너 자동화 | 보통 | 기술 인프라 컨셉 |
| 12 | 블록 기반 모듈러 / Block-Based Modular Layout | 기술 인프라 | 중 | A/B 테스트 | 어려움 | 기술 인프라 컨셉 |
| 13 | CSS 그라디언트 배너 / CSS Flexbox + Gradient | 기술 인프라 | 상 | 무이미지 배너 | 쉬움 | 기술 인프라 컨셉 |
| 14 | SVG-first 파이프라인 / SVG-first Rendering Pipeline | 기술 인프라 | 상 | 해상도 독립 배너 | 보통 | 기술 인프라 컨셉 |
| 15 | CJK 타이포 미니멀 / CJK Typography Minimal | 기술 인프라 | 상 | 한글 텍스트 배너 | 쉬움 | 기술 인프라+디자인 혼합 |
| 16 | 네이비 타이포 임팩트 / Navy Typography Impact | 레퍼런스 PDF | 상 | 리쿠르팅·보험 | 쉬움 | CSS 완성도 높음 |
| 17 | 숫자 뉴스플래시 / Number Impact Newsflash | 레퍼런스 PDF | 상 | 리쿠르팅·긴급 메시지 | 쉬움 | 즉시 제작 가능 |
| 18 | 인물+텍스트 하이브리드 / Portrait-Text Hybrid | 레퍼런스 PDF | 상 | FA 모집·인물 광고 | 보통 | hybrid-image 활용 |
| 19 | 타겟 페르소나 카드 / Target Persona Card | 레퍼런스 PDF | 상 | 리쿠르팅 세그먼트 | 보통 | 프로필 이미지 3개 필요 |
| 20 | 좌우 분할 솔루션형 / Split-Layout Solution | 레퍼런스 PDF | 중상 | 리쿠르팅·문제해결 | 보통 | hybrid-image 활용 |

---

## 3. 20개 컨셉 상세

---

### #1 — 제약을 캔버스로 (Constraint-as-Canvas)

**한 줄 설명**: 보험 약관·계약서 그 자체를 광고판으로 뒤집는 전략

**대표 키워드**: 계약서 활용, 텍스트 하이라이트, 극도의 절제, 메시지 순도, 매체 전복

**참고 사례**:
- AXA "Three Words" (Cannes Lions 2025 Grand Prix) — https://www.adweek.com/creativity/axa-and-publicis-conseil-win-prestigious-cannes-titanium-grand-prix/
- Spotify "Spreadbeats" — Excel 셀을 뮤직비디오 캔버스로 전환 — https://lbbonline.com/work/110981

**현재 도구 복제 가능성**: **상**
- Playwright HTML→PNG: 계약서 텍스트 레이아웃 + 하이라이트 CSS로 완벽 구현
- gemini-image: 계약서 배경 생성 후 텍스트 오버레이

**품질 기대치**: **상** — 텍스트와 여백만으로 구성되어 CSS 품질이 곧 최종 품질

**구현 난이도**: **쉬움** — 디자인 요소 2개(텍스트 블록 + 하이라이트)만 필요. 비주얼 리소스 불필요

**적합 용도**: 보험 약관 설명 광고, 법적 메시지 캠페인, 계약 관련 FA 모집

**유사 컨셉 크로스레퍼런스**: #3 (Anti-Polish Authenticity) — 둘 다 반전 전략. #9 (미니멀 타이포) — 절제 방식 유사하나 매체 활용법 상이

---

### #2 — 감정을 연기하는 타이포그래피 (Expressive Typography System)

**한 줄 설명**: 글자 굵기와 크기가 감정에 따라 살아 움직이는 타입 시스템

**대표 키워드**: Variable Font, 감정 표현, 모션 타이포, weight 스펙트럼, 감각적 커뮤니케이션

**참고 사례**:
- Academy "Caption with Intention" (Cannes Lions 2025 Titanium + Design Grand Prix) — https://www.fcb.com/news-ideas/caption-with-intention-earns-titanium-at-cannes-lions-2025/
- Apple 감성 광고 시리즈 — Variable Font 기반 캠페인 타이포그래피

**현재 도구 복제 가능성**: **중상**
- Playwright HTML→PNG: CSS `font-variation-settings`로 weight 극단화 가능
- 모션 효과는 정적 이미지 단계에서는 weight/크기 극단화로 대체

**품질 기대치**: **중상** — 정적 배너에서는 weight 대비만으로도 수준 높은 결과물 가능. 풀 모션은 별도 작업 필요

**구현 난이도**: **보통** — Variable Font 파일 확보 및 CSS 설정 필요. Pretendard Variable 사용 시 난이도 낮아짐

**적합 용도**: 감성 브랜딩, 감정 소구 보험 광고, 청각장애 접근성 캠페인

**유사 컨셉 크로스레퍼런스**: #9 (미니멀 타이포), #15 (CJK 타이포 미니멀), #16 (네이비 타이포 임팩트) — 모두 타이포그래피 중심. 차이는 감정 표현 강도와 배경 처리 방식

---

### #3 — 비완성의 진정성 (Anti-Polish Authenticity)

**한 줄 설명**: 광고처럼 안 보이는 것이 가장 강력한 광고다

**대표 키워드**: UGC 스타일, 의도적 불완전, 네이티브 광고, MZ 신뢰 획득, 거친 질감

**참고 사례**:
- Samsung "Flipvertising" (Cannes Lions 2023 Social & Influencer Grand Prix) — 타겟팅 알고리즘을 게임화
- Dove "Real Beauty" 셀카 스타일 광고 — 과도한 보정 없는 진정성 연출

**현재 도구 복제 가능성**: **상**
- gemini-image: 자연광·비보정 스타일 사진 생성
- hybrid-image: 핸드라이팅 느낌 텍스트 + 손글씨 CSS 폰트 오버레이
- Playwright HTML→PNG: 불규칙 레이아웃, 기울기 효과 CSS로 구현

**품질 기대치**: **상** — "의도적 불완전"이 목표이므로 과도한 정밀도 불필요. 오히려 너무 깔끔하면 실패

**구현 난이도**: **쉬움** — 정밀한 정렬/간격 불필요. CSS transform으로 기울기·노이즈 추가

**적합 용도**: SNS 리쿠르팅 광고, FA 모집 직접 소구, MZ세대 대상 보험 광고

**유사 컨셉 크로스레퍼런스**: #1 (Constraint-as-Canvas) — 둘 다 반전 전략. #8 (감성 내러티브) — 진정성 접근 유사하나 완성도 방향 상이

---

### #4 — 현실-판타지 경계 해체 (Reality-Fantasy Dissolution)

**한 줄 설명**: 현실과 게임 세계가 겹쳐 보이는 시각적 경계 해체

**대표 키워드**: 게임 HUD 오버레이, VFX 합성, 현실+가상 병치, 메타버스 미학, 몰입형 비주얼

**참고 사례**:
- Nike x Jordan Brand "Flight" 캠페인 — 현실 도시 위 게임 그래픽 오버레이
- Adidas "Real until it's not" — 포토리얼 + 3D 병합

**현재 도구 복제 가능성**: **하**
- gemini-image: VFX 합성 스타일 이미지 생성 가능하나 정밀 제어 어려움
- hybrid-image: HUD 오버레이 UI 요소를 HTML로 얹는 방식으로 부분 구현 가능

**품질 기대치**: **중** — 도구 한계로 전문 VFX 수준 달성 어려움. 게임 HUD 스타일로 단순화하면 중 수준 가능

**구현 난이도**: **어려움** — VFX 합성, 깊이감 처리, 레이어 블렌딩 등 고급 기술 필요

**적합 용도**: MZ·Z세대 브랜딩, 게임/스포츠 연계 광고, 플랫폼 런칭 캠페인

**유사 컨셉 크로스레퍼런스**: #10 (활력 그라디언트) — 비전통적 시각 방향 공유. 차이는 VFX 의존도

---

### #5 — 단일 상징으로 전체 캠페인 (Symbol-as-Campaign)

**한 줄 설명**: 숫자 하나, 색상 하나로 캠페인 전체 세계관을 압축

**대표 키워드**: 단일 상징, 캠페인 시스템, 모듈 컴포넌트, 브랜드 기호학, 반복으로 쌓는 인지도

**참고 사례**:
- Mastercard "Priceless" — 로고 두 원이 캠페인 전체를 지배
- Spotify "Wrapped" — 연간 숫자 데이터 하나가 글로벌 캠페인으로 확장

**현재 도구 복제 가능성**: **중상**
- Playwright HTML→PNG: 단일 상징(숫자/아이콘) 중심 레이아웃 구현
- 시리즈 배너 자동화 시 #11 JSX 선언적 템플릿과 결합하면 시너지

**품질 기대치**: **상** — 컨셉 단순할수록 실행 품질이 높아짐

**구현 난이도**: **보통** — 개별 배너 제작은 쉬우나, 시리즈 일관성 유지를 위한 모듈 설계가 선행되어야 함

**적합 용도**: 브랜드 캠페인 시리즈, 보험사 브랜딩, 연간 데이터 공개 마케팅

**유사 컨셉 크로스레퍼런스**: #7 (임팩트 넘버), #17 (숫자 뉴스플래시) — 모두 숫자·상징 중심. 차이는 캠페인 전체 설계 vs 단일 광고 포맷

---

### #6 — 다크 프리미엄 (Dark Premium)

**한 줄 설명**: 다크 네이비+골드로 프리미엄 금융 신뢰감을 전달

**대표 키워드**: 다크 네이비, 골드 액센트, 데이터 시각화, 프리미엄 신뢰, 금융 미학

**참고 사례**:
- Goldman Sachs LinkedIn 광고 시리즈 (2024-2025) — 다크 배경 + 골드 타이포
- JPMorgan Chase 자산관리 광고 — 네이비+골드 일관 적용

**현재 도구 복제 가능성**: **상**
- Playwright HTML→PNG: CSS만으로 네이비+골드 배경·타이포 완벽 구현
- hybrid-image: 다크 배경 사진 생성 + 골드 텍스트 오버레이

**품질 기대치**: **상** — 색상 조합 자체가 프리미엄을 만드므로 CSS 정교함만 확보하면 즉시 프로 수준

**구현 난이도**: **쉬움** — 색상 팔레트 고정(#1a1a2e, #B5965A, #FFFFFF), 레이아웃 단순

**적합 용도**: 보험 상품 광고, FA 모집(경력직), 금융 브랜딩, LinkedIn 광고

**유사 컨셉 크로스레퍼런스**: #16 (네이비 타이포 임팩트) — 다크 배경 공유. 차이는 데이터 시각화 유무. #9 (미니멀 타이포) — 절제 방향 유사하나 색상 철학 상이

---

### #7 — 임팩트 넘버 (Impact Number)

**한 줄 설명**: 숫자 하나가 화면의 절반을 먹는 극강의 시각 임팩트

**대표 키워드**: 초대형 숫자, Bold 타이포, 단색 강렬 배경, 숫자 소구, 즉각 인지

**참고 사례**:
- 삼성화재 "1,200만 고객" 수치 광고 — 대형 숫자 중심 레이아웃
- 국내 보험사 실적 공개 광고 시리즈

**현재 도구 복제 가능성**: **상**
- Playwright HTML→PNG: `font-size: clamp()` + Bold 폰트만으로 구현
- 이미지 없이 순수 CSS로 완성

**품질 기대치**: **상** — 구조 단순할수록 품질 일관성 높음

**구현 난이도**: **쉬움** — 요소 3개 이하(숫자 + 서브카피 + 배경색). 즉시 제작 가능

**적합 용도**: 보험 실적 광고, FA 수익 소구 리쿠르팅, 신뢰도 수치 강조 캠페인

**유사 컨셉 크로스레퍼런스**: #5 (Symbol-as-Campaign), #17 (숫자 뉴스플래시) — 숫자 중심 삼각 관계. #7은 단일 광고 임팩트 최대화, #5는 캠페인 설계, #17은 긴박감 포맷

---

### #8 — 감성 내러티브 (Emotional Narrative)

**한 줄 설명**: 따뜻한 실화 한 편이 보험의 필요성을 설득한다

**대표 키워드**: 스토리텔링, 파스텔 크림톤, 감정-수치-행동 3단계, 인물 중심, 진정성

**참고 사례**:
- JPMorgan "Make Momentum Happen" — 실제 고객 스토리 기반 광고
- 교보생명 "광화문글판" 캠페인 — 감성 카피+따뜻한 이미지

**현재 도구 복제 가능성**: **중**
- hybrid-image: 따뜻한 파스텔 배경 사진(gemini) + 감성 카피 오버레이
- 인물 사진 없이 gemini-image로 분위기 사진 생성 가능하나 품질 편차 있음

**품질 기대치**: **중** — 사진 품질에 최종 결과물이 크게 의존. 좋은 인물 사진이 있으면 상 수준 가능

**구현 난이도**: **보통** — 레이아웃 단순하나 사진 소싱 또는 생성 품질이 변수

**적합 용도**: 보험 상품 감성 광고, FA 공감 스토리 모집, 브랜드 인지도 캠페인

**유사 컨셉 크로스레퍼런스**: #18 (인물+텍스트 하이브리드) — 인물 활용 방식 유사. #3 (비완성의 진정성) — 진정성 접근 공유하나 완성도 방향 상이

---

### #9 — 미니멀 타이포 (Minimal Typography)

**한 줄 설명**: 텍스트와 여백만으로 전달하는 가장 순수한 메시지

**대표 키워드**: 흑백, 50% 이상 여백, 서체 위계, 이미지 제로, 메시지 집중

**참고 사례**:
- Apple 초기 광고 시리즈 — 흰 배경 + 검정 텍스트 단 두 요소
- New York Times 브랜드 광고 — 세리프 + 공백의 조합

**현재 도구 복제 가능성**: **상**
- Playwright HTML→PNG: CSS 타이포그래피만으로 완성. 이미지 불필요
- 제작 속도 가장 빠른 방식

**품질 기대치**: **상** — 도구 제약 없음. 서체 선택과 여백 비율만 잘 잡으면 프로 수준

**구현 난이도**: **쉬움** — 이미지 없이 HTML+CSS만으로 완결. 변수는 서체 선택

**적합 용도**: 리쿠르팅 메시지 전달, 철학적 보험 브랜딩, LinkedIn 텍스트 카드

**유사 컨셉 크로스레퍼런스**: #2 (Expressive Typography), #15 (CJK 타이포 미니멀), #16 (네이비 타이포) — 타이포 중심 4인방. #9는 흑백+여백 순수주의, #2는 감정 표현, #15는 한글 특화, #16은 다크 배경 특화

---

### #10 — 활력 그라디언트 (Vitality Gradient)

**한 줄 설명**: 퍼플-핑크-네온 그라디언트로 MZ세대 에너지를 담는다

**대표 키워드**: 보라+그라디언트, 네온 액센트, MZ 감성, 비전통 금융 미학, 생동감

**참고 사례**:
- 신한라이프 "오렌지라이프" 리브랜딩 — 밝고 생동감 있는 컬러 전환
- 카카오페이 보험 광고 — 모던+컬러풀 금융 미학

**현재 도구 복제 가능성**: **중상**
- Playwright HTML→PNG: `linear-gradient`, `radial-gradient` CSS로 충분히 구현
- gemini-image: 그라디언트 배경 분위기 사진 생성 후 hybrid-image로 결합 가능

**품질 기대치**: **중상** — CSS 그라디언트는 도구 제약 없음. 사진과 결합 시 자연스러움이 변수

**구현 난이도**: **보통** — 그라디언트 CSS는 쉽지만 색상 균형·가독성 확보에 조정 필요

**적합 용도**: MZ세대 리쿠르팅, 핀테크·인슈어테크 브랜딩, 청년층 보험 광고

**유사 컨셉 크로스레퍼런스**: #13 (CSS 그라디언트 배너) — #10은 디자인 컨셉, #13은 동일 방향의 기술 구현 방법론. #4 (현실-판타지) — 비전통 시각 방향 공유

---

### #11 — JSX 선언적 템플릿 (JSX Declarative Template)

> **분류**: 기술 인프라 컨셉 (디자인 스타일이 아닌 제작 방법론)

**한 줄 설명**: react-email 컴포넌트 구조로 30개 이상 배너 템플릿을 즉시 사용

**대표 키워드**: react-email, JSX 컴포넌트, 30+ 템플릿, Section/Column/Button, 선언적 UI

**참고 사례**:
- GitHub resend/react-email (★18,299) — https://github.com/resend/react-email
- vercel/og — Next.js OG 이미지 자동 생성 기반 프레임워크

**현재 도구 복제 가능성**: **상** (기술적 측면)
- Playwright HTML→PNG: react-email 렌더링 결과물을 PNG로 변환
- JSX 컴포넌트 구조는 이미 내부 인프라에 적용 가능

**품질 기대치**: **상** — 템플릿 품질 = 선택한 디자인 컨셉 품질. 인프라 자체는 제약 없음

**구현 난이도**: **보통** — 컴포넌트 구조 이해 필요. 개발자 없이는 조합에 한계

**적합 용도**: 대량 배너 자동화, A/B 테스트 다량 변형, 다채널 사이즈 대응

**유사 컨셉 크로스레퍼런스**: #12 (블록 기반 모듈러) — 둘 다 템플릿 시스템이나 #11은 코드 중심, #12는 JSON+UI 중심. #14 (SVG-first 파이프라인) — 렌더링 파이프라인 공유

---

### #12 — 블록 기반 모듈러 레이아웃 (Block-Based Modular Layout)

> **분류**: 기술 인프라 컨셉 (디자인 스타일이 아닌 제작 방법론)

**한 줄 설명**: JSON으로 블록을 정의하면 비개발자도 배너를 조합 생성

**대표 키워드**: JSON 스키마, 블록 조합, 비개발자 친화, A/B 테스트 자동화, 모듈러 아키텍처

**참고 사례**:
- GitHub GrapesJS/grapesjs (★25,668) — https://github.com/GrapesJS/grapesjs
- Canva 블록 시스템 — 비개발자 드래그앤드롭 배너 제작

**현재 도구 복제 가능성**: **중**
- 시스템 구축 자체가 상당한 개발 투자 필요
- 구축 후에는 Playwright HTML→PNG로 출력 가능

**품질 기대치**: **상** (구축 완료 후)

**구현 난이도**: **어려움** — JSON 스키마 설계 + JSX 변환 레이어 + UI 편집기까지 구축 필요

**적합 용도**: 마케터 자율 제작 환경, 대형 캠페인 대량 변형, 장기 운영 인프라

**유사 컨셉 크로스레퍼런스**: #11 (JSX 선언적 템플릿) — 상위 레이어 관계. #5 (Symbol-as-Campaign) — 모듈 설계 철학 공유

---

### #13 — CSS Flexbox + 그라디언트 배너 (CSS Flexbox + Gradient Banner)

> **분류**: 기술 인프라 컨셉 (디자인 스타일 + 구현 방법론 혼합)

**한 줄 설명**: 이미지 없이 CSS만으로 프로급 그라디언트 배너를 만드는 방법

**대표 키워드**: CSS-only, Flexbox, linear-gradient, 이미지 불필요, 다사이즈 대응

**참고 사례**:
- GitHub vercel/og 데모 — CSS 그라디언트 배너 예시
- Tailwind CSS 공식 컴포넌트 갤러리 — https://tailwindui.com

**현재 도구 복제 가능성**: **상**
- Playwright HTML→PNG: CSS Flexbox + gradient 네이티브 지원. 이미지 서버 의존 없음

**품질 기대치**: **상** — CSS 능력 = 최종 품질. 외부 의존성 없음

**구현 난이도**: **쉬움** — CSS 코드 수십 줄로 구현. 도구 설정 이슈 없음

**적합 용도**: 무이미지 배너, 빠른 A/B 테스트용 초안, 텍스트 중심 SNS 카드

**유사 컨셉 크로스레퍼런스**: #10 (활력 그라디언트) — #13이 #10의 기술 구현 경로. #9 (미니멀 타이포) — 이미지 불필요 방향 공유

---

### #14 — SVG-first 렌더링 파이프라인 (SVG-first Rendering Pipeline)

> **분류**: 기술 인프라 컨셉 (제작 방법론)

**한 줄 설명**: JSX→SVG→PNG 파이프라인으로 해상도 걱정 없는 벡터 기반 배너 생성

**대표 키워드**: SVG 렌더링, 해상도 독립, 벡터 기반, resvg-js, 파이프라인 자동화

**참고 사례**:
- GitHub penpot/penpot (★45,071) — SVG 기반 디자인 도구 — https://github.com/penpot/penpot
- Playwright HTML→PNG — Chromium 기반 HTML/CSS 렌더링 파이프라인

**현재 도구 복제 가능성**: **상** (인프라 구축 기준)
- 내부 파이프라인이 이미 SVG 중간 렌더링 지원
- 모든 디자인 컨셉에 적용 가능한 공통 인프라

**품질 기대치**: **상** — 벡터 기반이므로 어떤 출력 해상도에도 선명함 유지

**구현 난이도**: **보통** — 파이프라인 연결 설정 필요하나 개별 디자인 변경은 쉬움

**적합 용도**: 레티나/4K 배너, 인쇄용 고해상도 출력, OOH(옥외 광고) 소재

**유사 컨셉 크로스레퍼런스**: #11 (JSX 선언적 템플릿) — 파이프라인 상류-하류 관계. 모든 컨셉(#1~#20)의 출력 인프라로 활용 가능

---

### #15 — CJK 타이포그래피 미니멀 (CJK Typography Minimal)

> **분류**: 기술 인프라 + 디자인 컨셉 혼합

**한 줄 설명**: Pretendard·Noto Sans KR 한글 폰트 + 그라디언트로 한국어 배너를 텍스트만으로 완성

**대표 키워드**: 한글 최적화, Pretendard, Noto Sans KR, CJK 렌더링, 텍스트 임팩트

**참고 사례**:
- Pretendard 공식 데모 — https://cactus.tistory.com/306
- 토스 UI 카드 시스템 — 한글 타이포 중심 미니멀 디자인

**현재 도구 복제 가능성**: **상**
- Playwright HTML→PNG: Pretendard/Noto Sans KR 웹폰트 로드 후 CSS 렌더링
- 한글 텍스트 100% 정확도 보장 (이미지 생성 도구 대비 월등)

**품질 기대치**: **상** — 한글 폰트 렌더링 품질이 일관적이고 예측 가능

**구현 난이도**: **쉬움** — 폰트 CDN 로드 + CSS 설정으로 즉시 적용

**적합 용도**: 한국어 텍스트 중심 배너 전체, 한글 가독성이 중요한 모든 광고

**유사 컨셉 크로스레퍼런스**: #9 (미니멀 타이포), #2 (Expressive Typography), #16 (네이비 타이포) — 타이포 계열. #15는 한국어 환경 최적화라는 점에서 가장 실용적

---

### #16 — 네이비 타이포 임팩트 (Navy Typography Impact)

**한 줄 설명**: 네이비 단색 배경 위 흰색 대형 타이포로 권위와 신뢰를 전달

**대표 키워드**: 네이비 블루 단색, 대형 타이포, CSS 완성도, 권위감, 리쿠르팅 임팩트

**참고 사례**:
- 레퍼런스 PDF 캠페인 2 "1200%룰 이전에 이직하기" 슬라이드 스타일
- LinkedIn 기업 광고 — 네이비 배경 화이트 타이포 표준 포맷

**현재 도구 복제 가능성**: **상**
- Playwright HTML→PNG: 네이비 배경(#1a2e4a 계열) + 흰색 Bold 타이포. 즉시 구현
- CSS 완성도 기준 가장 안정적인 결과물

**품질 기대치**: **상** — 색상+폰트 2가지 변수만 관리하면 됨

**구현 난이도**: **쉬움** — 단색 배경 + 텍스트 위계 3단으로 구성. 이미지 불필요

**적합 용도**: FA 모집 리쿠르팅, 보험사 권위 광고, LinkedIn B2B 광고

**유사 컨셉 크로스레퍼런스**: #6 (다크 프리미엄), #9 (미니멀 타이포), #2 (Expressive Typography) — 타이포+다크 계열 4인방. #16은 네이비 단색 + 실용적 리쿠르팅 특화

---

### #17 — 숫자 임팩트 뉴스플래시 (Number Impact Newsflash)

**한 줄 설명**: 빨간 헤더바+검정 배경의 뉴스 속보 포맷으로 숫자를 긴박하게 전달

**대표 키워드**: 뉴스 속보 레이아웃, 초대형 숫자, 빨간 헤더바, 긴박감, Breaking News 미학

**참고 사례**:
- 레퍼런스 PDF 캠페인 2 "1200%룰" — 뉴스 속보형 슬라이드
- CNN Breaking News UI — 빨간 하단바 + 헤드라인 타이포 레이아웃

**현재 도구 복제 가능성**: **상**
- Playwright HTML→PNG: 검정 배경 + 빨간 상단 헤더바 CSS. 초대형 숫자 타이포
- Breaking News 레이아웃 HTML 구조 단순

**품질 기대치**: **상** — 레이아웃 패턴 명확. CSS만으로 방송 뉴스 UI 재현 가능

**구현 난이도**: **쉬움** — 뉴스 레이아웃 = 고정 그리드 + 색 블록. 요소 4개 이내

**적합 용도**: 긴박한 리쿠르팅 메시지 ("마감 D-7"), 보험 가입 촉구, 규제 변화 알림

**유사 컨셉 크로스레퍼런스**: #7 (임팩트 넘버), #5 (Symbol-as-Campaign) — 숫자 강조 삼각 관계. #17은 "속보" 긴박감 포맷, #7은 순수 숫자 임팩트, #5는 캠페인 전략

---

### #18 — 인물 사진 + 텍스트 하이브리드 (Portrait-Text Hybrid)

**한 줄 설명**: 실제 인물 사진(우측)과 대형 카피(좌측)를 나란히 배치해 신뢰와 메시지를 동시에

**대표 키워드**: 인물 사진, 좌우 분할, 텍스트 오버레이, 진정성 + 임팩트, hybrid-image

**참고 사례**:
- 레퍼런스 PDF 캠페인 3 "지인영업 NO, 온라인 Yes!" — 인물 우측 + 카피 좌측 레이아웃
- 사람인/원티드 FA 모집 광고 — 실제 성공 FA 사진 활용

**현재 도구 복제 가능성**: **상**
- hybrid-image: Gemini AI 배경(또는 실제 인물 사진) + HTML 텍스트 오버레이 결합. 이 컨셉의 최적 도구
- 인물 사진 있을 경우: hybrid-image로 바로 구현
- 인물 사진 없을 경우: gemini-image로 전문적 인물 이미지 생성 후 hybrid-image로 텍스트 추가

**품질 기대치**: **상** — hybrid-image의 핵심 활용 사례

**구현 난이도**: **보통** — 인물 사진 소싱 또는 생성이 핵심 변수. 레이아웃 자체는 단순

**적합 용도**: FA 모집 성공 사례 광고, 인물 중심 보험 광고, 리쿠르팅 신뢰 광고

**유사 컨셉 크로스레퍼런스**: #8 (감성 내러티브) — 인물+감성 접근 공유. #20 (좌우 분할 솔루션형) — 레이아웃 구조 유사하나 인물 위치와 메시지 톤 상이

---

### #19 — 타겟 페르소나 카드 (Target Persona Card)

**한 줄 설명**: 원형 프로필 3개를 나란히 놓아 "당신 같은 분들을 모집합니다"를 시각화

**대표 키워드**: 페르소나 세분화, 원형 프로필, 라벨 태그, CTA 포함, 포용적 메시지

**참고 사례**:
- 레퍼런스 PDF 캠페인 1 "서울대, 경영전략컨설팅 출신" — 다중 페르소나 병치 레이아웃
- 리멤버 FA 모집 광고 — 직군별 타겟 세분화 카드

**현재 도구 복제 가능성**: **상**
- Playwright HTML→PNG: Flexbox 3열 + 원형 이미지 클리핑 + 라벨 태그 CSS
- gemini-image: 각 페르소나 인물 사진 생성 후 grid에 배치
- hybrid-image: 배경 + 텍스트 레이어 결합

**품질 기대치**: **상** — 레이아웃 패턴 명확. 프로필 이미지 품질이 최종 변수

**구현 난이도**: **보통** — 3개 인물 이미지 소싱/생성 필요. CSS 레이아웃은 표준적

**적합 용도**: 직군별 FA 모집 (경력직/신입/전직 3분류), 보험 타겟 고객 세분화 광고

**유사 컨셉 크로스레퍼런스**: #18 (인물+텍스트 하이브리드) — 인물 활용 공유. 차이는 단수 vs 복수 인물 구성

---

### #20 — 좌우 분할 솔루션형 (Split-Layout Solution)

**한 줄 설명**: 좌측 인물·문제/우측 텍스트+CTA로 "문제→해결" 구조를 한 화면에 담는다

**대표 키워드**: 좌우 50% 분할, 문제-해결 구조, 밝은 톤, 희망 메시지, CTA 포함

**참고 사례**:
- 레퍼런스 PDF 캠페인 3 "지인영업 NO, 온라인 Yes!" — 우측 인물+좌측 카피 분할 구조
- 메리츠화재 FA 모집 광고 — 밝은 배경 + 해결 메시지 분할 레이아웃

**현재 도구 복제 가능성**: **중상**
- hybrid-image: 좌측 인물 사진(gemini-image 생성) + 우측 텍스트 HTML 오버레이. 이 포맷의 최적 도구
- Playwright HTML→PNG: 순수 CSS로 분할 레이아웃 구성. 사진 없이 컬러 블록 분할도 가능

**품질 기대치**: **상** (인물 사진 품질에 의존)

**구현 난이도**: **보통** — 좌우 분할 CSS 단순하나 인물 사진+배경 블렌딩 자연스러움이 변수

**적합 용도**: 리쿠르팅 "현실 vs 대안" 대비 광고, 보험 "걱정 → 안심" 감성 광고, FA 모집 "지금 vs 미래" 대비

**유사 컨셉 크로스레퍼런스**: #18 (인물+텍스트 하이브리드) — 레이아웃 근접. #8 (감성 내러티브) — 스토리 구조 공유. 차이는 #20이 문제-해결 이분법적 구조를 명시적으로 사용

---

## 4. 유사 컨셉 매핑

### 그룹 A — 타이포그래피 중심 4인방

```
#2 감정 타이포 시스템 ←→ #9 미니멀 타이포 ←→ #15 CJK 타이포 미니멀 ←→ #16 네이비 타이포 임팩트
```

| 컨셉 | 공통점 | 차별점 |
|---|---|---|
| #2 Expressive Typography | 서체만으로 메시지 전달 | 감정·모션 표현 특화. Variable Font 필요 |
| #9 Minimal Typography | 서체만으로 메시지 전달 | 흑백+여백 순수주의. 감정 표현 최소화 |
| #15 CJK Typography Minimal | 서체만으로 메시지 전달 | 한글 폰트 최적화. 그라디언트 배경 허용 |
| #16 Navy Typography Impact | 서체만으로 메시지 전달 | 네이비 단색 배경 특화. 리쿠르팅 권위감 |

**선택 기준**: 감정 소구가 목적이면 #2, 메시지 순수 전달이면 #9, 한글 텍스트 많으면 #15, 리쿠르팅 신뢰감이면 #16

---

### 그룹 B — 숫자/상징 강조 3인방

```
#5 Symbol-as-Campaign ←→ #7 임팩트 넘버 ←→ #17 숫자 뉴스플래시
```

| 컨셉 | 공통점 | 차별점 |
|---|---|---|
| #5 Symbol-as-Campaign | 하나의 숫자/상징이 주인공 | 캠페인 전체 설계. 시리즈 일관성 |
| #7 Impact Number | 하나의 숫자/상징이 주인공 | 단일 광고 임팩트 최대화. 즉시 제작 |
| #17 Number Newsflash | 하나의 숫자/상징이 주인공 | 긴박감·속보 포맷. 기한/마감 소구 |

**선택 기준**: 캠페인 시스템을 만들려면 #5, 단발 임팩트는 #7, 긴박한 마감 메시지는 #17

---

### 그룹 C — 반전/저항 전략 2인방

```
#1 Constraint-as-Canvas ←→ #3 Anti-Polish Authenticity
```

| 컨셉 | 공통점 | 차별점 |
|---|---|---|
| #1 Constraint-as-Canvas | 광고 관습을 뒤집는 전략 | 특정 매체(계약서·약관)를 캔버스로 전용 |
| #3 Anti-Polish Authenticity | 광고 관습을 뒤집는 전략 | 완성도를 의도적으로 낮춰 진정성 획득 |

**선택 기준**: 특정 매체나 포맷을 비틀고 싶으면 #1, SNS 네이티브 UGC 느낌이면 #3

---

### 그룹 D — 그라디언트/컬러 에너지 2인방

```
#10 활력 그라디언트 ←→ #13 CSS Flexbox+그라디언트
```

| 컨셉 | 공통점 | 차별점 |
|---|---|---|
| #10 Vitality Gradient | 그라디언트 색상 에너지 활용 | 디자인 컨셉. MZ 감성 목표값 |
| #13 CSS Flexbox+Gradient | 그라디언트 색상 에너지 활용 | 기술 구현 방법론. #10의 실행 경로 |

**관계**: #10을 만들고 싶을 때 쓰는 기술 도구가 #13이다

---

### 그룹 E — 인물 사진 활용 3인방

```
#8 감성 내러티브 ←→ #18 인물+텍스트 하이브리드 ←→ #20 좌우 분할 솔루션형
```

| 컨셉 | 공통점 | 차별점 |
|---|---|---|
| #8 Emotional Narrative | 인물 사진 + 따뜻한 스토리 | 감정→수치→행동 3단 서사 구조 |
| #18 Portrait-Text Hybrid | 인물 사진 + 텍스트 결합 | 좌우 이분법. 사진 vs 텍스트 대등 분할 |
| #20 Split-Layout Solution | 인물 사진 + 텍스트 결합 | 문제-해결 이분법. 밝고 희망적 톤 |

---

### 그룹 F — 기술 인프라 4인방 (디자인 스타일 아님)

```
#11 JSX 선언적 템플릿 → #12 블록 기반 모듈러 → #13 CSS 그라디언트 → #14 SVG-first 파이프라인
```

이 4개는 **"어떻게 만드느냐"의 기술 방법론**이며, 위의 디자인 컨셉(#1~#10, #15~#20)을 **구현하는 인프라**다. 디자인 방향 선택 후 이 중 하나를 기술 경로로 선택한다.

---

## 5. 추천 우선순위 TOP 5

> **선정 기준**: (1) 현재 도구로 즉시 제작 가능, (2) 품질 기대치 상, (3) 리쿠르팅/보험 실전 적합성 높음

---

### 1위 — #7 임팩트 넘버 (Impact Number)

- **추천 이유**: 이미지 불필요. CSS만으로 즉시 완성. "연봉 2억 FA", "1,200% 룰" 같은 수치가 있는 리쿠르팅 메시지에 최강
- **제작 도구**: Playwright HTML→PNG
- **예상 제작 시간**: 30분 이내

---

### 2위 — #16 네이비 타이포 임팩트 (Navy Typography Impact)

- **추천 이유**: CSS 완성도 검증된 포맷. 네이비+화이트의 신뢰감은 금융/보험/리쿠르팅 모든 분야에 무결점 적용
- **제작 도구**: Playwright HTML→PNG
- **예상 제작 시간**: 30분 이내

---

### 3위 — #18 인물+텍스트 하이브리드 (Portrait-Text Hybrid)

- **추천 이유**: hybrid-image 도구의 핵심 사용 사례. 실제 FA 인물 사진이 있거나 AI 생성 인물을 쓸 수 있으면 신뢰도와 시각 임팩트를 동시에 달성
- **제작 도구**: hybrid-image (gemini-image 배경 + HTML 오버레이)
- **예상 제작 시간**: 1시간 이내

---

### 4위 — #9 미니멀 타이포 (Minimal Typography)

- **추천 이유**: 이미지 완전 불필요. 좋은 카피 하나면 프로 수준 완성. 대량 A/B 테스트에 가장 유리한 포맷
- **제작 도구**: Playwright HTML→PNG
- **예상 제작 시간**: 20분 이내

---

### 5위 — #17 숫자 뉴스플래시 (Number Impact Newsflash)

- **추천 이유**: 마감 기한 메시지("1200%룰 시행 전", "D-30")에 긴박감을 극대화하는 포맷. CSS로 뉴스 방송 UI 재현 가능. 클릭률 유리
- **제작 도구**: Playwright HTML→PNG
- **예상 제작 시간**: 30분 이내

---

> **참고**: TOP 5 이후 도전적 선택으로는 #1 (Constraint-as-Canvas)을 권장한다. AXA Cannes Lions 수상작 직접 응용으로 보험 약관을 광고로 뒤집는 컨셉은 경쟁 광고 대비 압도적 차별화를 만들 수 있으나, 카피 기획 역량이 선행되어야 한다.

---

*작성: 나부 (UX/UI 디자이너) | 2026-03-28*