ARK Point Web Deck Template

PPT·Keynote·PDF 발표자료를 설치 없는 웹 슬라이드로 배포하는 정적 템플릿입니다.

• PC 목차와 슬라이드 탐색
• ← ↑ → ↓, Page Up/Down, Space, Home/End 키 지원
• 슬라이드만 꽉 차는 발표용 전체화면
• 모바일 스와이프와 화면 가장자리 이동
• 링크 공유와 선택적 PDF 다운로드
• Vercel 정적 배포, 서버·DB·API 키 불필요

1. 가장 빠른 시작

git clone https://github.com/teo-hash/arkpoint-web-deck-template.git
cd arkpoint-web-deck-template
python3 -m http.server 4173

브라우저에서 http://localhost:4173을 열면 샘플 발표자료가 표시됩니다.

2. 내 PPT·제안서로 교체하기

A. PPT 또는 Keynote를 PDF로 내보내기

• PowerPoint: 파일 → 내보내기 → PDF
• Keynote: 파일 → 다음으로 내보내기 → PDF
• 슬라이드 비율은 16:9를 권장합니다.

B. PDF를 웹 이미지로 변환하기

python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
python scripts/pdf_to_webp.py /path/to/presentation.pdf \
  --title "발표 제목" \
  --author "이름 · 회사"

원본 PDF 다운로드 버튼도 넣으려면 --include-pdf를 추가합니다.

python scripts/pdf_to_webp.py /path/to/presentation.pdf --include-pdf

스크립트가 자동으로 수행하는 작업:

1. 각 PDF 페이지를 고해상도 WebP로 변환
2. 목차용 썸네일 생성
3. deck.json의 슬라이드 목록 갱신
4. 선택 시 assets/deck.pdf에 원본 PDF 복사

C. 제목과 링크 다듬기

deck.json만 수정하면 됩니다.

{
  "title": "발표 제목",
  "subtitle": "공유할 때 표시할 한 줄 설명",
  "author": "이름 · 조직",
  "brand": {
    "label": "MY\nBRAND",
    "url": "https://example.com"
  },
  "accent": "#e4ff47",
  "links": [
    { "label": "홈페이지", "url": "https://example.com" }
  ],
  "download": null,
  "slides": []
}

PDF 변환 후 각 슬라이드의 section, title, alt를 고치면 목차와 접근성 문구가 더 좋아집니다.

3. 검증

python scripts/validate_deck.py
node --check app.js
python3 -m http.server 4173

확인할 항목:

• PC에서 목차·키보드 이동
• 전체화면에서 슬라이드만 화면 전체에 표시되는지
• 390px 안팎 모바일에서 스와이프와 버튼이 잘 작동하는지
• 모든 슬라이드 이미지가 표시되는지

GitHub Actions도 push와 pull request마다 validate_deck.py를 실행합니다.

4. Vercel에 배포하기

Vercel 웹에서

1. Vercel에서 Add New → Project
2. 이 GitHub 저장소를 Import
3. Framework Preset은 Other
4. 별도 Build Command 없이 Deploy

CLI에서

npx vercel
npx vercel --prod

배포 후 공개 URL, 첫 슬라이드, app.js, styles.css가 모두 200인지 확인하세요.

폴더 구조

.
├── index.html              # 화면 구조
├── styles.css              # 데스크톱·모바일·전체화면 스타일
├── app.js                  # 키보드·스와이프·목차·공유 기능
├── deck.json               # 제목·링크·슬라이드 설정
├── slides/                 # 슬라이드와 썸네일
├── assets/                 # 아이콘과 선택적 PDF
├── scripts/
│   ├── pdf_to_webp.py      # PDF 변환기
│   └── validate_deck.py    # 배포 전 검증
└── vercel.json

운영 팁

• 슬라이드 원본을 바꾼 뒤에는 변환 스크립트를 다시 실행하고 배포하세요.
• 공개하면 안 되는 고객명·재무정보·개인정보가 이미지와 PDF에 남아 있지 않은지 먼저 확인하세요.
• PDF 다운로드가 필요 없으면 download를 null로 유지하세요.
• 발표 중에는 F 또는 우측 상단 전체화면을 누르면 목차와 상단 메뉴 없이 슬라이드만 표시됩니다.

라이선스

MIT License. 팀 내부·고객 제안·개인 프로젝트에 자유롭게 수정해 사용할 수 있습니다.

Built by ARK Point.