Run any Skill in Manus with one click

Get Started

design-skill

Stars66

Forks47

UpdatedDecember 23, 2025 at 02:33

프레젠테이션 슬라이드를 미려한 HTML로 디자인. 슬라이드 HTML 생성, 시각적 디자인, 레이아웃 구성이 필요할 때 사용.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

uxjoseph

uxjoseph/ppt_team_agent

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Graphic DesignersArts, Design, Entertainment, Sports, and Media Occupations·SOC 27-1024

SKILL.md

readonly

Design Skill - 프로페셔널 프레젠테이션 디자인 시스템

최고 수준의 비즈니스 프레젠테이션을 위한 HTML 슬라이드 디자인 스킬입니다. 미니멀하고 세련된 디자인, 전문적인 타이포그래피, 정교한 레이아웃을 제공합니다.

핵심 디자인 철학

1. Less is More

불필요한 장식 요소 제거
콘텐츠가 주인공이 되는 디자인
여백(Whitespace)을 적극 활용
시각적 계층 구조 명확화

2. 타이포그래피 중심 디자인

Pretendard를 기본 폰트로 사용
폰트 크기 대비로 시각적 임팩트 생성
자간과 행간의 섬세한 조절
웨이트 변화로 강조점 표현

3. 전략적 색상 사용

제한된 색상 팔레트 (2-3색)
모노톤 기반 + 포인트 컬러
배경색으로 분위기 연출
고대비로 가독성 확보

기본 설정

슬라이드 크기 (16:9 기본)

<body style="width: 720pt; height: 405pt;">

지원 비율

비율	크기	용도
16:9	720pt × 405pt	기본, 모니터/화면
4:3	720pt × 540pt	구형 프로젝터
16:10	720pt × 450pt	맥북

기본 폰트 스택

font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

Pretendard 웹폰트 CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">

타이포그래피 시스템

폰트 크기 스케일

용도	크기	웨이트	사용 예시
Hero Title	72-96pt	700-800	표지 메인 타이틀
Section Title	48-60pt	700	섹션 구분 제목
Slide Title	32-40pt	600-700	슬라이드 제목
Subtitle	20-24pt	500	부제목, 설명
Body	16-20pt	400	본문 텍스트
Caption	12-14pt	400	캡션, 출처
Label	10-12pt	500-600	뱃지, 태그

자간 설정 (letter-spacing)

/* 대형 제목: 타이트하게 */
letter-spacing: -0.02em;

/* 중형 제목 */
letter-spacing: -0.01em;

/* 본문: 기본 */
letter-spacing: 0;

/* 캡션, 레이블: 약간 넓게 */
letter-spacing: 0.02em;

행간 설정 (line-height)

/* 제목 */
line-height: 1.2;

/* 본문 */
line-height: 1.6 - 1.8;

/* 한 줄 텍스트 */
line-height: 1;

색상 팔레트 시스템

1. Executive Minimal (기본 권장)

세련된 비즈니스 프레젠테이션용

--bg-primary: #f5f5f0;      /* 웜 화이트 배경 */
--bg-secondary: #e8e8e3;    /* 서브 배경 */
--bg-dark: #1a1a1a;         /* 다크 배경 */
--text-primary: #1a1a1a;    /* 메인 텍스트 */
--text-secondary: #666666;  /* 보조 텍스트 */
--text-light: #999999;      /* 약한 텍스트 */
--accent: #1a1a1a;          /* 강조 (검정) */
--border: #d4d4d0;          /* 테두리 */

2. Sage Professional

차분하고 신뢰감 있는 톤

--bg-primary: #b8c4b8;      /* 세이지 그린 배경 */
--bg-secondary: #a3b0a3;    /* 짙은 세이지 */
--bg-light: #f8faf8;        /* 밝은 배경 */
--text-primary: #1a1a1a;    /* 메인 텍스트 */
--text-secondary: #3d3d3d;  /* 보조 텍스트 */
--accent: #2d2d2d;          /* 강조 */
--border: #9aa89a;          /* 테두리 */

3. Modern Dark

임팩트 있는 다크 테마

--bg-primary: #0f0f0f;      /* 순수 다크 */
--bg-secondary: #1a1a1a;    /* 카드 배경 */
--bg-elevated: #252525;     /* 강조 영역 */
--text-primary: #ffffff;    /* 메인 텍스트 */
--text-secondary: #b0b0b0;  /* 보조 텍스트 */
--accent: #ffffff;          /* 강조 (화이트) */
--border: #333333;          /* 테두리 */

4. Corporate Blue

전통적 비즈니스 톤

--bg-primary: #ffffff;      /* 화이트 배경 */
--bg-secondary: #f7f9fc;    /* 밝은 블루 그레이 */
--text-primary: #1e2a3a;    /* 다크 네이비 */
--text-secondary: #5a6b7d;  /* 블루 그레이 */
--accent: #2563eb;          /* 블루 강조 */
--border: #e2e8f0;          /* 테두리 */

5. Warm Neutral

따뜻하고 친근한 톤

--bg-primary: #faf8f5;      /* 크림 화이트 */
--bg-secondary: #f0ebe3;    /* 웜 베이지 */
--text-primary: #2d2a26;    /* 다크 브라운 */
--text-secondary: #6b6560;  /* 미디움 브라운 */
--accent: #c45a3b;          /* 테라코타 */
--border: #ddd8d0;          /* 테두리 */

레이아웃 시스템

여백 기준 (padding/margin)

/* 슬라이드 전체 여백 */
padding: 48pt;

/* 섹션 간 여백 */
gap: 32pt;

/* 요소 간 여백 */
gap: 16pt;

/* 텍스트 블록 내 여백 */
gap: 8pt;

그리드 시스템

/* 2단 레이아웃 */
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32pt;

/* 3단 레이아웃 */
grid-template-columns: repeat(3, 1fr);

/* 비대칭 레이아웃 (40:60) */
grid-template-columns: 2fr 3fr;

/* 비대칭 레이아웃 (30:70) */
grid-template-columns: 1fr 2.3fr;

디자인 컴포넌트

1. 뱃지/태그

<p style="
  display: inline-block;
  padding: 6pt 14pt;
  border: 1px solid #1a1a1a;
  border-radius: 20pt;
  font-size: 10pt;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
">PRESENTATION</p>

2. 섹션 넘버

<p style="
  display: inline-block;
  padding: 4pt 12pt;
  background: #1a1a1a;
  color: #ffffff;
  border-radius: 4pt;
  font-size: 10pt;
  font-weight: 600;
">SECTION 1</p>

3. 로고 영역

<div style="display: flex; align-items: center; gap: 8pt;">
  <div style="
    width: 20pt;
    height: 20pt;
    background: #1a1a1a;
    border-radius: 4pt;
    display: flex;
    align-items: center;
    justify-content: center;
  ">
    <p style="color: #fff; font-size: 12pt;">*</p>
  </div>
  <p style="font-size: 12pt; font-weight: 600;">LogoName</p>
</div>

4. 아이콘 버튼

<div style="
  width: 32pt;
  height: 32pt;
  border: 1px solid #1a1a1a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
">
  <p style="font-size: 14pt;">↗</p>
</div>

5. 구분선

<div style="
  width: 100%;
  height: 1pt;
  background: #d4d4d0;
"></div>

6. 정보 그리드

<div style="display: flex; gap: 48pt;">
  <div>
    <p style="font-size: 10pt; color: #999; margin-bottom: 4pt;">Contact</p>
    <p style="font-size: 12pt; font-weight: 500;">334556774</p>
  </div>
  <div>
    <p style="font-size: 10pt; color: #999; margin-bottom: 4pt;">Date</p>
    <p style="font-size: 12pt; font-weight: 500;">March 2025</p>
  </div>
</div>

슬라이드 템플릿

