# 디자인 브리프 — Concept #36: hybrid-v4-refined-B **작성일**: 2026-03-29 **작성자**: 아폴론 (콘텐츠 프로듀서) + 페이토 (CRO 카피라이터) **대상**: 디자인팀 (비너스/나부) --- ## 1. Concept Overview | 항목 | 내용 | |------|------| | 컨셉 번호 | #36 | | 컨셉 이름 | hybrid-v4-refined-B | | 스타일 코드 | Centered Headline + Info Card | | 앵글 | 정착지원금 (Angle A) | | 사이즈 | 1080×1080px | | 생성 방식 | hybrid-image (Gemini 배경 + HTML 텍스트 오버레이) | ### 컨셉 설명 v4 슬라이드 3/4 스타일을 정제한 버전. 사진 배경 + 하단 그라디언트 오버레이 + 상단 중앙 헤드라인 + 하단 앵커 frosted glass 인포 카드 구조. 기존 v4 대비 정보 카드 텍스트 크기를 44px → 64px로 대폭 확대하여 모바일 가독성을 강화하고, CTA 색상을 초록에서 오렌지 #EA580C로 교체하여 브랜드 일관성을 확보한다. --- ## 2. Visual Direction ### 레이아웃 구조 ``` ┌─────────────────────────────┐ │ [bg.png] │ ← 풀-블리드 사진 배경 │ │ │ "정착지원금이 │ ← 헤드라인 (top 25%, 중앙 정렬) │ 문제를 풀어줍니다." │ │ │ │ ░░░░ 하단 그라디언트 ░░░ │ ← transparent → navy (하단 52% 높이) │ ┌─────────────────────┐ │ │ │ 신입 최대 1,000만원 │ │ ← frosted glass 인포 카드 │ │ 경력 직전연봉 50%까지│ │ (하단 앵커) │ └─────────────────────┘ │ │ [T.O.P 파격 지원 확인] │ ← CTA 버튼 (오렌지) │ 조건 있음 · 상담 시 확인 │ ← 디스클레이머 └─────────────────────────────┘ ``` ### 색상 팔레트 | 역할 | 색상값 | 비고 | |------|--------|------| | 배경 그라디언트 시작 | `transparent` | 상단 투명 | | 배경 그라디언트 끝 | `rgba(0,59,92,0.88)` | 딥 네이비 | | 인포 카드 배경 | `rgba(0,59,92,0.65)` | frosted glass | | 인포 카드 보더 | `rgba(255,255,255,0.22)` | 강화된 반투명 보더 | | 헤드라인 텍스트 | `#FFFFFF` | 퓨어 화이트 | | 인포 텍스트 기본 | `#FFFFFF` | 퓨어 화이트 | | 인포 텍스트 강조 (숫자) | `#EA580C` | 오렌지 — 브랜드 포인트 | | CTA 배경 | `#EA580C` | 오렌지 pill | | CTA 텍스트 | `#FFFFFF` | 퓨어 화이트 | | 디스클레이머 텍스트 | `rgba(255,255,255,0.65)` | 반투명 화이트 | ### 폰트 규격 | 요소 | Family | Weight | Size | Color | |------|--------|--------|------|-------| | 헤드라인 라인1: "정착지원금이" | Pretendard | 900 | 85px | #FFFFFF | | 헤드라인 라인2: "문제를 풀어줍니다." | Pretendard | 900 | 85px | #FFFFFF | | 인포 라인1: "신입 최대 " + "1,000만원" | Pretendard | 700 | 64px | 화이트 + #EA580C | | 인포 라인2: "경력 직전연봉 " + "50%까지" | Pretendard | 700 | 64px | 화이트 + #EA580C | | CTA 버튼: "T.O.P 파격 지원 확인" | Pretendard | 700 | 42px | #FFFFFF | | 디스클레이머 | Pretendard | 400 | 40px | rgba(255,255,255,0.65) | > **최소 폰트 규칙**: 헤드라인 84px+, 인포/서브 64px+, CTA·디스클레이머 최소 40px — 전 요소 준수 확인됨. ### 레이아웃 상세 - **캔버스**: 1080×1080px - **배경**: `bg.png` 풀-블리드, `object-fit: cover`, `object-position: center` - **하단 그라디언트 오버레이**: 높이 52% (562px), position absolute 하단 고정, `linear-gradient(to bottom, transparent, rgba(0,59,92,0.88))` - **헤드라인**: position absolute, top 25% (약 270px), 좌우 패딩 60px, 중앙 정렬, line-height 1.15 - **인포 카드**: position absolute, bottom 170px, 좌우 마진 48px, `backdrop-filter: blur(14px)`, `border-radius: 20px`, `border: 1.5px solid rgba(255,255,255,0.22)`, padding 36px 48px - **CTA 버튼**: position absolute, bottom 72px, 중앙 정렬, `border-radius: 50px`, padding 22px 56px - **디스클레이머**: CTA 버튼 바로 아래 (bottom 28px), 중앙 정렬 --- ## 3. Copy ### 헤드라인 (top ~25%, 중앙) ``` 정착지원금이 문제를 풀어줍니다. ``` - Pretendard 900, 85px, 흰색, 중앙 정렬 - 2줄 표시 (`\n` 줄바꿈) - text-shadow: 0 2px 24px rgba(0,0,0,0.45) ### 인포 카드 (frosted glass, 하단 앵커) ``` 신입 최대 1,000만원 경력 직전연봉 50%까지 ``` - 각 줄 Pretendard 700, 64px - "1,000만원", "50%" 부분만 오렌지 `#EA580C` 적용 - line-height 1.5 - 최대 2줄 엄수 ### CTA 버튼 ``` T.O.P 파격 지원 확인 ``` - Pretendard 700, 42px, 흰색 - 배경 #EA580C, border-radius 50px ### 디스클레이머 ``` 조건 있음 · 상담 시 확인 ``` - Pretendard 400, 40px, rgba(255,255,255,0.65) --- ## 4. Gemini Image Prompt (English) ``` Modern luxury apartment living room with floor-to-ceiling glass windows overlooking a city skyline at sunset, warm golden light streaming in, elegant minimal furniture, clean and premium atmosphere, editorial interior photography style, shallow depth of field, photorealistic, no people, no text, no logos. 1080x1080 square format. ``` **저장 파일명**: `bg.png` (디자인 브리프와 동일 디렉토리 상대 경로) --- ## 5. HTML Template ```html Concept #36 — hybrid-v4-refined-B
정착지원금이 문제를 풀어줍니다.
신입 최대 1,000만원 경력 직전연봉 50%까지
T.O.P 파격 지원 확인
조건 있음 · 상담 시 확인
``` --- ## 6. Technical Specs | 항목 | 사양 | |------|------| | 출력 사이즈 | 1080×1080px | | 포맷 | PNG | | 배경 파일 | `bg.png` (Gemini 생성, 동일 디렉토리) | | 폰트 소스 | `file:///home/jay/.local/share/fonts/Pretendard/` | | 폰트 사용 Weight | 900 (Black), 700 (Bold), 400 (Regular) | | Frosted glass blur | `backdrop-filter: blur(14px)` | | 그라디언트 높이 | 562px (52%) | | 헤드라인 위치 | top: 25% (translateY -50%) | | 인포 카드 bottom | 170px | | CTA bottom | 72px | | 생성 도구 | hybrid-image (Gemini 배경 생성 + Playwright HTML→PNG) | | 저장 경로 | `/home/jay/workspace/output/meta-ads/concept-catalog/36-hybrid-v4-refined-B/` | | 출력 파일명 | `concept-36-hybrid-v4-refined-B.png` | --- ## 7. Quality Checklist ### 폰트 크기 규칙 - [ ] 헤드라인 85px ≥ 84px 최소치 ✓ - [ ] 인포 카드 텍스트 64px ≥ 64px 최소치 ✓ - [ ] CTA 버튼 42px ≥ 40px 최소치 ✓ - [ ] 디스클레이머 40px ≥ 40px 최소치 ✓ ### 금지 규칙 - [ ] "방송DB" 미포함 ✓ - [ ] "챗GPT" 미포함 ✓ - [ ] "30종" 미포함 ✓ - [ ] satori-cardnews 미사용 ✓ ### 색상 규칙 - [ ] CTA 색상 #EA580C (오렌지) 확인 ✓ - [ ] 강조 숫자 색상 #EA580C (오렌지) 확인 ✓ - [ ] 그라디언트 종점 rgba(0,59,92,0.88) 네이비 확인 ✓ - [ ] 인포 카드 배경 rgba(0,59,92,0.65) 확인 ✓ ### 레이아웃 규칙 - [ ] 헤드라인 중앙 정렬, top ~25% 배치 확인 - [ ] 인포 카드 하단 앵커 배치 확인 - [ ] CTA 버튼 인포 카드 아래 배치 확인 - [ ] backdrop-filter blur(14px) 적용 확인 ### 카피 규칙 - [ ] 헤드라인 2줄 줄바꿈 확인 - [ ] 인포 카드 최대 2줄 엄수 확인 - [ ] "1,000만원" 오렌지 강조 확인 - [ ] "50%" 오렌지 강조 확인 ### 폰트 파일 - [ ] Pretendard-Black.otf (900) 로드 확인 - [ ] Pretendard-Bold.otf (700) 로드 확인 - [ ] Pretendard-Regular.otf (400) 로드 확인 - [ ] 로컬 폰트 경로 `file:///home/jay/.local/share/fonts/Pretendard/` 사용 확인 ### 최종 출력 - [ ] 1080×1080px PNG 출력 확인 - [ ] 배경 이미지 `bg.png` 로드 확인 - [ ] 텍스트 클리핑 없음 확인 - [ ] 모바일 가독성 (실제 폰 화면 시뮬레이션) 확인