상황별 PPT 디자인
이 스킬은 두 가지를 제공합니다:
- 템플릿 참고 자료:
styles/<분기>/exemplar/및samples/에 있는 완성된 샘플입니다. - 디자인 가이드:
guide/에 있는 '구성 방법, 사용할 모양'에 대한 설명입니다.
핵심 원칙: 스타일은 상황과 자료에 따라 결정되며, 고정되어 있지 않습니다. 샘플은 품질 기준과 표현 방법을 설정하는 데 사용되며, 그대로 따라 하라는 것이 아닙니다. 새 데크는 자체 콘텐츠에 따라 다시 구성해야 합니다. 샘플의 레이아웃을 그대로 복사하거나 모든 데크를 똑같이 만드는 것은 바로 이 스킬이 피하고자 하는 'AI 감'입니다.
환경 요구 사항
- macOS, Google Chrome,
uv. 렌더링 시 로컬 Chrome을 호출하며, 브라우저를 다운로드할 필요가 없습니다. - 글꼴은 모두 macOS 시스템 글꼴이며, 스킬과 함께 패키징할 수 없습니다. 중문 글꼴의 굵기 단계는 PostScript 이름으로 지정해야 합니다(예:
STSongti-SC-Black,FZLTTHK--GBK1-0). 패밀리 이름에font-weight만 쓰면 일반 굵기로 대체됩니다.
프로세스
00 상황 판단
먼저 사용자가 제공한 자료를 읽으십시오. 자료가 답할 수 있는 질문은 다시 묻지 마십시오. 그런 다음 '답변이 디자인 결정을 변경하는' 질문만 하되, 한 번에 최대 3~4개까지만 질문하십시오. 질문 도구가 있으면 그것을 사용하십시오.
| 질문 | 결정 사항 |
|---|---|
| 어떤 장소에서 사용됩니까? 예: 대회 발표, 강의 또는 학술 발표, 학급 회의 또는 학교 행사, 업무 보고, 기타 | 어떤 스타일 분기를 선택할지 |
| 현장에서 프로젝션하여 발표합니까, 아니면 파일을 보내서 혼자 보게 합니까? 발표 시간은 얼마나 됩니까? | 정보 밀도와 페이지 수. 현장 발표: 글자 크게, 글자 적게, 약 1분에 1페이지. 파일 전송: 정보를 더 조밀하게 넣을 수 있음 |
| 청중이 무엇을 기억하고, 무엇을 느끼길 원합니까? 예: 전문적이고 신뢰감, 아이디어가 있음, 따뜻하고 재미있음, 열정적 | 분기 내에서 어떤 테마를 선택할지 |
| 반드시 사용해야 하는 색상, 로고 또는 템플릿 요구 사항이 있습니까? 예: 학교 엠블럼, 학급 깃발 색상, 대회 요구 사항 | 주요 색상 변수 |
상황 → 분기와 테마
| 상황 | 분기 | 테마 선택 방법 | 밀도 |
|---|---|---|---|
| 챌린지컵, 인터넷+ 창업 대회, 프로젝트 발표 | roadshow-cn | 단일 테마; 대회가 상업적일 경우 골드 톤을 밝게 하고, 테크 사이언을 추가 | 빽빽하게 채움 (70% 이상) |
| 학기말 발표, 독서 보고서, 소그룹 연구 발표 | course-report | 인문사회는 paper 선택; 이공계, 디자인, 데이터는 swiss 선택 | 여백을 둘 수 있으며, 글자 크기 대비가 커야 함 |
| 학급 회의, 중간/기말 리뷰, 운동회, 동아리, 졸업 | school-event | 추억, 감사는 handbook 선택; 대회, 모집은 pop 선택 | 여백을 둘 수 있으며, 각 페이지에 '실물'이 하나씩 있어야 함 |
| 디자인 감각, 개인 스타일을 강조해야 할 때: 포트폴리오 설명, 취업 또는 대학원 면접 자기소개, 디자인 공유, 개인 주제 발표 | curve-minimal | 절제되고 이성적이며 디자인 도면 같길 원하거나, 파일 전송/인쇄를 원하면 pen(밝은 배경) 선택; 더 표현력 있고 개인적인 분위기를 원하며 현장 발표를 한다면 ribbon(어두운 배경) 선택 | 매우 적음, 많은 여백; 각 페이지에 하나의 핵심 포인트만 |
| 모두 적합하지 않음 | 새 테마 또는 분기 생성, 아래 참조 | — | — |
적합한 분기가 없을 때 가장 가까운 것을 억지로 사용하지 마십시오. '분위기 → 글꼴 → 모양 언어 → 색상' 순서로 새로운 tokens.css 세트를 파생시키십시오. 필수 변수와 필요에 따른 변수의 구분은 styles/roadshow-cn/tokens.css 서두에 작성되어 있습니다. 글꼴은 먼저 scripts/fontcheck.py를 사용하여 Chrome에서 실제로 사용되는지 확인하십시오.
주요 색상은 학교 표준 색상, 학급 깃발 색상, 주제 관련 색상 등 사용자 자료에서 우선적으로 가져오십시오.
01 자료 정리
사용자 자료에 있는 사진, 주요 숫자, 인용문, 증명서 파일을 나열하십시오. 사진의 수는 레이아웃에 직접적인 영향을 미칩니다. 사진이 3장 미만일 경우 사진 벽을 만들지 마십시오. 현재 이 단계는 수동으로 정리하며, 스크립트는 아직 없습니다.
02 개요
먼저 장(chapter)을 정하고, 각 페이지에 역할을 할당합니다: 표지, 장 페이지, 내용 페이지, 데이터 페이지, 끝맺음. 각 분기의 일반적인 페이지 유형은 styles/<분기>/style.md를 참조하십시오.
03 각 페이지의 모양 선택
각 페이지의 정보 관계(계층, 순서, 대비, 정렬, 비율, 주요 숫자, 병렬, 현장 사진 등)를 파악한 다음, guide/shapes.md 에서 해당하는 후보 모양을 찾아 선택 기준과 현재 분기에 따라 하나를 선택하십시오. '왜 이 모양을 사용했는지'를 말할 수 없다면 잘못 선택한 것입니다. 장식은 마지막에 추가하며, 구성 역할에 따라 선택하십시오(동일한 문서의 섹션 4).
04 렌더링
- 선택한 분기의
exemplar/deck.html파일 구조를 참조하여 작성하되, 레이아웃을 그대로 복사하지 마십시오:<head>첫 줄에 테마 스크립트<script>{const t=new URLSearchParams(location.search).get('theme');if(t)document.documentElement.dataset.theme=t}</script>를 배치하십시오. 이를 빼먹으면render.py가 테마 이름을 전달해도 기본 테마로 자동 렌더링됩니다;- 그다음 순서대로
tokens.css,lib/base.css, 분기의components.css를 참조하십시오. roadshow-cn은 단일 테마 분기이며lib/base.css에 연결되지 않았으므로 자체 샘플에 따라 작성하십시오; - 페이지 끝에
lib/shapes.js를 참조하십시오; - 각 페이지는
<section class="slide">이며, 크기는 1920×1080입니다.
- 페이지
<style>에는 좌표와 크기만 작성하십시오. 색상은 모두var(--c-*)를 사용하거나, JS에서Shapes.T('역할 이름')을 통해 읽으십시오. - 사진 위치는
<div class="photo" data-label="…">를 사용하십시오. 실제 사진이 있을 때는 그 안에<img>를 배치하십시오. - 렌더링 명령어:
uv run --with playwright python scripts/render.py <deck.html> <출력 디렉토리> [테마 이름]
05 검사
render.py는 자동으로 검사합니다: 텍스트 상자 오버플로우 (.fit이 추가된 요소만 확인), JS 오류, 줄임표, 테마 변수 누락.- 각 페이지의 PNG를 모두 확인하십시오. 자동 검사는 요소 겹침, 가려짐, 마지막 줄 단어 끊김을 찾을 수 없습니다. 새로 만든 페이지를 처음 렌더링할 때 거의 모든 페이지에서 이러한 문제가 발생합니다.
guide/anti-patterns.md와 대조하여 검사하십시오: 카드만 있음, 핑크-보라 그라데이션, 이모지를 일러스트레이션 대신 사용하는 것은 모두 실패로 간주합니다.- 큰 서체, 손글씨 또는 전시용 글꼴 제목에는
.fit을 추가하지 마십시오. 그렇지 않으면 검사에서 오탐지가 발생합니다.
06 전달
PNG와 PDF(render.py가 이미 생성함)를 사용자에게 전달하여 사용자가 직접 효과를 확인하게 하십시오. 현재는 편집 가능한 PPTX 내보내기를 지원하지 않습니다. 수정이 필요하면 HTML을 수정한 후 다시 렌더링하십시오.
파일 인덱스
| 경로 | 내용 | 언제 읽을 것인가 |
|---|---|---|
guide/shapes.md | 정보 관계 → 모양, 이유, 상황 변형, 구현 방식, 변수 의존성 포함 | 단계 03, 모든 페이지에 사용 |
guide/anti-patterns.md | AI가 직접 생성한 PPT의 전형적인 특징 | 단계 05 |
styles/<분기>/style.md | 분기의 적용 상황, 디자인 기법, 페이지 유형, 테마 선택 기준 | 분기 선택 후 |
styles/<분기>/tokens.css | 색상, 글꼴, 글자 크기 변수; 다른 테마는 [data-theme]로 재정의 | 주요 색상 변경 또는 새 테마 생성 시 |
styles/<분기>/components.css | 분기의 HTML 컴포넌트 | 단계 04 |
styles/<분기>/exemplar/ | 4페이지 샘플 및 각 테마의 스크린샷 | 단계 04, 기법 확인용 |
styles/school-event/samples/banhui-full/ | 12페이지 완성 학급 회의 샘플(handbook 테마, 사용자 호평) | 전체 데크 제작 시 리듬 참고 |
lib/shapes.js | 19개의 SVG 생성기 (구조, 데이터, 장식, 손그림) | 단계 04 |
lib/base.css | 리셋 스타일, 캔버스, 사진 위치 | 단계 04 |
scripts/render.py | 렌더링, 검사, PNG 및 PDF 내보내기 | 단계 04, 05 |
scripts/pixeldiff.py | 픽셀 단위 비교, 회귀 검사용 | lib/ 수정 후 |
scripts/fontcheck.py | Chrome에서 실제 사용된 글꼴 확인 | 새 테마 생성, 글꼴 변경 시 |
미완료
- 단계 01부터 03까지는 아직 스크립트가 없으며, 위 설명에 따라 수동으로 완료합니다.
guide/organization.md(전체 데크의 장(chapter)骨架, 페이지 유형 역할, 리듬)는 아직 작성되지 않았습니다.- 편집 가능한 PPTX 내보내기를 지원하지 않습니다.
- 글꼴은 시스템 간에 이전할 수 없습니다: 비-macOS 환경으로 전환 시 패키징 가능한 오픈 소스 웹 글꼴을 사용해야 합니다.