1. 표지 슬라이드 (Cover)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 720pt;
      height: 405pt;
      font-family: 'Pretendard', sans-serif;
      background: #f5f5f0;
      padding: 32pt 48pt;
      display: flex;
      flex-direction: column;
    }
  </style>
</head>
<body>
  <!-- 헤더 -->
  <div style="display: flex; justify-content: space-between; align-items: center;">
    <div style="display: flex; align-items: center; gap: 16pt;">
      <div style="display: flex; align-items: center; gap: 8pt;">
        <div style="width: 18pt; height: 18pt; background: #1a1a1a; border-radius: 3pt; display: flex; align-items: center; justify-content: center;">
          <p style="color: #fff; font-size: 10pt;">*</p>
        </div>
        <p style="font-size: 11pt; font-weight: 600; color: #1a1a1a;">LogoName</p>
      </div>
      <p style="display: inline-block; padding: 4pt 10pt; border: 1px solid #1a1a1a; border-radius: 12pt; font-size: 9pt; font-weight: 500;">PRESENTATION</p>
    </div>
    <div style="display: flex; align-items: center; gap: 8pt;">
      <p style="display: inline-block; padding: 4pt 10pt; border: 1px solid #1a1a1a; border-radius: 12pt; font-size: 9pt; font-weight: 500;">OUR PROJECT</p>
      <div style="width: 28pt; height: 28pt; border: 1px solid #1a1a1a; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
        <p style="font-size: 12pt; color: #1a1a1a;">↘</p>
      </div>
    </div>
  </div>

  <!-- 메인 타이틀 -->
  <div style="flex: 1; display: flex; flex-direction: column; justify-content: center;">
    <h1 style="font-size: 72pt; font-weight: 500; color: #1a1a1a; letter-spacing: -0.02em; line-height: 1.1;">
      Business Deck
    </h1>
    <p style="font-size: 14pt; color: #666; margin-top: 24pt;">
      <span style="color: #999;">Presented by</span>  <span style="font-weight: 500; color: #1a1a1a;">Luna Martinez</span>
    </p>
  </div>

  <!-- 푸터 정보 -->
  <div style="display: flex; gap: 64pt;">
    <div>
      <p style="font-size: 9pt; color: #999; margin-bottom: 4pt;">Contact</p>
      <p style="font-size: 11pt; font-weight: 500; color: #1a1a1a;">334556774</p>
    </div>
    <div>
      <p style="font-size: 9pt; color: #999; margin-bottom: 4pt;">Date</p>
      <p style="font-size: 11pt; font-weight: 500; color: #1a1a1a;">March 2025</p>
    </div>
    <div>
      <p style="font-size: 9pt; color: #999; margin-bottom: 4pt;">Website</p>
      <p style="font-size: 11pt; font-weight: 500; color: #1a1a1a;">www.yourwebsite.com</p>
    </div>
  </div>
</body>
</html>

2. 목차 슬라이드 (Contents)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 720pt;
      height: 405pt;
      font-family: 'Pretendard', sans-serif;
      background: #b8c4b8;
      padding: 48pt;
      display: grid;
      grid-template-columns: 1fr 1.8fr;
      gap: 48pt;
    }
  </style>
</head>
<body>
  <!-- 왼쪽: 타이틀 -->
  <div style="display: flex; flex-direction: column; justify-content: flex-end;">
    <p style="font-size: 9pt; color: #3d3d3d; margin-bottom: 16pt;">©2025 YOUR BRAND. ALL RIGHTS RESERVED.</p>
    <h1 style="font-size: 56pt; font-weight: 500; color: #1a1a1a; letter-spacing: -0.02em; line-height: 1.1;">
      Our<br>Contents
    </h1>
    <div style="width: 32pt; height: 32pt; border: 1px solid #1a1a1a; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 24pt;">
      <p style="font-size: 14pt; color: #1a1a1a;">↗</p>
    </div>
  </div>

  <!-- 오른쪽: 목차 리스트 -->
  <div style="display: flex; flex-direction: column; justify-content: center; gap: 16pt;">
    <div style="display: flex; align-items: center; gap: 16pt; padding: 12pt 0; border-bottom: 1px solid rgba(0,0,0,0.1);">
      <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 1</p>
      <p style="flex: 1; font-size: 14pt; font-weight: 500; color: #1a1a1a;">SECTION TITLE</p>
      <p style="font-size: 14pt; color: #666;">(1)</p>
    </div>
    <div style="display: flex; align-items: center; gap: 16pt; padding: 12pt 0; border-bottom: 1px solid rgba(0,0,0,0.1);">
      <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 2</p>
      <p style="flex: 1; font-size: 14pt; font-weight: 500; color: #1a1a1a;">SECTION TITLE</p>
      <p style="font-size: 14pt; color: #666;">(2)</p>
    </div>
    <div style="display: flex; align-items: center; gap: 16pt; padding: 12pt 0; border-bottom: 1px solid rgba(0,0,0,0.1);">
      <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 3</p>
      <p style="flex: 1; font-size: 14pt; font-weight: 500; color: #1a1a1a;">SECTION TITLE</p>
      <p style="font-size: 14pt; color: #666;">(3)</p>
    </div>
    <div style="display: flex; align-items: center; gap: 16pt; padding: 12pt 0; border-bottom: 1px solid rgba(0,0,0,0.1);">
      <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 4</p>
      <p style="flex: 1; font-size: 14pt; font-weight: 500; color: #1a1a1a;">SECTION TITLE</p>
      <p style="font-size: 14pt; color: #666;">(4)</p>
    </div>
    <div style="display: flex; align-items: center; gap: 16pt; padding: 12pt 0;">
      <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 5</p>
      <p style="flex: 1; font-size: 14pt; font-weight: 500; color: #1a1a1a;">SECTION TITLE</p>
      <p style="font-size: 14pt; color: #666;">(5)</p>
    </div>
  </div>
</body>
</html>

3. 섹션 구분 슬라이드 (Section Divider)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 720pt;
      height: 405pt;
      font-family: 'Pretendard', sans-serif;
      background: #1a1a1a;
      padding: 48pt;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  </style>
</head>
<body>
  <!-- 상단 섹션 정보 -->
  <div style="display: flex; justify-content: space-between; align-items: flex-start;">
    <div>
      <p style="display: inline-block; padding: 4pt 10pt; background: #fff; color: #1a1a1a; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 1</p>
    </div>
    <p style="font-size: 9pt; color: #666;">©2025 YOUR BRAND</p>
  </div>

  <!-- 메인 타이틀 -->
  <div>
    <h1 style="font-size: 64pt; font-weight: 500; color: #ffffff; letter-spacing: -0.02em; line-height: 1.1;">
      Introduction
    </h1>
    <p style="font-size: 16pt; color: #888; margin-top: 16pt; max-width: 400pt; line-height: 1.6;">
      Brief description of what this section covers and why it matters.
    </p>
  </div>

  <!-- 페이지 번호 -->
  <div style="display: flex; justify-content: flex-end;">
    <p style="font-size: 10pt; color: #666;">01</p>
  </div>
</body>
</html>

4. 콘텐츠 슬라이드 (Content)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 720pt;
      height: 405pt;
      font-family: 'Pretendard', sans-serif;
      background: #ffffff;
      padding: 40pt 48pt;
      display: flex;
      flex-direction: column;
    }
  </style>
</head>
<body>
  <!-- 헤더 -->
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 32pt;">
    <div style="display: flex; align-items: center; gap: 12pt;">
      <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 1</p>
      <h2 style="font-size: 24pt; font-weight: 600; color: #1a1a1a;">Main Topic</h2>
    </div>
    <p style="font-size: 10pt; color: #999;">02</p>
  </div>

  <!-- 콘텐츠 영역 -->
  <div style="flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 32pt;">
    <div>
      <h3 style="font-size: 18pt; font-weight: 600; color: #1a1a1a; margin-bottom: 16pt;">Key Point One</h3>
      <p style="font-size: 13pt; color: #666; line-height: 1.7;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
      </p>
    </div>
    <div>
      <h3 style="font-size: 18pt; font-weight: 600; color: #1a1a1a; margin-bottom: 16pt;">Key Point Two</h3>
      <p style="font-size: 13pt; color: #666; line-height: 1.7;">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
      </p>
    </div>
  </div>

  <!-- 푸터 -->
  <div style="display: flex; justify-content: space-between; align-items: center; padding-top: 16pt; border-top: 1px solid #eee;">
    <p style="font-size: 9pt; color: #999;">www.yourwebsite.com</p>
    <p style="font-size: 9pt; color: #999;">©2025 YOUR BRAND</p>
  </div>
