슬라이드 보기·탐색·발표 전체 가이드

슬라이드 보기는 별도의 발표 원고를 만드는 기능이 아니다. 일반 Markdown 원문을 발표 목적에 맞게 나누고 표현하는 projection이다. 제목, 문단, 표, 이미지와 목록은 Markdown에 남고, 슬라이드 크기·색·간격·overlay 같은 표현은 projection profile에 저장된다.

이 장은 세 기능을 하나의 실제 흐름으로 검증한다.

기능 ID 기능 이 장의 실증 범위
VW-28 슬라이드 내비게이터 키보드 포커스 방향키, Home, End, Page Up/Down, Enter와 Space
VW-29 슬라이드 워크스페이스 현재 슬라이드, 왼쪽 내비게이터, 오른쪽 표현 설정의 결합
VW-31 슬라이드 미리보기 Glif 직접 renderer의 현재 슬라이드·전체 덱·발표 화면

준비된 예제

예제 폴더를 내려받아 Glif에서 Scope로 연다. 01_document-assets.md에는 H1 하나와 H2 여섯 개가 있어 heading mode에서 총 7장으로 투영된다. 이미지, 표, 순서 목록, task list, 인용과 code block도 함께 포함되어 있어 단순 제목 덱보다 실제 문서에 가까운 검증이 가능하다.

H1·H2 구조, 이미지, 표와 목록을 함께 가진 일반 Markdown 원문

원문과 슬라이드의 관계

슬라이드 전환 전후에도 01_document-assets.md는 같은 파일이다. Glif는 다음 세 층을 구분한다.

층 저장하는 것 이 예제에서의 역할
Markdown 원문 제목, 문단, 목록, 표, 이미지와 링크 모든 결과의 기준 원본
문서 projection 선택 이 문서를 기본적으로 어떤 보기로 열지 slide 보기 선택
슬라이드 profile 분할 mode, 크기, 배경, 글자, overlay와 간격 발표 표현 설정

marp: true, viewType: slide, type: slide 같은 front matter를 새 문서에 넣어 보기 identity를 만들지 않는다. 예제 원문에는 일반적인 제목·설명·요약·태그만 있다. 슬라이드 선택과 표현은 .glif의 projection 설정이 소유한다.

원문을 수정해야 할 때

  • 문장을 고친다.
  • 표의 행과 열을 바꾼다.
  • 이미지를 교체한다.
  • H2 section을 추가하거나 순서를 바꾼다.
  • 링크, task와 인용을 편집한다.

슬라이드 profile을 수정해야 할 때

  • 16:9, 4:3, A4 가로·세로를 바꾼다.
  • 밝은 배경과 어두운 배경을 바꾼다.
  • 글꼴, 글자색과 배경색을 바꾼다.
  • header, footer, page number와 overlay를 조정한다.
  • 슬라이드 사이 간격과 정렬을 조정한다.

표현을 profile에 두면 같은 원문을 Page, PDF, Hugo 문서와 슬라이드로 다시 사용할 수 있다.

슬라이드 보기 열기

  1. 01_document-assets.md를 연다.
  2. 문서 header의 문서 작업 화면 버튼을 누른다.
  3. 슬라이드 프로젝션 만들기를 선택한다.
  4. 왼쪽에 7장의 내비게이터가, 가운데에 현재 슬라이드가, 오른쪽에 슬라이드 설정이 나타나는지 확인한다.

현재 슬라이드, 7장 내비게이터와 표현 설정을 함께 보여 주는 슬라이드 워크스페이스

가운데 화면은 선택한 현재 슬라이드다. 왼쪽 thumbnail과 발표 화면은 별도의 renderer가 아니라 같은 Glif 직접-render 결과를 사용한다. 예제의 Resources/document-loop.svg처럼 문서 기준 상대경로로 연결한 이미지도 현재 문서와 Scope를 기준으로 해석한다.

워크스페이스가 닫혔을 때

슬라이드 문서는 유지한 채 왼쪽이나 오른쪽 영역만 닫을 수 있다. 다시 열려면:

  1. 문서 header의 추가 작업을 연다.
  2. 슬라이드 워크스페이스를 선택한다.
  3. 내비게이터와 설정 영역이 복원되는지 확인한다.

이 복원 명령은 Markdown을 다시 만들거나 projection profile을 초기화하지 않는다. 현재 슬라이드 문서에 필요한 패널 묶음만 복원한다.

슬라이드를 나누는 두 가지 mode

오른쪽 출력 → 모드에서 분할 규칙을 선택한다.

