출처: 사용자 박은 ppt-vibe SKILL.md 정의서 (2026-05-10). 본 카드: PPT Vibe 스타일 스킬 — ppt-edge-dark 의 부드러운 자매 스킬. rectRadius 0.15 둥근 모서리 + 양 끝 명도 보조 텍스트 + 강조선 둥근 마무리 3 자리 강화. 본 위키 적용: vibe-coding-4-elements.pptx (14 슬라이드) + 향후 모든 학부생·강의친화 PPT 산출 자리.

---

PPT Vibe 스타일 스킬

1. 개요

ppt-edge-dark(엣지 강조 카드 다크)의 부드러운 자매 스킬. 대부분의 시각 DNA는 edge-dark와 동일하다. 세 가지가 다르다 — 모서리·가독성·강조선 마무리.

• edge-dark → rectRadius: 0.08 · 보조 텍스트 중간 명도 회색 · 강조선 직각 끝
• vibe → rectRadius: 0.15 · 보조 텍스트 양 끝 명도 · 강조선이 카드 라운드를 따라 둥글게 마무리

이 세 가지 차이로 슬라이드의 인상이 모던 비즈니스 에서 친근한 강의실 로 옮겨가고, 모든 보조 글자가 발표장 뒷자리에서도 읽히고, 강조선의 끝점이 카드 윤곽선을 따라간다. Vibe Coding 강의처럼 학부생·신입 대상의 친근한 톤 이 필요한 자리에 사용한다.

핵심 디자인 원칙은 edge-dark의 4가지에 vibe의 3가지가 더해진 7가지:

1. 텍스트가 먼저, 크롬(장식)은 나중 — 글자 크기·줄간격으로 위계를 만든다.
2. 선은 최소, 대비는 색과 채도로 — 테두리로 카드를 감싸지 않는다.
3. 가장자리만 강조한다 (Edge) — 상단 한 줄, 좌측 한 줄, 점 하나.
4. 다크 안에 라이트를 섞는다 (Duotone) — 흰 카드를 검정 배경에 얹어 강조.
5. ★ 모서리는 한 단계 더 둥글게 — rectRadius: 0.15로 부드러움. 알약(pill)은 안 됨.
6. ★ 보조 글자도 양 끝 명도 로 — 다크 배경 위 보조는 D5DBE5 (거의 흰색), 라이트 배경 위 보조는 1A2030 (거의 검정). 중간 명도 회색은 가독성을 죽인다.
7. ★ 강조선도 카드 라운드를 따라 마무리 — Top Accent / Left Rail은 rect(직사각)가 아니라 두 단계 roundRect 겹침 으로 그린다. 강조선 끝점이 카드 모서리 라운드를 따라가며 직각으로 끊기지 않는다.

---

2. 시각 DNA

2.1 배경 (고정)

슬라이드 배경: #000000 (Absolute Black)
그라데이션·빛번짐·질감 금지
ppt-edge-dark · ppt-lineart-dark 와 동일한 검정 배경
→ 같은 덱에 섞어도 이질감 없음

2.2 카드 DNA — "가장자리 한 변만 강조한다"

2.3 색 팔레트

Base (불변, edge-dark의 색 구조 + vibe의 가독성 강화)

const BASE = {
  bgSlide:      "000000",  // Absolute Black 배경
  cardDarkFill: "141820",  // 다크 카드 바탕
  cardDarkAlt:  "1A1F2E",  // 다크 카드 대안
  cardLight:    "F5F5F0",  // 라이트 카드 바탕 (Duotone 대비용)
  cardLightAlt: "FFFFFF",  // 순백 카드 (최고 대비 강조용)

  // ── 본문 (이미 강한 대비) ──────────────────
  textOnDark:   "F5F5F5",  // 다크 카드 위 본문 (거의 순백, 검정 대비 19.3:1)
  textOnLight:  "0A0F1A",  // 라이트 카드 위 본문 (거의 검정, 흰색 대비 19.4:1)

  // ── 보조 텍스트 (★ vibe의 가독성 절대 원칙) ──
  // 다크 배경에서는 *밝게*, 라이트 배경에서는 *짙게*.
  // 회색 중간 명도(50% 부근)는 절대 사용 금지.
  textMuted:    "D5DBE5",  // 다크 배경 보조 — 매우 밝은 무채색 (검정 대비 14.6:1)
  textMutedLt:  "1A2030",  // 라이트 배경 보조 — 거의 검정 (흰색 대비 15.7:1)

  divider:      "3A4050",  // 다크 배경 위 얇은 구분선 (의도적 약함, 텍스트 아님)
  bannerBg:     "1A1530",  // 어두운 보라/로즈 톤 배너 배경
};

