# Task 1232.1 — 리쿠르팅 배너 디자인 브리프 (#13~#16) **작성자:** 페이토 (Peitho) — CRO 카피라이터 **앵글:** A (정착지원금) **캔버스:** 1080×1080px **폰트 규칙:** 헤드라인 84px↑ / 서브카피 64px↑ / CTA·라벨 40px↑ / 40px 미만 절대 금지 --- ## #13 — CSS Flexbox + 그라디언트 배너 ### 컨셉 요약 이미지 없이 CSS linear-gradient만으로 구성하는 다크 블루-그린 그라디언트 배너. Flexbox column 정렬로 텍스트 계층을 명확히 잡고, 대형 타이포 자체가 비주얼 역할을 담당. ### 텍스트 요소 | 요소 | 내용 | px | |------|------|----| | 상단 라벨 | T.O.P 사업단 | 44px | | 헤드라인 | 월급은 왜 제자리걸음? | 88px | | 서브카피 | 신입 최대 1,000만원 | 72px | | 보조 | 경력직 직전연봉 50% | 64px | | 긴급 배지 | 정착지원금 2026.7월 변경 예정 | 40px | | CTA | 지금 상담 신청하기 | 44px | > 제거 항목: "2026년 7월, 게임이 바뀝니다" — 긴급 배지와 중복, 공간 확보를 위해 삭제. ### 색상·배경 - 배경: `linear-gradient(145deg, #0a1628 0%, #0d2137 40%, #0a3d2e 100%)` - 헤드라인 텍스트: `#FFFFFF` - 서브카피 (혜택 금액): `#00E5A0` (민트 그린 — 그라디언트 끝색과 연결) - 상단 라벨: `#7EC8E3` (라이트 블루) - 긴급 배지 배경: `rgba(255,60,60,0.15)`, 테두리: `1px solid #FF3C3C`, 텍스트: `#FF3C3C` - CTA 버튼: 배경 `#00E5A0`, 텍스트 `#0a1628` (다크) ### 레이아웃 구조 ``` ┌─────────────────────────────────┐ │ [T.O.P 사업단 — 44px 라벨] │ ← 상단 여백 60px │ │ │ 월급은 왜 │ ← 헤드라인 88px │ 제자리걸음? │ │ │ │ ──────────────────── │ ← 구분선 (민트 그린, 2px) │ │ │ 신입 최대 1,000만원 │ ← 서브카피 72px, 민트 그린 │ 경력직 직전연봉 50% │ ← 보조 64px, 화이트 │ │ │ [ 정착지원금 2026.7월 변경 예정 ]│ ← 긴급 배지 40px │ │ │ [ 지금 상담 신청하기 → ] │ ← CTA 버튼 44px └─────────────────────────────────┘ ``` - Flexbox: `flex-direction: column; align-items: flex-start; justify-content: space-between` - 좌우 패딩: 72px - 헤드라인과 혜택 블록 사이 gap: 48px ### hybrid-image 구현 스펙 **배경 프롬프트 (영문):** > Dark blue-green gradient abstract background, professional and corporate feel, deep navy blue at top-left transitioning to dark teal green at bottom-right, subtle geometric grid overlay, no text, no people, clean minimal texture, high contrast, 1080x1080 **HTML 오버레이 텍스트:** - 모든 텍스트 요소를 위 표 기준 그대로 적용 - 긴급 배지: `border-radius: 6px; padding: 8px 20px` - CTA: `border-radius: 50px; padding: 20px 56px; font-weight: 700` --- ## #14 — SVG-first 렌더링 파이프라인 ### 컨셉 요약 JSX→SVG→PNG 파이프라인 기반 벡터 배너. 화이트 배경에 체계적 레이아웃. 아이콘 수를 3개→1개로 줄이고, 레이블 텍스트를 40px 이상으로 확보. 남은 공간에 혜택 수치를 대형으로 표기. ### 텍스트 요소 | 요소 | 내용 | px | |------|------|----| | 상단 라벨 | T.O.P 사업단 | 44px | | 서브 라벨 | 인카금융서비스 코스닥 상장 | 40px | | 헤드라인 | 신입 최대 1,000만원 | 96px | | 서브카피 | 경력직 직전연봉 50% | 72px | | 아이콘 레이블 | 지금이 기회입니다 | 44px | | 긴급 | 정착지원금 2026.7월 변경 예정 | 40px | | CTA | 지금 상담 신청하기 | 48px | > 제거 항목: 아이콘 2개 추가 제거(3→1), 기존 소형 설명 텍스트 전량 삭제. 핵심 수치에만 집중. ### 색상·배경 - 배경: `#FFFFFF` (클린 화이트) - 상단 라벨: `#1A3A5C` (딥 네이비) - 헤드라인 (수치): `#1A3A5C` - 서브카피: `#2D6A4F` (다크 그린) - 아이콘 레이블: `#555555` - 긴급 배지 배경: `#FFF0F0`, 테두리: `#E53935`, 텍스트: `#E53935` - CTA 버튼: 배경 `#1A3A5C`, 텍스트 `#FFFFFF` - 구분선: `#1A3A5C`, 2px ### 레이아웃 구조 ``` ┌─────────────────────────────────┐ │ T.O.P 사업단 [아이콘] │ ← 상단 44px 라벨 + 단일 SVG 아이콘 │ 인카금융서비스 코스닥 상장 │ ← 서브 라벨 40px │ ───────────────────────────── │ │ │ │ 신입 최대 │ ← 헤드라인 96px │ 1,000만원 │ │ │ │ 경력직 직전연봉 50% │ ← 서브카피 72px │ │ │ 지금이 기회입니다 │ ← 44px │ │ │ [ 정착지원금 2026.7월 변경 예정 ]│ ← 긴급 배지 40px │ [ 지금 상담 신청하기 → ] │ ← CTA 48px └─────────────────────────────────┘ ``` - SVG viewBox: `0 0 1080 1080` - 텍스트는 SVG `` 요소로 렌더링, `font-family: "Pretendard", "Noto Sans KR", sans-serif` - 해상도 독립: 모든 좌표 절대값 지정 (x/y), `dominant-baseline: auto` ### hybrid-image 구현 스펙 **배경 프롬프트 (영문):** > Clean white background, minimal corporate design, faint light gray geometric lines as subtle texture, professional financial services aesthetic, no people, no text, soft shadow at edges, 1080x1080 **HTML 오버레이 텍스트:** - SVG 아이콘 1개: 방패/체크 심볼 (신뢰 상징), SVG inline, 크기 80×80px - 나머지 텍스트 요소 위 표 기준 그대로 적용 - CTA: `border-radius: 8px; padding: 22px 60px; font-weight: 700` --- ## #15 — CJK 타이포 미니멀 ### 컨셉 요약 Pretendard/Noto Sans KR 한글 폰트 + 다크 배경. 초대형 핵심 단어 하나가 비주얼을 장악. 골드 구분선으로 계층 분리. 텍스트 3개 계층만 유지 — 군더더기 없이 임팩트 극대화. ### 텍스트 요소 | 요소 | 내용 | px | |------|------|----| | 상단 라벨 | T.O.P 사업단 | 44px | | 초대형 키워드 | 제자리걸음? | 120px | | 헤드라인 | 신입 최대 1,000만원 | 84px | | 서브카피 | 경력직 직전연봉 50% | 64px | | CTA | 지금 상담 신청하기 | 44px | > 제거 항목: 훅 전문 문장 삭제 (초대형 키워드로 흡수), 긴급 배지 삭제 (공간 제약), "2026년 7월" 삭제. > 핵심 원칙: 요소 수를 최소화해야 다크 배경에서 각 텍스트가 숨쉴 수 있다. ### 색상·배경 - 배경: `#0F0F0F` (딥 블랙) - 초대형 키워드: `#FFFFFF`, `font-weight: 900` - 헤드라인 (수치): `#F5C518` (골드) - 서브카피: `#E0E0E0` - 상단 라벨: `#AAAAAA` - 골드 구분선: `#F5C518`, 3px, width 120px - CTA 버튼: 배경 `#F5C518`, 텍스트 `#0F0F0F`, `font-weight: 700` ### 레이아웃 구조 ``` ┌─────────────────────────────────┐ │ T.O.P 사업단 │ ← 44px, 상단 좌측 │ │ │ │ │ 제자리걸음? │ ← 120px, 화이트, bold │ │ │ ───── │ ← 골드 구분선 (120px 너비) │ │ │ 신입 최대 1,000만원 │ ← 84px, 골드 │ 경력직 직전연봉 50% │ ← 64px, 라이트 그레이 │ │ │ [ 지금 상담 신청하기 → ] │ ← CTA 44px └─────────────────────────────────┘ ``` - 전체 좌측 정렬 (text-align: left) - 좌측 패딩: 72px - 초대형 키워드 상단 여백: 200px (수직 중앙 살짝 위) - 각 블록 gap: 40px ### hybrid-image 구현 스펙 **배경 프롬프트 (영문):** > Pure black minimal background, very subtle dark charcoal texture, no patterns, no people, no text, deep shadows, ultra-minimal aesthetic, slightly uneven dark surface like matte paper, 1080x1080 **HTML 오버레이 텍스트:** - `font-family: "Pretendard Variable", "Noto Sans KR", sans-serif` - 초대형 키워드: `letter-spacing: -4px; line-height: 1.0` - 헤드라인: `letter-spacing: -2px` - CTA: `border-radius: 50px; padding: 18px 52px` --- ## #16 — 네이비 타이포 임팩트 ### 컨셉 요약 네이비 단색 배경 위 흰색+파란색 대형 타이포. 권위와 신뢰를 전달하는 기업형 리쿠르팅 배너. 헤드라인을 84px → 96px로 증가. 빨간 긴급 배지 유지. CTA 버튼 존재감 강화. ### 텍스트 요소 | 요소 | 내용 | px | |------|------|----| | 상단 라벨 | T.O.P 사업단 | 44px | | 서브 라벨 | 인카금융서비스 코스닥 상장 | 40px | | 헤드라인 | 열심히는 하는데, | 96px | | 헤드라인 2행 | 월급은 제자리걸음? | 96px | | 서브카피 | 신입 최대 1,000만원 | 72px | | 보조 서브 | 경력직 직전연봉 50% | 64px | | 긴급 배지 | 정착지원금 2026.7월 변경 예정 | 40px | | CTA | 지금 상담 신청하기 | 48px | > 제거 항목: "2026년 7월, 게임이 바뀝니다" — 긴급 배지와 역할 중복이므로 삭제. > 주의: 헤드라인 2행 × 96px는 공간이 빠듯하므로 줄간격(line-height: 1.1)으로 압축. ### 색상·배경 - 배경: `#0D1B4B` (딥 네이비) - 헤드라인 1행: `#FFFFFF` - 헤드라인 2행: `#4FC3F7` (스카이 블루 — 강조) - 서브카피 (수치): `#FFFFFF`, `font-weight: 800` - 보조 서브: `#B0C4DE` (라이트 스틸 블루) - 상단 라벨: `#7EC8E3` - 서브 라벨: `#5A7FA0` - 긴급 배지 배경: `#D32F2F`, 텍스트: `#FFFFFF` - CTA 버튼: 배경 `#FFFFFF`, 텍스트 `#0D1B4B`, `font-weight: 700` ### 레이아웃 구조 ``` ┌─────────────────────────────────┐ │ T.O.P 사업단 │ ← 44px, 라이트 블루 │ 인카금융서비스 코스닥 상장 │ ← 40px, 스틸 블루 │ ───────────────────────────── │ ← 구분선 (화이트, 1px, opacity 0.3) │ │ │ 열심히는 하는데, │ ← 96px, 화이트 │ 월급은 제자리걸음? │ ← 96px, 스카이 블루 │ │ │ 신입 최대 1,000만원 │ ← 72px, 화이트, bold │ 경력직 직전연봉 50% │ ← 64px, 라이트 스틸 블루 │ │ │ [ 정착지원금 2026.7월 변경 예정 ]│ ← 빨간 배지 40px │ [ 지금 상담 신청하기 → ] │ ← CTA 화이트 버튼 48px └─────────────────────────────────┘ ``` - 전체 좌측 정렬 - 좌측 패딩: 72px - 헤드라인 line-height: 1.1 - 상단 섹션과 헤드라인 사이 gap: 32px - 헤드라인과 혜택 섹션 사이 gap: 44px ### hybrid-image 구현 스펙 **배경 프롬프트 (영문):** > Deep navy blue solid color background, professional corporate aesthetic, very subtle dark blue diagonal line texture, no people, no text, slight vignette at edges, authoritative financial services mood, 1080x1080 **HTML 오버레이 텍스트:** - `font-family: "Pretendard Variable", "Noto Sans KR", sans-serif` - 헤드라인: `letter-spacing: -2px; line-height: 1.1` - 긴급 배지: `border-radius: 6px; padding: 8px 22px; background: #D32F2F` - CTA: `border-radius: 8px; padding: 22px 64px; font-weight: 700` --- ## 폰트 규칙 최종 검증 | 배너 | 최소 텍스트 요소 | px | 규칙 | |------|----------------|----|------| | #13 | 긴급 배지 / CTA | 40px / 44px | 통과 | | #14 | 긴급 배지 / 서브 라벨 | 40px / 40px | 통과 | | #15 | CTA | 44px | 통과 | | #16 | 긴급 배지 / 서브 라벨 | 40px / 40px | 통과 | **전체 40px 미만 요소: 없음.**