Playground

Playground 열기 →

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

Playground 자체의 인터페이스(리본, 도움말, 메시지)는 페이지의 언어로 표시됩니다. 한국어는 /ko/playground/를 열면 되고, 이 사이트의 열두 언어 모두 마찬가지입니다. 페이지의 언어 선택기로 바꿀 수 있으며 선택은 이 브라우저에 저장됩니다. 언어가 지정된 링크가 항상 우선합니다. 예제 프레젠테이션은 영어로 유지됩니다. 우크라이나어, 러시아어, 중국어, 일본어, 한국어는 페이지가 해당 언어에 한해 내려받는 Noto Sans 부분집합(0.06~2.3 MiB)으로 그려집니다.

제공 기능

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

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

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

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

• 캐럿 위치에 있는 요소의 도움말: 디렉티브, kind(슬라이드 유형, 설정하는 내용), 템플릿 함수. 도움말 창에서 이 문서로 연결되는 링크도 제공합니다. v0.16.0부터 디렉티브 도움말은 인터페이스 언어를 따르며, 11개 언어를 지원합니다.

• 해당 줄에 표시되는 문제: 템플릿, 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로 나눔)는 저장되지 않습니다.

• 창 닫기: 각 창의 머리글에는 툴팁이 있는 작은 × 버튼이 있습니다. 나머지 창이 그 공간을 나눠 쓰고, 창은 원래 너비로 돌아옵니다. 다시 열려면 View 탭에 있는 해당 창의 토글(모든 창에 있습니다)을 씁니다. 편집기와 미리 보기는 각각 닫을 수 있지만 둘 다 닫을 수는 없습니다. 마지막 하나는 닫기를 거부하며, 버튼이 비활성으로 표시되고 툴팁이 이유를 알려 줍니다. 키보드에서는 F6을 누른 다음 Tab 또는 Shift+Tab으로 × 버튼에 가고, Enter나 Space로 창을 닫으면 키보드가 편집기로 돌아갑니다. 열려 있는 창은 크기와 함께 이 브라우저에 보관됩니다(작업을 위해 여는 Versions, GitHub, 테마 편집기는 닫힌 상태로 시작합니다).

• 서식: 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 확장을 사용하십시오.

테마 편집기

홈 ▸ 디자인 ▸ 테마 편집기는 프로젝트의 테마 하나를 컨트롤로 편집하는 창을 열며, 미리보기가 따라갑니다. 테마는 패키지 폴더 theme-src/<name>/로 보관되고, 미리보기와 내보내기가 읽는 스타일시트 themes/<name>.css는 여기서 컴파일됩니다. 그래서 보이는 것이 곧 내보내는 것입니다. 가져온 테마 패키지(창의 가져오기…, 미디어 추가… 또는 끌어다 놓기)는 파일을 그곳에 보관하므로 편집할 수 있습니다.