</body>
</html>

5. 통계/데이터 슬라이드 (Statistics)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 720pt;
      height: 405pt;
      font-family: 'Pretendard', sans-serif;
      background: #f5f5f0;
      padding: 40pt 48pt;
      display: flex;
      flex-direction: column;
    }
  </style>
</head>
<body>
  <!-- 헤더 -->
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 32pt;">
    <h2 style="font-size: 28pt; font-weight: 600; color: #1a1a1a;">Key Metrics</h2>
    <p style="font-size: 10pt; color: #999;">03</p>
  </div>

  <!-- 통계 카드 그리드 -->
  <div style="flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24pt;">
    <div style="background: #1a1a1a; border-radius: 12pt; padding: 28pt; display: flex; flex-direction: column; justify-content: space-between;">
      <p style="font-size: 10pt; color: #888; text-transform: uppercase; letter-spacing: 0.05em;">Revenue Growth</p>
      <div>
        <p style="font-size: 48pt; font-weight: 600; color: #ffffff; letter-spacing: -0.02em;">85%</p>
        <p style="font-size: 11pt; color: #666; margin-top: 8pt;">Year over year</p>
      </div>
    </div>
    <div style="background: #ffffff; border-radius: 12pt; padding: 28pt; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #e5e5e0;">
      <p style="font-size: 10pt; color: #888; text-transform: uppercase; letter-spacing: 0.05em;">Active Users</p>
      <div>
        <p style="font-size: 48pt; font-weight: 600; color: #1a1a1a; letter-spacing: -0.02em;">2.4M</p>
        <p style="font-size: 11pt; color: #888; margin-top: 8pt;">+340K this quarter</p>
      </div>
    </div>
    <div style="background: #ffffff; border-radius: 12pt; padding: 28pt; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #e5e5e0;">
      <p style="font-size: 10pt; color: #888; text-transform: uppercase; letter-spacing: 0.05em;">Customer Satisfaction</p>
      <div>
        <p style="font-size: 48pt; font-weight: 600; color: #1a1a1a; letter-spacing: -0.02em;">4.9</p>
        <p style="font-size: 11pt; color: #888; margin-top: 8pt;">Out of 5.0 rating</p>
      </div>
    </div>
  </div>

  <!-- 푸터 -->
  <div style="display: flex; justify-content: flex-end; padding-top: 16pt;">
    <p style="font-size: 9pt; color: #999;">Source: Internal Analytics 2025</p>
  </div>
</body>
</html>

6. 이미지 + 텍스트 슬라이드 (Split Layout)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 720pt;
      height: 405pt;
      font-family: 'Pretendard', sans-serif;
      background: #ffffff;
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
  </style>
</head>
<body>
  <!-- 이미지 영역 -->
  <div style="background: #e5e5e0; display: flex; align-items: center; justify-content: center; position: relative;">
    <div data-image-placeholder style="width: 100%; height: 100%; background: linear-gradient(135deg, #d0d0c8 0%, #b8b8b0 100%);"></div>
    <p style="position: absolute; bottom: 16pt; left: 16pt; font-size: 9pt; color: #666;">©2025 YOUR BRAND</p>
  </div>

  <!-- 텍스트 영역 -->
  <div style="padding: 48pt; display: flex; flex-direction: column; justify-content: center;">
    <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600; margin-bottom: 24pt; align-self: flex-start;">FEATURE</p>
    <h2 style="font-size: 32pt; font-weight: 600; color: #1a1a1a; letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 20pt;">
      Transform Your Business
    </h2>
    <p style="font-size: 14pt; color: #666; line-height: 1.7;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <div style="margin-top: 32pt; display: flex; align-items: center; gap: 12pt;">
      <p style="font-size: 12pt; font-weight: 500; color: #1a1a1a;">Learn more</p>
      <div style="width: 28pt; height: 28pt; border: 1px solid #1a1a1a; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
        <p style="font-size: 12pt; color: #1a1a1a;">→</p>
      </div>
    </div>
  </div>
</body>
</html>

7. 팀 소개 슬라이드 (Team)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 720pt;
      height: 405pt;
      font-family: 'Pretendard', sans-serif;
      background: #f5f5f0;
      padding: 40pt 48pt;
      display: flex;
      flex-direction: column;
    }
  </style>
</head>
<body>
  <!-- 헤더 -->
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 32pt;">
    <h2 style="font-size: 28pt; font-weight: 600; color: #1a1a1a;">Our Team</h2>
    <p style="font-size: 10pt; color: #999;">05</p>
  </div>

  <!-- 팀원 그리드 -->
  <div style="flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20pt;">
    <div style="text-align: center;">
      <div style="width: 100%; aspect-ratio: 1; background: #d0d0c8; border-radius: 8pt; margin-bottom: 12pt;"></div>
      <p style="font-size: 13pt; font-weight: 600; color: #1a1a1a;">John Smith</p>
      <p style="font-size: 10pt; color: #888; margin-top: 4pt;">CEO & Founder</p>
    </div>
    <div style="text-align: center;">
      <div style="width: 100%; aspect-ratio: 1; background: #d0d0c8; border-radius: 8pt; margin-bottom: 12pt;"></div>
      <p style="font-size: 13pt; font-weight: 600; color: #1a1a1a;">Sarah Johnson</p>
      <p style="font-size: 10pt; color: #888; margin-top: 4pt;">CTO</p>
    </div>
    <div style="text-align: center;">
      <div style="width: 100%; aspect-ratio: 1; background: #d0d0c8; border-radius: 8pt; margin-bottom: 12pt;"></div>
      <p style="font-size: 13pt; font-weight: 600; color: #1a1a1a;">Mike Chen</p>
      <p style="font-size: 10pt; color: #888; margin-top: 4pt;">Design Lead</p>
    </div>
    <div style="text-align: center;">
      <div style="width: 100%; aspect-ratio: 1; background: #d0d0c8; border-radius: 8pt; margin-bottom: 12pt;"></div>
      <p style="font-size: 13pt; font-weight: 600; color: #1a1a1a;">Emily Davis</p>
      <p style="font-size: 10pt; color: #888; margin-top: 4pt;">Marketing</p>
    </div>
  </div>
</body>
</html>

8. 인용문 슬라이드 (Quote)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 720pt;
      height: 405pt;
      font-family: 'Pretendard', sans-serif;
      background: #1a1a1a;
      padding: 64pt;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
  </style>
</head>
<body>
  <p style="font-size: 48pt; color: #444; margin-bottom: 24pt;">"</p>
  <h2 style="font-size: 28pt; font-weight: 400; color: #ffffff; letter-spacing: -0.01em; line-height: 1.5; max-width: 540pt;">
    The best way to predict the future is to create it.
  </h2>
  <div style="margin-top: 40pt;">
    <p style="font-size: 13pt; font-weight: 500; color: #ffffff;">Peter Drucker</p>
    <p style="font-size: 11pt; color: #666; margin-top: 4pt;">Management Consultant</p>
  </div>
</body>
</html>

9. 타임라인 슬라이드 (Timeline)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 720pt;
      height: 405pt;
      font-family: 'Pretendard', sans-serif;
      background: #ffffff;
      padding: 40pt 48pt;
      display: flex;
      flex-direction: column;
    }
  </style>
