pomelo-digital/pomelo-deck

Pomelo Deck 템플릿

PptxGenJS로 Pomelo 브랜드 .pptx 데크를 구축하기 위한 재사용 템플릿입니다. 디자인 시스템을 매번 다시 유도할 필요가 없습니다.

사용 시기

"Pomelo 스타일로 데크를 제작 / 재작업 / 스타일 변경"하는 작업이 있을 때마다 — 고객 성과 보고서, 피치, 제안서. 사용자가 기존 데크를 업로드하여 스타일을 변경하는 경우 모든 데이터를 정확히 유지하고 레이아웃만 이 시스템으로 변경합니다.

설정 (세션마다)

1. 작업 디렉터리에 파일이 있는지 확인: pomelo.js, pomelo_logo.png (참고용 example.js).
2. 필요한 경우 엔진 설치: npm install -g pptxgenjs 및 NODE_PATH=$(npm root -g) node build.js로 스크립트 실행.
3. 먼저 example.js를 읽으십시오 — 모든 슬라이드 빌더를 처음부터 끝까지 보여줍니다. 시작점으로 복사하십시오.

디자인 시스템(이미 pomelo.js에 인코딩되어 있음 — 직접 구현하지 마십시오)

• 캔버스: 10" × 5.625" (16:9), 흰색 배경.
• 글꼴: Georgia = 제목/숫자; Calibri = 본문, 레이블, 표.
• 색상: ink 1F2A2E (제목), body 3D4A4E, muted 8A9498 (캡션/페이지 번호), coral EB6B4F (기본 악센트 / 눈썹 / 숫자 / 아크 / 로고), mint 76BBA8 + green 4F8B7B (보조 악센트), sand E8E5DD / light sand F7F6F3 (패널 및 합계 행), hairline D9D7D0.
• 눈썹 레이블: 9pt Calibri, coral, 대문자, charSpacing:3.
• 슬라이드 제목: Georgia ~24pt (표지 섹션 28, 구분선 40, 표지 50).
• 모티프: 모서리에서 흘러나오는 중첩된 원 (외부 색상 + 흰색 내부). arcsTR/arcsBL = 큼 (표지/마무리); smallArcTR = 미묘함 (콘텐츠 슬라이드).
• 바닥글: pómelo 로고 오른쪽 아래; 페이지 번호 NN / TOTAL 왼쪽 아래 회색으로 표시.

API (const { PomeloDeck, TOKENS } = require('./pomelo'))

생성: const d = new PomeloDeck({ total: N, title, logo:'pomelo_logo.png' }) — total은 페이지 번호를 결정합니다.

슬라이드 빌더(각각 슬라이드를 반환하므로 사용자 정의 콘텐츠를 추가할 수 있음):

• d.cover({ kicker, title, subtitle, sub2, stats:[[num,label,sub]], footer }) — stats는 5열 스트립으로 렌더링됩니다. 긴 값은 자동으로 축소됩니다.
• d.divider({ kicker, title, sub, accent }) — 섹션 나누기. accent = TOKENS.CORAL (기본값) 또는 TOKENS.MINT.
• d.content({ kicker, title, note, size, arc, page }) — 표준 콘텐츠 슬라이드 (눈썹 + 제목 + 바닥글). 슬라이드를 반환합니다. 본문은 직접 구성하십시오.
• d.closing({ kicker, title, subtitle, footer }).

구성 요소 (슬라이드에서 호출):

• d.statGrid(s, [[num,label,sub,color]], { x,y,w,cols,gh,gapx,gapy,numSize }) — KPI 카드.
• d.statCell(s,x,y,w,num,label,sub,color,numSize) — 단일 KPI.
• d.metricRows(s,x,y,w,[[label,val]]) — 레이블/값 행 (창의적인 이미지 옆에 좋음).
• d.table(s, head, rows, { x,y,w,colW,fs,hfs,rowH,totalLast,boldFirst,margin }) — Pomelo 표 (어두운 헤더, 얼룩말 행, 샌드 합계 행).
• d.eyebrow / d.title / d.note / d.line — 기본 요소.

저장: await d.save('out.pptx').

주의사항 (어렵게 배운 것 — 이를 존중하십시오)

• 긴 숫자는 줄바꿈됩니다. 약 1.74" 통계 셀에서 6자 이상의 값(예: ₹1,27,629, 2,652,386)은 기본 30pt에서 줄바꿈됩니다. numSize:20 (statGrid)을 전달하십시오 — 표지가 이를 자동으로 처리합니다.
• 넓거나 긴 표가 하단을 넘칩니다. 전체 너비 표는 rowH:0.235에서 약 13개의 데이터 행을 수용합니다. 표가 더 길거나 통계 그리드 아래에 있는 경우, 행을 읽을 수 없을 정도로 줄이는 대신 두 개의 나란히 있는 표(~4.4" 너비, 각 colW 5열)로 분할하십시오. n-SHIELD 슬라이드 20 패턴을 참조하십시오.
• 표지를 너무 장식하지 마십시오. 전체 너비 콘텐츠(예: 통계 스트립)가 왼쪽 아래 원과 충돌할 수 있으므로 arcsBL을 건너뛰고 arcsTR만 사용하십시오.
• 리스타일링 시 고객 데이터를 변경하지 않고 그대로 보존하십시오 — 수학적으로 이상해 보이는 수치도 포함됩니다. 사용자에게 별도로 플래그를 지정하십시오. 절대 조용히 "수정"하지 마십시오.

워크플로우

1. example.js를 읽고 build.js에 복사합니다.
2. 위의 빌더를 사용하여 슬라이드를 제작합니다. 고객의 창의적인 이미지가 있으면 원래 종횡비로 재사용합니다.
3. 매번 QA를 위해 이미지로 렌더링합니다: soffice --convert-to pdf 후 pdftoppm -jpeg, 또는 thumbnail.py. 전달하기 전에 항상 눈으로 확인하십시오 — 줄바꿈된 숫자와 넘치는 표가 없는지 확인하십시오.
4. 최종 .pptx를 outputs에 복사하고 제시합니다.