가독성 절대 원칙 (vibe의 핵심 차이):

1. 모든 텍스트는 배경 대비 ≥ 7:1 (WCAG AAA) — 보조 텍스트도 예외 없음.
2. 다크 배경 위 보조 텍스트 = D5DBE5 (명도 84%) 이상으로 밝게 박는다. 회색(8A93A6 등 명도 50% 부근)은 흐릿해 보이므로 절대 사용 금지.
3. 라이트 배경 위 보조 텍스트 = 1A2030 (명도 12%) 이하로 거의 검정 으로 박는다. 어두운 청색(4A5266 등 명도 30~40%)은 물 빠진 인상 이므로 사용 금지.
4. 위계는 색이 아니라 크기·굵기 로 만든다 — 본문 16pt Regular, 보조 14pt Regular, 강조는 Bold. 보조를 흐리게 만들지 않는다.

Accent (카드 edge에만 사용, 1카드 1색 원칙)

const ACCENT = {
  cyan:    "06B6D4",  // 기본 포인트 · 정보
  gold:    "F5B700",  // 핵심·결론·왕관
  green:   "22D3A6",  // 긍정·성장·성공
  orange:  "FB923C",  // 주의·임팩트·콜아웃
  violet:  "A78BFA",  // 특별·특별 섹션
  rose:    "F472B6",  // 강조·감정
  blue:    "60A5FA",  // 링크·참조
};

색 사용 원칙:

• 한 슬라이드에 accent 색은 최대 3종.
• 3열 비교 카드: cyan / violet / green 또는 cyan / green / orange (좌→우).
• 한 카드에는 한 가지 accent 색만 사용.

---

3. 타이포그래피 (절대 규칙 · edge-dark와 동일)

3.1 폰트

폰트 통일 원칙: 한 덱 전체에서 맑은 고딕 한 종만 사용. 굵기(Regular/Bold)와 크기로만 위계를 만든다.

3.2 크기 계단 (7단 위계)

원칙:

• 본문·부연·주석은 14pt 이상 — 공간이 부족하면 내용을 줄이지, 글씨를 줄이지 않는다.
• 14pt는 부연 설명·주석·메타 정보 전용이며 본문으로 쓰지 않는다.
• 본문은 항상 16pt 이상.
• 메타 라벨(10pt)은 페이지 번호·슬라이드 코드·문서 ID 같은 읽지 않아도 되는 보조 표시 에만 사용. 발표 중 청중이 의식적으로 읽을 자료는 절대 10pt로 두지 않는다.

3.3 줄간격 (line spacing) — 1.5 이상이 플로어(floor)

카드 내 줄간격 절대 원칙:

카드 안의 본문은 lineSpacingMultiple: 1.5 이상을 floor 로 둔다. 1.5 미만으로는 어떤 경우에도 내려가지 않는다 — 텍스트가 카드를 넘치면 폰트 크기를 줄이거나(단, 14pt 이상 유지) 카드 높이를 늘리거나 내용을 줄인다. 줄간격을 좁혀서 공간을 확보하지 않는다. 카드의 부드러운 vibe 인상은 이 floor에서 온다.

{
  fontSize: 16,
  fontFace: "Malgun Gothic",
  color: BASE.textOnDark,
  lineSpacingMultiple: 1.5,  // ★ floor — 1.5 미만 금지
  paraSpaceAfter: 6,
}

3.4 자간 (charSpacing)

• 본문·제목: 0
• 영문 대문자 라벨(WHY, HOW, PRINCIPLE 등): 1~2
• 카드 상단 pill 태그: 1
• 표지 상단 kicker 텍스트: 1~3

---

4. 선(line)·테두리·라운드 규칙 ★ vibe의 핵심 차이

"선을 보지 말고 색을 보라" 가 원칙.

4.1 라운드 코너 (vibe 톤의 핵심)

0.15는 약 13~14pt 라운드 로, 카드가 sharp(직각)하지도 않고 알약(pill)도 아닌 친근한 강의실 의 인상을 만든다. edge-dark의 0.08과 vibe의 0.15는 한 덱에 섞으면 이질감이 보일 수 있으니 한 덱 안에서는 한 라운드 값만 사용한다.

4.2 그림자

사용 금지. 모서리를 둥글게 했다고 해서 그림자를 더하지 않는다 — 둥근 모서리만으로 충분히 부드럽다. 그림자는 클러터를 만들 뿐이다.

4.3 하단 정리 배너 정렬 규칙