</head>
<body>
  <!-- 헤더 -->
  <div style="margin-bottom: 32pt;">
    <h2 style="font-size: 28pt; font-weight: 600; color: #1a1a1a;">Our Journey</h2>
  </div>

  <!-- 타임라인 -->
  <div style="flex: 1; display: flex; align-items: center;">
    <div style="display: flex; width: 100%; justify-content: space-between; position: relative;">
      <!-- 연결선 -->
      <div style="position: absolute; top: 12pt; left: 40pt; right: 40pt; height: 2pt; background: #e5e5e0;"></div>

      <!-- 타임라인 아이템들 -->
      <div style="text-align: center; z-index: 1;">
        <div style="width: 24pt; height: 24pt; background: #1a1a1a; border-radius: 50%; margin: 0 auto 16pt;"></div>
        <p style="font-size: 18pt; font-weight: 600; color: #1a1a1a;">2020</p>
        <p style="font-size: 11pt; color: #888; margin-top: 8pt; max-width: 100pt;">Company Founded</p>
      </div>
      <div style="text-align: center; z-index: 1;">
        <div style="width: 24pt; height: 24pt; background: #1a1a1a; border-radius: 50%; margin: 0 auto 16pt;"></div>
        <p style="font-size: 18pt; font-weight: 600; color: #1a1a1a;">2021</p>
        <p style="font-size: 11pt; color: #888; margin-top: 8pt; max-width: 100pt;">First Product Launch</p>
      </div>
      <div style="text-align: center; z-index: 1;">
        <div style="width: 24pt; height: 24pt; background: #1a1a1a; border-radius: 50%; margin: 0 auto 16pt;"></div>
        <p style="font-size: 18pt; font-weight: 600; color: #1a1a1a;">2023</p>
        <p style="font-size: 11pt; color: #888; margin-top: 8pt; max-width: 100pt;">Series A Funding</p>
      </div>
      <div style="text-align: center; z-index: 1;">
        <div style="width: 24pt; height: 24pt; background: #1a1a1a; border-radius: 50%; margin: 0 auto 16pt;"></div>
        <p style="font-size: 18pt; font-weight: 600; color: #1a1a1a;">2025</p>
        <p style="font-size: 11pt; color: #888; margin-top: 8pt; max-width: 100pt;">Global Expansion</p>
      </div>
    </div>
  </div>

  <!-- 푸터 -->
  <div style="display: flex; justify-content: flex-end; padding-top: 16pt;">
    <p style="font-size: 10pt; color: #999;">06</p>
  </div>
</body>
</html>

10. 마무리 슬라이드 (Closing)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 720pt;
      height: 405pt;
      font-family: 'Pretendard', sans-serif;
      background: #1a1a1a;
      padding: 48pt;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  </style>
</head>
<body>
  <!-- 로고 -->
  <div style="display: flex; align-items: center; gap: 8pt;">
    <div style="width: 20pt; height: 20pt; background: #fff; border-radius: 4pt; display: flex; align-items: center; justify-content: center;">
      <p style="color: #1a1a1a; font-size: 12pt;">*</p>
    </div>
    <p style="font-size: 12pt; font-weight: 600; color: #ffffff;">LogoName</p>
  </div>

  <!-- 메인 메시지 -->
  <div>
    <h1 style="font-size: 56pt; font-weight: 500; color: #ffffff; letter-spacing: -0.02em; line-height: 1.1;">
      Thank You
    </h1>
    <p style="font-size: 16pt; color: #888; margin-top: 16pt;">
      Questions? Let's discuss.
    </p>
  </div>

  <!-- 연락처 정보 -->
  <div style="display: flex; gap: 64pt;">
    <div>
      <p style="font-size: 9pt; color: #666; margin-bottom: 4pt;">Email</p>
      <p style="font-size: 12pt; font-weight: 500; color: #ffffff;">hello@company.com</p>
    </div>
    <div>
      <p style="font-size: 9pt; color: #666; margin-bottom: 4pt;">Phone</p>
      <p style="font-size: 12pt; font-weight: 500; color: #ffffff;">+82 10-1234-5678</p>
    </div>
    <div>
      <p style="font-size: 9pt; color: #666; margin-bottom: 4pt;">Website</p>
      <p style="font-size: 12pt; font-weight: 500; color: #ffffff;">www.company.com</p>
    </div>
  </div>
</body>
</html>

고급 디자인 패턴

비대칭 레이아웃

시선을 끄는 독창적인 구성

/* 황금비율 기반 */
grid-template-columns: 1fr 1.618fr;

/* 극단적 비대칭 */
grid-template-columns: 1fr 3fr;

오버레이 텍스트

이미지 위 텍스트 배치

<div style="position: relative;">
  <div style="position: absolute; inset: 0; background: rgba(0,0,0,0.5);"></div>
  <div style="position: relative; z-index: 1;">
    <h2 style="color: #fff;">Overlay Text</h2>
  </div>
</div>

그라데이션 오버레이

