--- name: design-skill description: 프레젠테이션 슬라이드를 미려한 HTML로 디자인. 슬라이드 HTML 생성, 시각적 디자인, 레이아웃 구성이 필요할 때 사용. --- # Design Skill - 프로페셔널 프레젠테이션 디자인 시스템 최고 수준의 비즈니스 프레젠테이션을 위한 HTML 슬라이드 디자인 스킬입니다. 미니멀하고 세련된 디자인, 전문적인 타이포그래피, 정교한 레이아웃을 제공합니다. --- ## 핵심 디자인 철학 ### 1. Less is More - 불필요한 장식 요소 제거 - 콘텐츠가 주인공이 되는 디자인 - 여백(Whitespace)을 적극 활용 - 시각적 계층 구조 명확화 ### 2. 타이포그래피 중심 디자인 - Pretendard를 기본 폰트로 사용 - 폰트 크기 대비로 시각적 임팩트 생성 - 자간과 행간의 섬세한 조절 - 웨이트 변화로 강조점 표현 ### 3. 전략적 색상 사용 - 제한된 색상 팔레트 (2-3색) - 모노톤 기반 + 포인트 컬러 - 배경색으로 분위기 연출 - 고대비로 가독성 확보 --- ## 기본 설정 ### 슬라이드 크기 (16:9 기본) ```html ``` ### 지원 비율 | 비율 | 크기 | 용도 | |------|------|------| | 16:9 | 720pt × 405pt | 기본, 모니터/화면 | | 4:3 | 720pt × 540pt | 구형 프로젝터 | | 16:10 | 720pt × 450pt | 맥북 | ### 기본 폰트 스택 ```css font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; ``` ### Pretendard 웹폰트 CDN ```html ``` --- ## 타이포그래피 시스템 ### 폰트 크기 스케일 | 용도 | 크기 | 웨이트 | 사용 예시 | |------|------|--------|----------| | 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) ```css /* 대형 제목: 타이트하게 */ letter-spacing: -0.02em; /* 중형 제목 */ letter-spacing: -0.01em; /* 본문: 기본 */ letter-spacing: 0; /* 캡션, 레이블: 약간 넓게 */ letter-spacing: 0.02em; ``` ### 행간 설정 (line-height) ```css /* 제목 */ line-height: 1.2; /* 본문 */ line-height: 1.6 - 1.8; /* 한 줄 텍스트 */ line-height: 1; ``` --- ## 색상 팔레트 시스템 ### 1. Executive Minimal (기본 권장) 세련된 비즈니스 프레젠테이션용 ```css --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 차분하고 신뢰감 있는 톤 ```css --bg-primary: #b8c4b8; /* 세이지 그린 배경 */ --bg-secondary: #a3b0a3; /* 짙은 세이지 */ --bg-light: #f8faf8; /* 밝은 배경 */ --text-primary: #1a1a1a; /* 메인 텍스트 */ --text-secondary: #3d3d3d; /* 보조 텍스트 */ --accent: #2d2d2d; /* 강조 */ --border: #9aa89a; /* 테두리 */ ``` ### 3. Modern Dark 임팩트 있는 다크 테마 ```css --bg-primary: #0f0f0f; /* 순수 다크 */ --bg-secondary: #1a1a1a; /* 카드 배경 */ --bg-elevated: #252525; /* 강조 영역 */ --text-primary: #ffffff; /* 메인 텍스트 */ --text-secondary: #b0b0b0; /* 보조 텍스트 */ --accent: #ffffff; /* 강조 (화이트) */ --border: #333333; /* 테두리 */ ``` ### 4. Corporate Blue 전통적 비즈니스 톤 ```css --bg-primary: #ffffff; /* 화이트 배경 */ --bg-secondary: #f7f9fc; /* 밝은 블루 그레이 */ --text-primary: #1e2a3a; /* 다크 네이비 */ --text-secondary: #5a6b7d; /* 블루 그레이 */ --accent: #2563eb; /* 블루 강조 */ --border: #e2e8f0; /* 테두리 */ ``` ### 5. Warm Neutral 따뜻하고 친근한 톤 ```css --bg-primary: #faf8f5; /* 크림 화이트 */ --bg-secondary: #f0ebe3; /* 웜 베이지 */ --text-primary: #2d2a26; /* 다크 브라운 */ --text-secondary: #6b6560; /* 미디움 브라운 */ --accent: #c45a3b; /* 테라코타 */ --border: #ddd8d0; /* 테두리 */ ``` --- ## 레이아웃 시스템 ### 여백 기준 (padding/margin) ```css /* 슬라이드 전체 여백 */ padding: 48pt; /* 섹션 간 여백 */ gap: 32pt; /* 요소 간 여백 */ gap: 16pt; /* 텍스트 블록 내 여백 */ gap: 8pt; ``` ### 그리드 시스템 ```css /* 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. 뱃지/태그 ```html

PRESENTATION

``` ### 2. 섹션 넘버 ```html

SECTION 1

``` ### 3. 로고 영역 ```html

*

LogoName

``` ### 4. 아이콘 버튼 ```html

↗

``` ### 5. 구분선 ```html
``` ### 6. 정보 그리드 ```html

Contact

334556774

Date

March 2025

``` --- ## 슬라이드 템플릿 ### 1. 표지 슬라이드 (Cover) ```html

*

LogoName

PRESENTATION

OUR PROJECT

↘

Business Deck

Presented by Luna Martinez

Contact

334556774

Date

March 2025

Website

www.yourwebsite.com

``` ### 2. 목차 슬라이드 (Contents) ```html

©2025 YOUR BRAND. ALL RIGHTS RESERVED.

Our
Contents

↗

SECTION 1

SECTION TITLE

(1)

SECTION 2

SECTION TITLE

(2)

SECTION 3

SECTION TITLE

(3)

SECTION 4

SECTION TITLE

(4)

SECTION 5

SECTION TITLE

(5)

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

SECTION 1

©2025 YOUR BRAND

Introduction

Brief description of what this section covers and why it matters.

01

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

SECTION 1

Main Topic

02

Key Point One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Key Point Two

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

www.yourwebsite.com

©2025 YOUR BRAND

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

Key Metrics

03

Revenue Growth

85%

Year over year

Active Users

2.4M

+340K this quarter

Customer Satisfaction

4.9

Out of 5.0 rating

Source: Internal Analytics 2025

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

©2025 YOUR BRAND

FEATURE

Transform Your Business

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Learn more

→

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

Our Team

05

John Smith

CEO & Founder

Sarah Johnson

CTO

Mike Chen

Design Lead

Emily Davis

Marketing

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

"

The best way to predict the future is to create it.

Peter Drucker

Management Consultant

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

Our Journey

2020

Company Founded

2021

First Product Launch

2023

Series A Funding

2025

Global Expansion

06

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

*

LogoName

Thank You

Questions? Let's discuss.

Email

hello@company.com

Phone

+82 10-1234-5678

Website

www.company.com

``` --- ## 고급 디자인 패턴 ### 비대칭 레이아웃 시선을 끄는 독창적인 구성 ```css /* 황금비율 기반 */ grid-template-columns: 1fr 1.618fr; /* 극단적 비대칭 */ grid-template-columns: 1fr 3fr; ``` ### 오버레이 텍스트 이미지 위 텍스트 배치 ```html

Overlay Text

``` ### 그라데이션 오버레이 ```html
``` ### 카드 스타일 ```html
``` --- ## 텍스트 사용 규칙 ### 필수 태그 ```html

,

-

,