一键在 Manus 中运行任何 Skill

nc-pptx-theme

星标1

分支0

更新时间2026年4月14日 10:25

NC(NCSOFT) 브랜드 CI 가이드라인 기반의 PPTX 테마 및 슬라이드 레이아웃 스킬. NC 브랜드 프레젠테이션, 발표자료, 회사 소개 덱, 사업 제안서 등을 만들 때 반드시 사용한다. 사용자가 'NC 스타일', 'NC 브랜드', 'NCSOFT 발표자료', '회사 PPT' 등을 언급하거나, NC 관련 프레젠테이션을 요청하면 이 스킬을 적용한다. pptx 스킬과 theme-factory 스킬을 보완하며, NC 공식 색상 팔레트와 지정 서체(Manrope/Pretendard)를 사용한 슬라이드 생성을 가이드한다.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

bahamoth

bahamoth/claude-nc-pptx-theme

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

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 색상은 예외)

name