<div style="
  background: linear-gradient(to right, #1a1a1a 0%, transparent 60%);
  position: absolute;
  inset: 0;
"></div>

카드 스타일

<div style="
  background: #ffffff;
  border-radius: 12pt;
  padding: 24pt;
  box-shadow: 0 2pt 8pt rgba(0,0,0,0.08);
"></div>

텍스트 사용 규칙

필수 태그

<!-- 모든 텍스트는 반드시 다음 태그 안에 -->
<p>, <h1>-<h6>, <ul>, <ol>, <li>

<!-- 금지 - PowerPoint에서 무시됨 -->
<div>텍스트</div>
<span>텍스트</span>

권장 사용법

<!-- 좋은 예 -->
<h1 style="...">제목</h1>
<p style="...">본문 텍스트</p>

<!-- 나쁜 예 -->
<div style="...">텍스트 직접 입력</div>

출력 및 파일 구조

파일 저장 규칙

slides/
├── slide-01.html  (표지)
├── slide-02.html  (목차)
├── slide-03.html  (섹션 구분)
├── slide-04.html  (내용)
├── ...
└── slide-XX.html  (마무리)

파일 명명 규칙

2자리 숫자 사용: slide-01.html, slide-02.html
순서대로 명명
특수문자, 공백 사용 금지

워크플로우

분석: slide-outline.md 읽고 콘텐츠 파악
테마 결정: 색상 팔레트, 전체적인 무드 선택
구조 설계: 슬라이드별 레이아웃 타입 결정
디자인 실행: 각 슬라이드 HTML 생성
일관성 검토: 전체 프레젠테이션의 통일성 확인
저장: slides/ 디렉토리에 파일 저장

주의사항

CSS 그라데이션: PowerPoint 변환 시 지원 안됨 - 배경 이미지로 대체
웹폰트: Pretendard CDN 링크 항상 포함
이미지 경로: 절대 경로 또는 URL 사용
호환성: 모든 색상에 # 포함
텍스트 규칙: div/span에 직접 텍스트 금지

name	design-skill
description	프레젠테이션 슬라이드를 미려한 HTML로 디자인. 슬라이드 HTML 생성, 시각적 디자인, 레이아웃 구성이 필요할 때 사용.

Design Skill - 프로페셔널 프레젠테이션 디자인 시스템

핵심 디자인 철학

1. Less is More

불필요한 장식 요소 제거
콘텐츠가 주인공이 되는 디자인
여백(Whitespace)을 적극 활용
시각적 계층 구조 명확화

2. 타이포그래피 중심 디자인

Pretendard를 기본 폰트로 사용
폰트 크기 대비로 시각적 임팩트 생성
자간과 행간의 섬세한 조절
웨이트 변화로 강조점 표현

3. 전략적 색상 사용

제한된 색상 팔레트 (2-3색)
모노톤 기반 + 포인트 컬러
배경색으로 분위기 연출
고대비로 가독성 확보

기본 설정

슬라이드 크기 (16:9 기본)

<body style="width: 720pt; height: 405pt;">

지원 비율

비율	크기	용도
16:9	720pt × 405pt	기본, 모니터/화면
4:3	720pt × 540pt	구형 프로젝터
16:10	720pt × 450pt	맥북

기본 폰트 스택

font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

Pretendard 웹폰트 CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">

타이포그래피 시스템

폰트 크기 스케일

용도	크기	웨이트	사용 예시
Hero Title	72-96pt	700-800	표지 메인 타이틀
Section Title	48-60pt	700	섹션 구분 제목
Slide Title	32-40pt	600-700	슬라이드 제목
Subtitle	20-24pt	500	부제목, 설명
Body	16-20pt	400	본문 텍스트
Caption	12-14pt	400	캡션, 출처
Label	10-12pt	500-600	뱃지, 태그

자간 설정 (letter-spacing)

/* 대형 제목: 타이트하게 */
letter-spacing: -0.02em;

/* 중형 제목 */
letter-spacing: -0.01em;

/* 본문: 기본 */
letter-spacing: 0;

/* 캡션, 레이블: 약간 넓게 */
letter-spacing: 0.02em;

행간 설정 (line-height)

/* 제목 */
line-height: 1.2;

/* 본문 */
line-height: 1.6 - 1.8;

/* 한 줄 텍스트 */
line-height: 1;

색상 팔레트 시스템

1. Executive Minimal (기본 권장)

세련된 비즈니스 프레젠테이션용

--bg-primary: #f5f5f0;      /* 웜 화이트 배경 */
--bg-secondary: #e8e8e3;    /* 서브 배경 */
--bg-dark: #1a1a1a;         /* 다크 배경 */
--text-primary: #1a1a1a;    /* 메인 텍스트 */
--text-secondary: #666666;  /* 보조 텍스트 */
--text-light: #999999;      /* 약한 텍스트 */
--accent: #1a1a1a;          /* 강조 (검정) */
--border: #d4d4d0;          /* 테두리 */

2. Sage Professional

차분하고 신뢰감 있는 톤

--bg-primary: #b8c4b8;      /* 세이지 그린 배경 */
--bg-secondary: #a3b0a3;    /* 짙은 세이지 */
--bg-light: #f8faf8;        /* 밝은 배경 */
--text-primary: #1a1a1a;    /* 메인 텍스트 */
--text-secondary: #3d3d3d;  /* 보조 텍스트 */
--accent: #2d2d2d;          /* 강조 */
--border: #9aa89a;          /* 테두리 */

3. Modern Dark

임팩트 있는 다크 테마

--bg-primary: #0f0f0f;      /* 순수 다크 */
--bg-secondary: #1a1a1a;    /* 카드 배경 */
--bg-elevated: #252525;     /* 강조 영역 */
--text-primary: #ffffff;    /* 메인 텍스트 */
--text-secondary: #b0b0b0;  /* 보조 텍스트 */
--accent: #ffffff;          /* 강조 (화이트) */
--border: #333333;          /* 테두리 */

4. Corporate Blue

전통적 비즈니스 톤

--bg-primary: #ffffff;      /* 화이트 배경 */
--bg-secondary: #f7f9fc;    /* 밝은 블루 그레이 */
--text-primary: #1e2a3a;    /* 다크 네이비 */
--text-secondary: #5a6b7d;  /* 블루 그레이 */
--accent: #2563eb;          /* 블루 강조 */
--border: #e2e8f0;          /* 테두리 */

5. Warm Neutral

따뜻하고 친근한 톤

--bg-primary: #faf8f5;      /* 크림 화이트 */
--bg-secondary: #f0ebe3;    /* 웜 베이지 */
--text-primary: #2d2a26;    /* 다크 브라운 */
--text-secondary: #6b6560;  /* 미디움 브라운 */
--accent: #c45a3b;          /* 테라코타 */
--border: #ddd8d0;          /* 테두리 */

레이아웃 시스템

여백 기준 (padding/margin)

/* 슬라이드 전체 여백 */
padding: 48pt;

/* 섹션 간 여백 */
gap: 32pt;

/* 요소 간 여백 */
gap: 16pt;

/* 텍스트 블록 내 여백 */
gap: 8pt;

그리드 시스템

/* 2단 레이아웃 */
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32pt;

/* 3단 레이아웃 */
grid-template-columns: repeat(3, 1fr);

/* 비대칭 레이아웃 (40:60) */
grid-template-columns: 2fr 3fr;

/* 비대칭 레이아웃 (30:70) */
grid-template-columns: 1fr 2.3fr;

디자인 컴포넌트

1. 뱃지/태그

<p style="
  display: inline-block;
  padding: 6pt 14pt;
  border: 1px solid #1a1a1a;
  border-radius: 20pt;
  font-size: 10pt;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
">PRESENTATION</p>

2. 섹션 넘버

<p style="
  display: inline-block;
  padding: 4pt 12pt;
  background: #1a1a1a;
  color: #ffffff;
  border-radius: 4pt;
  font-size: 10pt;
  font-weight: 600;
">SECTION 1</p>

3. 로고 영역

<div style="display: flex; align-items: center; gap: 8pt;">
  <div style="
    width: 20pt;
    height: 20pt;
    background: #1a1a1a;
    border-radius: 4pt;
    display: flex;
    align-items: center;
    justify-content: center;
  ">
    <p style="color: #fff; font-size: 12pt;">*</p>
  </div>
  <p style="font-size: 12pt; font-weight: 600;">LogoName</p>
</div>

4. 아이콘 버튼

<div style="
  width: 32pt;
  height: 32pt;
  border: 1px solid #1a1a1a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
">
  <p style="font-size: 14pt;">↗</p>
</div>

5. 구분선

<div style="
  width: 100%;
  height: 1pt;
  background: #d4d4d0;
"></div>

6. 정보 그리드

<div style="display: flex; gap: 48pt;">
  <div>
    <p style="font-size: 10pt; color: #999; margin-bottom: 4pt;">Contact</p>
    <p style="font-size: 12pt; font-weight: 500;">334556774</p>
  </div>
  <div>
    <p style="font-size: 10pt; color: #999; margin-bottom: 4pt;">Date</p>
    <p style="font-size: 12pt; font-weight: 500;">March 2025</p>
  </div>
</div>

슬라이드 템플릿

1. 표지 슬라이드 (Cover)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 720pt;
      height: 405pt;
      font-family: 'Pretendard', sans-serif;
      background: #f5f5f0;
      padding: 32pt 48pt;
      display: flex;
      flex-direction: column;
    }
  </style>
</head>
<body>
  <!-- 헤더 -->
  <div style="display: flex; justify-content: space-between; align-items: center;">
    <div style="display: flex; align-items: center; gap: 16pt;">
      <div style="display: flex; align-items: center; gap: 8pt;">
        <div style="width: 18pt; height: 18pt; background: #1a1a1a; border-radius: 3pt; display: flex; align-items: center; justify-content: center;">
          <p style="color: #fff; font-size: 10pt;">*</p>
        </div>
        <p style="font-size: 11pt; font-weight: 600; color: #1a1a1a;">LogoName</p>
      </div>
      <p style="display: inline-block; padding: 4pt 10pt; border: 1px solid #1a1a1a; border-radius: 12pt; font-size: 9pt; font-weight: 500;">PRESENTATION</p>
    </div>
    <div style="display: flex; align-items: center; gap: 8pt;">
      <p style="display: inline-block; padding: 4pt 10pt; border: 1px solid #1a1a1a; border-radius: 12pt; font-size: 9pt; font-weight: 500;">OUR PROJECT</p>
      <div style="width: 28pt; height: 28pt; border: 1px solid #1a1a1a; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
        <p style="font-size: 12pt; color: #1a1a1a;">↘</p>
      </div>
    </div>
  </div>

  <!-- 메인 타이틀 -->
  <div style="flex: 1; display: flex; flex-direction: column; justify-content: center;">
    <h1 style="font-size: 72pt; font-weight: 500; color: #1a1a1a; letter-spacing: -0.02em; line-height: 1.1;">
      Business Deck
    </h1>
    <p style="font-size: 14pt; color: #666; margin-top: 24pt;">
      <span style="color: #999;">Presented by</span>  <span style="font-weight: 500; color: #1a1a1a;">Luna Martinez</span>
    </p>
  </div>

  <!-- 푸터 정보 -->
  <div style="display: flex; gap: 64pt;">
    <div>
      <p style="font-size: 9pt; color: #999; margin-bottom: 4pt;">Contact</p>
      <p style="font-size: 11pt; font-weight: 500; color: #1a1a1a;">334556774</p>
    </div>
    <div>
      <p style="font-size: 9pt; color: #999; margin-bottom: 4pt;">Date</p>
      <p style="font-size: 11pt; font-weight: 500; color: #1a1a1a;">March 2025</p>
    </div>
    <div>
      <p style="font-size: 9pt; color: #999; margin-bottom: 4pt;">Website</p>
      <p style="font-size: 11pt; font-weight: 500; color: #1a1a1a;">www.yourwebsite.com</p>
    </div>
  </div>
