#### 1080x1080px 정사각형 버전 (hybrid-image 전용) ##### CSS 코드 ```css /* 컨테이너 */ .container { width: 1080px; height: 1080px; /* 정사각형 */ background: linear-gradient(135deg, #F5F0EB 0%, #FFFFFF 100%); display: flex; position: relative; overflow: hidden; } /* 좌측 비주얼 영역 */ .visual-area { width: 42%; height: 100%; position: relative; display: flex; align-items: flex-end; justify-content: center; flex-shrink: 0; } .visual-area img { height: 92%; width: 100%; object-fit: cover; object-position: top center; } /* 도장/배지 오버레이 — 세로로 더 펼침 */ .badge { position: absolute; width: 92px; height: 92px; border: 3px solid #E52121; border-radius: 50%; display: flex; align-items: center; justify-content: center; transform: rotate(-15deg); font-family: 'Pretendard', sans-serif; font-size: 12px; font-weight: 900; color: #E52121; text-align: center; line-height: 1.3; background: rgba(255, 255, 255, 0.92); padding: 8px; z-index: 10; } .badge:nth-child(1) { top: 140px; left: 14px; } .badge:nth-child(2) { top: 420px; left: 28px; } .badge:nth-child(3) { top: 700px; left: 12px; } /* 세로 구분선 */ .divider { width: 3px; height: 80%; background: linear-gradient(to bottom, transparent, #E52121 20%, #E52121 80%, transparent); align-self: center; flex-shrink: 0; opacity: 0.25; } /* 우측 텍스트 영역 */ .text-area { width: 58%; padding: 72px 56px; /* 1200x628 대비 padding 증가 */ display: flex; flex-direction: column; justify-content: center; } /* 상단 레이블 */ .label { font-size: 15px; font-weight: 700; color: #E52121; letter-spacing: 0.08em; margin-bottom: 18px; } /* 헤드라인 */ .headline { font-family: 'Pretendard', sans-serif; font-size: 46px; /* 정사각형 기준 44-48px */ font-weight: 900; color: #1A1A1A; line-height: 1.28; margin-bottom: 28px; word-break: keep-all; } /* 핵심 단어 강조 */ .keyword { display: inline; background: linear-gradient(transparent 60%, #FFD700 60%); } /* 서브카피 */ .sub-copy { font-size: 23px; /* 22-24px */ font-weight: 500; color: #4A4A4A; line-height: 1.65; margin-bottom: 44px; word-break: keep-all; } /* CTA 버튼 */ .cta-button { display: inline-flex; align-items: center; gap: 10px; background: #E52121; color: #FFFFFF; font-size: 24px; /* 24px */ font-weight: 700; padding: 20px 44px; border-radius: 14px; align-self: flex-start; } .cta-button::after { content: '▶'; font-size: 17px; } /* 하단 신뢰 지표 바 */ .trust-bar { margin-top: 36px; padding-top: 28px; border-top: 1.5px solid #E8E0D8; display: flex; gap: 28px; align-items: center; } .trust-item { font-size: 14px; font-weight: 500; color: #888888; display: flex; align-items: center; gap: 6px; } ``` ##### 완전한 HTML 템플릿 ```html Concept 5 - Split 1080x1080
{{badge_1}}
{{badge_2}}
{{badge_3}}
person

FA 리쿠르팅

{{headline}}

{{sub_copy}}

{{cta_text}}
서울대 출신 멘토링 AI 시스템 지원 파격 초기 지원금
``` ##### 변수 설명 테이블 | 변수명 | 타입 | 예시 값 | 설명 | |---|---|---|---| | `{{headline}}` | string (HTML 가능) | `보험도 AI로
더 쉽게 팝니다` | 메인 헤드라인. `` 태그로 형광펜 강조 가능 | | `{{sub_copy}}` | string | `서울대보험쌤과 함께라면
첫 달부터 수익이 달라집니다` | 서브카피. `
` 개행 허용 | | `{{cta_text}}` | string | `지금 바로 합류하기` | CTA 버튼 텍스트 | | `{{badge_1}}` | string | `서울대\n출신` | 좌측 상단 배지. `\n` 또는 `
` 개행 처리 | | `{{badge_2}}` | string | `AI\n시스템` | 좌측 중단 배지 | | `{{badge_3}}` | string | `파격\n지원금` | 좌측 하단 배지 | | `{{person_image_url}}` | URL | `https://cdn.example.com/person.png` | 인물 사진 URL. 누끼(배경제거) 이미지 권장 | > **렌더링 환경**: Playwright HTML→PNG 전용. `body` 에 `width: 1080px; height: 1080px; overflow: hidden` 고정 후 `page.setViewportSize({ width: 1080, height: 1080 })` 설정 필요. > > **폰트**: Google Fonts `Noto Sans KR` CDN 사용. 오프라인 환경에서는 Pretendard 로컬 폰트로 교체.