W02의 인터랙티브 발표는 별도 marimo 자료로 제공한다. chapters/w02/theme/marimo-slides.css에서 navy 제목, peach·blue 2색 장식과 흰 본문 배경을 사용한다. 본문은 슬라이드 폭에 따라 28px 기준으로 조정하고, 표 셀은 18px, 그래프 눈금은 18px로 표시한다. 같은 노트북을 WebAssembly로 내보내 Pages의 w02/slides/와 w02/lab/에서 제공한다. 기존 Marp 테마와 토큰은 유지하며, Pages 빌드에 이 두 경로의 생성 단계를 추가했다.
가짜연구소 인과추론팀(Causal-Lab) PPT 디자인을 마크다운 기반 템플릿으로 옮긴 문서입니다. 디자인만 담고 있으며 특정 발표 내용은 포함하지 않습니다.
발표자는 디자인을 신경 쓰지 않고 내용만 .md로 쓰면 같은 디자인의 HTML이 만들어지는 것이 현재 공개 목표입니다. PDF는 화면 배치가 달라져 2026-10-11부터 생성을 중단했습니다.
- 디자인 토큰 원본:
tokens/tokens.json(W3C Design Tokens 형식) - CSS 변수:
tokens/tokens.css— 자동 생성 - Marp 테마:
themes/causal-lab.css - 새 덱 시작점:
templates/deck.md - 모든 레이아웃 예시:
slides/example/index.md
원본 덱에서 읽어낸 규칙입니다. 새 레이아웃을 추가할 때도 이 네 가지를 지킵니다.
- 두 가지 색이 반반. 브랜드 장식은 항상 peach | blue 를 같은 비율로 나눠 씁니다. 제목 왼쪽 블록, 제목 밑 줄, 커버 위/아래 밴드 모두 같은 규칙입니다. 한 색만 쓰는 장식은 만들지 않습니다.
- 장식은 제목에만. 본문 영역은 흰 배경 + 검정 텍스트입니다. 카드, 그림자, 둥근 박스, 배경색 블록을 본문에 넣지 않습니다.
- 강조는 navy + 밑줄 하나. 섹션 헤딩만 navy(#002060)와 밑줄을 씁니다. 본문 중 강조가 필요하면 굵게, 대비가 필요하면
muted(회색)와navy를 짝지어 씁니다 (예: "A를 넘어 B"). - 흐리게 해서 위치를 알려준다. 같은 목차 슬라이드를 반복할 때 지금 다루지 않는 항목은
dim으로 흐리게 처리합니다. 새 색을 추가하지 않고 위치를 보여주는 방법입니다.
| 토큰 | 값 | 쓰임 |
|---|---|---|
color.brand.peach |
#F4B183 |
커버 상단 밴드, 분할 장식의 왼쪽 |
color.brand.blue |
#8FAADC |
커버 하단 밴드, 분할 장식의 오른쪽 |
color.brand.navy |
#002060 |
섹션 헤딩, 대비 강조 |
color.text.primary |
#000000 |
제목, 본문 |
color.text.muted |
#7F7F7F |
주석, (Optional), 페이지 번호 |
color.text.footer |
#595959 |
하단 덱 이름 |
color.text.dim |
#C9D4EA |
포커스 슬라이드의 흐린 항목 |
color.text.link |
#0563C1 |
링크 |
color.table.border |
#4472C4 |
표 테두리 |
2026-10-08에 사용자가 지정한
[Marketing_Science] Week01-OT.pdf를 확인했습니다. PDF 벡터 색상에서 navy#002060을 확인했고, 커버와 본문의 peach | blue 장식 구성을 시각적으로 확인했습니다. peach와 blue는 여전히 추정값입니다. PDF 렌더링의 픽셀값은 색상 프로파일의 영향을 받으므로 PPT의 실제 색상값이나 밝기 변환으로 간주하지 않습니다.
| 토큰 | 값 |
|---|---|
font.family.display, font.family.body |
Pretendard → Malgun Gothic → Apple SD Gothic Neo → Noto Sans CJK KR |
font.weight.medium 500 |
본문 |
font.weight.heavy 800 |
슬라이드 제목, 섹션 헤딩, 커버 |
OT PDF의 폰트 리소스에서 MalgunGothic / MalgunGothicBold와 NanumSquareR / B / EB를 확인했습니다. 현재 템플릿은 Pretendard를 웹용 대체 폰트로 유지합니다. 커버와 본문 시각 비교에서 기본 배치와 한글 표시는 확인했으며, 원본 글꼴의 정확한 재현을 뜻하지 않습니다. 실제 렌더링은 폰트 로딩 성공 여부와 설치된 대체 폰트에 영향을 받습니다.
| 토큰 | 값 | 요소 |
|---|---|---|
font.size.coverTitle |
48px | 커버 『덱 이름』 |
font.size.coverSubtitle |
28px | 회차 : 주제 |
font.size.presenter |
26px | 발표자 | 소속 |
font.size.title |
38px | 슬라이드 제목 (h1) |
font.size.section |
26px | 섹션 헤딩 (h2) |
font.size.body |
23px | 본문, 목록 |
font.size.table |
17px | 표 |
font.size.pageNumber |
15px | 페이지 번호 |
font.size.footer |
10px | 하단 덱 이름 |
| 토큰 | 값 | 요소 |
|---|---|---|
size.slide |
1280 × 720 | 16:9 |
size.padding |
x 52 / top 28 / bottom 56 | 본문 슬라이드 여백 |
size.accentBar |
24 × 42 | 제목 왼쪽 2색 블록 |
size.splitRule.content* |
752 × 6 | 제목 밑 2색 줄 (슬라이드 폭의 약 59%) |
size.splitRule.cover* |
754 × 7 | 커버 제목 밑 2색 줄 (가운데 정렬) |
size.coverBand |
위 18.5% / 아래 18.5% | 커버 밴드 높이 |
size.logo.content |
64px | 본문 슬라이드 우상단 Causal-Lab 로고 |
size.list.indentSection |
118px | 섹션 헤딩 아래 ▪ 목록 들여쓰기 |
┌──────────────────────────────────────────┐
│████████████ peach 밴드 18.5% ████████████│
│ [가짜연구소][CL] │
│ 『덱 이름』 │
│ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ │ ← peach | blue 줄
│ 회차 : 주제 │
│ │
│████████████ blue 밴드 18.5% █████████████│
│███████████████(footer)██ 발표자 | 소속 ██│
└──────────────────────────────────────────┘
| 마크다운 | 위치 |
|---|---|
# 『덱 이름』 |
가운데 제목 + 2색 줄 |
## 회차 : 주제 |
부제 (마무리 슬라이드에선 생략) |
일반 문단 발표자 | 소속 |
하단 밴드 오른쪽 |
페이지 번호는 <!-- _paginate: skip -->로 숨깁니다. 커버를 건너뛰고 다음 슬라이드가 1번이 됩니다.
┌──────────────────────────────────────────┐
│ ▌▌ 슬라이드 제목 [CL]│
│ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ │
│ │
│ • 최상위 항목 │
│ - 하위 항목 │
│ │
│ • 최상위 항목 │
│ 12 │
│ (덱 이름 footer) │
└──────────────────────────────────────────┘
목록 기호는 자동으로 정해집니다.
| 상황 | 기호 | 간격 |
|---|---|---|
| 섹션 헤딩 없는 목록 | • |
넓게 |
## 섹션 헤딩 아래 목록 |
▪ + 들여쓰기 |
헤딩이 1개면 넓게, 2개 이상이면 붙여서 |
| 하위 항목 | - |
붙여서 |
자동 간격이 맞지 않으면 슬라이드에 <!-- _class: compact --> 또는 <!-- _class: spacious -->를 붙입니다.
지금 다루지 않는 섹션을 <div class="dim"> … </div>로 감쌉니다. 감싼 부분의 앞뒤에 빈 줄이 있어야 마크다운이 해석됩니다.
왼쪽 330px 사진(3:4로 잘림) + 오른쪽 목록. 사진 위 이름은 <p class="name">이름 (English)</p>.
그래프 + 해석처럼 나란히 둘 때. 이미지는 최대 높이 480px로 자동 축소됩니다.
표는 슬라이드 폭 84%, 가운데 정렬, 첫 열과 마지막 열은 가운데 맞춤입니다.
슬라이드 하단 중앙에 한 줄 안내를 둘 땐 <p class="note">…</p>.
OT 타임테이블은 compact ot-schedule을 사용해 본문 슬라이드 순서와 같은 11개 항목을 표시합니다. 커버·목표·타임테이블 다음의 본문 제목은 1부터 연속 번호를 붙이고, 소요 시간은 제목 대신 타임테이블에 모읍니다. 시간 배분은 확정 일정과 구분해 배분안으로 표시합니다.
OT 일정표(slides/ot-live/)는 기존 ot-schedule 레이아웃에서 주차 | 날짜 | 챕터 | 챕터 오너 | 준비 자료 순서로 표시합니다. 오너는 주차 번호가 아니라 챕터 번호에 대응하며, OT·매지컬 위크에는 —를 씁니다.
OT 인사 페이지는 기존 ot-dense 레이아웃의 이름 | LinkedIn 두 열을 사용합니다. 순서 열 없이 승인된 참가자와 빌더를 한글 이름의 가나다순으로 표시하고, 등록된 링크는 프로필 보기로 연결합니다. 미등록은 신청서에 링크가 없다는 뜻이며 계정 유무를 뜻하지 않습니다.
인사 페이지의 ot-greeting은 표 위에 인사와 Google 폼 수집을 안내하는 문장을 둡니다. 안내와 표 사이, 표와 하단 안내 사이에는 각각 24px 여백을 둡니다. 하단의 LinkedIn 공유 안내는 14pt·보통 굵기·color.text.footer 회색으로 표시합니다. 청사진의 각 불렛은 굵은 핵심 활동 다음에 줄바꿈해 설명을 붙입니다.
운영방안은 챕터 오너와 함께 읽는 사람들로 역할을 설명하고, 역할과 공동 검토를 세 줄로 나눕니다. 별도의 리뷰어 직책처럼 보이는 표현을 피하고, 주차별 재료를 살펴본 뒤 짧게 기록하는 흐름을 안내합니다. 하단의 빌더·순환 안내는 14pt·보통 굵기·color.text.footer 회색으로 표시하고 위 여백은 36px로 둡니다.
러너 기록지의 ot-record는 구간 | 무엇을 남길까요? | 기록 예시의 세 열을 16%·34%·50% 비율로 표시합니다. 프로젝트 LinkedIn 소개글의 만족도 설문 사례를 기록 예시로 재구성하고, 이 예시의 출처와 설명용 재구성 여부는 docs/ot-live.md에 기록합니다. 셀은 왼쪽·상단 정렬, 위아래 8px 여백, 줄 높이 1.4를 사용합니다. 전용 셀 선택자에 [data-size]와 table을 포함해 Marp가 SVG 선택자를 추가한 공통 테마의 첫·마지막 열 가운데 정렬보다 우선하도록 합니다. 표 다음의 설명 문장 위에는 36px 여백을 둡니다. 주차별 재료를 살펴본 뒤 세 구간에 기록을 남기는 순서를 안내합니다. 아직 다루지 않은 연습문제의 완성 답안과 해설 링크는 안내 슬라이드에 넣지 않고, 자기 이해와 막힌 지점을 기록할 질문을 제공합니다.
OT 식당 선택 뒤의 브릿지는 기존 cols와 ot-dense를 사용합니다. 상단 두 열에 실제 답변을 인용하고, 아래에 공동의 발견과 네 가지 질문을 배치해 청사진으로 이어갑니다. 식당의 사진·선택 질문은 앞 장에 유지하고, 참여자 답변과 프로젝트의 정리 문구를 구분합니다.
OT 화면의 크기·간격 조정은 덱 전용 live.css에 한정하며 공통 토큰은 변경하지 않습니다. CSS의 pt 단위를 사용해 헤더·하단 안내 문장은 최소 24pt, 본문·표·평점·후기는 최소 18pt로 표시합니다. 기존 커버 제목(36pt)과 본문 제목(28.5pt)은 유지하고, 보조 설명은 16pt, 출처·페이지 번호는 14pt로 낮춥니다. 커버의 발표자·소속 문구는 사용자가 제시한 원래 커버 비율에 맞춰 26px(19.5pt)의 굵은 글씨로 표시합니다. 하단 덱 이름은 출처 역할이므로 14pt·보통 굵기·color.text.footer 회색을 사용합니다. 커버 푸터는 원래 테마의 10px(7.5pt)·굵은 글씨·청회색(#5A6A8A)을 사용하고 하단 9px에 배치합니다. 커버 이외의 하단 덱 이름은 위의 14pt 규칙을 따릅니다. 촘촘한 표의 셀은 위아래 1px 여백과 줄 높이 1.15를 사용합니다.
목표 페이지(ot-goals)는 안내 문장 아래 32px 여백에 체크 항목 앞 32px를 더하고, 체크 항목 아래 22px 여백을 사용합니다. 브릿지(ot-bridge)는 소제목 아래 18px, 본문·질문 항목 아래 20px 여백을 두고 안내 문장과 질문 사이에 16px를 더합니다. 네 질문은 두 열의 불렛 목록으로 표시하며 들여쓰기는 28px입니다. 각 열의 마지막 질문 아래 여백은 8px로 두어 연결 문장을 위한 공간을 남깁니다. 청사진은 도입 문장, 두 가지 활동을 담은 불렛 목록, 개인적인 읽기 동기의 순서로 구성합니다. 식당 페이지(ot-icebreaker)의 질문은 24pt의 굵은 가운데 문장으로 강조하고, 질문 위 여백은 56px로 둡니다. 출처는 14pt·color.text.footer 회색으로 슬라이드 하단 72px 위치에 둡니다.
| 마크다운 | 결과 |
|---|---|
# 제목 |
슬라이드 제목 (2색 블록 + 2색 줄) — 슬라이드당 1개 |
## 섹션 |
navy 밑줄 섹션 헤딩 |
### 소제목 |
굵은 본문 크기 소제목 |
**굵게** |
강조 |
*기울임* |
회색 주석 — (Optional) 같은 부가 정보 |
<span class="navy">…</span> / <span class="muted">…</span> |
대비 강조 |
> 인용 |
왼쪽 blue 선 인용 |
--- |
다음 슬라이드 |
 |
이미지 — 덱 폴더의 img/에 둡니다 |
 |
Marp 기본 기능: 오른쪽 40%를 이미지로 채움 |
- 본문에 배경색 박스, 카드, 그림자, 둥근 모서리를 넣지 않습니다.
- peach 또는 blue를 글자색으로 쓰지 않습니다 (흰 배경에서 대비가 부족합니다).
- 슬라이드 하나에
#제목을 두 개 쓰지 않습니다. - 테마 CSS의 값을 직접 고치지 않습니다.
tokens/tokens.json을 고치고npm run tokens를 실행합니다. - 로고 파일을 덱마다 넣지 않습니다. 로고는 테마에 들어 있습니다.
tokens/tokens.json의$value를 수정합니다.npm run tokens→tokens/tokens.css와themes/causal-lab.css의/* tokens:start */ … /* tokens:end */구간이 다시 생성됩니다.assets/logo-*.png도 이때 테마에 data URI로 들어갑니다.- 두 파일을 함께 커밋합니다. CI가 동기화 누락을 검사합니다.
reports/<주제>/index.html은 슬라이드와 별도로 읽는 정적 보고서입니다. reports/dataset-candidates/가 첫 예시입니다.
- 색·서체는 공통
tokens/tokens.css를 참조합니다. 토큰과 Marp 테마를 변경하지 않습니다. - 흰 본문, 검정 텍스트, navy 밑줄 섹션 제목, 제목 아래 peach | blue 반반 장식을 유지합니다.
- 표는 기존 blue 테두리와 굵은 열 제목을 사용합니다. 보고서에서는 전체 본문 폭을 쓰고 수치는 오른쪽 정렬합니다.
- 화면 본문은 17px, 표는 15px로 읽기 크기를 조정합니다. 모바일은 문서 폭을 유지하고 표 안에서 가로 스크롤합니다.
- A4 인쇄 CSS는 반복 표 헤더, 행 분할 방지, 데이터셋별 새 페이지를 지정합니다. 별도 PDF·Word 출력은 생성하지 않습니다.
scripts/build-index.mjs가 보고서의index.html·report.css와 공통 토큰만dist/에 복사하고 자료 목록에 연결합니다.
공개 OT HTML은 읽기 전용입니다. 텍스트 편집·행 추가·체크 변경 기능을 제공하지 않습니다. 기존 하단 45px 도구 모음에는 이전·다음·현재 쪽수와 사용 안내 링크를 둡니다. 화면 폭 480px 이하에서는 도구 모음을 12px 글자·6px 간격으로 줄입니다. 사용 안내는 slides/ot-live/guide.html을 같은 폴더에 배포하며 흰 배경·navy 제목·peach/blue 반반 구분선을 사용합니다. 본문은 18px, 문서 폭은 최대 800px이고 좁은 화면에서는 자연스럽게 줄바꿈합니다.
전체 빌드는 HTML만 생성하며 자료 목록과 OT 도구 모음에 PDF 다운로드를 표시하지 않습니다. 로컬의 기존 PDF 파일은 자동 삭제하지 않습니다. CI는 새 작업 폴더에서 HTML을 빌드하므로 기존 공개 PDF는 다음 Pages 배포에서 제외됩니다. PDF를 재개하려면 OT 전용 스타일을 포함해 HTML과 인쇄 스타일을 공유하고, 글꼴 로딩·줄바꿈·표 경계·페이지별 배치 비교를 통과해야 합니다.