슬라이드 덱
덱은 1920x1080 슬라이드를 렌더링하는 작은 React 프로젝트이며, 이를 네이티브 PowerPoint(편집 가능한 텍스트, 발표자 노트 포함), PDF 및 발표자 스크립트로 변환하는 파이프라인으로 구성됩니다. starter/ 디렉토리는 완전히 작동하는 예제 덱(베트남어 12개 샘플 슬라이드, 파란색 테마, 각 구성에 대한 예제 포함)입니다. 이를 복사하여 내용을 교체하고 시스템은 유지하세요.
무엇보다 먼저 브리핑에서 세 가지를 확인하세요: 방에 있는 사람이 누구인지(사전 지식이 없다고 가정), 슬롯 시간은 얼마나 되는지, 발표자 개요에는 무엇이 적혀 있는지. 발표자 개요가 순서와 내용을 결정합니다. 당신의 임무는 명확성과 디자인이지, 새로운 주장을 하는 것이 아닙니다.
1. 시작
cp -R "<이 스킬 폴더>/starter" "<프로젝트>/<덱-이름>"
cd "<프로젝트>/<덱-이름>/deck" && npm install && npx playwright install chromium
npx vite # 개발 서버, 포트는 vite.config.ts에 있음
그런 다음 이름들을 설정하세요: tools/deck-name.txt(PPTX 및 PDF 파일 이름), deck/index.html의 제목, deck/script-doc.mjs의 머리말, deck/src/deck/types.ts(ACTS)의 섹션 이름, Chrome(deck/src/deck/Deck.tsx)의 바닥글 텍스트와 로고. 다른 덱이 실행 중이면 deck/vite.config.ts에서 사용 가능한 포트를 선택하세요.
프로젝트 레이아웃:
deck/src/slides/*.tsx슬라이드 또는 그룹당 하나의 파일, 순서는index.ts에 정의. 각 파일은SlideDef(id, title, act, minutes, notes, Component)를 내보냅니다.deck/src/ui/atoms.tsx공유 구성 요소:Bg,Header,HaloArt/Art,Feature(강조 표시된 패널),IconTile,Stat,Source,LogoTile,AppIcon.Links.tsx는 느리게 움직이는 점들이 있는 연결선을 그립니다.World.tsx는 실제 국가 모양으로 된 점선 세계 지도입니다.deck/src/index.css색상 토큰을 보유.--accent,--accent-ink, 배경 값 및 rgba 틴트를 변경하여 테마를 다시 지정하고, 두 번째 테마를 추가하지 마세요.tools/아트 생성, 빌드, 릴리스.
2. 콘텐츠 규칙 (소유자가 수정한 사항, 빈도 순)
- 발표자의 문서를 따르세요. 섹션 순서, 정의의 표현, 모든 숫자는 발표자의 개요에서 가져옵니다. 개요에 제목만 있는 경우, 기본 출처에서 최소한의 정보를 추가하고,
Source에 링크를 걸고, 어떤 슬라이드를 채웠는지 소유자에게 알리세요. 목록이 지원하지 않는 숫자를 제시하지 마세요 (30개의 이름을 발표했지만 실제로 28개인 목록: 목록을 보여주고 숫자는 생략하며, 차이점을 보고하세요). - 헤드라인은 아주 쉽게 작성하세요. 헤드라인은 청중이 이미 사용하는 단어로 슬라이드의 이름을 지정합니다: "5 cách thu thập dữ liệu xuyên biên giới", "Yêu cầu trong tình huống khẩn cấp". 영리하거나 압축된 문장은 거부됩니다. 한 줄, 최대 66px에서 약 40자; 두 번째 절반은 악센트 색상으로 표시.
- 최소한의 텍스트, 평이한 언어. 카드당 하나의 아이디어, 몇 줄의 짧은 문장. 일반적인 영어 용어는 괄호 안에 넣거나 작은 두 번째 줄("service provider")로 표시. 숫자는 숫자 단어 대신 숫자로 표시. 헤드라인 위에 작은 레이블, 장식용 콜론이나 중간점, 홍보 문구 없음.
- 모든 것을 번역 소스 덱에서 청중의 언어로 번역; 고유 명사와 공무원이 접하게 될 영어 용어는 유지.
- 발표자 노트에 전체 텍스트를 포함하세요. 슬라이드는 짧은 형식을 유지; 노트에는 개요의 발표자 완전한 문장이 포함되어 아무것도 손실되지 않도록 합니다.
minutes를 슬롯 시간과 합산하여 초과를 보고. - 실제 조직의 실제 로고 사용 (공식 파일, 생성된 유사품 절대 사용 금지); 각 로고의 출처를
assets/logos-src/SOURCES.md에 기록. 소유자가 요청한 조직 로고는Chrome의 모든 슬라이드에 표시, 제목 및 마무리 슬라이드에서는 크게 표시. - 배경에서 사실 확인. 추가하는 사실(날짜, 기사 번호, 법률 번호, 수량)에 대해 하나의 연구 에이전트를 보내고 결과를 항목당 URL과 함께
docs/facts.md에 기록. 발표자의 수치가 공개 출처와 다른 경우, 그녀의 수치를 유지하고 차이점을 보고.
3. 그래픽
모든 콘텐츠 슬라이드에는 일러스트레이션이 있습니다. 아이콘만 있는 슬라이드는 지루하다고 불렸습니다. 작은 lucide 아이콘은 슬라이드에 아트도 있을 때만 행 마커로 사용하는 것이 좋습니다.
- 하나의 계열: 평면 색상 평면으로 구성된 컴팩트한 의사 3D 객체, 그라데이션이나 광택 없음, 하나의 색상 계열과 작은 노란색 마커. 스타일 참조 시트는
assets/ref/blue-indicators.png및green-indicators.png입니다. 시트의 모든 타일은 자체적으로 평면이어야 함: 하나의 광택 타일이 새 이미지를 그라데이션 쪽으로 끌어당깁니다. 다른 색상의 경우 시트를 다시 색상 지정하여 시작(tools/blue_ref.py),tools/art.mjs의 팔레트 라인을 변경, 첫 번째 배치를 생성한 다음, 가장 좋은 결과 16개로 시트를 다시 빌드하고 그때부터 사용 (파란색 시트도 이렇게 만들어짐). - 이미지당 한 줄을
tools/art-list.tsv에 추가 (name<TAB>concept). 개념은 최대 두 개의 보조 세부 정보와 텍스트가 없는 하나의 명확한 객체: "봉투 덮개에 자물쇠가 있고 작은 X 표시된 눈 배지가 있는 봉인된 편지". P=4 bash tools/art-batch.sh는 Codex CLI의 이미지 도구로 누락된 항목을 생성 (약 80초 소요;codex가 설치 및 로그인되어 있어야 하며, 모델은tools/art.mjs에 설정). 백그라운드에서 실행하고 계속 슬라이드를 작성하세요. 일부 실행은 조용히 실패할 수 있음: 완료되면 모든 이름이 존재하는지 확인하고 누락된 항목에 대해 다시 실행.docker build -q -t deck-pack -f tools/Dockerfile tools && docker run --rm -v "$PWD":/w -w /w deck-pack python tools/art_finish.py는 이미지를deck/public/art/*.webp로 자릅니다.<HaloArt name="..." size={...} />와 함께 사용.- 민감한 주제(아동 해악, 자살, 테러리즘)는 보호 상징 사용: 우산, 방패, 구명부표, 경고 표지판.
- 지도는
World.tsx(실제 모양)에서 가져오고, 절대 이미지 모델에서 생성하지 않음. 다이어그램(벤 다이어그램, 흐름도, 허브)은 슬라이드 내 SVG로 표현.
4. 구성: 인접한 두 슬라이드가 같지 않아야 함
모든 슬라이드가 동일한 카드 행으로 구성된 덱은 반송되었습니다("모든 슬라이드가 매우 유사한 레이아웃을 가짐"). 각 슬라이드에 해당 콘텐츠에 맞는 모양을 부여하세요. 시작 예제에는 각 구성에 대한 작업된 예제가 하나씩 있습니다:
| 콘텐츠 | 구성 | 시작 슬라이드 예제 |
|---|---|---|
| 순서대로 몇 가지 부분 | 하나의 경로를 따라 올라가는 단계, 크고 희미한 숫자 | s02-agenda.tsx |
| 하나의 포괄적인 아이디어와 여러 다른 것들 | Bento: 하나의 키가 큰 강조 타일과 2x2 | Terms (s03-terms.tsx) |
| 프로세스 | 파이프라인: 라인 위에 번호가 매겨진 스테이션, 결과 패널로 흘러감 | s05-preserve.tsx |
| 하나의 목표에 도달하는 여러 방법 | 허브 앤 스포크 | s06-channels.tsx |
| 동일한 속성을 가진 병렬 종류 | 전체 너비 행: 그림, 질문, 이름, 내용 | DataTypes (s03-terms.tsx) |
| 하나의 경고가 있는 옵션 | 타일 그리드 + 하나의 Feature 패널 | Emergency (s08-requests.tsx) |
| 인계 체인 | 화살표가 있는 노드 흐름 (ui/Links.tsx의 Link) | 시작 예제에 없음 |
| 두 가지 대안 | 두 개의 넓은 패널 | 시작 예제에 없음 |
| 공유 코어가 있는 겹치는 영역 | 벤 다이어그램, 지시선의 레이블 | Directorate (s11-venn.tsx) |
| 장소 | 핀이나 불이 켜진 국가가 있는 점선 지도, 옆에 목록 | s17b-map-list.tsx |
| 네 가지 기능이 있는 중심 | 중앙에 원반, 모서리에 항목 | AspDesk (s14-corners-bridge.tsx) |
| 두 측면과 그 사이를 통과하는 것 | 다리: 두 둑, 사이에 차선 | Gateway (s14-corners-bridge.tsx) |
| 요점을 증명하는 숫자 | Feature 패널과 Stat | 시작 예제에 없음 |
발표자의 슬라이드에 다이어그램 아이디어(벤 다이어그램, 지도 옆 목록)가 있는 경우, 의도와 내용을 유지하고 다시 그리세요. 그녀의 스타일링은 유지하지 마세요.
5. 텍스트 제작 (다음 각각은 거부된 스크린샷의 원인이었음)
- 아무것도 튀지 않아야 함. 카드 세트에서 동일한 요소는 모든 카드에서 동일한 높이에서 시작합니다. 제목을 동일한 줄 수로 만들고(다시 표현하거나 모든 제목을 두 줄로 지정), 나머지는 바로 아래에 쌓습니다. 빈 슬롯이나 제목과 텍스트 사이에
margin-top: auto로 인한 구멍이 없어야 함. - 의미에 따라 줄을 나누세요.
.slide는white-space: pre-line입니다. 구문 끝에\n을 작성하세요: "Chuỗi bảo quản\nchứng cứ", 절대 "Chuỗi bảo\nquản chứng cứ"가 아닙니다. 각 수동 줄 바꿈이 브라우저에서 다시 줄 바꿈되지 않을 만큼 충분히 짧게 유지하세요. 줄 바꿈이 발생하면 줄을 줄이거나 상자를 넓히세요. 이름 목록도 수동 줄 바꿈을 사용합니다(줄 바꿈 없는 공백은 PowerPoint에서 깨짐). - 줄당 하나의 크기. 큰 숫자와 그 단위는 두 개의 블록(
Stat)입니다. 설명을 이끄는 악센트 단어는 자체 줄이 됩니다. - 여백. 콘텐츠는 왼쪽 및 오른쪽 120px 이내에 유지되고 로고 스트립(상단 30~98px)과 겹치지 않아야 함. 지도 및 다이어그램의 레이블을 오른쪽 가장자리와 확인.
- 슬라이드는 완전히 열립니다. 시작 애니메이션 없음. 최대 한 번의 클릭 공개, 공개가 요점일 때만. 주변 움직임(흐르는 점, 제목 배경)은 괜찮음.
- 요청하지 않는 한 슬라이드에 진행 또는 섹션 번호 위젯 없음; 바닥글 막대면 충분.
6. 빌드 및 확인
zsh tools/release.sh # 약 5분 소요: release/ 디렉토리에 Deck/(웹), .pptx, .pdf, Kich-ban-trinh-bay.pdf 생성
릴리스는 Microsoft PowerPoint를 통해 파일을 다시 저장하여 폰트가 포함되도록 합니다. 먼저 PowerPoint를 종료합니다. 저장되지 않은 항목이 열려 있지 않은지 확인하고, /tmp에 잠금 폴더를 사용하여 두 세션이 동시에 다시 저장하지 않도록 합니다. Mac에서 PowerPoint가 없으면 tools/release.sh에서 해당 단계를 건너뜁니다. 덱은 여전히 열리지만, 발표하는 컴퓨터에 폰트가 설치되어 있어야 합니다.
확인은 작업의 일부이며, 매 라운드마다 수행:
cd deck && npx vite build && node export.mjs ../tmp/export는 모든 슬라이드를tmp/export/sNN.png로 렌더링합니다.- 모든 슬라이드를 전체 크기로, 한 번에 하나씩 확인합니다(1600px 너비로 축소). 접촉 시트는 줄 바꿈, 테두리에 닿는 텍스트, 정렬되지 않은 행을 숨깁니다. 확인할 사항: 사용자가 의도하지 않은 줄 바꿈, 가장자리에 가깝거나 넘는 텍스트, 로고에 닿는 헤드라인, 카드 간 불균일한 시작, 누락된 이미지(빈 윤곽선 사각형), 겹치는 레이블.
- 릴리스 후에는 변경한 슬라이드에 대해
tmp/lo/p-NN.png(LibreOffice가 레이아웃한 PowerPoint)를 확인합니다. 여기서 텍스트 상자가 넘치는 문제가 나타납니다. LibreOffice는 PowerPoint보다 약간 더 넓게 타입을 렌더링하므로, 거의 맞지 않는 것은 실제 위험입니다. - 수정, 재빌드, 다시 확인. 확인한 내용과 확인하지 않은 내용을 명확히 말하세요.
그런 다음 release/를 데스크탑의 이름이 지정된 폴더로 복사하고, release/Deck를 localhost에서 제공하고 (docker run -d -p 127.0.0.1:<port>:80 -v "$PWD/release/Deck":/usr/share/nginx/html:ro nginx:alpine), 요청 시 폴더를 엽니다.
7. 보고
준비된 내용과 위치를 먼저 알리세요. 그런 다음 소유자 또는 발표자의 결정이 필요한 사항을 나열하세요: 개요에 추가한 모든 것, 출처와 모순되는 유지한 수치, 합산되지 않는 수량, 슬롯 시간 대비 실행 시간. 평이한 단어로, 파일 또는 함수 이름 없이 작성.