</body>
</html>

2. 목차 슬라이드 (Contents)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 720pt;
      height: 405pt;
      font-family: 'Pretendard', sans-serif;
      background: #b8c4b8;
      padding: 48pt;
      display: grid;
      grid-template-columns: 1fr 1.8fr;
      gap: 48pt;
    }
  </style>
</head>
<body>
  <!-- 왼쪽: 타이틀 -->
  <div style="display: flex; flex-direction: column; justify-content: flex-end;">
    <p style="font-size: 9pt; color: #3d3d3d; margin-bottom: 16pt;">©2025 YOUR BRAND. ALL RIGHTS RESERVED.</p>
    <h1 style="font-size: 56pt; font-weight: 500; color: #1a1a1a; letter-spacing: -0.02em; line-height: 1.1;">
      Our<br>Contents
    </h1>
    <div style="width: 32pt; height: 32pt; border: 1px solid #1a1a1a; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 24pt;">
      <p style="font-size: 14pt; color: #1a1a1a;">↗</p>
    </div>
  </div>

  <!-- 오른쪽: 목차 리스트 -->
  <div style="display: flex; flex-direction: column; justify-content: center; gap: 16pt;">
    <div style="display: flex; align-items: center; gap: 16pt; padding: 12pt 0; border-bottom: 1px solid rgba(0,0,0,0.1);">
      <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 1</p>
      <p style="flex: 1; font-size: 14pt; font-weight: 500; color: #1a1a1a;">SECTION TITLE</p>
      <p style="font-size: 14pt; color: #666;">(1)</p>
    </div>
    <div style="display: flex; align-items: center; gap: 16pt; padding: 12pt 0; border-bottom: 1px solid rgba(0,0,0,0.1);">
      <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 2</p>
      <p style="flex: 1; font-size: 14pt; font-weight: 500; color: #1a1a1a;">SECTION TITLE</p>
      <p style="font-size: 14pt; color: #666;">(2)</p>
    </div>
    <div style="display: flex; align-items: center; gap: 16pt; padding: 12pt 0; border-bottom: 1px solid rgba(0,0,0,0.1);">
      <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 3</p>
      <p style="flex: 1; font-size: 14pt; font-weight: 500; color: #1a1a1a;">SECTION TITLE</p>
      <p style="font-size: 14pt; color: #666;">(3)</p>
    </div>
    <div style="display: flex; align-items: center; gap: 16pt; padding: 12pt 0; border-bottom: 1px solid rgba(0,0,0,0.1);">
      <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 4</p>
      <p style="flex: 1; font-size: 14pt; font-weight: 500; color: #1a1a1a;">SECTION TITLE</p>
      <p style="font-size: 14pt; color: #666;">(4)</p>
    </div>
    <div style="display: flex; align-items: center; gap: 16pt; padding: 12pt 0;">
      <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 5</p>
      <p style="flex: 1; font-size: 14pt; font-weight: 500; color: #1a1a1a;">SECTION TITLE</p>
      <p style="font-size: 14pt; color: #666;">(5)</p>
    </div>
  </div>
</body>
</html>

3. 섹션 구분 슬라이드 (Section Divider)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 720pt;
      height: 405pt;
      font-family: 'Pretendard', sans-serif;
      background: #1a1a1a;
      padding: 48pt;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  </style>
</head>
<body>
  <!-- 상단 섹션 정보 -->
  <div style="display: flex; justify-content: space-between; align-items: flex-start;">
    <div>
      <p style="display: inline-block; padding: 4pt 10pt; background: #fff; color: #1a1a1a; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 1</p>
    </div>
    <p style="font-size: 9pt; color: #666;">©2025 YOUR BRAND</p>
  </div>

  <!-- 메인 타이틀 -->
  <div>
    <h1 style="font-size: 64pt; font-weight: 500; color: #ffffff; letter-spacing: -0.02em; line-height: 1.1;">
      Introduction
    </h1>
    <p style="font-size: 16pt; color: #888; margin-top: 16pt; max-width: 400pt; line-height: 1.6;">
      Brief description of what this section covers and why it matters.
    </p>
  </div>

  <!-- 페이지 번호 -->
  <div style="display: flex; justify-content: flex-end;">
    <p style="font-size: 10pt; color: #666;">01</p>
  </div>
</body>
</html>

4. 콘텐츠 슬라이드 (Content)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 720pt;
      height: 405pt;
      font-family: 'Pretendard', sans-serif;
      background: #ffffff;
      padding: 40pt 48pt;
      display: flex;
      flex-direction: column;
    }
  </style>
</head>
<body>
  <!-- 헤더 -->
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 32pt;">
    <div style="display: flex; align-items: center; gap: 12pt;">
      <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 1</p>
      <h2 style="font-size: 24pt; font-weight: 600; color: #1a1a1a;">Main Topic</h2>
    </div>
    <p style="font-size: 10pt; color: #999;">02</p>
  </div>

  <!-- 콘텐츠 영역 -->
  <div style="flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 32pt;">
    <div>
      <h3 style="font-size: 18pt; font-weight: 600; color: #1a1a1a; margin-bottom: 16pt;">Key Point One</h3>
      <p style="font-size: 13pt; color: #666; line-height: 1.7;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
      </p>
    </div>
    <div>
      <h3 style="font-size: 18pt; font-weight: 600; color: #1a1a1a; margin-bottom: 16pt;">Key Point Two</h3>
      <p style="font-size: 13pt; color: #666; line-height: 1.7;">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
      </p>
    </div>
  </div>

  <!-- 푸터 -->
  <div style="display: flex; justify-content: space-between; align-items: center; padding-top: 16pt; border-top: 1px solid #eee;">
    <p style="font-size: 9pt; color: #999;">www.yourwebsite.com</p>
    <p style="font-size: 9pt; color: #999;">©2025 YOUR BRAND</p>
  </div>
</body>
</html>

5. 통계/데이터 슬라이드 (Statistics)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 720pt;
      height: 405pt;
      font-family: 'Pretendard', sans-serif;
      background: #f5f5f0;
      padding: 40pt 48pt;
      display: flex;
      flex-direction: column;
    }
  </style>
