nc-pptx-theme

NC PPTX Theme & Layout

NC(NCSOFT) CI 가이드라인에 기반한 프레젠테이션 테마와 레이아웃 시스템이다. 이 스킬은 pptx 스킬(생성/편집 워크플로우)과 theme-factory 스킬(범용 테마)을 보완하며, NC 브랜드에 특화된 색상, 서체, 레이아웃 패턴을 제공한다.

사용 시점

• PptxGenJS로 프레젠테이션을 새로 만들 때 → 이 스킬의 색상/서체/레이아웃을 적용
• 기존 템플릿을 편집할 때 → 이 스킬의 색상/서체 값을 참조하여 브랜드 일관성 유지
• theme-factory에서 테마를 고를 때 → NC 전용 테마가 필요하면 이 스킬을 우선 사용

색상 시스템

NC 색상은 역할별로 나뉜다. 슬라이드를 만들 때 아래 역할에 맞게 색상을 선택한다.

Primary Colors (주요 색상)

이름	HEX	용도
NC Navy	003569	타이틀 슬라이드 배경, 헤더, 주요 강조
Black	000000	본문 텍스트, CI 표기
White	FFFFFF	밝은 슬라이드 배경, 다크 배경 위 텍스트

Blue Tint (블루 계열)

이름	HEX	용도
NC Blue Tint 1	0541B4	강조 도형, 아이콘 배경, 섹션 번호 accent (배경색으로 사용 금지)
NC Blue Tint 2	5DAAFF	차트 보조색, 하이라이트
NC Blue Tint 3	A0D7FF	연한 배경, 카드 배경
NC Blue Tint 4	005AFF	온라인 전용 강조색, 링크/CTA

Accent Colors (보조 강조색)

시각적 강조가 필요할 때만 사용한다. 과도하게 사용하지 않는다.

이름	HEX	이름	HEX
Aqua	00D2B4	Blue Purple	7896FF
Green	6EFA78	Purple	965AFF
Mint	96FFDC	Pink	FF7DAA
Yellow	FFEB78	Red	FF4646
Orange	FF783C

Gray (그레이 계열)

이름	HEX	용도
Gray	CDD2D7	구분선, 비활성 요소, 연한 배경
Gray2	878C91	캡션, 보조 텍스트
Gray3	4B5055	서브 헤딩, 진한 보조 텍스트

색상 조합 가이드

슬라이드 유형별 권장 조합:

슬라이드 유형	배경	제목 텍스트	본문 텍스트	강조 요소
타이틀/엔딩	NC Navy 003569	White FFFFFF	A0D7FF	005AFF
콘텐츠	White FFFFFF	NC Navy 003569	Black 000000	0541B4
섹션 구분	NC Navy 003569	White FFFFFF	A0D7FF	0541B4 또는 005AFF
데이터/차트	White FFFFFF	4B5055	000000	NC Navy + Blue Tints
하이라이트	A0D7FF	NC Navy 003569	4B5055	003569

서체 시스템

지정 서체

용도	서체	대체 서체 (시스템 미설치 시)
순수 영문 콘텐츠	Manrope	Arial Black / Trebuchet MS Bold
한국어 콘텐츠 (숫자/영문 혼용 포함)	Pretendard	맑은 고딕
중국어	Noto Sans CJK	Microsoft YaHei

서체 선택 규칙

핵심 원칙: 텍스트에 한국어가 한 글자라도 포함되면 해당 텍스트 전체를 Pretendard로 통일한다.

Manrope과 Pretendard는 같은 pt에서 글리프 크기가 다르다. 한 슬라이드 안에서 두 폰트를 섞으면 숫자와 한글의 시각적 크기가 맞지 않아 어색해 보인다.

• Manrope 사용 조건: 슬라이드의 모든 텍스트가 영문+숫자만으로 구성된 경우 (예: 영문 발표자료)
• Pretendard 사용 조건: 한국어가 하나라도 포함된 슬라이드 — 해당 슬라이드의 모든 텍스트(제목, 본문, 숫자, 라벨)를 Pretendard로 통일
• 같은 슬라이드에서 Manrope과 Pretendard를 혼용하지 않는다 — 저작권 표기(ⓒ NCSOFT)처럼 독립된 영문 요소만 예외

타이포그래피 크기 체계

