# 디자인 컨셉 카탈로그 예시 제작 브리프 — Batch 6 (컨셉 #16~#18)

**작성일**: 2026-03-28
**작성자**: 아폴론 (콘텐츠 프로듀서) + 페이토 (CRO 카피라이터)
**대상**: 디자인팀 (비너스/나부)

---

## 공통 사양

- **사이즈**: 1080x1080px PNG
- **텍스트 소스**: 리쿠르팅 앵글 A 카피 (정착지원금 버전)
  - 메인 훅: "열심히는 하는데, 월급은 제자리걸음?"
  - 서브1: "신입 정착지원금 최대 1,000만원"
  - 서브2: "경력직 직전연봉 50%까지 지원"
  - 긴급성: "2026년 7월, 게임이 바뀝니다" / "정착지원금 2026.7월 변경 예정"
  - CTA: "지금 상담 신청하기"
  - 조직: T.O.P 사업단 (인카금융서비스 코스닥 상장)
  - 추가 카피: "경제 부담 없이 시작하세요", "변화에 치일 것인가, 올라탈 것인가"
- **저장 경로**: `/home/jay/workspace/output/meta-ads/concept-samples/`
- **참고 카탈로그**: `/home/jay/workspace/memory/specs/design-concept-catalog-20.md`
- **참고 카피**: `/home/jay/workspace/memory/tasks/ad-creative-recruiting-v5.md`

---

## 절대 규칙

- **satori-cardnews 사용 절대 금지** — 카드뉴스 전용. 광고 배너에 쓰면 작업 전체 폐기.
- **hybrid-image 또는 gemini-image만 사용**
- #16은 CSS only (Gemini 배경 이미지 불필요)
- #17은 CSS only (Breaking News UI, Gemini 배경 이미지 불필요)
- #18은 hybrid-image (Gemini 인물 배경 필수)

---

## 컨셉별 제작 상세

---

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

- **파일명**: `concept-16-navy-typography.png`
- **저장 경로**: `/home/jay/workspace/output/meta-ads/concept-samples/concept-16-navy-typography.png`
- **추천 도구**: hybrid-image (Playwright HTML→PNG, CSS only — Gemini 배경 불필요)

#### 비주얼 컨셉
- 네이비 단색 배경 위 흰색 대형 타이포로 권위와 신뢰를 전달
- LinkedIn 기업 광고 표준 포맷 감성 — 깔끔하고 전문적이며 권위 있는 느낌
- 텍스트 계층이 전부: 훅 → 지원금 수치 → 긴급 마감 → CTA
- 장식 요소 최소화. 얇은 화이트 구분선(divider) 1~2개로 텍스트 계층 구분
- 코스닥 상장사 신뢰 배지(작은 뱃지 또는 텍스트 라벨)를 하단 좌측에 배치

#### 배경 설정
- **순수 CSS 단색**: `#1A2E4A` (딥 네이비)
- Gemini 배경 이미지 불필요 — CSS background-color만으로 완결

#### 색상 팔레트
- 배경: `#1A2E4A` (딥 네이비)
- 메인 텍스트: `#FFFFFF` (퓨어 화이트)
- 포인트 강조: `#4A9EFF` (라이트 블루 — 숫자/금액 강조용)
- 서브 텍스트: `rgba(255,255,255,0.75)` (반투명 화이트)
- 구분선: `rgba(255,255,255,0.20)` (미세 화이트 라인)
- 긴급 배지 배경: `#FF4444` (레드 — "변경 예정" 라벨)

#### 폰트 설정
| 요소 | Family | Weight | Size |
|------|--------|--------|------|
| 메인 훅 | Pretendard | 800 | 52px |
| 지원금 수치 ("최대 1,000만원") | Pretendard | 900 | 64px |
| 서브카피 | Pretendard | 400 | 28px |
| 긴급 라벨 ("2026.7월 변경 예정") | Pretendard | 700 | 22px |
| CTA 버튼 텍스트 | Pretendard | 600 | 26px |
| 조직명 뱃지 | Pretendard | 500 | 18px |