슬라이드 결론을 한 줄로 꽂는 하단 배너의 좌우 폭은 그 위 카드들의 전체 폭과 동일하게 맞춘다.

슬라이드 좌우 여백 0.6" 기준
- 카드 영역 : x = 0.6, w = 12.13   (끝점 12.73)
- 하단 배너 : x = 0.6, w = 12.13   ← 카드 그리드와 같은 수직선

좁은 폭(예: x=1.5, w=10.33)으로 가운데 띄우는 방식은 사용하지 않는다.

---

5. 카드 패턴 핵심 스캐폴드

5.1 Top Accent Card (상단 색선 카드, 둥근 vibe 버전)

vibe의 핵심 패턴 — 강조선도 카드 라운드를 따라 둥글게 마무리한다.

기본 원리: 카드 전체 크기의 accent 색 roundRect 를 깔고, 그 위에 본체 색 roundRect 를 띠 두께만큼 내려서 덮는다. 두 roundRect 모두 같은 rectRadius: 0.15라서 띠의 양쪽 끝이 카드 모서리의 라운드를 따라 자연스럽게 휘어져 직각으로 끊기지 않는다.

function addTopAccentCard(slide, opts) {
  const { x, y, w, h, accent, kicker, title, body, tag } = opts;

  // 1) ★ 카드 전체 크기 = accent 색 (강조선의 *베이스*)
  slide.addShape("roundRect", {
    x, y, w, h,
    fill: { color: accent },
    line: { type: "none" },
    rectRadius: 0.15,
  });

  // 2) ★ 본체 색 roundRect로 위 0.05"(=4pt) 띠만 남기고 덮음
  //    두 roundRect의 같은 rectRadius 덕분에 띠의 좌우 끝이
  //    카드 모서리 라운드를 *따라가며* 둥글게 마무리된다.
  slide.addShape("roundRect", {
    x, y: y + 0.05, w, h: h - 0.05,
    fill: { color: BASE.cardDarkFill },
    line: { type: "none" },
    rectRadius: 0.15,
  });

  // 3) kicker (영문 대문자 라벨 14pt)
  if (kicker) {
    slide.addText(kicker, {
      x: x + 0.25, y: y + 0.2, w: w - 0.5, h: 0.3,
      fontSize: 14, fontFace: "Malgun Gothic",
      color: accent, bold: true, charSpacing: 2,
      margin: 0,
    });
  }

  // 4) 카드 제목 (소제목 18pt)
  slide.addText(title, {
    x: x + 0.25, y: y + 0.55, w: w - 0.5, h: 0.5,
    fontSize: 18, bold: true, fontFace: "Malgun Gothic",
    color: BASE.textOnDark,
    margin: 0,
  });

  // 5) 본문 (16pt · 줄간격 1.5)
  if (body) {
    slide.addText(body, {
      x: x + 0.25, y: y + 1.1, w: w - 0.5, h: h - 1.55,
      fontSize: 16, fontFace: "Malgun Gothic",
      color: BASE.textOnDark,
      lineSpacingMultiple: 1.5,
      margin: 0,
    });
  }

  // 6) 하단 태그 (14pt muted)
  if (tag) {
    slide.addText(tag, {
      x: x + 0.25, y: y + h - 0.4, w: w - 0.5, h: 0.3,
      fontSize: 14, fontFace: "Malgun Gothic",
      color: BASE.textMuted,
      margin: 0,
    });
  }
}

Duotone(흰 카드) 변형: 본체 색을 BASE.cardLightAlt(흰색)로, 텍스트 색을 BASE.textOnLight / BASE.textMutedLt 로 바꿔 사용한다. 같은 두 단계 roundRect 패턴이라 강조선 마무리는 동일하게 처리된다.

5.2 Left Rail Card (좌측 세로선 카드, 둥근 vibe 버전)

가로로 긴(폭≥높이×2) 카드는 반드시 이 패턴.

Top Accent와 동일한 원리 — accent 색 roundRect를 깔고 본체 색 roundRect로 좌측 0.06" 레일만 남기고 덮는다. 두 roundRect의 같은 라운드 덕분에 레일의 위/아래 끝이 카드 모서리 라운드를 따라 둥글게 마무리된다.

function addLeftRailCard(slide, opts) {
  const { x, y, w, h, accent, kicker, title, lines, footer } = opts;

  // 1) ★ 카드 전체 크기 = accent 색 (레일의 *베이스*)
  slide.addShape("roundRect", {
    x, y, w, h,
    fill: { color: accent },
    line: { type: "none" },
    rectRadius: 0.15,
  });

  // 2) ★ 본체 색 roundRect로 좌측 0.06" 레일만 남기고 덮음
  //    레일의 위/아래 끝이 카드 모서리 라운드를 따라 둥글게 마무리됨
  slide.addShape("roundRect", {
    x: x + 0.06, y, w: w - 0.06, h,
    fill: { color: BASE.cardDarkFill },
    line: { type: "none" },
    rectRadius: 0.15,
  });

  // kicker · 제목 · 본문은 좌측 0.35" 안쪽으로 들여서 배치
  // (자세한 텍스트 배치는 §5.1 참조)
}