요소	크기	굵기	서체
슬라이드 타이틀	36-44pt	ExtraBold	Pretendard (한국어) / Manrope (순수 영문)
섹션 헤더	24-28pt	SemiBold	Pretendard (한국어) / Manrope (순수 영문)
서브 헤딩	18-20pt	SemiBold	Pretendard (한국어) / Manrope (순수 영문)
본문	14-16pt	Regular / Medium	Pretendard (한국어) / Manrope (순수 영문)
캡션/각주	10-12pt	Regular	Pretendard (한국어) / Manrope (순수 영문)
큰 숫자 강조	60-72pt	ExtraBold	Pretendard (한국어 슬라이드) / Manrope (순수 영문 슬라이드)

PptxGenJS 공통 설정

프레젠테이션 생성 시 아래 코드를 초기 설정으로 사용한다.

const pptxgen = require("pptxgenjs");
const pres = new pptxgen();
pres.layout = "LAYOUT_16x9";
pres.author = "NC";

// ── NC 색상 상수 ──
const NC = {
  navy:     "003569",
  black:    "000000",
  white:    "FFFFFF",
  blue1:    "0541B4",
  blue2:    "5DAAFF",
  blue3:    "A0D7FF",
  blue4:    "005AFF",
  gray:     "CDD2D7",
  gray2:    "878C91",
  gray3:    "4B5055",
};

// ── NC 서체 상수 ──
// 한국어 슬라이드: head, body 모두 Pretendard로 통일
// 순수 영문 슬라이드: head, body 모두 Manrope으로 통일
// 같은 슬라이드에서 Manrope/Pretendard를 혼용하지 않는다
const FONT_KR = {
  head: "Pretendard",
  body: "Pretendard",
};
const FONT_EN = {
  head: "Manrope",
  body: "Manrope",
};
// 프레젠테이션 언어에 따라 FONT = FONT_KR 또는 FONT_EN 선택
const FONT = FONT_KR;  // 한국어 콘텐츠인 경우

슬라이드 레이아웃 패턴

자세한 레이아웃별 PptxGenJS 코드는 references/layouts.md를 참조한다.

아래는 각 레이아웃의 용도와 선택 기준이다.

1. Title Slide (타이틀)

• 용도: 첫 슬라이드, 프레젠테이션 제목
• 특징: NC Navy 풀 배경, 큰 제목(Manrope ExtraBold 44pt white), 부제(16pt Blue Tint 3)
• 선택 시점: 모든 프레젠테이션의 첫 슬라이드

2. Section Divider (섹션 구분)

• 용도: 주제 전환, 챕터 구분
• 특징: NC Navy 배경 (타이틀/클로징과 동일), 섹션 번호(Blue Tint 1 accent) + 제목
• 선택 시점: 큰 주제가 바뀔 때
• 주의: 배경은 반드시 NC Navy(003569). Blue Tint 1은 섹션 번호나 accent line에만 사용

3. Content - Bullets (콘텐츠)

• 용도: 핵심 포인트 나열
• 특징: 흰 배경, 좌측 Navy 액센트 바, 불릿 리스트
• 선택 시점: 3-6개 항목을 나열할 때

4. Two Column (2단 레이아웃)

• 용도: 비교, 병렬 정보 표시
• 특징: 좌우 균등 분할, 각 컬럼에 아이콘+텍스트
• 선택 시점: 두 가지를 비교하거나 보완 정보를 병렬로 보여줄 때

5. Stats Callout (수치 강조)

• 용도: KPI, 핵심 지표 강조
• 특징: 큰 숫자(36-60pt ExtraBold Navy, 카드 수/글자수에 따라 동적 조절), 하단 라벨
• 선택 시점: 인상적인 수치를 강조할 때
• 주의: KPI 수치("1.2조원", "4,500만" 등)는 반드시 1줄에 들어가야 한다. 카드 수가 많거나 텍스트가 길면 fontSize를 줄여서 줄바꿈을 방지. autoFit: true 필수

6. Image + Text (이미지+텍스트)

• 용도: 시각 자료와 설명의 조합
• 특징: 좌측 이미지(50%), 우측 텍스트
• 선택 시점: 스크린샷, 제품 이미지 등과 설명이 함께 필요할 때

7. Quote / Highlight (인용/강조)

• 용도: 핵심 메시지, 인용문
• 특징: NC Navy 배경, 큰 인용 텍스트(Manrope SemiBold), 화자 정보
• 선택 시점: 하나의 핵심 메시지를 강조할 때

8. Closing (마무리)

• 용도: 마지막 슬라이드, 감사 인사
• 특징: NC Navy 배경, "Thank You" 또는 연락처 정보
• 선택 시점: 모든 프레젠테이션의 마지막 슬라이드