#### 레이아웃 상세
- Flexbox column, 중앙 정렬 (align-items: center, justify-content: center)
- 상단 여백 80px / 하단 여백 80px / 좌우 여백 72px
- 텍스트 계층 3단: 훅(상단 40%) → 수치 강조(중앙 30%) → CTA 영역(하단 30%)
- CTA 버튼: 화이트 배경 + 네이비 텍스트, border-radius 8px, padding 18px 48px
- 조직명 뱃지("T.O.P 사업단 | 코스닥 상장"): 하단 좌측 배치, 작은 사이즈

#### 텍스트 배치
```
[상단 영역]
열심히는 하는데,
월급은 제자리걸음?
(Pretendard 800, 52px, 화이트, 중앙 정렬)

[구분선 — 얇은 화이트 가로선]

[중앙 강조 영역]
신입 정착지원금 최대 1,000만원
(Pretendard 900, 64px, 라이트 블루 #4A9EFF)

경력직 직전연봉 50%까지 지원
(Pretendard 600, 34px, 화이트)

[긴급 배지 — 빨간 박스]
📌 정착지원금 2026.7월 변경 예정
(Pretendard 700, 22px, 화이트 on 레드 배경)

[하단 CTA 영역]
[지금 상담 신청하기] ← 버튼 (화이트 배경, 네이비 텍스트)

T.O.P 사업단 | 인카금융서비스 코스닥 상장
(하단 좌측, Pretendard 500, 18px, 반투명 화이트)
```

#### 구현 난이도
**쉬움** — 단색 CSS 배경 + 텍스트 위계 4단. 이미지 소싱 불필요. CSS 완성도 기준 가장 안정적인 결과물.

---

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

- **파일명**: `concept-17-number-newsflash.png`
- **저장 경로**: `/home/jay/workspace/output/meta-ads/concept-samples/concept-17-number-newsflash.png`
- **추천 도구**: hybrid-image (Playwright HTML→PNG, CSS only — Gemini 배경 불필요)

#### 비주얼 컨셉
- CNN Breaking News UI를 그대로 재현 — 뉴스 속보 포맷으로 긴박감 극대화
- 검정 배경 + 빨간 상단 헤더바 + 초대형 숫자 타이포
- "1,000만원" 숫자가 화면의 40%를 차지 — 숫자가 압도적 주인공
- 속보 자막 레이아웃: 하단에 빨간 바(ticker) + 흰색 자막 텍스트
- 긴박함과 중요성을 뉴스 포맷으로 표현 → "이건 광고가 아니라 뉴스다" 느낌

#### 배경 설정
- **순수 CSS**: `#0A0A0A` (거의 블랙)
- Gemini 배경 이미지 불필요 — Breaking News 레이아웃 구조 자체가 배경

#### 색상 팔레트
- 메인 배경: `#0A0A0A` (딥 블랙)
- 상단 헤더바: `#CC0000` (CNN 레드)
- "BREAKING NEWS" 레이블: `#FFFFFF` on `#CC0000`
- 초대형 숫자: `#FFFFFF` (퓨어 화이트)
- 숫자 강조 포인트: `#FF4444` (브라이트 레드 — 핵심 수치)
- 하단 자막 바: `#CC0000` (레드 배경)
- 자막 텍스트: `#FFFFFF`
- 서브 텍스트: `rgba(255,255,255,0.80)`

#### 폰트 설정
| 요소 | Family | Weight | Size |
|------|--------|--------|------|
| "BREAKING NEWS" 레이블 | Pretendard | 800 | 24px (letter-spacing: 4px) |
| 초대형 숫자 ("1,000만원") | Pretendard | 900 | 140px |
| 숫자 단위 ("최대") | Pretendard | 400 | 36px |
| 메인 헤드라인 | Pretendard | 700 | 38px |
| 하단 자막 | Pretendard | 600 | 26px |
| 서브 설명 | Pretendard | 400 | 22px |

