아이패드·PC에서 보는 피아노 악보 뷰어 — https://akbo.pages.dev
정적 사이트라 빌드 서버가 필요 없습니다.
저장소에는 악보 이미지가 없습니다. 저작권 때문에
raw/·data/와 빌드 산출물 (site/scores/,site/library.json)을 제외했습니다. 클론만으로는 빌드가 되지 않으며, 로컬data/(곡별 폴더 구조)를 그대로 두고 빌드해야 합니다. 악보 원본은 별도로 백업하세요.
raw/ 원본 스크린샷 121장 (UUID 파일명, 손대지 않음)
data/ 곡별 39개 폴더 · p1.JPEG, p2.JPEG … ← 편집은 여기서
tools/ pieces.json(메타데이터) · build.py · make_icons.py
site/ 배포되는 정적 사이트 (빌드 산출물)
python3 tools/build.py # 변경분만 WebP 변환 + library.json 생성
python3 tools/build.py --force # 전부 다시 변환data/의 JPEG을 WebP(q82)로 변환해 site/scores/<id>/에 넣고, 목록 데이터인
site/library.json을 만듭니다. 121페이지 39MB → 12MB.
곡 제목·작곡가·태그는 tools/pieces.json 에서 고칩니다. dir은 data/ 폴더명,
id는 URL 슬러그(바꾸면 링크와 저장된 진도가 끊깁니다).
python3 -m http.server 8788 -d site
# http://127.0.0.1:8788bash tools/deploy.sh # verify → build → deploy 한 번에또는 직접:
wrangler pages deploy site --project-name akbo프로젝트 이름은 akbo 입니다 (akbo.pages.dev). 다른 이름을 넣으면 새 프로젝트를
만들지 묻습니다.
푸시해도 자동 배포되지 않습니다. Pages 프로젝트가 저장소에 연결되지 않은 직접 업로드
방식이고, 애초에 data/·site/scores/·site/library.json을 저장소에서 빼두었기 때문에
Cloudflare가 저장소를 받아 빌드해도 악보가 없습니다. 배포는 항상 로컬에서 수동으로 합니다.
site/_headers가 캐시 정책을 담당합니다 — 악보 이미지는 1년 immutable,
library.json과 sw.js는 매번 재검증, version.json은 no-store.
build.py는 site/version.json 에 library.json + 앱 셸(index.html·app.js·
styles.css·sw.js)의 해시를 남깁니다. 내용이 같으면 다시 빌드해도 값이 그대로이고
(generated 타임스탬프는 해시에서 제외), 악보나 코드가 바뀌면 달라집니다. 앱은 이 값을
부팅 때 읽어두고 돌아올 때마다 비교해서, 새 배포가 있으면 목록 화면에
"새 버전이 있습니다 · 새로고침" 을 띄웁니다. 누르면 서비스 워커가 셸을 다시 받은 뒤
새로고침하므로 한 번이면 반영됩니다 (그냥 새로고침하면 stale-while-revalidate 때문에
옛 셸이 한 번 더 나옵니다). 악보를 보는 중에는 뜨지 않고, 목록으로 나올 때 보입니다.
GitHub Pages로 옮기려면
site/를 그대로 올리면 됩니다. 모든 경로가 상대경로라ziwon.github.io/score-leaf같은 서브패스에서도 그대로 동작합니다.
| 페이지 넘김 | 화면 좌·우 탭, 좌우 스와이프, ← → Space PageUp/Down |
| UI 숨김/표시 | 화면 가운데 탭 |
| 확대·축소 | 두 손가락 핀치, 가운데 더블탭, Ctrl+휠, + - |
| 확대 후 이동 | 한 손가락 드래그(관성), 마우스 드래그, 휠 |
| 맞춤으로 되돌리기 | 좌하단 배율 배지 탭, 0 |
| 두 장 보기 | S (가로 화면 + 700px 이상에서 동작) |
| 폭 맞춤 | W — 세로 드래그로 스크롤, 가로 스와이프는 페이지 넘김 |
| 전체화면 | F |
| 인쇄 | 상단 프린터 버튼, Ctrl/⌘+P |
| 목록으로 | Esc |
| 검색 | 목록에서 / |
확대 배율은 페이지를 넘겨도 유지됩니다. 맞춤 배율일 때는 넘길 때마다 맨 위로 돌아갑니다.
인쇄하면 지금 보는 장이 아니라 곡 전체가 한 장에 한 면씩 나갑니다. 몇 쪽만 뽑으려면 브라우저 인쇄 창의 페이지 범위를 쓰세요. A4 세로가 기준이지만, 용지와 여백을 몰라도 한 장을 넘지 않도록 박스 높이를 너비 기준 백분율로 잡아서 Letter 로 뽑아도 페이지가 쪼개지지 않습니다. 아이패드에서는 프린터 버튼 → AirPrint 로 나갑니다.
즐겨찾기·마지막으로 본 페이지·테마는 브라우저에 저장됩니다. 목록 우측 상단 ↓ 버튼을 누르면 전체 악보를 캐시에 담아 인터넷 없이도 열립니다. 아이패드에서는 Safari 공유 → "홈 화면에 추가"로 앱처럼 쓸 수 있습니다.
쇼팽·차이콥스키·헨델·시벨리우스를 뺀 나머지는 저작권이 살아있는 곡입니다.
.pages.dev는 기본이 공개 URL이므로, 비공개로 두려면 Cloudflare Access
(Zero Trust → Access → Applications)를 앞에 걸어 지정한 이메일만 열도록 설정하세요.