그래픽 모티프

NC CI의 그래픽 모티프는 CI의 각진(cut-edge) 요소에서 파생된 것이다. 슬라이드에 적용할 때:

• 도형의 모서리에 각진 느낌을 주어 NC 브랜드 아이덴티티와 일치시킨다
• 비스듬한 대각선 컷이나 모서리 처리를 통해 시각적 특징을 부여한다
• 모서리를 기본보다 더 둥글게 만들지 않는다 (각진 방향으로만 변형 가능)

CI 표기 규칙

프레젠테이션에 NC 브랜드를 표기할 때:

• 브랜드명은 NCSOFT 또는 NC (모두 대문자)
• 한영 혼용 금지 (예: NC소프트 ✗, 엔씨SOFT ✗)
• 저작권: ⓒ NCSOFT Corporation. 또는 ⓒ 2025 NCSOFT Corporation. All Rights Reserved.
• CI 로고 최소 크기: 5mm / 15px
• CI 주변 최소 여백(clear space) 확보

필수 폰트 설치

프레젠테이션을 생성하기 전에 반드시 Pretendard와 Manrope 폰트가 시스템에 설치되어 있어야 한다. 미설치 시 PowerPoint/LibreOffice가 한글과 숫자/영문에 서로 다른 fallback 폰트를 적용하여 글자 크기가 불일치한다. 폰트 설치 후 PowerPoint를 재시작해야 적용된다.

설치 방법

# Pretendard (한국어/다국어)
curl -sL -o /tmp/pretendard.zip "https://github.com/orioncactus/pretendard/releases/download/v1.3.9/Pretendard-1.3.9.zip"
unzip -qo /tmp/pretendard.zip -d /tmp/pretendard_fonts
cp /tmp/pretendard_fonts/public/static/Pretendard-*.otf ~/Library/Fonts/

# Manrope (영문)
mkdir -p /tmp/manrope_dl && cd /tmp/manrope_dl
for w in 200 300 400 500 600 700 800; do
  curl -sL "https://cdn.jsdelivr.net/fontsource/fonts/manrope@latest/latin-${w}-normal.ttf" -o "Manrope-${w}.ttf"
done
cp /tmp/manrope_dl/Manrope-*.ttf ~/Library/Fonts/

설치 후 PowerPoint/LibreOffice를 반드시 재시작한다. 재시작하지 않으면 폰트 캐시가 갱신되지 않아 여전히 fallback 폰트가 사용된다.

설치 확인

ls ~/Library/Fonts/Pretendard-* ~/Library/Fonts/Manrope-* 2>/dev/null | wc -l
# 16개 이상이면 정상 (Pretendard 9 + Manrope 7)

텍스트 줄바꿈 방지

1줄로 표현할 수 있는 짧은 텍스트(카드 제목, 라벨, KPI 수치 등)는 불필요한 줄바꿈이 발생하지 않도록 한다.

• 텍스트 박스 너비를 충분히 확보: 카드 제목의 w는 카드 너비에서 좌우 패딩을 뺀 값 이상으로 설정. 한글 14pt 기준 약 10자당 2인치 필요
• autoFit: true 적용: 제목, 라벨 등 1줄 텍스트에 설정하면 PowerPoint가 텍스트 크기를 자동 축소하여 박스에 맞춤. 줄바꿈보다 약간의 축소가 훨씬 깔끔하다

// 카드 제목 — autoFit으로 줄바꿈 방지
slide.addText("실시간 멀티플레이", {
  x: 1.1, y: 1.5, w: 3.5, h: 0.5,
  fontSize: 16, fontFace: FONT.head, bold: true,
  autoFit: true,  // 텍스트가 넘치면 자동 축소 (줄바꿈 대신)
});

• 본문(여러 줄)에는 autoFit 사용 금지 — 본문은 줄바꿈이 자연스러우므로 적용하지 않는다
• 긴 제목이 예상되면 폰트 크기를 미리 줄이거나 w를 넓히는 것이 autoFit보다 우선
• Stats Callout KPI 수치는 반드시 1줄: "1.2조원", "4,500만" 같은 수치+단위가 줄바꿈되면 임팩트가 사라진다. 카드 수와 가장 긴 텍스트 길이를 고려하여 fontSize를 동적으로 줄인다 (layouts.md의 Stats Callout 코드 참조). 카드 4개+한글 혼합이면 fontSize 40-44pt가 적절하다

차트 가로축 라벨