헤딩 섹션

일반 문서에 권장하는 기본 mode다.

  • H1부터 첫 H2 전까지가 첫 장이 된다.
  • 각 H2 section이 다음 슬라이드가 된다.
  • fenced code block 안의 ##는 제목으로 잘못 해석하지 않는다.
  • H2 section을 추가·복제할 때 일반 Markdown heading 구조를 유지한다.

예제는 이 mode를 사용한다. H1 1개와 H2 6개가 7장으로 보이는지 내비게이터에서 대조한다.

구분선 덱

기존 발표 문서와의 호환이 필요할 때 사용한다.

  • 본문의 독립된 --- 구분선이 장 경계가 된다.
  • fenced code block 안의 ---는 장 경계로 취급하지 않는다.
  • 슬라이드 삽입·복제·삭제는 delimiter 구조를 보존한다.
  • legacy Marp 원고를 읽을 수 있지만 Marp가 새 profile의 저장 authority가 되지는 않는다.

---는 YAML front matter 경계로도 쓰이므로 문서 맨 앞 metadata와 본문 delimiter를 구분해야 한다. 일반 긴 글을 처음 슬라이드로 만들 때는 heading mode가 더 읽기 쉽고 다른 보기에도 재사용하기 좋다.

내비게이터 사용법

왼쪽 슬라이드 내비게이터의 각 thumbnail은 role=option인 키보드 탐색 항목이다. 현재 항목에는 강조 테두리와 aria-selected 상태가 표시된다.

첫 슬라이드 카드에 키보드 포커스가 있고 다음 슬라이드로 이동할 준비가 된 내비게이터

입력 동작
↑, ← 이전 슬라이드
↓, → 다음 슬라이드
Home 첫 슬라이드
End 마지막 슬라이드
Page Up 최대 5장 이전
Page Down 최대 5장 다음
Enter, Space 포커스한 슬라이드를 현재 슬라이드로 선택

포커스와 현재 슬라이드

내비게이터 이동은 thumbnail의 포커스만 장식적으로 옮기는 것이 아니다. 선택된 slide index와 editor의 해당 section 위치를 함께 연결한다. Source로 돌아왔을 때도 어느 H2 section을 보고 있었는지 찾기 쉽다.

긴 덱에서는 모든 thumbnail을 한꺼번에 DOM에 만들지 않고 현재 viewport 주변을 가상화한다. Home이나 End로 멀리 이동하면 대상 카드가 생성된 뒤 포커스를 받는다. 따라서 카드 수가 많아도 스크롤과 키보드 탐색이 같은 규칙을 유지한다.

마우스와 카드 작업

heading mode에서 H2로 안전하게 표현된 장에는 다음 작업이 보인다.

  • drag handle로 순서 이동
  • 현재 장 아래에 새 H2 슬라이드 삽입
  • 현재 H2 section 복제
  • 안전하게 제거할 수 있는 장 삭제
  • 마지막에 새 슬라이드 추가

지원하지 않는 구조는 강제로 다시 쓰지 않는다. 예를 들어 heading section으로 안전하게 분리할 수 없는 장은 일부 편집 action이 비활성화될 수 있다. 이때 Source에서 직접 구조를 정리한다.

현재 슬라이드와 표현 설정

가운데 현재 슬라이드는 읽기 전용 projection이다. 내용을 클릭해 직접 문장을 고치는 화면이 아니다. 내용 변경은 Markdown 원문 보기로 돌아가 수행한다.

오른쪽 설정은 크게 네 부류다.

출력 mode

문서형 출력과 발표형 출력을 구분한다. 현재 release candidate의 Desktop 슬라이드 워크스페이스는 Glif 직접 renderer를 authority로 사용한다.

캔버스

설정 용도
16:9 일반 화면 발표
4:3 구형 projector와 좁은 화면
A4 가로 인쇄 가능한 가로 자료
A4 세로 세로 handout

크기를 바꿔도 Markdown은 변하지 않는다. thumbnail, 현재 슬라이드, 전체 미리보기와 발표 화면이 같은 aspect ratio를 사용한다.

색과 글자

  • 사이트·라이트·다크 배경 preset
  • 사용자 배경색과 글자색
  • font family
  • header와 footer 텍스트·위치
  • page number 표시 위치

색상은 읽을 수 있는 대비를 유지해야 한다. 발표 환경에서 projector가 밝다면 Desktop에서 보기 좋은 낮은 대비가 실제 화면에서는 흐려질 수 있으므로 전체 미리보기와 실제 발표 화면을 함께 확인한다.

