Playground

Playground 열기 →

Playground는 WebAssembly로 컴파일되어 브라우저에서 실행되는 go-slides v0.9.0 그 자체입니다. 왼쪽에 프레젠테이션을 입력하면 오른쪽에 슬라이드가 따라 나타납니다. 프레젠테이션도, 공유 링크도 서버로 전송되지 않습니다.

제공 기능

• 모든 슬라이드의 실시간 미리 보기: 페이지 스레드와 분리된 Web Worker에서 렌더링하므로 입력이 미리 보기 때문에 멈추지 않습니다. 슬라이드를 클릭하면 편집기가 해당 줄로 이동하고, 캐럿을 옮기면 미리 보기가 해당 슬라이드로 스크롤됩니다.

• 슬라이드 쇼: 키보드, 화면 컨트롤러, 전환 효과를 갖춘 실제 발표 화면입니다.

• 발표자 보기: Present(또는 슬라이드 쇼에서 p)를 누르면 두 번째 창에 열립니다. 현재 슬라이드, 다음 단계, 발표자 노트(프레젠테이션의 <!-- comments -->), 시계, 타이머가 표시됩니다. 화살표 키, Space, Home, End는 어느 창에서나 동작하며, 프레젠테이션을 편집할 때도 두 창이 서로 연동됩니다. 창이 열리지 않으면 이 사이트의 팝업을 허용하십시오. 개요 보기(o)는 내려받은 페이지에서만 쓸 수 있습니다.

• 입력 중 자동 완성: 디렉티브 키(주석 안에서는 _로 시작하는 스폿 디렉티브), kind, theme, size, paginate의 값, 그리고 {{ }} 안의 템플릿 함수와 데이터 필드.

• 캐럿 위치에 있는 요소의 도움말: 디렉티브, kind(슬라이드 유형, 설정하는 내용), 템플릿 함수. 도움말 창에서 이 문서로 연결되는 링크도 제공합니다.

• 해당 줄에 표시되는 문제: 템플릿, YAML, HCL 오류가 편집기에서 강조되고 그 아래에 나열되며, 미리 보기는 마지막으로 렌더링에 성공한 프레젠테이션을 유지합니다.

• 예제: 환영 프레젠테이션, 슬라이드를 생성하는 템플릿, 슬라이드 kind, HCL 프런트 매터, 테마와 스폿 디렉티브, 그리고 수식, 이미지, 배경(![bg], 화면을 나누는 ![bg left:40%], 필터).

• 파일: 편집기 왼쪽 패널은 프레젠테이션의 프로젝트이며, 명령과 VS Code 확장이 읽는 구조와 같습니다: deck.md, slides.yaml, themes/, kinds/, media/.

  • 파일을 클릭하면 편집할 수 있습니다. 편집기는 파일 언어(Markdown, YAML, HCL, JSON, CSS)에 따라 색을 입히고 문제를 표시합니다.
  • 마우스 오른쪽 버튼(또는 Shift+F10)으로 New File, New Folder, Rename(F2), Delete(먼저 확인), New theme / New kind를 실행합니다. 파일을 폴더로 끌어다 놓으면 이동합니다. 키보드 조작은 미리 입력 검색을 포함해 WAI-ARIA 트리 패턴을 따릅니다.
  • Project ▸ New theme은 themes/my-gaia.css(또는 default, uncover 기반)를 만듭니다. 기본 제공 테마의 @import와 직접 추가하는 규칙으로 이루어지며, Theme 목록에 추가됩니다. New kind와 New data file도 템플릿에서 시작합니다. 각각 slides.yaml에 등록되므로 slides build deck.md가 찾을 수 있습니다.
  • **Project ▸ Download project (.zip)**은 전체를 저장합니다. 압축을 풀면 slides build deck.md로 빌드할 수 있습니다. Open project는 .zip이나 폴더를 다시 불러옵니다. 자기 폴더 밖으로 나가는 아카이브(.., 절대 경로), 파일이 256개를 넘거나 한 파일이 8 MiB를 넘는 아카이브, 압축 해제 시 100배 넘게 커지는 아카이브는 거부됩니다.
  • 모든 내용은 초안과 함께 이 브라우저에 보관됩니다. 프로젝트는 최대 64 MiB까지 담을 수 있으며, 파일 목록 아래 줄에 사용량이 표시됩니다.