참고: 이전 버전에서는 레일을 rect로 그렸고, 카드 본체 모서리 라운드 밖으로 살짝 튀어나오거나 카드 라운드와 부딪히는 어색한 경계가 보였다. vibe v1.1부터는 위 방식으로 변경되어 레일이 카드 윤곽선을 따라간다.

5.3 Banner Card (슬라이드 결론용 가로 배너)

function addBanner(slide, opts) {
  const { x, y, w, h, accent, text } = opts;
  slide.addShape("roundRect", {
    x, y, w, h,
    fill: { color: BASE.bannerBg },
    line: { type: "solid", color: accent, width: 1 },
    rectRadius: 0.15,  // vibe 라운드
  });
  slide.addText(text, {
    x: x + 0.3, y, w: w - 0.6, h,
    fontSize: 18, fontFace: "Malgun Gothic", bold: true,
    color: BASE.textOnDark,
    align: "center", valign: "middle",
    margin: 0,
  });
}

5.4 Stat Callout (큰 숫자, Duotone 권장)

큰 숫자는 흰 카드(Duotone) 위에 색 숫자로 박는 게 가장 강한 임팩트를 만든다. 어두운 카드 위 큰 숫자는 텍스트 박스 오버플로우 위험이 있으므로 권장하지 않는다.

// Duotone 카드 (흰 배경)
slide.addShape("roundRect", {
  x: 0.6, y: 1.7, w: 5.0, h: 4.6,
  fill: { color: BASE.cardLightAlt },  // 흰 카드
  line: { type: "none" },
  rectRadius: 0.15,
});
// 상단 accent 라인
slide.addShape("rect", {
  x: 0.6, y: 1.7, w: 5.0, h: 0.05,
  fill: { color: ACCENT.orange },
  line: { type: "none" },
});
// 큰 숫자 (rich text로 단위만 작게)
slide.addText(
  [
    { text: "−17", options: { fontSize: 96, bold: true, color: ACCENT.orange } },
    { text: "%",   options: { fontSize: 56, bold: true, color: ACCENT.orange } },
  ],
  {
    x: 0.9, y: 2.55, w: 4.4, h: 2.0,
    fontFace: "Malgun Gothic",
    align: "center", valign: "middle",
    margin: 0,
  }
);

원칙:

• 64~120pt 범위에서 박스 너비에 맞게 폰트 크기를 정한다.
• 박스 폭 4.4"에 4글자가 들어가야 하면 96pt가 안전 (130pt는 오버플로우 위험).
• 단위(%, ×, 억 등)는 본 숫자보다 30~40% 작게 rich text로 처리.

---

6. 슬라이드 레이아웃 템플릿 (edge-dark §6과 동일)

6.1 표지 (Cover)

얇은 cyan 상단선 + kicker(14pt)
메인 타이틀 (28~44pt Bold)
서브 타이틀 (16~18pt)
divider
발표자 · 날짜 (14pt muted)
페이지 표시 (10pt muted, 우측 하단, 메타 라벨)  ★ 14pt에서 10pt로 다운

6.2 3열 비교 (Top Accent)

대제목 (22~26pt) · 부연 (14pt)

┌──────╮  ┌──────╮  ┌──────╮
│━cyan │  │━violet│  │━green│   ← 모든 모서리가 둥글다 (0.15)
╰──────╯  ╰──────╯  ╰──────╯

(필요 시 카드 사이 → 화살표)

╭── violet 배너 — 결론 한 줄 ──╮

6.3 좌우 2 카드 + 결론 배너

대제목 + 부연

╭─ rose Left Rail ─╮    ╭─ green Left Rail ─╮
│ 기존 격차         │     │ 새 격차            │
╰──────────────────╯     ╰────────────────────╯

╭── violet 배너 — 한 줄 결론 ──╮

6.4 큰 수치 박스 + 우측 비교 카드

대제목 + 부연

╭── 흰 Duotone 카드 ────────╮  ╭─ rose Left Rail ─╮
│ MEASURED OUTCOME           │  │ Group A          │
│                            │  ╰──────────────────╯
│        −17%                │
│                            │  ╭─ green Left Rail ╮
│  디버깅 능력 저하           │  │ Group B          │
│  Anthropic · 2026          │  ╰──────────────────╯
╰────────────────────────────╯