차트의 가로축(category axis)에 날짜를 넣을 때, "2024년 1월"처럼 길게 쓰면 라벨이 겹친다. 반드시 축약한다.

축약 규칙

원본	축약 방법	예시
연+월 (같은 연도 반복)	첫 항목만 연도 표기, 나머지는 월만	24.1, 3, 6, 9, 25.1, 3
연+월 (연도 변경 시점만)	연도 변경 시에만 연도 표기	1월, 3월, 6월, 25.1월, 3월
연+분기	축약	24Q1, Q2, Q3, Q4, 25Q1
연도만	그대로	2023, 2024, 2025

PptxGenJS 적용

// ❌ 나쁜 예: 라벨이 겹침
labels: ["2024 1월", "2024 3월", "2024 6월", "2024 9월", "2025 1월", "2025 3월"]

// ✅ 좋은 예: 축약
labels: ["24.1", "24.3", "24.6", "24.9", "25.1", "25.3"]

// ✅ 좋은 예: 연도 변경 시점만 표기
labels: ["1월", "3월", "6월", "9월", "'25 1월", "3월"]

추가로 catAxisLabelFontSize를 10-11pt로 설정하고, 라벨이 6개 이상이면 catAxisLabelRotate: 0(수평 유지)을 확인한다. 회전(catAxisLabelRotate: 45)은 최후 수단이다.

아이콘: react-icons 사용 (이모지 금지)

슬라이드에 아이콘이 필요할 때 이모지(🤖 🌐 📱 등)를 사용하지 않는다. 이모지는 OS/폰트에 따라 렌더링이 달라지고 프로페셔널하지 않다. 대신 react-icons 라이브러리로 벡터 아이콘을 PNG로 렌더링하여 삽입한다.

필요 패키지

npm install react react-dom react-icons sharp

사용 방법

const React = require("react");
const ReactDOMServer = require("react-dom/server");
const sharp = require("sharp");

// 아이콘 import (필요한 것만)
const { FaRobot, FaUsers, FaChartLine, FaGlobeAmericas } = require("react-icons/fa");
const { SiGoogle, SiAmazonwebservices } = require("react-icons/si");  // 기업 로고

function renderIconSvg(Icon, color, size = 256) {
  return ReactDOMServer.renderToStaticMarkup(
    React.createElement(Icon, { color, size: String(size) })
  );
}

async function iconToBase64Png(Icon, color, size = 256) {
  const svg = renderIconSvg(Icon, color, size);
  const png = await sharp(Buffer.from(svg)).png().toBuffer();
  return "image/png;base64," + png.toString("base64");
}

// 슬라이드에 삽입
const icon = await iconToBase64Png(FaRobot, "#003569", 256);
slide.addImage({ data: icon, x: 1, y: 1, w: 0.5, h: 0.5 });

주의: await를 사용하므로 전체 생성 코드를 async function main() { ... } main().catch(...) 로 감싼다.

주요 아이콘 세트

세트	import	용도	라이선스
Font Awesome	react-icons/fa	범용 아이콘 (FaRobot, FaUsers 등)	CC BY 4.0 + MIT
Material Design	react-icons/md	구글 스타일 아이콘	Apache 2.0
Simple Icons	react-icons/si	기업 로고 (SiGoogle, SiAmazonwebservices 등)	CC0
Heroicons	react-icons/hi	심플한 UI 아이콘	MIT

아이콘 색상

• NC 브랜드 색상에 맞춘다: "#003569" (Navy), "#0541B4" (Blue Tint 1) 등
• 아이콘 색상 파라미터에는 # 접두사가 필요하다 (SVG 표준 — PptxGenJS 색상 규칙과 다름)
• 흰 배경 슬라이드: Navy 또는 Blue Tint 1 아이콘
• Navy 배경 슬라이드: White "#FFFFFF" 또는 Blue Tint 3 "#A0D7FF" 아이콘

주의사항

• NC Navy가 슬라이드의 60-70% 비중을 차지하게 한다 (dominance over equality)
• Accent 색상은 강조 용도로만 — 배경색으로 사용하지 않는다
• 모든 슬라이드에 시각 요소(도형, 아이콘, 차트 등)를 포함한다 — 텍스트만 있는 슬라이드는 피한다
• 타이틀/클로징은 다크(Navy) 배경, 콘텐츠는 라이트(White) 배경 — "샌드위치 구조"
• #을 hex 색상 앞에 붙이지 않는다 (PptxGenJS 색상 규칙 — 아이콘 SVG 색상은 예외)