• 미디어: 이미지, 동영상, 소리를 편집기에 끌어다 놓거나 붙여 넣으면 media/에 들어가고 프레젠테이션에서 ![](media/photo.png)처럼 참조됩니다. 패널의 폴더에 파일을 끌어다 놓으면 그 폴더에 들어갑니다. 프레젠테이션은 작고 읽기 쉬운 상태로 유지되며, 아무것도 업로드되지 않습니다. 미리 보기 샌드박스는 제한을 풀지 않고도 미디어를 불러옵니다(페이지가 바이트를 직접 넘겨줍니다). Save as ▸ HTML page는 미디어를 페이지 안에 넣습니다. https: 이미지도 쓸 수 있지만 브라우저가 해당 서버에서 가져오므로 그 서버에 사용자의 주소가 노출됩니다. 미리 보기는 리퍼러를 보내지 않습니다.

• 크기 조절 가능한 창: 파일 패널, 편집기, 슬라이드 썸네일, 미리 보기, 도움말은 끌어서 움직일 수 있는 막대로 나뉩니다(막대 위에서는 포인터가 크기 조절 커서로 바뀝니다). 막대 옆의 창이 공간을 차지하고 나머지 창은 크기를 유지합니다. 막대를 더블클릭하거나 막대에서 Enter를 누르면 창을 접었다가 다시 펼칩니다. 키보드에서는 F6으로 막대 사이를 이동하고, 화살표 키로 막대를 16 px씩 옮기며, Home과 End로 막대 앞의 창을 최소·최대 크기로 만들고, Escape로 편집기로 돌아갑니다. View 탭으로 창을 끌 수도 있습니다. 직접 설정한 크기는 초안과 함께 이 브라우저에 보관되며, 기본 크기(190, 168, 280 px, 편집기와 미리 보기가 나머지를 6 대 5로 나눔)는 저장되지 않습니다.

• 서식: Format 탭이 Markdown을 대신 편집해 주며, 한 번 누를 때마다 Undo 한 단계가 됩니다.

  • 텍스트: Bold, Italic, Strikethrough, Inline code는 선택 영역이나 캐럿 위치의 단어에 적용되며 켜고 끄는 방식입니다(Ctrl+B, Ctrl+I, Ctrl+Shift+X, Ctrl+E, Mac에서는 Cmd). 캐럿이 해당 표식 안에 있으면 버튼이 눌린 상태로 표시됩니다. Markdown에는 밑줄이 없으므로 Underline(Ctrl+U)은 텍스트를 <u>…</u>로 감쌉니다. 이 태그는 Marp의 기본 HTML 허용 목록에 포함되므로 원시 HTML을 꺼도 동작합니다.
  • 문단: Heading 1~3(Ctrl+Alt+1..3), 글머리 기호(Ctrl+Shift+8), 번호 매기기 (Ctrl+Shift+7), 인용은 선택한 줄에 적용되며 켜고 끄는 방식입니다. 수평선은 <hr> 태그입니다. ---, ***, ___는 Marp에서 모두 새 슬라이드를 시작하기 때문입니다.
  • 표: 격자에서 열과 행 수를 고릅니다. 표 안에 캐럿이 있으면 행이나 열을 추가·삭제하고 열 정렬(:--, :-:, --:)을 지정할 수 있으며, 편집할 때마다 표가 정렬된 형태로 다시 작성됩니다.
  • 슬라이드 텍스트 왼쪽·가운데·오른쪽 정렬은 현재 슬라이드에 <style scoped> 블록을 씁니다. Marp에는 정렬 문법이 없고 style 속성은 기본 HTML 허용 목록을 통과하지 못하지만, scoped 블록은 통과합니다. 따라서 원시 HTML을 꺼도 동작하며 미리 보기, HTML 페이지, PDF에 반영됩니다.
  • 링크(Ctrl+K)는 url이 선택된 상태로 [text](url)을 씁니다.

• 프런트 매터 키의 구문 강조: 깊이와 관계없이 YAML({a: 1} 매핑 포함)과 HCL 모두에서 강조합니다.

• 테마 선택기: default, gaia, uncover, 프로젝트의 테마(themes/*.css), 프레젠테이션이 정의한 테마(<style> 안의 /* @theme name */). 선택하면 프런트 매터(YAML 또는 HCL)에 theme:를 쓰므로 공유 링크에도 유지되며, 프런트 매터를 편집하면 선택기도 따라 바뀝니다.

• 입력하는 동안 미리 보기가 위치를 유지합니다. 바뀐 슬라이드만 교체되며, 테마를 바꾸면 미리 보기가 같은 슬라이드에서 다시 열립니다.