</head>
<body>
  <!-- 헤더 -->
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 32pt;">
    <h2 style="font-size: 28pt; font-weight: 600; color: #1a1a1a;">Key Metrics</h2>
    <p style="font-size: 10pt; color: #999;">03</p>
  </div>

  <!-- 통계 카드 그리드 -->
  <div style="flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24pt;">
    <div style="background: #1a1a1a; border-radius: 12pt; padding: 28pt; display: flex; flex-direction: column; justify-content: space-between;">
      <p style="font-size: 10pt; color: #888; text-transform: uppercase; letter-spacing: 0.05em;">Revenue Growth</p>
      <div>
        <p style="font-size: 48pt; font-weight: 600; color: #ffffff; letter-spacing: -0.02em;">85%</p>
        <p style="font-size: 11pt; color: #666; margin-top: 8pt;">Year over year</p>
      </div>
    </div>
    <div style="background: #ffffff; border-radius: 12pt; padding: 28pt; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #e5e5e0;">
      <p style="font-size: 10pt; color: #888; text-transform: uppercase; letter-spacing: 0.05em;">Active Users</p>
      <div>
        <p style="font-size: 48pt; font-weight: 600; color: #1a1a1a; letter-spacing: -0.02em;">2.4M</p>
        <p style="font-size: 11pt; color: #888; margin-top: 8pt;">+340K this quarter</p>
      </div>
    </div>
    <div style="background: #ffffff; border-radius: 12pt; padding: 28pt; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #e5e5e0;">
      <p style="font-size: 10pt; color: #888; text-transform: uppercase; letter-spacing: 0.05em;">Customer Satisfaction</p>
      <div>
        <p style="font-size: 48pt; font-weight: 600; color: #1a1a1a; letter-spacing: -0.02em;">4.9</p>
        <p style="font-size: 11pt; color: #888; margin-top: 8pt;">Out of 5.0 rating</p>
      </div>
    </div>
  </div>

  <!-- 푸터 -->
  <div style="display: flex; justify-content: flex-end; padding-top: 16pt;">
    <p style="font-size: 9pt; color: #999;">Source: Internal Analytics 2025</p>
  </div>
</body>
</html>

6. 이미지 + 텍스트 슬라이드 (Split Layout)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 720pt;
      height: 405pt;
      font-family: 'Pretendard', sans-serif;
      background: #ffffff;
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
  </style>
</head>
<body>
  <!-- 이미지 영역 -->
  <div style="background: #e5e5e0; display: flex; align-items: center; justify-content: center; position: relative;">
    <div data-image-placeholder style="width: 100%; height: 100%; background: linear-gradient(135deg, #d0d0c8 0%, #b8b8b0 100%);"></div>
    <p style="position: absolute; bottom: 16pt; left: 16pt; font-size: 9pt; color: #666;">©2025 YOUR BRAND</p>
  </div>

  <!-- 텍스트 영역 -->
  <div style="padding: 48pt; display: flex; flex-direction: column; justify-content: center;">
    <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600; margin-bottom: 24pt; align-self: flex-start;">FEATURE</p>
    <h2 style="font-size: 32pt; font-weight: 600; color: #1a1a1a; letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 20pt;">
      Transform Your Business
    </h2>
    <p style="font-size: 14pt; color: #666; line-height: 1.7;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <div style="margin-top: 32pt; display: flex; align-items: center; gap: 12pt;">
      <p style="font-size: 12pt; font-weight: 500; color: #1a1a1a;">Learn more</p>
      <div style="width: 28pt; height: 28pt; border: 1px solid #1a1a1a; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
        <p style="font-size: 12pt; color: #1a1a1a;">→</p>
      </div>
    </div>
  </div>
</body>
</html>

7. 팀 소개 슬라이드 (Team)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 720pt;
      height: 405pt;
      font-family: 'Pretendard', sans-serif;
      background: #f5f5f0;
      padding: 40pt 48pt;
      display: flex;
      flex-direction: column;
    }
  </style>
</head>
<body>
  <!-- 헤더 -->
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 32pt;">
    <h2 style="font-size: 28pt; font-weight: 600; color: #1a1a1a;">Our Team</h2>
    <p style="font-size: 10pt; color: #999;">05</p>
  </div>

  <!-- 팀원 그리드 -->
  <div style="flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20pt;">
    <div style="text-align: center;">
      <div style="width: 100%; aspect-ratio: 1; background: #d0d0c8; border-radius: 8pt; margin-bottom: 12pt;"></div>
      <p style="font-size: 13pt; font-weight: 600; color: #1a1a1a;">John Smith</p>
      <p style="font-size: 10pt; color: #888; margin-top: 4pt;">CEO & Founder</p>
    </div>
    <div style="text-align: center;">
      <div style="width: 100%; aspect-ratio: 1; background: #d0d0c8; border-radius: 8pt; margin-bottom: 12pt;"></div>
      <p style="font-size: 13pt; font-weight: 600; color: #1a1a1a;">Sarah Johnson</p>
      <p style="font-size: 10pt; color: #888; margin-top: 4pt;">CTO</p>
    </div>
    <div style="text-align: center;">
      <div style="width: 100%; aspect-ratio: 1; background: #d0d0c8; border-radius: 8pt; margin-bottom: 12pt;"></div>
      <p style="font-size: 13pt; font-weight: 600; color: #1a1a1a;">Mike Chen</p>
      <p style="font-size: 10pt; color: #888; margin-top: 4pt;">Design Lead</p>
    </div>
    <div style="text-align: center;">
      <div style="width: 100%; aspect-ratio: 1; background: #d0d0c8; border-radius: 8pt; margin-bottom: 12pt;"></div>
      <p style="font-size: 13pt; font-weight: 600; color: #1a1a1a;">Emily Davis</p>
      <p style="font-size: 10pt; color: #888; margin-top: 4pt;">Marketing</p>
    </div>
  </div>
</body>
</html>

8. 인용문 슬라이드 (Quote)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 720pt;
      height: 405pt;
      font-family: 'Pretendard', sans-serif;
      background: #1a1a1a;
      padding: 64pt;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
  </style>
</head>
<body>
  <p style="font-size: 48pt; color: #444; margin-bottom: 24pt;">"</p>
  <h2 style="font-size: 28pt; font-weight: 400; color: #ffffff; letter-spacing: -0.01em; line-height: 1.5; max-width: 540pt;">
    The best way to predict the future is to create it.
  </h2>
  <div style="margin-top: 40pt;">
    <p style="font-size: 13pt; font-weight: 500; color: #ffffff;">Peter Drucker</p>
    <p style="font-size: 11pt; color: #666; margin-top: 4pt;">Management Consultant</p>
  </div>
</body>
</html>

9. 타임라인 슬라이드 (Timeline)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 720pt;
      height: 405pt;
      font-family: 'Pretendard', sans-serif;
      background: #ffffff;
      padding: 40pt 48pt;
      display: flex;
      flex-direction: column;
    }
  </style>
</head>
<body>
  <!-- 헤더 -->
  <div style="margin-bottom: 32pt;">
    <h2 style="font-size: 28pt; font-weight: 600; color: #1a1a1a;">Our Journey</h2>
  </div>

  <!-- 타임라인 -->
  <div style="flex: 1; display: flex; align-items: center;">
    <div style="display: flex; width: 100%; justify-content: space-between; position: relative;">
      <!-- 연결선 -->
      <div style="position: absolute; top: 12pt; left: 40pt; right: 40pt; height: 2pt; background: #e5e5e0;"></div>

      <!-- 타임라인 아이템들 -->
      <div style="text-align: center; z-index: 1;">
        <div style="width: 24pt; height: 24pt; background: #1a1a1a; border-radius: 50%; margin: 0 auto 16pt;"></div>
        <p style="font-size: 18pt; font-weight: 600; color: #1a1a1a;">2020</p>
        <p style="font-size: 11pt; color: #888; margin-top: 8pt; max-width: 100pt;">Company Founded</p>
      </div>
      <div style="text-align: center; z-index: 1;">
        <div style="width: 24pt; height: 24pt; background: #1a1a1a; border-radius: 50%; margin: 0 auto 16pt;"></div>
        <p style="font-size: 18pt; font-weight: 600; color: #1a1a1a;">2021</p>
        <p style="font-size: 11pt; color: #888; margin-top: 8pt; max-width: 100pt;">First Product Launch</p>
      </div>
      <div style="text-align: center; z-index: 1;">
        <div style="width: 24pt; height: 24pt; background: #1a1a1a; border-radius: 50%; margin: 0 auto 16pt;"></div>
        <p style="font-size: 18pt; font-weight: 600; color: #1a1a1a;">2023</p>
        <p style="font-size: 11pt; color: #888; margin-top: 8pt; max-width: 100pt;">Series A Funding</p>
      </div>
      <div style="text-align: center; z-index: 1;">
        <div style="width: 24pt; height: 24pt; background: #1a1a1a; border-radius: 50%; margin: 0 auto 16pt;"></div>
        <p style="font-size: 18pt; font-weight: 600; color: #1a1a1a;">2025</p>
        <p style="font-size: 11pt; color: #888; margin-top: 8pt; max-width: 100pt;">Global Expansion</p>
      </div>
    </div>
  </div>

  <!-- 푸터 -->
  <div style="display: flex; justify-content: flex-end; padding-top: 16pt;">
    <p style="font-size: 10pt; color: #999;">06</p>
  </div>