#### 레이아웃 상세
- **상단 헤더바** (높이 72px, `#CC0000`): "BREAKING NEWS" 레이블 좌측 + 날짜/시간 우측
- **메인 콘텐츠 영역** (검정 배경, 전체 높이의 65%): 초대형 숫자 중앙 배치
- **중간 서브 영역** (전체 높이의 15%): 헤드라인 카피
- **하단 자막 바** (높이 80px, `#CC0000`): 긴급 메시지 ticker 형식

#### 텍스트 배치
```
[상단 헤더바 — 레드 #CC0000, 높이 72px]
 ▌BREAKING NEWS▌    2026년 3월 28일

[메인 배경 영역 — 블랙]

[초대형 숫자 영역 — 중앙 세로 40% 차지]
  최대
  1,000만원
  (Pretendard 900, 140px, 화이트)

[서브 카피 — 숫자 바로 아래]
  신입 FA 정착지원금
  (Pretendard 700, 38px, 화이트)

  경력직 직전연봉 50%까지 별도 지원
  (Pretendard 400, 22px, 반투명 화이트)

[하단 자막 바 — 레드 #CC0000, 높이 80px]
  ▶ 정착지원금 2026.7월 변경 예정 — 지금 바로 상담 신청하기  ▶
  (Pretendard 600, 26px, 화이트)
```

#### 구현 난이도
**쉬움** — 뉴스 레이아웃 = 고정 그리드 + 색 블록. 요소 4개 이내. CSS만으로 방송 뉴스 UI 재현 가능.

---

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

- **파일명**: `concept-18-portrait-text.png`
- **저장 경로**: `/home/jay/workspace/output/meta-ads/concept-samples/concept-18-portrait-text.png`
- **추천 도구**: hybrid-image (Gemini AI 인물 배경 생성 + HTML 텍스트 오버레이)

#### 비주얼 컨셉
- 실제 성공한 보험 FA의 자신감 있는 모습(우측 50%)과 임팩트 카피(좌측 50%)를 나란히 배치
- "지인영업 NO, 온라인 YES" 레퍼런스 레이아웃 재현 — 인물이 메시지에 신뢰를 부여
- 인물: 30~40대 전문직 느낌의 비즈니스 캐주얼 남성 또는 여성, 자신감 있는 미소
- 좌측 텍스트 영역은 딥 네이비 배경으로 인물과 명확히 구분
- FA 성공 사례 광고 맥락 — "나도 저 사람처럼 될 수 있다"는 심리적 공감

#### 배경 설정
- **Gemini AI 생성 프롬프트**:
  ```
  Professional Korean business person in their 30s, confident smile,
  business casual attire (navy or white shirt), clean white/light gray
  studio background, upper body portrait, natural studio lighting,
  high quality photo, 540x1080 pixels, right side of image,
  realistic professional headshot style
  ```
- **좌측 텍스트 영역**: CSS `#1A2E4A` (딥 네이비) 단색 배경
- hybrid-image로 Gemini 인물 이미지(우측)와 HTML 텍스트 영역(좌측)을 결합

#### 색상 팔레트
- 좌측 배경 (텍스트 영역): `#1A2E4A` (딥 네이비)
- 메인 카피: `#FFFFFF` (퓨어 화이트)
- 포인트 강조 (수치): `#4A9EFF` (라이트 블루)
- 긴급 라벨: `#FF4444` on `#FF4444` 배경 (레드 배지)
- CTA 버튼: `#FFFFFF` 배경 + `#1A2E4A` 텍스트
- 우측 인물 영역: Gemini 생성 자연광 인물 사진

