OT 화면 수정 보존 및 공개 자료 읽기 전용 전환

DESIGN.md

@@ -153,11 +153,11 @@ OT 일정표(`slides/ot-live/`)는 기존 `ot-schedule` 레이아웃에서 `주
 
 OT 인사 페이지는 기존 `ot-dense` 레이아웃의 `이름 | LinkedIn` 두 열을 사용합니다. 순서 열 없이 승인된 참가자와 빌더를 한글 이름의 가나다순으로 표시하고, 등록된 링크는 `프로필 보기`로 연결합니다. `미등록`은 신청서에 링크가 없다는 뜻이며 계정 유무를 뜻하지 않습니다.
 
-인사 페이지의 `ot-greeting`은 표 위에 인사와 Google 폼 수집을 안내하는 문장을 둡니다. 안내와 표 사이, 행 추가 버튼과 하단 안내 사이에는 각각 24px 여백을 둡니다. 하단의 LinkedIn 공유 안내는 14pt·보통 굵기·`color.text.footer` 회색으로 표시합니다. 청사진의 각 불렛은 굵은 핵심 활동 다음에 줄바꿈해 설명을 붙입니다.
+인사 페이지의 `ot-greeting`은 표 위에 인사와 Google 폼 수집을 안내하는 문장을 둡니다. 안내와 표 사이, 표와 하단 안내 사이에는 각각 24px 여백을 둡니다. 하단의 LinkedIn 공유 안내는 14pt·보통 굵기·`color.text.footer` 회색으로 표시합니다. 청사진의 각 불렛은 굵은 핵심 활동 다음에 줄바꿈해 설명을 붙입니다.
 
 운영방안은 챕터 오너와 함께 읽는 사람들로 역할을 설명하고, 역할과 공동 검토를 세 줄로 나눕니다. 별도의 리뷰어 직책처럼 보이는 표현을 피하고, 주차별 재료를 살펴본 뒤 짧게 기록하는 흐름을 안내합니다. 하단의 빌더·순환 안내는 14pt·보통 굵기·`color.text.footer` 회색으로 표시하고 위 여백은 36px로 둡니다.
 
-러너 기록지의 `ot-record`는 `구간 | 무엇을 남길까요? | 기록 예시`의 세 열을 16%·34%·50% 비율로 표시합니다. 프로젝트 LinkedIn 소개글의 만족도 설문 사례를 기록 예시로 재구성하고, 실제 분석 결과와 구분하는 안내를 14pt·보통 굵기·`color.text.footer` 회색으로 표시합니다. 셀은 왼쪽·상단 정렬, 위아래 8px 여백, 줄 높이 1.4를 사용합니다. 전용 셀 선택자에 `[data-size]`와 `table`을 포함해 Marp가 SVG 선택자를 추가한 공통 테마의 첫·마지막 열 가운데 정렬보다 우선하도록 합니다. 표 다음의 설명 문장 위에는 36px 여백을 둡니다. 주차별 재료를 살펴본 뒤 세 구간에 기록을 남기는 순서를 안내합니다. 아직 다루지 않은 연습문제의 완성 답안과 해설 링크는 안내 슬라이드에 넣지 않고, 자기 이해와 막힌 지점을 기록할 질문을 제공합니다.
+러너 기록지의 `ot-record`는 `구간 | 무엇을 남길까요? | 기록 예시`의 세 열을 16%·34%·50% 비율로 표시합니다. 프로젝트 LinkedIn 소개글의 만족도 설문 사례를 기록 예시로 재구성하고, 이 예시의 출처와 설명용 재구성 여부는 `docs/ot-live.md`에 기록합니다. 셀은 왼쪽·상단 정렬, 위아래 8px 여백, 줄 높이 1.4를 사용합니다. 전용 셀 선택자에 `[data-size]`와 `table`을 포함해 Marp가 SVG 선택자를 추가한 공통 테마의 첫·마지막 열 가운데 정렬보다 우선하도록 합니다. 표 다음의 설명 문장 위에는 36px 여백을 둡니다. 주차별 재료를 살펴본 뒤 세 구간에 기록을 남기는 순서를 안내합니다. 아직 다루지 않은 연습문제의 완성 답안과 해설 링크는 안내 슬라이드에 넣지 않고, 자기 이해와 막힌 지점을 기록할 질문을 제공합니다.
 
 OT 식당 선택 뒤의 브릿지는 기존 `cols`와 `ot-dense`를 사용합니다. 상단 두 열에 실제 답변을 인용하고, 아래에 공동의 발견과 네 가지 질문을 배치해 청사진으로 이어갑니다. 식당의 사진·선택 질문은 앞 장에 유지하고, 참여자 답변과 프로젝트의 정리 문구를 구분합니다.
 
@@ -209,3 +209,7 @@ OT 화면의 크기·간격 조정은 덱 전용 `live.css`에 한정하며 공
 - 화면 본문은 17px, 표는 15px로 읽기 크기를 조정합니다. 모바일은 문서 폭을 유지하고 표 안에서 가로 스크롤합니다.
 - A4 인쇄 CSS는 반복 표 헤더, 행 분할 방지, 데이터셋별 새 페이지를 지정합니다. 별도 PDF·Word 출력은 생성하지 않습니다.
 - `scripts/build-index.mjs`가 보고서의 `index.html`·`report.css`와 공통 토큰만 `dist/`에 복사하고 자료 목록에 연결합니다.
+
+## 8. 공개 OT 화면
+
+공개 OT HTML은 읽기 전용입니다. 텍스트 편집·행 추가·체크 변경 기능을 제공하지 않습니다. 기존 하단 45px 도구 모음에는 이전·다음·현재 쪽수, PDF 저장과 사용 안내 링크를 둡니다. 화면 폭 480px 이하에서는 도구 모음을 12px 글자·6px 간격으로 줄입니다. 사용 안내는 `slides/ot-live/guide.html`을 같은 폴더에 배포하며 흰 배경·navy 제목·peach/blue 반반 구분선을 사용합니다. 본문은 18px, 문서 폭은 최대 800px이고 좁은 화면에서는 자연스럽게 줄바꿈합니다.

SLIDES.md

@@ -3,6 +3,8 @@
 마크다운으로 발표 자료를 쓰면 Causal-Lab 디자인이 적용된 HTML과 PDF가 만들어지는 템플릿입니다.
 GitHub Actions가 빌드해서 GitHub Pages에 올립니다.
 
+OT 자료를 보거나 수정하려면 [OT 사용 안내](docs/ot-live.md)를 참고하세요. 공개 HTML은 읽기 전용이며 원본 수정 PR이 병합된 뒤 다시 배포됩니다.
+
 ## 챕터 오너의 내용과 선택 슬라이드
 
 챕터 오너가 꼭 해야 하는 일은 **내용 정리**이고, 슬라이드는 **선택**입니다.

docs/ot-live.md

@@ -1,13 +1,31 @@
-# OT 자료와 참여자 정보 반영
+# OT 자료 보기·저장·수정 안내
+
+## 자료 보기와 저장
+
+- [Pages에서 OT 보기](https://causalinferencelab.github.io/data-still-does-not-speak/ot-live/): 하단 이전·다음 버튼 또는 방향키·Page Up/Down으로 이동합니다. Home은 첫 장, End는 마지막 장입니다.
+- [PDF 저장](https://causalinferencelab.github.io/data-still-does-not-speak/ot-live/index.pdf): PDF 화면의 다운로드 버튼으로 저장할 수 있습니다.
+- [GitHub에서 원본 내용 읽기](../slides/ot-live/index.md): 문서 형식이며, 발표 화면은 Pages에서 봅니다.
+- HTML을 보관하려면 OT 화면에서 브라우저의 **페이지 다른 이름으로 저장 → 웹페이지, 전체**를 선택하고 HTML과 생성된 이미지 폴더를 함께 보관합니다.
+
+공개 HTML은 읽기 전용입니다. 화면 텍스트 편집·행 추가·체크 변경 기능은 제공하지 않습니다.
+
+## 수정 제안하기
+
+1. 원본 저장소를 Fork하고, 본인 사본에서 작업 브랜치를 만듭니다. 기존 포크가 있으면 사용합니다.
+2. `slides/ot-live/index.md`를 열고 연필 아이콘으로 내용을 수정합니다. 맨 위 설정과 슬라이드 구분선 `---`은 유지합니다.
+3. **Commit changes**로 작업 브랜치에 저장하고 **Contribute → Open pull request**로 원본 `main`에 제안합니다.
+4. 검토·병합 후 배포가 완료되면 Pages에 반영됩니다. PR을 여는 것만으로는 반영되지 않습니다.
+
+자세한 화면별 절차는 [제출 안내](../CONTRIBUTING.md)를 참고하세요. 생성된 HTML·PDF는 직접 커밋하지 않습니다.
+
+## 유지보수자 빌드
 
 - 원본: `slides/ot-live/index.md`
 - 전용 화면 스타일: `slides/ot-live/live.css`
 - 생성 결과: `dist/ot-live/index.html`, `dist/ot-live/index.pdf`
 - 전체 빌드: `npm run build`
 - OT HTML만 다시 생성: `npm run build:ot-live` (기존 의존성이 설치된 환경)
 
-HTML은 페이지 이동, 체크박스, 행 추가, 화면 텍스트 편집을 제공합니다. 화면 편집 내용은 서버나 Markdown에 저장되지 않으며, 새로고침하면 사라집니다. 영구 변경은 원본 Markdown을 수정하고 PR로 제출합니다.
-
 화면 전용 CSS는 HTML 발표용입니다. PDF는 공통 Marp 테마로 생성하는 보조 출력입니다.
 
 ## 이름·LinkedIn·목표 한 줄
@@ -23,3 +41,7 @@ Google 폼으로 수집하고, 응답이 모이면 빌더가 한 번에 PR로 
 ## 현재 합의
 
 자료 공유는 모임 2일 전 화요일 자정(24:00)까지, 기록 장소는 GitHub 레포지토리입니다. 카메라는 켜고 참여하며 챕터 오너 배정은 완료했습니다. 불참·지원과 연휴 주간 운영은 보류 상태로 추후 논의합니다.
+
+## 기록 예시의 출처
+
+10페이지 만족도 설문 기록은 프로젝트 LinkedIn 소개글의 사례를 설명용으로 재구성한 것입니다. 실제 분석 결과나 교재 연습문제의 정답이 아닙니다.

slides/ot-live/build-live.mjs

@@ -7,9 +7,10 @@ const root=path.resolve(base,'../..');
 const output=path.join(root,'dist/ot-live/index.html');
 execFileSync(path.join(root,'node_modules/.bin/marp'),['--no-stdin','--no-config','--html','--theme',path.join(root,'themes/causal-lab.css'),'--template','bare',path.join(base,'index.md'),'-o',output],{cwd:root,stdio:'inherit'});
 let html=readFileSync(output,'utf8').replace('<html lang="C">','<html lang="ko">').replace(/lang="C"/g,'lang="ko"');
-const toolbar=`<div id="ot-toolbar"><button id="ot-prev">← 이전</button><span id="ot-page"></span><button id="ot-next">다음 →</button><button id="ot-edit">발표 모드</button></div>`;
+const toolbar=`<div id="ot-toolbar"><button id="ot-prev">← 이전</button><span id="ot-page" aria-live="polite"></span><button id="ot-next">다음 →</button><a href="./index.pdf" download>PDF 저장</a><a href="./guide.html" target="_blank" rel="noopener">사용 안내</a></div>`;
 html=html.replace('</head>','<style id="ot-live-style">'+readFileSync(path.join(base,'live.css'),'utf8')+'</style></head>');
 html=html.replace('</body>',toolbar+'<script id="ot-live-script">'+readFileSync(path.join(base,'live-editor.js'),'utf8')+'</script></body>');
 writeFileSync(output,html);
 cpSync(path.join(base,'img'),path.join(path.dirname(output),'img'),{recursive:true});
-console.log('Live editor added: '+output);
+cpSync(path.join(base,'guide.html'),path.join(path.dirname(output),'guide.html'));
+console.log('Read-only OT deck built: '+output);

slides/ot-live/guide.html

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="ko">
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>OT 자료 사용 안내 · Causal-Lab</title>
+<style>
+body{max-width:800px;margin:40px auto;padding:0 24px 40px;font:18px/1.7 Pretendard,'Apple SD Gothic Neo',sans-serif;color:#000;background:#fff}h1,h2{color:#002060;line-height:1.35}h1{font-size:32px;padding-bottom:18px;border-image:linear-gradient(to right,#F4B183 50%,#8FAADC 50%) 1;border-bottom:6px solid}h2{font-size:24px;margin-top:36px}a{color:#0563C1}li{margin-bottom:10px}code{overflow-wrap:anywhere}footer{margin-top:40px;font-size:14px;color:#595959}
+</style>
+<main>
+<h1>OT 자료 사용 안내</h1>
+<p>공개 자료는 읽기 전용입니다. 수정 제안은 GitHub 원본에 남기고, 검토 후 반영합니다.</p>
+<h2>슬라이드 보기</h2>
+<p><a href="./">OT 열기</a>에서 하단의 이전·다음 버튼으로 이동하세요. 키보드 방향키·Page Up·Page Down도 사용할 수 있습니다. Home은 첫 장, End는 마지막 장입니다.</p>
+<h2>파일로 보관하기</h2>
+<p><a href="./index.pdf" download>OT PDF 저장</a>을 누르세요. 브라우저에서 PDF가 열리면 PDF 화면의 다운로드 버튼으로 저장할 수 있습니다. 작은 화면에서는 PDF를 확대해 읽으세요.</p>
+<p>HTML을 파일로 보관하려면 OT 화면에서 브라우저의 <strong>페이지 다른 이름으로 저장</strong>을 선택하고 <strong>웹페이지, 전체</strong> 형식으로 저장하세요. 생성된 HTML과 이미지 폴더를 함께 보관해야 식당 사진도 표시됩니다.</p>
+<h2>GitHub에서 내용 확인·수정하기</h2>
+<ol>
+<li><a href="https://github.com/CausalInferenceLab/data-still-does-not-speak/blob/main/slides/ot-live/index.md">OT 원본 index.md</a>를 엽니다. GitHub에서는 내용을 문서로 읽고, 발표 화면은 Pages에서 봅니다.</li>
+<li>저장소를 Fork한 뒤 본인 사본에서 작업 브랜치를 만듭니다. 기존 포크가 있으면 사용하세요.</li>
+<li><code>slides/ot-live/index.md</code>의 연필 아이콘으로 수정하고 <strong>Commit changes</strong>로 작업 브랜치에 저장합니다. 맨 위 설정과 슬라이드 구분선 <code>---</code>은 유지하세요.</li>
+<li><strong>Contribute → Open pull request</strong>로 변경을 제안합니다. 대상은 원본 저장소의 <code>main</code>입니다. <a href="https://github.com/CausalInferenceLab/data-still-does-not-speak/blob/main/CONTRIBUTING.md">단계별 제출 안내</a>도 참고하세요.</li>
+</ol>
+<p>PR이 검토·병합되고 배포가 완료되면 Pages에 반영됩니다. PR을 여는 즉시 공개 자료가 바뀌지는 않습니다. 생성된 HTML·PDF를 직접 수정하거나 커밋하지 않습니다.</p>
+<h2>이름·LinkedIn·목표 한 줄</h2>
+<p>빌더가 공유하는 Google 폼으로 제출하고, 응답을 모아 한 번에 반영합니다. 공개 OT 화면에는 입력하지 않습니다.</p>
+</main>
+<footer>Causal-Lab · OT 자료 사용 안내</footer>
+</html>