Overlay와 간격

Overlay는 슬라이드 위에 반복되는 장식·정보 층을 배치한다. 간격 설정은 content와 canvas 경계의 여백을 조절한다. 표나 code block이 잘리면 글자 크기만 줄이기 전에 장을 나누거나 간격을 먼저 확인한다.

전체 덱 미리보기

내비게이터 상단에서 전체 미리보기를 선택하면 모든 슬라이드를 한 화면에서 세로로 읽는다.

상대경로 SVG가 실제로 로드된 7장 읽기 전용 슬라이드 덱 미리보기

전체 미리보기는 다음 용도에 적합하다.

  • 장 순서와 이야기 흐름 점검
  • 제목 중복과 빈 슬라이드 발견
  • 표, 이미지와 code block의 overflow 확인
  • 배경·글자·overlay가 덱 전체에 일관되게 적용됐는지 확인
  • 현재 슬라이드로 빠르게 되돌아가기

이 화면은 읽기 전용이다. scroll하거나 현재 슬라이드 위치로 이동해도 원문과 undo history를 바꾸지 않는다. Escape로 닫으면 이전 내비게이터 포커스로 돌아간다.

발표 화면

내비게이터 상단에서 발표를 선택하면 현재 슬라이드부터 발표 화면을 연다.

현재 슬라이드와 진행 상태, 다음 장 제목을 함께 보여 주는 발표 화면

발표 화면에는 다음 정보가 고정된다.

  • 덱 제목
  • 현재 슬라이드 제목
  • 1 / 7 같은 진행 상태
  • 현재 슬라이드 canvas
  • 다음 슬라이드 제목
  • 이전, 다음과 종료 control

발표 중 키보드

입력 동작
→, Page Down, Space, Enter 다음 슬라이드
←, Page Up, Backspace 이전 슬라이드
Home 첫 슬라이드
End 마지막 슬라이드
Escape 발표 종료

다음 이동 control과 발표 종료 control이 보이는 실제 발표 화면

버튼, 링크, 입력 control처럼 자체 keyboard interaction이 있는 요소에서 누른 키는 발표 navigation이 가로채지 않는다. 브라우저나 WebView가 사용자 activation 없이 fullscreen을 허용하지 않는 환경에서는 focused dialog가 같은 키보드 표면으로 남는다. fullscreen 실패를 발표 실패로 숨기지 않고, Escape로 닫을 수 있는 화면을 fallback으로 유지한다.

영상은 실제 Glif Desktop에서 일반 Markdown을 연 뒤 슬라이드 projection을 만들고, 내비게이터 키보드 이동, 전체 덱 미리보기, 발표 시작·다음·이전·종료를 차례로 보여 준다. 파란 원은 pointer이고 아래 설명은 캡처 안내 overlay이므로 Markdown이나 projection profile에 저장되지 않는다.

Source로 돌아가기

발표를 Escape로 닫으면 슬라이드 워크스페이스로 돌아온다.

발표 종료 뒤 같은 슬라이드 워크스페이스로 복귀한 상태

내용을 수정하려면 문서 header에서 Markdown 원문 보기를 선택한다. 다음 점을 확인한다.

  1. 원래 front matter와 H1/H2 구조가 그대로 있다.
  2. 슬라이드 선택 때문에 marp, viewType, type, doctype, slide identity가 추가되지 않았다.
  3. 이미지 경로는 Resources/document-loop.svg 그대로다.
  4. 슬라이드 profile을 바꿔도 원문의 byte와 editor undo history가 변하지 않는다.

다시 슬라이드 보기를 선택하면 저장된 profile과 현재 원문에서 덱을 재생성한다. projection은 마지막 screenshot을 저장해 보여 주는 것이 아니라 현재 원문에서 파생된다.

Marp와 Glif 직접 renderer의 경계

구분선 기반의 기존 Marp 문서는 migration source로 읽을 수 있다. 하지만 현재 Glif 슬라이드 워크스페이스의 기준 renderer는 Glif 직접 renderer다.

항목 Glif 직접 renderer legacy Marp 경계
새 문서 기본 분할 H1/H2 heading mode delimiter 원고 호환
보기 identity .glif projection map marp: true를 새 authority로 쓰지 않음
표현 설정 projection profile 원문 전용 directive에 의존하지 않음
Desktop thumbnail·발표 동일 직접-render 결과 별도 Marp preview를 기본으로 사용하지 않음
실패 처리 지원하지 않는 embedded view는 읽을 수 있는 Markdown fallback 성공한 것처럼 빈 화면을 만들지 않음