#### 폰트 설정
| 요소 | Family | Weight | Size |
|------|--------|--------|------|
| 메인 훅 (2줄) | Pretendard | 800 | 44px |
| 수치 강조 ("1,000만원") | Pretendard | 900 | 56px |
| 서브카피 | Pretendard | 400 | 24px |
| 긴급 배지 텍스트 | Pretendard | 700 | 18px |
| CTA 버튼 텍스트 | Pretendard | 600 | 22px |
| 조직명 뱃지 | Pretendard | 400 | 16px |

#### 레이아웃 상세
- **전체**: 1080x1080px, 좌우 50:50 분할 (각 540px)
- **좌측 텍스트 영역** (540x1080px, 네이비 배경):
  - 상하 패딩 64px, 좌우 패딩 48px
  - Flexbox column, justify-content: center
  - 텍스트 요소 수직 중앙 정렬
- **우측 인물 영역** (540x1080px):
  - Gemini 생성 인물 사진 — object-fit: cover
  - 좌측 경계에 미세 그라디언트 페이드 (네이비→투명) 처리 권장

#### 텍스트 배치
```
[좌측 텍스트 영역 — 네이비 배경 #1A2E4A]

열심히는 하는데,
월급은 제자리걸음?
(Pretendard 800, 44px, 화이트, 좌측 정렬)

───── (얇은 화이트 구분선) ─────

신입 정착지원금
최대 1,000만원
(Pretendard 900, 56px, 라이트 블루 #4A9EFF)

경력직 직전연봉 50%까지 지원
(Pretendard 400, 24px, 반투명 화이트)

경제 부담 없이 시작하세요
(Pretendard 400, 22px, 반투명 화이트)

[레드 배지 — 인라인 블록]
 ⚡ 2026.7월 변경 예정
(Pretendard 700, 18px, 화이트 on 레드 #FF4444)

[CTA 버튼 — 좌측 정렬]
 지금 상담 신청하기 →
(화이트 버튼, 네이비 텍스트, border-radius: 8px)

T.O.P 사업단 | 인카금융서비스 코스닥 상장
(Pretendard 400, 16px, 반투명 화이트, 최하단)

[우측 인물 영역 — Gemini 생성 인물 사진]
  자신감 있는 전문직 인물 (우측 배치)
```

#### 구현 난이도
**보통** — 인물 사진 Gemini 생성이 핵심 변수. 생성 후 hybrid-image로 좌측 HTML 오버레이 결합. 레이아웃 자체는 단순하지만 인물-배경 블렌딩 자연스러움에 추가 조정 필요할 수 있음.

---

## 컨셉 간 차별화 확인표

| 항목 | #16 네이비 타이포 | #17 뉴스플래시 | #18 인물+텍스트 |
|------|-----------------|--------------|----------------|
| 배경 타입 | CSS 단색 (네이비) | CSS 단색 (블랙) | Gemini 인물 사진 |
| 주인공 요소 | 타이포그래피 계층 | 초대형 숫자 | 인물 사진 |
| 분위기 | 권위/전문성 | 긴박/속보 | 신뢰/공감 |
| 색 시스템 | 네이비+화이트+블루 | 블랙+레드+화이트 | 네이비+인물(자연색)+화이트 |
| 도구 | hybrid-image (CSS only) | hybrid-image (CSS only) | hybrid-image (Gemini+HTML) |
| 난이도 | 쉬움 | 쉬움 | 보통 |

---

## 디자인팀 요청사항

1. 3개 컨셉 모두 제작 후 `/home/jay/workspace/output/meta-ads/concept-samples/` 에 저장
2. **3개 컨셉이 확실히 다른 비주얼 스타일**인지 최종 확인 — 배경/주인공 요소/분위기 모두 달라야 함
3. **#16, #17은 CSS only** — Gemini 이미지 생성 호출 없이 HTML+CSS만으로 완결
4. **#18은 hybrid-image 필수** — Gemini 인물 사진 생성 후 HTML 텍스트 오버레이 결합
5. **satori-cardnews 절대 사용 금지** — hybrid-image만 사용
6. 완성 후 제이회장님 검토를 위해 파일 전달 필요