slides은(는) 무엇을 하나요?
프레젠테이션을 위한 디자인 시스템. 모든 데크(내부용, 고객용, 공개용)에 적용됩니다.
아래의 팔레트, 타이포그래피 및 로고 값은 기본값입니다. 프로젝트에 자체 브랜드 가이드라인이 있다면 먼저 읽고(팔레트, 로고, 폰트) 이 값을 대체하십시오. 레이아웃, 규칙 및 내러티브 구조는 동일하게 유지됩니다.
프레젠테이션을 생성하기 위해 세 가지 스킬이 결합됩니다.
brand-system은 아이덴티티(팔레트, 타이포그래피, 그라데이션, 로고, 톤)를 제공합니다. 설치된 경우 먼저 읽으십시오. 해당 토큰이 아래 기본값을 대체합니다.slides(본 스킬)은 내러티브 구조와 15가지 레이아웃을 제공합니다.pptx(Anthropic 스킬, 별도 설치 필요)는 기술적인 파일 생성을 제공합니다..pptx생성 시 이를 참조하십시오.
1. 디자인 토큰
기본 팔레트
| 역할 | Hex | 슬라이드 사용법 |
|---|---|---|
| 로고 파랑 | #295FEC | 로고 전용 |
| 기본 파랑 | #3D65E8 | 악센트, 윗제목, CTA, 상단 테두리, 타임라인 점 |
| 오프화이트 배경(그라데이션) | #F8F9FB | 그라데이션이 있는 슬라이드의 기본 배경 |
| 밝은 콘텐츠 배경 | #EBEFF7 | 전환 슬라이드, 대체 배경 |
| 표면/카드 | #FFFFFF | 콘텐츠 블록, 카드 |
| 밝은 표면 블록 | #F0F2F7 | 3-6 블록 그리드의 카드 |
| 기본 텍스트 | #111827 | 제목, 본문 |
| 흐릿한 텍스트 | #6B7280 | 레이블, 캡션, 바닥글 |
배경 그라데이션(소프트 블루)
밝은 배경 슬라이드, 라이트 커버 및 제목 슬라이드에 적용됩니다.
- PPTX의 경우: 슬라이드 배경 #F8F9FB, 방사형 그라데이션 채우기, 오른쪽 상단 모서리, 색상 #B4D7F5 불투명도 55%에서 투명으로.
- 대칭 변형(긴 데크의 경우): 왼쪽 하단 모서리에도 그라데이션, #B4D7F5 불투명도 25%.
- 그라데이션은 항상 부드럽고 미묘해야 합니다. 강한 채도는 절대 금지입니다. 첫눈에 눈에 띄지 않아야 합니다.
타이포그래피
| 용도 | 폰트 | 두께 | 표시 크기 |
|---|---|---|---|
| 슬라이드 제목 | Inter | Black 900 또는 ExtraBold 800 | 36-56pt |
| 히어로 제목(큰 제목) | Inter | Black 900 | 72-96pt |
| 부제목/챕터 제목 | Inter | SemiBold 600 | 20-24pt |
| 윗제목/섹션 레이블 | Inter | SemiBold 600 | 10-12pt, 대문자, #3D65E8 |
| 본문 텍스트 | Inter | Regular 400 | 14-16pt |
| 레이블/메타데이터 | Inter | Regular 400 | 10-12pt, 흐릿함 |
대체 폰트: Public Sans (https://fonts.google.com/specimen/Public+Sans). 시스템 대체 폰트: Geist, SF Pro, Helvetica Neue. Serif는 절대 사용하지 않습니다.
아이콘
Phosphor Icons (https://phosphoricons.com/) 또는 Lucide (https://lucide.dev/). Regular 또는 Light. 이모지는 절대 사용하지 않습니다.
2. 슬라이드의 로고
에셋: 프로젝트 브랜드의 심볼 및 로고타입(심볼 + 이름)을 SVG 또는 PNG 형식으로 제공합니다. 이 스킬에는 로고가 제공되지 않습니다.
표준 배치
- 커버(기본 색상 배경): 왼쪽 상단에 로고타입, 높이 36-40px, 흰색 버전이 있으면 사용하고, 그렇지 않으면 심볼만 사용합니다.
- 내용 슬라이드(밝은 배경): 왼쪽 하단 바닥글, 둥근 심볼 20px + Inter Regular 10pt 흐릿함 #6B7280 이름.
- 전환 슬라이드: 동일한 바닥글 또는 로고 없음(미니멀).
표준 바닥글 구조
[심볼 20px] 이름 이메일 | 웹사이트 | LinkedIn [번호]
바닥글은 기준선에 맞춰 정렬, 타이포그래피 10pt 흐릿함. 연락처 항목 사이에 구분자 |. 슬라이드 번호는 오른쪽 정렬.
3. 레이아웃 카탈로그
참조 시트: references/mises-en-page.png(및 .svg)는 아래 번호와 같이 15가지 레이아웃을 나란히 보여줍니다. 레이아웃을 선택하기 전에 이를 확인하고, 해당 시트를 읽으십시오.
보편적인 규칙
슬라이드당 하나의 아이디어. 넉넉한 여백. 하나의 지배적인 요소. 텍스트/시각 자료 비율: 최대 60% 텍스트. 긍정적이고 구체적인 제목.
레이아웃 01 — 커버
구조:
- 배경: 데크의 톤에 따라 파랑 #3D65E8 또는 오프화이트 그라데이션 배경
- 왼쪽 상단 로고 워드마크
- 윗제목(클라이언트 또는 컨텍스트): 대문자, Inter SemiBold 12pt, 흰색 또는 파랑
- 기본 제목: Inter Black 900, 48-56pt, 흰색 또는 #111827, 최대 2줄
- 부제목 또는 캐치프레이즈: Regular 18pt, 흐릿함 또는 흰색 70%
- 바닥글: 연락처(이메일, 웹사이트, LinkedIn), 10pt, 왼쪽 하단
그라데이션 배경 변형(컨셉 데크): 배경 #F8F9FB + 오른쪽 상단 방사형 그라데이션, 제목 #111827, 악센트 #3D65E8.
레이아웃 02 — 큰 제목(섹션, 전환, 강력한 아이디어)
구조:
- 배경: #EBEFF7 또는 오프화이트 그라데이션
- 상단 테두리 선: 3px 단색 #3D65E8, 전체 너비
- 제목만: Inter Black 900, 56-72pt, #111827, 왼쪽 정렬, 높이의 40%
- 선택적 부제목: SemiBold 600, 20pt, 흐릿함
- 미니멀 로고 바닥글
용도: 챕터 시작, 문제 진술, 충격적인 통계.
레이아웃 03 — 빅 아이디어(한 문장, 전체 화면)
구조:
- 순수 흰색 배경 #FFFFFF 또는 그라데이션
- 하나의 문장, Inter Black 900, 64-96pt
- #3D65E8로 강조된 키워드(선택적, 최대 1-2단어)
- 미묘한 바닥글 외에는 다른 요소 없음
- 정렬: 데크의 리듬에 따라 왼쪽 또는 가운데
용도: 피치, 키노트, 내러티브 전환점.
레이아웃 04 — 제목 + 본문(표준)
구조:
- 배경 #F8F9FB + 그라데이션 또는 #EBEFF7
- 왼쪽 상단 대문자 파랑 윗제목 11pt
- 제목: Inter Black 900, 36-44pt
- 본문: 2-4 문단 또는 불릿, Regular 400, 14-16pt
- 오른쪽 넉넉한 여백(너비의 최소 15%)
- 로고 바닥글
레이아웃 05 — 반반 텍스트/미디어
구조:
- 배경: #F8F9FB 그라데이션
- 왼쪽 열(50%): 제목 + 본문 또는 불릿, 왼쪽 정렬
- 오른쪽 열(50%): 이미지, 스크린샷, 목업, 또는 다이어그램
- 구분: 여백만 사용(선이나 다른 배경 없음)
- 오른쪽 이미지: 둥근 모서리 12-16px, 부드러운 그림자
용도: 인터페이스, 사례, 시각적 비교 제시.
레이아웃 06 — 1/3 텍스트 + 2/3 디바이스 목업
구조:
- 배경: #F8F9FB 그라데이션
- 왼쪽 열(33%): 윗제목 + 제목 + 2-3 핵심 포인트 또는 짧은 설명
- 오른쪽 열(67%): 내부에 UI가 있는 디바이스 목업(iPad, Mac, iPhone)
- 목업: 얇은 프레임 #F0F2F7, 모바일용 매우 둥근 모서리, Mac/iPad용 직사각형
- 내부 UI는 실제 스크린샷 또는 정확한 목업
- 디바이스는 여백을 약간 벗어날 수 있음(미묘한 블리드)
용도: 제품 컨셉, 프로토타입, 새로운 기능 제시.
레이아웃 07 — 3열
구조:
- 배경: #F8F9FB 그라데이션 또는 #FFFFFF
- 왼쪽 상단 슬라이드 제목
- 동일한 3열, 간격 24-32px
- 각 열: SemiBold 제목 + 내용 + 하단 링크 또는 레이블
- 열 표면: #F0F2F7, border-radius 12px, 넉넉한 패딩
- 열 사이에 뚜렷한 테두리 없음
용도: 3가지 컨셉, 3가지 옵션, 3가지 사례, 3가지 도구 비교.
레이아웃 08 — 3블록
레이아웃 07과 동일하지만 수직 구성 또는 더 뚜렷한 계층 구조가 특징입니다. 블록 표면이 더 크고 블록당 내용이 더 조밀할 수 있습니다.
레이아웃 09 — 4블록(2×2)
구조:
- 배경: #F8F9FB 그라데이션
- 왼쪽 상단 슬라이드 제목
- 2×2 그리드, 간격 20px
- 각 블록: 표면 #F0F2F7, border-radius 12px, SemiBold 제목 + Regular 본문
- 블록 너비와 높이 동일
용도: 4가지 서비스, 4단계, 4가지 핵심 포인트.
레이아웃 10 — 6블록(2×3 또는 3×2)
구조:
- 배경: #FFFFFF 또는 #F8F9FB
- 왼쪽 상단 슬라이드 제목, 선택적 설명 부제목
- 내용에 따라 3열 × 2행 또는 2열 × 3행 그리드
- 블록: 표면 #F0F2F7, border-radius 12px, SemiBold 제목 14pt + Regular 본문 12pt
- 각 블록 하단에 컨텍스트 레이블 또는 태그, 약간 더 채도가 높은 배경(#E8EEF8)에 파랑 #3D65E8
용도: 도구 상자, 방법론, 기능, 역량.
레이아웃 11 — 타임라인
구조:
- 배경: #FFFFFF + 파랑 상단 테두리 선 3px
- 왼쪽 상단 제목, 설명 부제목 14pt 흐릿함
- 왼쪽 세로 축: 가는 선 #E5E7EB
- 각 항목: 왼쪽 흐릿한 날짜/연도 + 파랑 점 #3D65E8 (12px) + Bold 제목 + Regular 부제목 + 기울임 꼴 흐릿한 세부 정보
- 항목 간 충분한 세로 간격(압축하지 않음)
용도: 이력, 프로젝트 히스토리, 과거/현재 로드맵.
레이아웃 12 — 로드맵
구조:
- 배경: #F8F9FB 그라데이션
- 왼쪽 상단 제목
- 가로 축: 선 #E5E7EB와 기간별 마커 또는 블록
- 기간: Q1/Q2... 또는 월 1/2... 또는 단계 1/2...
- 항목 블록: 표면 #FFFFFF 또는 #F0F2F7, border-radius 8px, 제목 + 상태 레이블
- 상태: 컬러 점 또는 배지(파랑=진행 중, 초록=완료, 회색=예정)
- 로고 바닥글
용도: 미션 계획, 제품 로드맵, 이정표.
레이아웃 13 — 표
구조:
- 배경: #FFFFFF 또는 #F8F9FB
- 왼쪽 상단 제목
- 열 헤더: 배경 #3D65E8, 흰색 텍스트, Inter SemiBold 12pt
- 읽기 쉽도록 교차 행: #FFFFFF / #F0F2F7
- 셀: Regular 400, 13pt, 패딩 12px
- 굵은 테두리 없음. 가는 가로 구분선 #E5E7EB만 사용.
레이아웃 14 — 전체 너비/전체 높이 시각 자료
구조:
- 이미지 또는 스크린샷이 슬라이드 배경의 100%를 덮음(전체 블리드)
- 위에 표시할 내용에 따라 어둡거나 밝은 그라데이션 오버레이
- 오버레이 제목: Inter Black 900, 흰색 또는 #111827, 왼쪽 하단 또는 하단 중앙
- 슬라이드 크롬 없음(배경, 테두리, 미묘한 페이지 번호 외 바닥글 없음)
용도: 극적인 전환, 섹션 소개, 포트폴리오, 히어로 스크린샷.
레이아웃 15 — 전체 너비 디바이스 + UI 목업
구조:
- 배경: #F8F9FB 그라데이션
- 중앙 또는 약간 오른쪽으로 치우친 디바이스(Mac, iPad, iPhone), 높이의 70-80%
- 내부 UI: 실제 스크린샷 또는 고해상도 목업
- 왼쪽에 떠 있는 제목 또는 레이블: Inter SemiBold 20pt, #111827
- 디바이스 아래 그림자: 부드러움, 불투명도 15-20%
- 디바이스 주변에 추가 프레임 없음
용도: 히어로 컨셉, 제품 쇼케이스, 전체 해상도 프로토타입.
디바이스 목업 규칙:
- iPhone: 얇은 앤트러사이트 또는 흰색 프레임, 매우 둥근 모서리
- iPad: 얇은 알루미늄 프레임, 내용에 따라 세로 또는 가로 방향
- MacBook: 열린 알루미늄 프레임, 중앙 화면, 눈에 띄지 않는 베이스
- 제조사 비율 유지
4. 레이아웃 원칙
- 슬라이드당 지배적인 제목: 독자가 본문을 읽지 않고도 아이디어를 이해할 수 있어야 함.
- 넉넉한 여백: 표면의 70% 이상을 채우지 않음.
- 강력한 계층 구조: 슬라이드당 하나의 '첫눈에 보는' 요소.
- 순수 흰색 배경 #FFFFFF을 데크 전체 배경으로 사용하는 것은 금지. #F8F9FB 선호.
- 내용 슬라이드에서 텍스트 가운데 정렬은 금지(커버 및 레이아웃 03 빅 아이디어에만 가운데 정렬).
- 폰트 혼합은 금지.
- 제목 아래 장식선은 금지.
- 동일한 레이아웃을 3개 이상의 연속 슬라이드에서 반복하지 않도록 주의.
5. 구조 슬라이드
| 유형 | 배경 | 텍스트 | 레이아웃 |
|---|---|---|---|
| 커버 | #3D65E8 또는 그라데이션 #F8F9FB | 흰색 또는 #111827 | 레이아웃 01 |
| 전환/챕터 | #EBEFF7 + 상단 테두리 | #111827 | 레이아웃 02 |
| 표준 내용 | #F8F9FB 그라데이션 | #111827 | 레이아웃 04 ~ 15 |
| 빅 아이디어 | #FFFFFF 또는 그라데이션 | #111827 + 파랑 악센트 | 레이아웃 03 |
| 결론/CTA | #3D65E8 | 흰색 | 레이아웃 01 변형 |
권장 구조(샌드위치): 파랑 배경 커버, 그라데이션이 있는 밝은 내용 슬라이드, 파랑 배경 결론.
6. 내러티브 규칙
데크 아크
- 현재 상황(고객의 현실에 기반)
- 확인된 긴장 또는 문제
- 개입 각도 및 메커니즘
- 제공물, 이정표 또는 제안된 솔루션
- 다음 구체적인 단계
슬라이드 제목
- 구체적이고 긍정적: "테스트 결과 3가지 중요한 마찰점이 드러났습니다", "테스트 결과"가 아님.
- 제목만 읽는 독자가 데크의 논리를 이해할 수 있어야 함.
- 금지: "소개", "맥락", "결론", "요약".
데이터 및 지표
- 중앙에 통계 콜아웃: 매우 큰 숫자, 아래에 작은 레이블.
- 각 지표는 컨텍스트(이전/이후, 기간, 출처)와 함께 제공.
- 시각화나 설명 없이 원시 표를 사용하지 않음.
7. 데크 구성
상업용 데크 / 고객 제안
- 커버: 파랑 배경 #3D65E8, 미션 제목, 고객 이름
- 최대 8-12 슬라이드
- 목차 슬라이드 없음
- 정확한 다음 단계(날짜, 작업, 연락처)로 마무리
사례 연구 데크
- 커버: 파랑 배경 #3D65E8 + 제목 + 연도
- 구조: 맥락, 결정, 결과, 교훈
- 주요 지표에 대한 통계 콜아웃
- 전용 슬라이드(레이아웃 14 또는 15)의 전체 너비 스크린샷
UX/디자인 교육 데크
- 전환 슬라이드(레이아웃 02)가 있는 챕터
- 시각적으로 차별화된 연습(약간 다른 배경)
- 시작 슬라이드의 세션 타임라인
- 슬라이드당 하나의 개념, 체계적인 일러스트레이션
피치 / 키노트
- 최대 10 슬라이드
- 슬라이드당 하나의 통계 또는 강력한 아이디어
- 불릿 없음: 시각적 내러티브만
- 시각 자료(레이아웃 14 또는 15)와 번갈아 가며 빅 아이디어(레이아웃 03)
8. 피해야 할 안티패턴
- 시각적 구조 없이 흰색 배경에 빽빽한 불릿
- 내용 슬라이드에서 텍스트 가운데 정렬
- 폰트 혼합
- 이모지 아이콘
- 제목 아래 장식선(일반적인 AI 시그니처)
- 3개 이상의 연속 슬라이드에서 동일한 레이아웃 반복
- 순수 흰색 배경 #FFFFFF을 전체 배경으로 사용
- 너무 채도가 높거나 첫눈에 눈에 띄는 그라데이션
9. 전달 전 확인 사항
- 로고 있음: 커버의 로고타입, 내용 슬라이드 바닥글의 심볼.
- 팔레트가 프로젝트 브랜드 가이드라인 준수(기본값: 로고 #295FEC, 악센트 #3D65E8, 배경 #F8F9FB).
- 밝은 배경 슬라이드에 그라데이션 적용.
- Inter 타이포그래피만 사용, 두께 계층 구조 준수.
- 슬라이드당 하나의 지배적 요소, 여백 준수.
- 긍정적이고 구체적인 제목.
- 제목만 읽어도 내러티브 아크를 이해할 수 있어야 함.
- 이모지, emdash, 제목 아래 장식선 없음.
…
[번역을 위해 잘림]