기존 원고를 가져왔다면 먼저 delimiter mode로 읽고, 재사용성이 중요하면 H2 section 구조로 점진적으로 정리한다. 변환 전에는 원문을 별도 commit으로 보존한다.

오류와 복구

증상 확인 복구
내비게이터가 보이지 않음 슬라이드 보기는 유지되는지 확인 추가 작업 → 슬라이드 워크스페이스
빈 장이 생김 H1/H2 또는 delimiter 사이에 내용이 있는지 확인 Source에서 heading·delimiter 구조 수정
code block 안에서 장이 나뉨 fence가 닫혔는지 확인 backtick/tilde fence를 올바르게 닫음
이미지가 보이지 않음 문서 기준 상대경로와 Scope 안의 실제 파일 확인 Resources/... 경로와 파일명 대소문자 수정
표나 code가 잘림 canvas, 간격과 한 장의 정보량 확인 장을 나누거나 profile 간격 조정
발표가 fullscreen이 아님 WebView의 사용자 activation 정책 확인 focused 발표 dialog를 사용하고 필요하면 다시 실행
profile 저장 실패 toast와 현재 profile 상태 확인 원문은 유지하고 설정 저장을 다시 시도

오류가 나도 projection을 만들기 위해 Markdown을 자동으로 다른 형식으로 덮어쓰지 않는다. Source를 먼저 보존하고, 실패한 profile write는 마지막으로 확인된 설정으로 되돌린다.

Desktop과 Hugo의 차이

표면 역할 유지되는 interaction
Desktop Source Markdown 작성·편집 editor command, undo/redo
Desktop 슬라이드 덱 구성·표현·발표 navigator, profile, preview, presentation
Hugo 공개 문서 사용법과 예제·실증 자산 게시 웹 navigation과 video 재생
별도 발표 출력 고정된 전달 결과 출력 형식이 지원하는 navigation

Hugo에 이 가이드가 게시된다고 해서 Desktop 슬라이드 워크스페이스가 웹 문서 안에서 그대로 실행되는 것은 아니다. Hugo는 예제 Markdown, 설명, screenshot과 video를 배포한다. 실제 덱 편집과 발표는 Glif Desktop에서 수행한다.

이번 실증 결과

Windows Glif 0.1.0 개발 release candidate의 1200×800 client area에서 확인했다.

  • 일반 Markdown H1/H2를 7장으로 투영
  • 중앙 현재 슬라이드, 내비게이터와 설정 패널 동시 표시
  • 문서 상대경로 SVG를 thumbnail·현재 슬라이드·전체 미리보기·발표에서 로드
  • 방향키와 Home/End를 이용한 내비게이터 포커스 이동
  • 전체 7장 읽기 전용 덱 미리보기
  • 발표 시작, 다음, 이전과 Escape 종료
  • 전후 01_document-assets.md SHA-256 동일
  • projection identity front matter 추가 없음
  • MP4와 WebM 10.5초, 1200×800

기계 판독 실증 JSON에는 기능 ID, slide count, source hash, projection 상태, 영상 길이와 실증 경계가 기록된다. 사용자 절대 경로와 임시 Scope 경로는 포함하지 않는다.

완료 기준

  • VW-28: 내비게이터가 7개 option을 제공하고 키보드로 포커스·현재 위치를 이동한다.
  • VW-29: 슬라이드 선택 시 내비게이터, 현재 슬라이드와 profile 설정이 한 워크스페이스로 열린다.
  • VW-31: 현재 슬라이드, 전체 덱과 발표 화면이 Glif 직접 renderer 결과를 표시한다.
  • H1/H2 heading mode와 delimiter mode의 경계를 설명한다.
  • 문서 상대경로 이미지가 실제 slide surface에서 로드된다.
  • 전체 미리보기와 발표 keyboard contract를 설명하고 실제 영상으로 검증한다.
  • 발표 종료 뒤 워크스페이스로 복귀한다.
  • 전환 전후 Markdown hash가 같고 projection identity가 원문에 추가되지 않는다.
  • Marp 호환 입력과 Glif 직접 renderer authority를 구분한다.
  • screenshot, MP4, WebM과 JSON에 사용자 절대 경로를 남기지 않는다.

이 체크리스트는 현재 release candidate의 Desktop 실증 범위다. 최종 packaged release에서는 다중 monitor fullscreen, 장시간 발표와 공개 출력 형식의 재개방을 같은 fixture로 추가 qualification한다.