╭── gold 배너 — 단일 원인 결론 ──╮

6.5 2x2 카드 그리드 (4개 비교)

대제목 + 부연

╭─ cyan ─╮  ╭─ violet ─╮
│  카드 1 │  │   카드 2  │
╰────────╯  ╰──────────╯

╭─ green ╮  ╭─ gold  ──╮
│  카드 3 │  │   카드 4  │
╰────────╯  ╰──────────╯

╭── violet 배너 — 결론 한 줄 ──╮

6.6 클로징 (Final Cover)

얇은 violet 상단선 + kicker
큰 인용 격언 (28~40pt, 핵심 절은 gold)
divider
큰 감사 인사 (28pt)
발표자·맥락 (14pt muted)
페이지 표시 (우측 하단)

---

7. 공통 여백 규칙

슬라이드 크기: 16:9 와이드 (13.333" × 7.5") 고정. (pres.layout = "LAYOUT_WIDE")

---

8. 실행 워크플로우

1. /mnt/skills/public/pptx/SKILL.md → pptxgenjs.md 먼저 읽기
2. 콘텐츠 분석 → §6 레이아웃 매칭
3. 사용자에게 구성안 확인 (필요 시)
4. pptxgenjs로 .pptx 생성 — 모든 카드는 rectRadius: 0.15
5. soffice → pdftoppm 으로 슬라이드 이미지 변환 → 시각 QA
6. QA 체크:
   • 본문 16pt 이상?
   • 부연·주석 14pt 이상?
   • 줄간격 1.5?
   • 카드 모서리 rectRadius 0.15? ★ vibe 핵심
   • 카드 4변 테두리 없음?
   • edge accent 3~4pt?
   • accent 3종 이하?
   • 큰 숫자가 박스 안에 들어가는가? (오버플로우 검사)

---

9. 금지 사항

1. ❌ 카드 4변 테두리
2. ❌ 14pt 미만 글자 — 단, 페이지 번호·슬라이드 코드 같은 메타 라벨 은 10pt 허용
3. ❌ 본문 줄간격 1.5 미만 — 1.5는 floor, 1.5 이상은 OK, 1.5 미만은 어떤 경우에도 금지
4. ❌ 그림자·그라데이션 (둥근 모서리만으로 부드러움 충분)
5. ❌ 3종 초과 accent 색
6. ❌ 선 두께 4pt 초과
7. ❌ 한 카드 2색 이상 accent
8. ❌ 제목 아래 장식 라인
9. ❌ "#" 포함 색상 코드 (pptxgenjs 오류)
10. ❌ 텍스트 박스 밖으로 흘러넘치는 본문
11. ❌ rectRadius 0.20 이상 — 알약(pill)에 가까워지면 vibe가 아니라 토이(toy) 톤이 됨
12. ❌ 한 덱 안에서 0.08과 0.15 라운드 혼용 — 한 덱은 한 라운드 값으로 통일
13. ❌ 다크 배경 위 회색 보조 텍스트 (8A93A6·A0A8B5 등 명도 40~60%) — 흐릿함
14. ❌ 라이트 배경 위 어두운 청색 보조 텍스트 (4A5266·5A6378 등 명도 30~40%) — 물 빠진 인상
15. ❌ 위계를 색의 흐림으로 표현 — 위계는 크기·굵기 로만, 색은 대비로만
16. ❌ 강조선을 rect(직사각)로 그리는 것 — Top Accent / Left Rail은 반드시 두 단계 roundRect 겹침 으로 그려서 카드 모서리 라운드를 따라 마무리되게 한다.

---

10. edge-dark와의 호환성

ppt-vibe는 ppt-edge-dark의 부드러운 자매 스킬이다. 단, 한 덱 안에서 두 스킬을 혼용하지 않는다 — 라운드 값(0.08 vs 0.15) 차이가 시각적으로 드러난다.

선택 가이드:

---

11. 한 줄 요약

검정 배경 · 맑은 고딕 · 6단 위계 · 카드는 rectRadius 0.15로 부드럽게 · 보조 글자도 양 끝 명도(다크 위 거의 흰색, 라이트 위 거의 검정)로 모두 잘 읽히게 · 강조선은 두 단계 roundRect 겹침으로 카드 라운드를 따라 둥글게 마무리 · edge-dark의 모든 규칙을 그대로 따르되 모서리·가독성·강조선 마무리 세 가지를 강화 · 결론은 violet 또는 gold 배너 한 줄로 꽂는다.