• 팔레트: 배경, 텍스트, 제목, 강조, 링크의 색입니다. 색을 고르거나 직접 입력하세요(#1a2b3c, rgb(), hsl() 또는 이름).
• 타이포그래피: 본문, 제목, 코드의 글꼴과 그 크기와 굵기입니다. 글꼴은 일반적인 것과 흔한 것, 그리고 추가한 글꼴입니다(글꼴 추가…: .woff2, .woff, .ttf 또는 .otf).
• 로고: 이미지(.svg, .png), 놓일 위치(모서리 또는 배경 전체)와 크기입니다. 쪽 번호와 바닥글: 쪽 번호가 놓일 위치, 그리고 크기와 정렬입니다.
• 세부 정보: theme.hcl에 적힌 내용입니다. 버전, 설명, 작성자, 라이선스, 홈페이지, 기반 테마(extends), 필요한 go-slides 버전.
• 대비(WCAG): 배경 위의 각 텍스트에 대해 비율과 등급(AA 또는 AAA, 또는 “미달”)을 실시간으로 보여 줍니다. 제목은 큰 텍스트로 칩니다(AA는 3:1이면 되고, 일반 텍스트는 4.5:1이 필요합니다).

CSS 편집은 테마의 스타일시트를 편집기에 보여 줍니다. 컨트롤은 두 개의 gsta:visual 주석으로 둘러싼 블록 안에만 쓰며, 값을 직접 고치면 다시 읽습니다. 블록 밖에 쓴 내용은 절대 건드리지 않습니다. 컨트롤이 보여 줄 수 없는 내용을 블록 안에 추가하면 컨트롤은 쓰기를 멈추고 창이 그 사실을 알려 줍니다. 블록 복원은 블록에 담긴 값만으로 블록을 다시 쓰며 그 밖의 것은 건드리지 않습니다.

**가져오기…**는 .gsta.xz 또는 단독 .css를 엽니다. 패키지는 slides theme verify가 검사하는 방식 그대로, 같은 한도로 검사됩니다. 안전하지 않은 패키지(패키지 밖으로 나가는 경로, 링크, SVG 안의 스크립트, 원격 url(), 맞지 않는 체크섬)는 theme.* 코드와 함께 문제에 표시되며 거부되고, 아무것도 바뀌지 않습니다. 단독 스타일시트의 @import "gaia";는 기반 테마(extends)가 됩니다. 패키지는 그곳에 기반을 지정하기 때문입니다. 추가한 글꼴은 세부 정보에서 라이선스를 밝히기 전까지 LicenseRef-unspecified 라이선스를 가집니다.

.gsta.xz 내보내기는 브라우저에서 패키지를 만들고 slides theme verify처럼 다시 읽으므로 파일이 검사를 통과합니다. CSS 내보내기는 컴파일된 스타일시트를 내려받습니다. 아무것도 업로드되지 않습니다. 모든 편집은 실행 취소의 한 단계이며(같은 컨트롤을 연속해서 편집하면 한 단계), 바뀌기 전 내용은 버전으로 보관됩니다. **버전 저장…**은 테마와 그 버전을 이름과 함께 버전 창에 보관합니다.

실행 취소, 다시 실행, 버전

Undo(실행 취소)와 Redo(다시 실행)는 Home 탭에 있으며 Ctrl+Z, Ctrl+Shift+Z, Ctrl+Y(Mac에서는 Cmd)로도 쓸 수 있습니다. 먼저 표시 중인 파일의 마지막 편집을 되돌리고 (파일마다 자기 기록이 있습니다), 그다음에는 프로젝트 전체에 대한 마지막 작업을 되돌립니다. 고른 예제, Reset, 연 .zip 이나 폴더, 복원한 초안, 삭제하거나 이름을 바꾼 파일이나 폴더, 복원한 버전이 그 대상입니다. Redo는 Undo를 눌렀을 때의 상태로 모두 되돌립니다.

버전은 프로젝트 전체를 이 브라우저에 보관하며, 어디로도 전송하지 않습니다. 입력을 멈춘 뒤 잠시 후(최대 2분마다), 프로젝트 전체에 대한 작업 전마다, 내보내기와 공유 링크를 만들 때마다 버전이 하나 보관됩니다. **Save version…**은 이름을 붙여 하나를 보관합니다. Home ▸ Versions는 Versions 창을 엽니다.

• Preview는 버전을 미리보기에 보여 줍니다.
• Compare with now는 각 파일의 변경 사항을 줄 단위로, 인라인 또는 나란히 보여 줍니다. F7과 Shift+F7로 변경 사항 사이를 이동합니다.
• Restore는 버전을 되돌려 놓습니다. Undo로 복원을 취소할 수 있습니다.
• Delete는 버전을 삭제합니다.

보관되는 것: 가장 최근의 자동 버전 20개, 그다음 하루 동안은 한 시간에 하나, 한 달 동안은 하루에 하나. 이름 붙인 버전은 삭제할 때까지 남습니다(최대 50개). 모든 버전을 합쳐 최대 96 MiB이며, 바뀌지 않은 파일은 한 번만 저장됩니다. 브라우저 저장 공간이 가득 차면 가장 오래된 자동 버전부터 사라집니다.

GitHub

Home ▸ History ▸ GitHub는 GitHub 저장소에서 발표 자료 폴더를 불러오고, 변경 사항을 풀 리퀘스트로 제안하는 창을 엽니다. 다음을 입력합니다.

• 저장소 (소유자/이름)
• 브랜치 (비우면 기본)
• 폴더 (비우면 루트): 폴더에 deck.md가 있어야 합니다

이 입력란 위에 창은 git 프레임을 보여 줍니다. forge를 고르고, 토큰(가려서 표시)을 입력하고, 이 기기에 기억을 체크한 뒤 연결(또는 GitLab으로 로그인)이나 연결 해제를 누르는 작은 패널입니다. 프레임은 다른 사이트 go-slides-usercontent.github.io의 페이지로, playground에 삽입되어 있습니다. playground 페이지는 토큰을 절대 보지 못합니다.

토큰은 세분화된 개인 액세스 토큰 (만들기)이며, 선택한 저장소로 제한하고 권한은 Contents 읽기/쓰기와 Pull requests 읽기/쓰기입니다 (Metadata 읽기는 암묵적으로 포함됩니다). 그다음:

• 불러오기는 프로젝트를 GitHub의 폴더로 바꿉니다. Undo로 되돌릴 수 있으며, 원래 프로젝트는 “GitHub에서” 버전으로 남습니다.
• **변경 제안…**은 제목을 묻고, 새 브랜치 slides/<제목>-<날짜-시간>을 만들어 풀 리퀘스트를 엽니다. 기존 브랜치나 기본 브랜치에는 절대 쓰지 않습니다. 풀 리퀘스트 열기는 그곳으로 이동합니다.
• 변경 확인은 GitHub의 더 새로운 버전을 내 버전과 Compare 보기에서 비교합니다. 상대 것 받기는 그것을 불러옵니다.

GitHub에는 프록시를 쓰지 않습니다. 프레임이 직접 통신합니다.

토큰은 프레임에 입력하며 그 사이트에 머뭅니다. playground 페이지는 토큰을 읽을 수 없고 (프레임은 다른 오리진이며 자체 저장소를 가집니다), 페이지가 보낼 수 있는 어떤 명령도 토큰을 돌려주지 않으며, 페이지의 Content Security Policy는 GitHub나 GitLab에 대한 연결을 전혀 허용하지 않습니다. 프레임은 토큰을 api.github.com(또는 gitlab.com)으로만 보냅니다. 초안, 버전, 공유 링크, 내보내기에는 저장되지 않으며 슬라이드 미리보기나 렌더링 worker에도 전달되지 않습니다. 이 기기에 기억을 선택하면 연결 해제(또는 Forget my drafts)까지, playground의 저장소가 아니라 go-slides-usercontent.github.io에 있는 프레임 자체의 localStorage에 저장됩니다.

이전 버전을 사용했다면: 이전 버전이 playground 페이지 자체의 저장소에 보관하던 토큰은 이 버전을 처음 열 때 삭제되며, 창이 그 사실을 알려 줍니다. 프레임에서 다시 입력하세요(보관하려면 ‘기억’을 체크하세요).

**변경 제안…**은 쓰기 작업이므로 프레임이 먼저 묻습니다. 제목, 저장소, 파일 수를 보여 주고 프레임 자체의 허용 버튼을 클릭하기를 기다립니다(최대 2분, 한 번에 제안 하나). 클릭하기 전에는 아무것도 기록되지 않습니다.

위험이 두 가지 남습니다. 프레임을 포함하는 페이지에는 본질적으로 따르는 위험이기 때문입니다. playground 페이지에 주입된 스크립트는 프레임의 nonce를 읽고 프레임의 명령을 보낼 수 있습니다. 불러온 폴더를 읽거나 제안을 요청하는 것입니다(제안은 프레임에서 여전히 허용해야 합니다). 또한 프레임 위에 가짜 패널을 그려 직접 토큰을 물을 수도 있습니다. 프레임이 이상해 보이거나 있어야 할 곳에 없으면 토큰을 입력하지 마세요. 어느 쪽도 프레임이 가진 토큰을 읽게 해 주지는 않습니다. 필요한 저장소로 제한한 토큰을 쓰세요. 팀에는 토큰을 서버에 두는 자체 호스팅 서버 모드(곧 제공)가 있습니다.

GitLab.com

창에는 forge 목록이 있으며 GitHub와 GitLab.com 중에서 고릅니다. GitLab에서는 범위 api의 개인 액세스 토큰을 입력하거나 GitLab으로 로그인(PKCE를 쓰는 OAuth 인증 코드, 시크릿 없음)을 누릅니다. 로그인하면 프레임 사이트의 작은 창이 열리고 그곳으로 돌아옵니다. 작업 중인 playground 페이지는 다른 곳으로 이동하지 않습니다. 그 토큰은 프레임의 메모리에만 있고(이 기기에 기억을 선택해도 기기에 기억되지 않음), 만료 전에 스스로 갱신되며, 연결 해제가 GitLab에서 토큰을 취소합니다. 프레임이 시작하지 않은 로그인이나 재사용한 링크는 거부됩니다. 로그인은 사이트의 GitLab 애플리케이션이 등록된 뒤에 쓸 수 있으며, 그전에는 개인 액세스 토큰을 사용하세요.

요청은 api.github.com과 gitlab.com으로만 가며, 프레임에서만 나갑니다. playground 페이지는 요청을 보내지 않고 referrer도 보내지 않습니다.

왜 api인가요? GitLab의 범위 표는 write_repository를 “Does not support API authentication”이라고 적고 있습니다. 이는 HTTP를 통한 git 전용이며 GitLab이 CORS 없이 제공하므로 브라우저에서는 쓸 수 없습니다. 변경 제안은 REST API를 쓰고, 여기에는 api(“complete read and write access to the API”)가 필요합니다. 도난당한 api 토큰은 그 사용자가 API로 할 수 있는 모든 일을, 그 사용자가 닿는 모든 프로젝트에서 할 수 있습니다. 발표 자료 저장소로 제한한 프로젝트 또는 그룹 액세스 토큰, 또는 발표 자료 프로젝트의 구성원일 뿐인 전용 GitLab 계정을 쓰세요.

보안

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

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

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

Playground는 로그인 뒤에서 자신의 컴퓨터로 서비스할 수 있습니다. 셀프 호스팅을 참고하세요.

크기와 속도

모듈은 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는 바뀐 슬라이드만 렌더링하고, 미리 보기에서도 그 슬라이드만 교체합니다.