diff --git a/DESIGN.md b/DESIGN.md index 53ed05a..58d44cb 100644 --- a/DESIGN.md +++ b/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이고 좁은 화면에서는 자연스럽게 줄바꿈합니다. diff --git a/SLIDES.md b/SLIDES.md index eb7ecf9..da78768 100644 --- a/SLIDES.md +++ b/SLIDES.md @@ -3,6 +3,8 @@ 마크다운으로 발표 자료를 쓰면 Causal-Lab 디자인이 적용된 HTML과 PDF가 만들어지는 템플릿입니다. GitHub Actions가 빌드해서 GitHub Pages에 올립니다. +OT 자료를 보거나 수정하려면 [OT 사용 안내](docs/ot-live.md)를 참고하세요. 공개 HTML은 읽기 전용이며 원본 수정 PR이 병합된 뒤 다시 배포됩니다. + ## 챕터 오너의 내용과 선택 슬라이드 챕터 오너가 꼭 해야 하는 일은 **내용 정리**이고, 슬라이드는 **선택**입니다. diff --git a/docs/ot-live.md b/docs/ot-live.md index 5d1e6b2..39929b0 100644 --- a/docs/ot-live.md +++ b/docs/ot-live.md @@ -1,4 +1,24 @@ -# 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` @@ -6,8 +26,6 @@ - 전체 빌드: `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 소개글의 사례를 설명용으로 재구성한 것입니다. 실제 분석 결과나 교재 연습문제의 정답이 아닙니다. diff --git a/slides/ot-live/build-live.mjs b/slides/ot-live/build-live.mjs index 9d9acc5..6c20050 100644 --- a/slides/ot-live/build-live.mjs +++ b/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('','').replace(/lang="C"/g,'lang="ko"'); -const toolbar=`
`; +const toolbar=`
PDF 저장사용 안내
`; html=html.replace('',''); html=html.replace('',toolbar+''); 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); diff --git a/slides/ot-live/guide.html b/slides/ot-live/guide.html new file mode 100644 index 0000000..84687dc --- /dev/null +++ b/slides/ot-live/guide.html @@ -0,0 +1,29 @@ + + + + +OT 자료 사용 안내 · Causal-Lab + +
+

OT 자료 사용 안내

+

공개 자료는 읽기 전용입니다. 수정 제안은 GitHub 원본에 남기고, 검토 후 반영합니다.

+

슬라이드 보기

+

OT 열기에서 하단의 이전·다음 버튼으로 이동하세요. 키보드 방향키·Page Up·Page Down도 사용할 수 있습니다. Home은 첫 장, End는 마지막 장입니다.

+

파일로 보관하기

+

OT PDF 저장을 누르세요. 브라우저에서 PDF가 열리면 PDF 화면의 다운로드 버튼으로 저장할 수 있습니다. 작은 화면에서는 PDF를 확대해 읽으세요.

+

HTML을 파일로 보관하려면 OT 화면에서 브라우저의 페이지 다른 이름으로 저장을 선택하고 웹페이지, 전체 형식으로 저장하세요. 생성된 HTML과 이미지 폴더를 함께 보관해야 식당 사진도 표시됩니다.

+

GitHub에서 내용 확인·수정하기

+
    +
  1. OT 원본 index.md를 엽니다. GitHub에서는 내용을 문서로 읽고, 발표 화면은 Pages에서 봅니다.
    2. +
  2. 저장소를 Fork한 뒤 본인 사본에서 작업 브랜치를 만듭니다. 기존 포크가 있으면 사용하세요.
    3. +
  3. slides/ot-live/index.md의 연필 아이콘으로 수정하고 Commit changes로 작업 브랜치에 저장합니다. 맨 위 설정과 슬라이드 구분선 ---은 유지하세요.
    4. +
  4. Contribute → Open pull request로 변경을 제안합니다. 대상은 원본 저장소의 main입니다. 단계별 제출 안내도 참고하세요.
    5. +
+

PR이 검토·병합되고 배포가 완료되면 Pages에 반영됩니다. PR을 여는 즉시 공개 자료가 바뀌지는 않습니다. 생성된 HTML·PDF를 직접 수정하거나 커밋하지 않습니다.

+

이름·LinkedIn·목표 한 줄

+

빌더가 공유하는 Google 폼으로 제출하고, 응답을 모아 한 번에 반영합니다. 공개 OT 화면에는 입력하지 않습니다.

+
+ + diff --git a/slides/ot-live/index.md b/slides/ot-live/index.md index 4221f56..64d7a06 100644 --- a/slides/ot-live/index.md +++ b/slides/ot-live/index.md @@ -25,7 +25,7 @@ author: "권준혁" **책을 기반으로 주차별 챕터 단위로 진행하고, 매주 그 챕터를 맡는 오너가 있습니다.** 나머지는 오늘 함께 정하겠습니다. -
+
--- @@ -114,10 +114,9 @@ author: "권준혁" 함께 읽을 분들과 이름으로 가볍게 인사해요. -
이름LinkedIn
권준혁프로필 보기
김아영프로필 보기
김윤지미등록
김형철프로필 보기
박주연프로필 보기
박혜민미등록
이민옥프로필 보기
이예빈미등록
정성준프로필 보기
최윤정미등록
- +
이름LinkedIn
권준혁프로필 보기
김아영프로필 보기
김윤지미등록
김형철프로필 보기
박주연프로필 보기
박혜민미등록
이민옥프로필 보기
이예빈미등록
정성준프로필 보기
최윤정미등록
-

이름·LinkedIn·목표 한 줄은 Google 폼으로 수집합니다. 입력 링크는 추후 공유합니다.
응답을 모아 빌더가 한 번에 PR로 반영합니다. LinkedIn은 선택 항목입니다.

+

이름·LinkedIn·목표 한 줄은 Google 폼으로 수집합니다. 입력 링크는 추후 공유합니다.
응답을 모아 빌더가 한 번에 PR로 반영합니다.

--- @@ -163,7 +162,6 @@ author: "권준혁"

관찰한 사실과 해석을 구분하고, 지금 말할 수 있는 범위와 남은 질문을 함께 기록합니다.

-

바탕: 프로젝트 LinkedIn 소개글의 만족도 사례 · 기록 내용은 설명용으로 재구성

--- @@ -172,8 +170,7 @@ author: "권준혁"

오늘 고른 안은 W2–W5 시범 적용, W6에서 다시 보기

-
항목합의 내용 / 상태
공유 시점 / 마감모임 2일 전 · 화요일 자정(24:00)까지
기록 장소GitHub 레포지토리
카메라 오픈카메라 켜고 참여하기
불참 / 지원보류 · 추후 논의
연휴 주간 (12/24, 12/31)보류 · 추후 논의
남는 챕터 담당배정 완료
- +
항목합의 내용 / 상태
공유 시점 / 마감모임 2일 전 · 화요일 자정(24:00)까지
기록 장소GitHub 레포지토리
카메라 오픈카메라 켜고 참여하기
불참 / 지원보류 · 추후 논의
연휴 주간 (12/24, 12/31)보류 · 추후 논의
남는 챕터 담당배정 완료
--- @@ -195,16 +192,15 @@ author: "권준혁" "14주 뒤 나는 ______ 앞에서 ______를 물을 수 있게 되고 싶다." -
이름내 목표 한 줄
  
  
  
  
  
  
  
  
  
- +
이름내 목표 한 줄
  
  
  
  
  
  
  
  
  
-

이름과 목표 한 줄은 Google 폼에 남겨주세요. 입력 링크는 추후 공유합니다.
응답을 모아 표에 반영하고, W14 회고에서 다시 열어봅니다.

+

이름과 목표 한 줄은 Google 폼에 남겨주세요.
응답을 모아 표에 반영하고, W14 회고에서 다시 열어봅니다.

--- # 11. 마무리 · 다음 주 W2 (10/15) 준비 -
+

저자 저장소

diff --git a/slides/ot-live/live-editor.js b/slides/ot-live/live-editor.js index f6f1618..9921f88 100644 --- a/slides/ot-live/live-editor.js +++ b/slides/ot-live/live-editor.js @@ -1,13 +1,9 @@ (() => { const slides=[...document.querySelectorAll('body>svg[data-marpit-svg]')]; - let active=0, editing=true, composing=false; - function editable(){document.querySelectorAll('section h1,section h2,section h3,section marp-h1,section marp-h2,section p,section li,section td,section th,.ot-options span').forEach(el=>{if(el.querySelector('li,p,input,a,img'))return;el.contentEditable=editing?'plaintext-only':'false';el.spellcheck=false;});} + let active=0; function show(i){active=Math.max(0,Math.min(slides.length-1,i));slides.forEach((s,n)=>s.style.display=n===active?'block':'none');document.querySelector('#ot-page').textContent=(active+1)+' / '+slides.length;document.querySelector('#ot-prev').disabled=active===0;document.querySelector('#ot-next').disabled=active===slides.length-1;} document.querySelector('#ot-prev').onclick=()=>{document.activeElement.blur();show(active-1);}; document.querySelector('#ot-next').onclick=()=>{document.activeElement.blur();show(active+1);}; - document.querySelector('#ot-edit').onclick=()=>{editing=!editing;editable();document.querySelector('#ot-edit').textContent=editing?'발표 모드':'편집 모드';document.querySelectorAll('section input').forEach(c=>c.disabled=!editing);document.querySelectorAll('[data-add-row]').forEach(c=>c.hidden=!editing);}; - document.addEventListener('compositionstart',()=>composing=true);document.addEventListener('compositionend',()=>composing=false); - document.addEventListener('keydown',e=>{if(composing||e.isComposing||e.keyCode===229||e.target.closest('[contenteditable="plaintext-only"],input,button,a'))return;if(['ArrowRight','ArrowDown','PageDown',' '].includes(e.key)){e.preventDefault();show(active+1);}if(['ArrowLeft','ArrowUp','PageUp'].includes(e.key)){e.preventDefault();show(active-1);}if(e.key==='Home'){e.preventDefault();show(0);}if(e.key==='End'){e.preventDefault();show(slides.length-1);}}); - document.addEventListener('click',e=>{const btn=e.target.closest('[data-add-row]');if(!btn)return;const t=[...document.querySelectorAll('table[data-add-rows]')].find(t=>t.dataset.addRows===btn.dataset.addRow);const row=t.tBodies[0].insertRow();for(let i=0;i{if(e.isComposing||e.target.closest('input,button,a'))return;if(['ArrowRight','ArrowDown','PageDown',' '].includes(e.key)){e.preventDefault();show(active+1);}if(['ArrowLeft','ArrowUp','PageUp'].includes(e.key)){e.preventDefault();show(active-1);}if(e.key==='Home'){e.preventDefault();show(0);}if(e.key==='End'){e.preventDefault();show(slides.length-1);}}); + show(0); })(); diff --git a/slides/ot-live/live.css b/slides/ot-live/live.css index 7d01fe2..a81220e 100644 --- a/slides/ot-live/live.css +++ b/slides/ot-live/live.css @@ -9,10 +9,8 @@ section[data-size].closing footer{bottom:62px;color:var(--color-text-footer);} section[data-size] .note{font-size:24pt;} body>svg[data-marpit-svg]{position:fixed;inset:0 0 45px;width:100%;height:calc(100% - 45px);} #ot-toolbar {position:fixed;bottom:0;left:0;right:0;height:45px;display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;font:14px Pretendard,'Apple SD Gothic Neo',sans-serif;color:#002060;z-index:100;border-top:2px solid #8FAADC;} -#ot-toolbar button {font:inherit;padding:4px 12px;background:white;color:#002060;border:1px solid #4472C4;cursor:pointer;} +#ot-toolbar button,#ot-toolbar a {font:inherit;padding:4px 12px;background:white;color:#002060;border:1px solid #4472C4;cursor:pointer;text-decoration:none;} #ot-toolbar button:disabled{opacity:.4;} -section [contenteditable]:focus{outline:2px solid #8FAADC;outline-offset:2px;} -section [contenteditable="plaintext-only"]{cursor:text;min-width:1em;} section table td{height:23px;} section .ot-options label{display:flex;gap:12px;align-items:center;margin:8px 0 15px 34px;} section .ot-options input{width:22px;height:22px;flex:none;accent-color:#002060;} @@ -54,6 +52,6 @@ section.ot-bridge > p + .cols{padding-top:16px;} section.ot-icebreaker > .ot-question{margin:56px 0 0;font-size:24pt;line-height:1.5;font-weight:var(--font-weight-heavy);text-align:center;} section.ot-icebreaker > .ot-source{position:absolute;left:var(--size-padding-x);right:var(--size-padding-x);bottom:72px;margin:0;font-size:14pt;line-height:1.4;font-weight:var(--font-weight-regular);color:var(--color-text-footer);} section.ot-icebreaker > .ot-source a{color:inherit;} -section button[data-add-row]{appearance:none;background:white;color:#002060;border:1px solid #4472C4;font:16pt Pretendard,sans-serif;padding:5px 12px;cursor:pointer;margin-left:3%;} } +@media screen and (max-width:480px) {#ot-toolbar{font-size:12px;gap:6px;}#ot-toolbar button,#ot-toolbar a{padding:4px 6px;}} @media print {#ot-toolbar,section button{display:none!important;}body>svg{display:block!important;}}