小红书卡片生成器 (xiaohongshu-card)
과학 칼럼 하나 → 샤오홍슈(RED)용 이미지 카드 세트(JPG 여러 장)로 변환합니다. 실제 현장에서 검증된 표준에 따라 작업합니다.微信公众号(위챗 공식 계정), 搜狐号(소후 계정), 학술지 등 과학 칼럼의 샤오홍슈화에 적합합니다.
1. 산출물 규격 (고정)
| 항목 | 기준 |
|---|---|
| 카드 크기 | 1080 × 1440 (3:4, 샤오홍슈 권장 비율) |
| 내보내기 형식 | JPG quality 95, 의미에 따라 파일명 지정 (01-cover.jpg, 02-overview.jpg…10-end.jpg) |
| 전달물 | JPG만 해당; HTML은 내부 작업 파일로만 사용(프로젝트 디렉터리에 보관하여 추후 수정 및 재내보내기 용도) |
| 모바일 글자 크기 | 본문 29-30px / 큰 제목 60-92px / 단계 제목 40px / 매개변수 값 46px / 그림 설명 20px (1080 너비 기준으로, 모바일에서 축소해도 선명함) |
2. 페이지 구조 (고정 템플릿 + 단계 수 자동 조정)
커버 → 개요 → STEP 단계 페이지 (각 단계당 한 페이지, STEP 0N/전체 단계 수) → 주의사항 → FAQ → 엔딩
- 커버: 텍스트만 가운데 정렬 구성 (태그 행 + 부제목 + 큰 제목 + 부제목2), 디자인적 여백
- 개요: 세 가지 장점 그리드 + 한 문장 원리 + 다섯 단계 목차 (STEP 번호 + 이름 + 한 문장 요약)
- 단계 페이지: 상단 빨간색 「STEP 0N / 05」 표시 + 단계명 큰 제목 + 콘텐츠 블록 (요점/프로세스 목록/매개변수 카드) + 원문 그림
- 주의사항 페이지: 핵심 알림을 큰 글씨로 표시 (각 줄 ◆)
- FAQ 페이지: 자주 묻는 질문을 큰 글자 카드로, 약 4개 (부족하면 원문의 다른 문단에서 추출 가능, 허위 작성 금지)
- 엔딩: FIN → 감사합니다 / 관심 감사합니다 → 브랜드 로고 → ＋팔로우 → 「브랜드 · 더 많은 유용한 정보가 있습니다」(내용은 브랜드 설정에서 읽어옴)
- 단계 수 ≠ 5일 경우 자동 조정 (전체 단계 수 변경); 그림/내용이 많으면 페이지 분할 (각 페이지에 1-2개 정보 블록이 가장 적절)
3. 이미지 전략 (원문 이미지 우선)
- 원문 이미지 우선: 원문 이미지를 가져와 각 이미지의 원문 내 위치를 확인하고 본문 내용과 일대일 대응 확인 (대응하지 않으면 페이지 이동 또는 사용자에게 설명)
- 소후 AES 복호화: 소후 기사 이미지 data-src는 AES-ECB-PKCS7 암호화, 키는
www.sohu.com6666.scripts/decrypt-sohu.py를 사용해//qX.itc.cn/...형식의 실제 URL로 복호화하고, 다운로드 시 Referer(기사 페이지 URL) + 브라우저 UA를 포함하여 핫링크 방지 - 원문에 실제로 이미지가 없는 경우: AI로 대체 이미지 생성 가능—흰색 배경, 단일 색상 계열 (스타일 간 범용 가능), 단 반드시 사용자에게 「이 이미지는 AI가 생성했습니다」라고 표시
- 가로형 스크린샷 이미지(예: 1080×289): 고정 높이
.fig컨테이너 +object-fit: contain; 여러 이미지 세로 배치 (.fig-col) / 가로 배치 (.fig-row)
4. 품질 검증 (필수, 전달 전 반드시 수행)
scripts/verify.js (Playwright)로 프로그램 방식 검사, 기준 미달 시 자동 반복 조정 (글자 크기/간격/이미지 높이):
- 콘텐츠 페이지 채움률 80-100% (빈 공간 ≤ 20%, 페이지가 너무 비어 있으면 안 됨)
- 오버플로우 없음 (가장 깊은 콘텐츠 요소의 bottom ≤ 카드 높이)
- 모든 이미지 로드 성공 (naturalWidth > 0)
- 커버/엔딩은 디자인적 여백 페이지로, 채움률 검증 면제
5. 스타일 시스템 (3가지 내장, 기본값은 합리적 실험 매뉴얼)
| 스타일 | 시각적 특징 | 용도 |
|---|---|---|
| A 합리적 실험 매뉴얼 (기본) | 흰색 바탕 검정 글씨 + 빨간색 #E63946 강조, 스위스 그리드, 번호 블록, STEP 표시 | 전문 정보, 실험 조작류 |
| B 고급 여백 | 크림색 바탕 + 따뜻한 금색 #D4A574, 매우 가벼운 글자 두께, 많은 여백 | 고급, 미니멀 상황 |
| C 부드러운 과학 | 크림색 바탕 #f6f2ea + 자연 녹색 #7a8a72, 둥근 모서리 카드 | 친근한 과학 계정 |
새 스타일 추가: 템플릿 CSS에 스타일 class (예: .X)를 추가하고 STYLES 설정에 등록하면 됩니다.
6. 브랜드 설정
assets/brand-config.example.json 정의: 브랜드명, 로고 경로, 엔딩 문구, 기본 스타일. 기본 내장 IGE 바이오 설정 (로고: assets/logo-ige.png). 다른 브랜드는 해당 파일을 복사하여 필드만 수정하면 됩니다.
7. 금지 사항 (위반 시 재작업)
- 플랫폼 제한/불필요 정보 제거: 콘텐츠 출처, 좋아요/저장 CTA, 「왼쪽으로 스와이프」 안내 등은 일절 표시하지 않음
- 허위 내용 금지: 모든 정보는 원문에서 가져옴; 보충 정보(예: FAQ)는 반드시 원문의 다른 문단에서 추출
- 이미지는 반드시 본문과 일대일 대응: 원문 위치 확인; 원문에 이미지가 없으면 이미지 배치 금지 (텍스트 레이아웃으로 채움) 또는 AI 생성 표시
- AI slop 방지: 이모지 장식 금지, 보라색 그라데이션 금지, 둥근 모서리+왼쪽 컬러 테두리 금지, SVG 가짜 이미지 금지, 시스템 기본 글꼴을 표시용 글꼴로 사용 금지
8. 작업 흐름 (9단계)
- 기사 가져오기: WebFetch/curl로 전체 내용 가져오기 (제목, 공식 계정, 날짜, 본문, 이미지), HTML 원문 저장
- 핵심 추출: 페이지 구조에 따라 정리—개념/원리, 단계 (매개변수 포함), 주의사항, FAQ
- 이미지 가져오기: 원문 이미지 파싱 (소후는
scripts/decrypt-sohu.py사용), 다운로드 및 각 이미지의 원문 내 위치 기록 - 페이지 구조 결정: 커버/개요/STEP N 페이지/주의사항/FAQ/엔딩, 단계 수 결정
- HTML 생성:
assets/card-template.html복사, JS의 PAGES 데이터 배열에 내용 입력 (템플릿 주석 참조), 이미지는 프로젝트imgs/디렉터리에 배치 - 검증 및 반복: Playwright로 열기 →
scripts/verify.js실행 → 결과에 따라 글자 크기/간격/이미지 높이 조정하여 10/10 PASS 달성 - JPG 내보내기:
scripts/export-jpg.js의 NAMES 배열 수정 → 실행 내보내기 (1080×1440 quality 95) - 사용자 확인: 모든 카드 표시 → 피드백에 따라 미세 조정 (문구/색상/로고/엔딩) → 재내보내기
- 전달: JPG 목록 + 게시 팁 (제목/해시태그 참고) 함께 제시
9. 템플릿 사용 설명 (card-template.html)
- 단일 파일 HTML + vanilla JS 데이터 기반:
PAGES배열의 각 항목이 한 페이지,blocks배열의 각 항목이 하나의 콘텐츠 블록 - block 유형:
{t, p}텍스트 블록{t, lines:[['a)','텍스트'],...]}프로세스 목록{params:[[값,레이블],...]}매개변수 카드{step:{t,d}}단계 설명{img}{imgs, col}이미지{faq}/{notes}/{dir}5단계 목차 /{why}장점 그리드 /{tip}힌트 /{recape}요약
- 세 가지 페이지 유형:
type:'cover'(커버)type:'step'(단계 페이지, step: N)type:'content'(개요/주의사항/FAQ)type:'end'(엔딩)
10. 환경 의존성
- Node.js + Playwright (프로젝트 내
npm i playwright) - Python3 + pycryptodome (소후 복호화에만 필요)