From nc-pptx-theme
NC(NCSOFT) 브랜드 CI 가이드라인 기반의 PPTX 테마 및 슬라이드 레이아웃 스킬. NC 브랜드 프레젠테이션, 발표자료, 회사 소개 덱, 사업 제안서 등을 만들 때 반드시 사용한다. 사용자가 'NC 스타일', 'NC 브랜드', 'NCSOFT 발표자료', '회사 PPT' 등을 언급하거나, NC 관련 프레젠테이션을 요청하면 이 스킬을 적용한다. pptx 스킬과 theme-factory 스킬을 보완하며, NC 공식 색상 팔레트와 지정 서체(Manrope/Pretendard)를 사용한 슬라이드 생성을 가이드한다.
npx claudepluginhub bahamoth/claude-marketplace --plugin nc-pptx-themeThis skill uses the workspace's default tool permissions.
NC(NCSOFT) CI 가이드라인에 기반한 프레젠테이션 테마와 레이아웃 시스템이다. 이 스킬은 `pptx` 스킬(생성/편집 워크플로우)과 `theme-factory` 스킬(범용 테마)을 보완하며, NC 브랜드에 특화된 색상, 서체, 레이아웃 패턴을 제공한다.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
NC(NCSOFT) CI 가이드라인에 기반한 프레젠테이션 테마와 레이아웃 시스템이다. 이 스킬은 pptx 스킬(생성/편집 워크플로우)과 theme-factory 스킬(범용 테마)을 보완하며, NC 브랜드에 특화된 색상, 서체, 레이아웃 패턴을 제공한다.
NC 색상은 역할별로 나뉜다. 슬라이드를 만들 때 아래 역할에 맞게 색상을 선택한다.
| 이름 | HEX | 용도 |
|---|---|---|
| NC Navy | 003569 | 타이틀 슬라이드 배경, 헤더, 주요 강조 |
| Black | 000000 | 본문 텍스트, CI 표기 |
| White | FFFFFF | 밝은 슬라이드 배경, 다크 배경 위 텍스트 |
| 이름 | HEX | 용도 |
|---|---|---|
| NC Blue Tint 1 | 0541B4 | 강조 도형, 아이콘 배경, 섹션 번호 accent (배경색으로 사용 금지) |
| NC Blue Tint 2 | 5DAAFF | 차트 보조색, 하이라이트 |
| NC Blue Tint 3 | A0D7FF | 연한 배경, 카드 배경 |
| NC Blue Tint 4 | 005AFF | 온라인 전용 강조색, 링크/CTA |
시각적 강조가 필요할 때만 사용한다. 과도하게 사용하지 않는다.
| 이름 | HEX | 이름 | HEX |
|---|---|---|---|
| Aqua | 00D2B4 | Blue Purple | 7896FF |
| Green | 6EFA78 | Purple | 965AFF |
| Mint | 96FFDC | Pink | FF7DAA |
| Yellow | FFEB78 | Red | FF4646 |
| Orange | FF783C |
| 이름 | 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에서 글리프 크기가 다르다. 한 슬라이드 안에서 두 폰트를 섞으면 숫자와 한글의 시각적 크기가 맞지 않아 어색해 보인다.
ⓒ 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 (순수 영문 슬라이드) |
프레젠테이션 생성 시 아래 코드를 초기 설정으로 사용한다.
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를 참조한다.
아래는 각 레이아웃의 용도와 선택 기준이다.
003569). Blue Tint 1은 섹션 번호나 accent line에만 사용autoFit: true 필수NC CI의 그래픽 모티프는 CI의 각진(cut-edge) 요소에서 파생된 것이다. 슬라이드에 적용할 때:
프레젠테이션에 NC 브랜드를 표기할 때:
NC소프트 ✗, 엔씨SOFT ✗)ⓒ NCSOFT Corporation. 또는 ⓒ 2025 NCSOFT Corporation. All Rights Reserved.프레젠테이션을 생성하기 전에 반드시 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보다 우선차트의 가로축(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 |
// ❌ 나쁜 예: 라벨이 겹침
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)은 최후 수단이다.
슬라이드에 아이콘이 필요할 때 이모지(🤖 🌐 📱 등)를 사용하지 않는다. 이모지는 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 |
"#003569" (Navy), "#0541B4" (Blue Tint 1) 등# 접두사가 필요하다 (SVG 표준 — PptxGenJS 색상 규칙과 다름)"#FFFFFF" 또는 Blue Tint 3 "#A0D7FF" 아이콘#을 hex 색상 앞에 붙이지 않는다 (PptxGenJS 색상 규칙 — 아이콘 SVG 색상은 예외)