# 디자인 컨셉 카탈로그 예시 제작 브리프 — Batch 3 (컨셉 #11~#15)

**작성일**: 2026-03-28
**작성자**: 마르둑 (개발5팀장)
**대상**: 디자인팀 (비너스/나부)
**원본 태스크**: task-1212.1

---

## 공통 사양

- **사이즈**: 1080x1080px PNG
- **텍스트 소스**: 리쿠르팅 앵글 A 카피 (v5)
  - 메인 훅: "열심히는 하는데, 월급은 제자리걸음?"
  - 서브: "2026년 7월, 게임이 바뀝니다"
  - CTA: "지금 상담 신청하기"
- **핵심 요구**: 5개 컨셉이 **기술 인프라 트랙을 디자인 관점으로 재해석**해야 함
- **저장 경로**: `/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만 사용** (Batch 3 전체 5개 컨셉 모두 hybrid-image)

---

## 컨셉별 제작 상세

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

- **파일명**: `concept-11-jsx-template.png`
- **추천 도구**: hybrid-image (Playwright HTML→PNG)
- **비주얼 컨셉**:
  - 깔끔한 컴포넌트 기반 레이아웃, 카드 UI 스타일, 모던 SaaS 느낌
  - react-email 스타일 컴포넌트 구조를 시각적으로 표현
  - 카드 요소들이 정렬된 모던한 대시보드/SaaS 인터페이스 감성
  - 각 카드에 핵심 메시지 배치 (훅, 서브카피, CTA를 별도 카드로)
- **배경**: 라이트 그레이(#F5F5F5) + 화이트 카드(#FFFFFF) + 블루 액센트(#2563EB)
- **색상 팔레트**: 라이트 그레이 배경, 화이트 카드, 블루 액센트, 다크 텍스트(#1A1A2E)
- **폰트**: Pretendard (400/600/700), 코드 폰트 JetBrains Mono 소량 포인트 사용
- **레이아웃**: 카드 그리드 (2열 또는 3열), 카드 간 일정 간격(16px), 라운드 코너(12px), 미세 그림자
- **참고 사례**: react-email 데모 페이지, Vercel 대시보드 UI
- **구현 난이도**: 쉬움

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

- **파일명**: `concept-12-modular-block.png`
- **추천 도구**: hybrid-image (Playwright HTML→PNG)
- **비주얼 컨셉**:
  - 4분할 그리드, 각 블록에 다른 색상+정보, 인포그래픽 느낌
  - JSON 블록 조합 시스템을 시각적으로 표현
  - 각 블록이 독립적 정보 단위: 훅/숫자/서브카피/CTA
  - 블록 간 대비가 강해야 모듈러 느낌 강조
- **배경**: CSS 그리드 레이아웃, 4색 블록
- **색상 팔레트**:
  - 블록 1: 네이비(#1E3A5F) + 화이트 텍스트
  - 블록 2: 화이트(#FFFFFF) + 다크 텍스트
  - 블록 3: 코럴(#FF6B6B) + 화이트 텍스트
  - 블록 4: 민트(#4ECDC4) + 다크 텍스트
- **폰트**: Pretendard Variable (각 블록별 weight 차이 — 300/500/700/900)
- **레이아웃**: 정확한 2x2 그리드, 블록 간 갭 4px, 각 블록 270x270px 내부 패딩 24px
- **참고 사례**: GrapesJS 블록 에디터, Canva 블록 템플릿
- **구현 난이도**: 쉬움

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

- **파일명**: `concept-13-css-gradient.png`
- **추천 도구**: hybrid-image (CSS only — Gemini 배경 불필요)
- **비주얼 컨셉**:
  - 순수 CSS로 프로 수준 달성. 이미지 없이 CSS 그라디언트만으로 프리미엄 느낌
  - 미세 그라디언트 + 정교한 타이포 계층
  - 다층 그라디언트로 깊이감 표현
  - 텍스트 계층: 대형 훅(48px) → 중형 서브(24px) → 소형 CTA(18px)
- **배경**: 멀티 레이어 CSS 그라디언트
  - Layer 1: `linear-gradient(135deg, #0B1D3A 0%, #132B4F 50%, #0A3D2A 100%)`
  - Layer 2: `radial-gradient(ellipse at 70% 30%, rgba(78,205,196,0.15) 0%, transparent 70%)`
- **색상 팔레트**: 딥 네이비(#0B1D3A) → 딥 그린(#0A3D2A) 미세 변화, 민트 글로우 포인트, 화이트 텍스트
- **폰트**: Pretendard (300/600/800), 정교한 자간/행간 설정
- **레이아웃**: Flexbox column, 중앙 정렬, 상하 여백 충분, 텍스트 계층 3단
- **참고 사례**: Vercel OG 이미지, Tailwind UI 히어로 섹션
- **구현 난이도**: 쉬움

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

- **파일명**: `concept-14-svg-first.png`
- **추천 도구**: hybrid-image (Playwright HTML→PNG, SVG 인라인)
- **비주얼 컨셉**:
  - 벡터 아이콘 기반 인포그래픽 스타일, 깔끔한 라인 아트
  - 파이프라인 흐름을 시각화: 입력 → 처리 → 출력 단계
  - 각 단계에 SVG 아이콘 + 라벨
  - 텍스트 메시지는 파이프라인 위아래에 배치
- **배경**: 화이트(#FFFFFF) + 라인아트 아이콘 + 미니멀 컬러
- **색상 팔레트**: 화이트 배경, 다크 그레이 라인(#333333, stroke-width: 1.5), 블루 포인트(#3B82F6), 연그레이 서브 요소(#E5E7EB)
- **폰트**: Pretendard (400/600), 아이콘 라벨은 소형(14px), 메인 카피 중형(32px)
- **레이아웃**: 수평 파이프라인 중앙 배치, 상단 메인 훅, 하단 CTA, 아이콘 3~4개 수평 연결
- **SVG 요소**: 화살표(→), 문서 아이콘, 톱니바퀴, 체크마크 — 모두 인라인 SVG
- **참고 사례**: Penpot 디자인 도구, Lucide Icons
- **구현 난이도**: 보통

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

- **파일명**: `concept-15-cjk-typo.png`
- **추천 도구**: hybrid-image (Playwright HTML→PNG)
- **비주얼 컨셉**:
  - 한글 서체 아름다움 극대화. 큰 한글 글자가 주인공, 배경 최소화
  - "제자리걸음" 또는 "성장"을 120px+ 초대형 사이즈로 중앙 배치
  - 나머지 카피는 극소형(16~20px)으로 배치하여 대비 극대화
  - Pretendard Variable의 weight 100~900 범위를 활용한 시각적 긴장감
- **배경**: 단색 — 옵션 A: 아이보리(#FFF8F0) / 옵션 B: 블랙(#0A0A0A)
- **색상 팔레트**:
  - 아이보리 버전: 배경 #FFF8F0, 텍스트 #1A1A1A, 포인트 없음 (순수 텍스트 힘)
  - 블랙 버전: 배경 #0A0A0A, 텍스트 #F5F5F5, 미세 골드 포인트(#D4A855)
- **폰트**: Pretendard Variable (메인 글자 weight 900 / 서브 텍스트 weight 200), Noto Sans KR 대안
- **레이아웃**: 중앙 집중, 메인 글자가 화면의 50~60% 차지, 서브 텍스트 하단 좌측 정렬
- **참고 사례**: 토스 UI 카드 시스템, Pretendard 공식 데모
- **구현 난이도**: 쉬움

---

## 디자인팀 요청사항

1. 5개 컨셉 모두 제작 후 `/home/jay/workspace/output/meta-ads/concept-samples/` 에 저장
2. **기술 인프라 트랙을 디자인 관점에서 재해석**한 것이므로, 기술적 요소(코드, 파이프라인, SVG 등)를 시각적으로 표현하되 광고로서의 메시지 전달력을 우선시할 것
3. 각 컨셉이 **명확히 구별되는 비주얼 스타일**인지 최종 확인
4. 완성 후 제이회장님 검토를 위해 파일 전달 필요
5. **satori-cardnews 절대 사용 금지** — hybrid-image만 사용