• 공유 링크: 프레젠테이션이 링크 자체(# 부분에 압축된 형태)에 담기므로 링크를 열면 프레젠테이션이 열립니다. 링크에는 압축 후 64 KiB까지, 프레젠테이션만 담을 수 있습니다. 프로젝트에 그 밖의 파일(테마, kind, 미디어)이 있으면 Share가 이를 알리고 .zip을 제안합니다.

• 다른 이름으로 저장:

  • slides deck.md가 쓰는 것과 같은 HTML 페이지
  • PDF(벡터, 텍스트 선택 가능, 개요 포함)
  • 편집 가능한 PowerPoint 또는 OpenDocument 프레젠테이션

  모두 slides --pdf, --pptx, --odp와 같은 코드로 브라우저에서 만들어집니다. 슬라이드 100장 벤치마크 프레젠테이션의 PDF는 명령으로 만든 것과 바이트 단위까지 같습니다. 처음 내보낼 때 진행률 표시와 함께 내보내기 엔진(약 5 MiB, 한 번만 받으며 다음 업데이트까지 브라우저가 보관)을 내려받고, 받는 동안 컴파일합니다. 그다음에는 슬라이드가 그리는 글꼴만 내려받습니다. 3 MB/s 회선에서 환영 프레젠테이션의 첫 PDF는 3초 안에 완성됩니다. 그 뒤 슬라이드 100장 프레젠테이션은 약 3초가 걸립니다. https: 이미지는 서버가 허용할 때(CORS)만 포함되며, data: 이미지는 항상 포함됩니다.

• 초안이 보관됩니다:

  • 프레젠테이션은 입력하는 동안 이 브라우저에 저장되며(IndexedDB, 이 사이트 전용), 새로 고침하면 다시 나타납니다. 어디에도 전송되지 않습니다. 프로젝트의 텍스트 파일(테마, kind, 데이터, slides.yaml)도 같은 방식으로 보관되며, 입력 직후 탭을 닫아도 유지됩니다. 미디어는 끌어다 놓는 즉시 저장됩니다.
  • 공유 링크를 열면 해당 프레젠테이션이 열리고 내 초안은 보관됩니다. Draft ▸ Restore my draft로 되돌릴 수 있습니다.
  • 예제를 열거나, Draft ▸ Reset to the example(먼저 확인)을 실행하거나, 다른 탭을 써도 초안은 지워지지 않습니다. Draft ▸ Restore replaced로 다시 바꿀 수 있습니다.
  • Draft ▸ Forget my drafts는 저장된 모든 내용을 지웁니다.

모든 내보내기는 미리 보기에 표시된 프로젝트를 렌더링합니다. slides.yaml, 테마, kind, 데이터 파일, 미디어가 포함되며, 미디어는 문서 안에 들어갑니다.

이미지 파일 출력(slides --images)은 브라우저에서 만들 수 없습니다. 명령이나 VS Code 확장을 사용하십시오.

보안

프레젠테이션은 페이지의 출처(origin)를 갖지 않는 샌드박스 iframe에 표시됩니다. 따라서 Playground에도, 그 저장소에도 접근할 수 없고, 양식을 제출하거나 페이지를 이동할 수도 없습니다. 이 페이지에는 자체 스크립트만 실행하는 Content Security Policy가 적용됩니다. 프레젠테이션의 원시 HTML은 slides의 기본 동작과 마찬가지로 Marp 허용 목록을 따릅니다. 5초 넘게 걸리는 렌더링(무한 반복하는 템플릿 등)은 중단됩니다.

발표자 창도 이 샌드박스를 유지합니다. 발표자 창은 Playground가 직접 열며, 같은 방식으로 샌드박스 처리된 iframe에 프레젠테이션을 표시합니다. 두 iframe은 저장소를 공유할 수 없으므로 Playground가 메시지로 슬라이드 번호를 중계합니다. 프레젠테이션을 실행하는 어떤 프레임도 Playground의 출처를 얻지 못합니다.

프로젝트의 미디어는 메시지에 담긴 바이트로 샌드박스 프레임에 전달되며, 각 프레임은 자신의 출처에서 직접 blob: URL을 만듭니다. Playground가 만든 blob: URL은 그 안에서 로드되지 않으며, 프레임 정책에는 미디어와 글꼴용 blob:만 추가됩니다.

크기와 속도

모듈은 GitHub Pages가 제공하는 상태(gzip, Pages는 brotli를 제공하지 않음)로 8.8 MiB입니다. 진행률 막대와 함께 한 번 내려받으며, 이후 다음 배포까지 브라우저가 캐시합니다. Apple M4 Max의 Chrome 155에서 실제 페이지로 측정한 결과, 편집기는 페이지를 연 뒤 2.1 s(그중 1.5 s는 내려받기)에 준비되고 첫 슬라이드는 2.4 s에 나타납니다. 슬라이드 100장 벤치마크 프레젠테이션을 수정하면 약 30 ms 만에 미리 보기에 반영됩니다. go-slides는 바뀐 슬라이드만 렌더링하고, 미리 보기에서도 그 슬라이드만 교체합니다.