</body>
</html>

10. 마무리 슬라이드 (Closing)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 720pt;
      height: 405pt;
      font-family: 'Pretendard', sans-serif;
      background: #1a1a1a;
      padding: 48pt;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  </style>
</head>
<body>
  <!-- 로고 -->
  <div style="display: flex; align-items: center; gap: 8pt;">
    <div style="width: 20pt; height: 20pt; background: #fff; border-radius: 4pt; display: flex; align-items: center; justify-content: center;">
      <p style="color: #1a1a1a; font-size: 12pt;">*</p>
    </div>
    <p style="font-size: 12pt; font-weight: 600; color: #ffffff;">LogoName</p>
  </div>

  <!-- 메인 메시지 -->
  <div>
    <h1 style="font-size: 56pt; font-weight: 500; color: #ffffff; letter-spacing: -0.02em; line-height: 1.1;">
      Thank You
    </h1>
    <p style="font-size: 16pt; color: #888; margin-top: 16pt;">
      Questions? Let's discuss.
    </p>
  </div>

  <!-- 연락처 정보 -->
  <div style="display: flex; gap: 64pt;">
    <div>
      <p style="font-size: 9pt; color: #666; margin-bottom: 4pt;">Email</p>
      <p style="font-size: 12pt; font-weight: 500; color: #ffffff;">hello@company.com</p>
    </div>
    <div>
      <p style="font-size: 9pt; color: #666; margin-bottom: 4pt;">Phone</p>
      <p style="font-size: 12pt; font-weight: 500; color: #ffffff;">+82 10-1234-5678</p>
    </div>
    <div>
      <p style="font-size: 9pt; color: #666; margin-bottom: 4pt;">Website</p>
      <p style="font-size: 12pt; font-weight: 500; color: #ffffff;">www.company.com</p>
    </div>
  </div>
</body>
</html>

고급 디자인 패턴

비대칭 레이아웃

시선을 끄는 독창적인 구성

/* 황금비율 기반 */
grid-template-columns: 1fr 1.618fr;

/* 극단적 비대칭 */
grid-template-columns: 1fr 3fr;

오버레이 텍스트

이미지 위 텍스트 배치

<div style="position: relative;">
  <div style="position: absolute; inset: 0; background: rgba(0,0,0,0.5);"></div>
  <div style="position: relative; z-index: 1;">
    <h2 style="color: #fff;">Overlay Text</h2>
  </div>
</div>

그라데이션 오버레이

<div style="
  background: linear-gradient(to right, #1a1a1a 0%, transparent 60%);
  position: absolute;
  inset: 0;
"></div>

카드 스타일

<div style="
  background: #ffffff;
  border-radius: 12pt;
  padding: 24pt;
  box-shadow: 0 2pt 8pt rgba(0,0,0,0.08);
"></div>

텍스트 사용 규칙

필수 태그

<!-- 모든 텍스트는 반드시 다음 태그 안에 -->
<p>, <h1>-<h6>, <ul>, <ol>, <li>

<!-- 금지 - PowerPoint에서 무시됨 -->
<div>텍스트</div>
<span>텍스트</span>

권장 사용법

<!-- 좋은 예 -->
<h1 style="...">제목</h1>
<p style="...">본문 텍스트</p>

<!-- 나쁜 예 -->
<div style="...">텍스트 직접 입력</div>

출력 및 파일 구조

파일 저장 규칙

slides/
├── slide-01.html  (표지)
├── slide-02.html  (목차)
├── slide-03.html  (섹션 구분)
├── slide-04.html  (내용)
├── ...
└── slide-XX.html  (마무리)

파일 명명 규칙

2자리 숫자 사용: slide-01.html, slide-02.html
순서대로 명명
특수문자, 공백 사용 금지

워크플로우

분석: slide-outline.md 읽고 콘텐츠 파악
테마 결정: 색상 팔레트, 전체적인 무드 선택
구조 설계: 슬라이드별 레이아웃 타입 결정
디자인 실행: 각 슬라이드 HTML 생성
일관성 검토: 전체 프레젠테이션의 통일성 확인
저장: slides/ 디렉토리에 파일 저장

주의사항

CSS 그라데이션: PowerPoint 변환 시 지원 안됨 - 배경 이미지로 대체
웹폰트: Pretendard CDN 링크 항상 포함
이미지 경로: 절대 경로 또는 URL 사용
호환성: 모든 색상에 # 포함
텍스트 규칙: div/span에 직접 텍스트 금지

design-skill

More from this repository

More from this repository

Design Skill - 프로페셔널 프레젠테이션 디자인 시스템

핵심 디자인 철학

1. Less is More

2. 타이포그래피 중심 디자인

3. 전략적 색상 사용

기본 설정

슬라이드 크기 (16:9 기본)

지원 비율

기본 폰트 스택

Pretendard 웹폰트 CDN

타이포그래피 시스템

폰트 크기 스케일

자간 설정 (letter-spacing)

행간 설정 (line-height)

색상 팔레트 시스템

1. Executive Minimal (기본 권장)

2. Sage Professional

3. Modern Dark

4. Corporate Blue

5. Warm Neutral

레이아웃 시스템

여백 기준 (padding/margin)

그리드 시스템

디자인 컴포넌트

1. 뱃지/태그

2. 섹션 넘버

3. 로고 영역

4. 아이콘 버튼

5. 구분선

6. 정보 그리드

슬라이드 템플릿

1. 표지 슬라이드 (Cover)

2. 목차 슬라이드 (Contents)

3. 섹션 구분 슬라이드 (Section Divider)

4. 콘텐츠 슬라이드 (Content)

5. 통계/데이터 슬라이드 (Statistics)

6. 이미지 + 텍스트 슬라이드 (Split Layout)

7. 팀 소개 슬라이드 (Team)

8. 인용문 슬라이드 (Quote)

9. 타임라인 슬라이드 (Timeline)

10. 마무리 슬라이드 (Closing)

고급 디자인 패턴

비대칭 레이아웃

오버레이 텍스트

그라데이션 오버레이

카드 스타일

텍스트 사용 규칙

필수 태그

권장 사용법

출력 및 파일 구조

파일 저장 규칙

파일 명명 규칙

워크플로우

주의사항

Design Skill - 프로페셔널 프레젠테이션 디자인 시스템

핵심 디자인 철학

1. Less is More

2. 타이포그래피 중심 디자인

3. 전략적 색상 사용

기본 설정

슬라이드 크기 (16:9 기본)

지원 비율

기본 폰트 스택

Pretendard 웹폰트 CDN

타이포그래피 시스템

폰트 크기 스케일

자간 설정 (letter-spacing)

행간 설정 (line-height)

색상 팔레트 시스템

1. Executive Minimal (기본 권장)

2. Sage Professional

3. Modern Dark

4. Corporate Blue

5. Warm Neutral

레이아웃 시스템

여백 기준 (padding/margin)

그리드 시스템