황현동 블로그 개발, 인생, 유우머

260322 md 로 html5 기반 슬라이드 제작 가이드

22 Mar 2026 Tags:
md로, html5, 슬라이드, 제작가이드


260322 md 로 html5 기반 슬라이드 제작 가이드

개요

HTML5 기반 발표 슬라이드를 16:9 고정, 무스크롤, 누적 Step 진행으로 안정적으로 운영하기 위한 최종 가이드다.
이 문서는 실제 적용이 끝난 최종 구조만 정리하며, 시행착오 과정은 포함하지 않는다.

최종 목표

  • 16:9 비율 고정 (데스크톱/모바일 공통)
  • 스크롤바 미노출 (항상 overflow: hidden)
  • 슬라이드 내부 누적 진행
    • [a] -> [a,b] -> [a,b,c]
  • 진행 키
    • Space, ArrowRight, 좌클릭: 다음
    • ArrowLeft: 이전
  • CDN 기반 런타임 구성
  • Material 3 스타일 톤 + Material Symbols 아이콘
  • 전체 텍스트 폰트 D2Coding 강제 적용

디렉터리 구조

~/tmp/slide_test/
  index.html
  common.html
  common.js
  common.css
  page_000.html
  page_001.html
  ...
  page_009.html
  assets/
    fonts/
      D2Coding-Regular.ttf
      D2Coding-Bold.ttf
    svg/
      *.svg

기술 스택 (최종)

  • HTML5
  • Tailwind CSS (CDN)
  • Chart.js (CDN)
  • Mermaid (CDN)
  • Material Symbols Rounded (CDN)
  • Vanilla JS (common.js)
  • D2Coding (@font-face + local fallback)

최종 표준에서는 common.ts를 사용하지 않고, 공통 동작은 common.js만 사용한다.

공통 파일 역할

common.js

  • data-step 기반 누적 표시 제어
  • 키보드/마우스 진행 이벤트 처리
  • 페이지 경계 이동(마지막 step 이후 다음 페이지, 첫 step 이전 이전 페이지)
  • Chart.js 렌더 트리거
  • Mermaid 렌더 트리거

common.css (최소 공통 계층)

  • 16:9 프레임, 중앙정렬
  • 무스크롤(html/body/frame/page overflow hidden)
  • HUD 스타일
  • Step reveal 스타일
  • D2Coding 폰트 선언
  • 기본 테마 토큰(opencode.ai 감성의 다크 톤)

16:9 + 무스크롤 설계 규칙

필수 룰

  1. html, body는 width/height: 100%, overflow: hidden
  2. 슬라이드 프레임은 aspect-ratio: 16 / 9
  3. 프레임 내부(.deck-frame, .slide-page)도 overflow: hidden
  4. Step 누적 시에도 레이아웃이 늘어나지 않도록 고정 슬롯 구조 사용

권장 레이아웃 패턴

  • 상단: 고정 헤더
  • 본문: grid-cols-12, grid-rows-6 고정 슬롯
  • Step 노출은 슬롯 점유 요소만 누적 표시

Step 진행 정책

누적 노출이 핵심이다.

step 0: [a]
step 1: [a, b]
step 2: [a, b, c]
...

동작 규칙

  • stepValue <= currentStep인 요소에 step-visible 부여
  • 다음 입력 시:
    • 현재 페이지 step이 남아있으면 step 증가
    • 소진 시 다음 페이지 이동
  • 이전 입력 시:
    • step 감소
    • step 0에서 이전 입력 시 이전 페이지 마지막 step으로 이동

차트/다이어그램 안정화 규칙

Chart.js

  • responsive: true
  • maintainAspectRatio: false
  • bubble/scatter는 경계 잘림 방지용 여유 확보
    • 축 최대값(x.max, y.max) 여유
    • layout.padding 추가
    • 필요 시 dataset.clip = false

Mermaid

  • Step 노출 이후 렌더
  • 슬롯 크기에 맞는 단순 그래프 유지

SVG

  • 다이어그램 SVG는 object-contain 사용
  • object-cover는 크롭 위험이 있어 지양

Material 3 + 테마 기준

  • 아이콘: Material Symbols Rounded
  • 톤: M3 surface/container/outline 느낌 유지
  • 컬러: deep dark base + cyan/mint accent
  • 강조는 절제, 정보 밀도 중심

폰트 전략 (D2Coding)

common.css에 아래 원칙으로 적용한다.

  • 우선순위
    1. local("D2Coding")
    2. assets/fonts/*.ttf
  • 전체 텍스트 기본 폰트로 D2Coding 지정

예시:

@font-face {
  font-family: "D2Coding";
  src: local("D2Coding"), url("./assets/fonts/D2Coding-Regular.ttf") format("truetype");
  font-weight: 400;
}

* {
  font-family: "D2Coding", ui-monospace, monospace;
}

페이지 작성 원칙 (Tailwind 중심)

  • 공통 CSS에 컴포넌트 스타일을 계속 누적하지 않는다.
  • 카드/표/간격/타이포 조정은 각 page_xxx.html에서 Tailwind 유틸 클래스로 직접 구성한다.
  • 즉, 공통은 인프라(프레임/step/hud), 페이지는 콘텐츠 표현을 담당한다.

운영 체크리스트

발표 전 반드시 확인:

  1. index.html에서 키/마우스 진행 정상
  2. page_00x.html?step=last에서 누적 요소 전체 표시
  3. 스크롤바 미노출
  4. 16:9 고정 유지
  5. D2Coding 적용 확인
  6. Material 아이콘 로딩 확인
  7. bubble/scatter 차트 경계 잘림 없음

참고 URL

  • OpenCode 테마 참고: https://opencode.ai/
  • Material Icons 가이드: https://developers.google.com/fonts/docs/material_icons?hl=ko
  • Material 3 아이콘 개요: https://m3.material.io/styles/icons/overview
  • Material 3 디자인 시스템: https://m3.material.io/
  • D2Coding 저장소: https://github.com/naver/d2codingfont
  • Chart.js 문서: https://www.chartjs.org/docs/latest/
  • Mermaid 문서: https://mermaid.js.org/
  • Tailwind 설치/운영: https://tailwindcss.com/docs/installation

사용자 요청 프롬프트

제목 : {시간} md 로 html5 기반 슬라이드 제작 가이드

시행착오 과정의 내용은 제거 
오직 최종적으로 정착한 방식에 대한 자세한 서술

hhd-md 진행

Related Posts