https://jazzify.ai/

1<!doctype html>
2<html lang="ko">
3  <head>
4    <meta charset="UTF-8" />
5    <!-- CSP — XSS 발생 시의 완화층 (Fable.md 보안 finding).
6         실용 정책: 핵심은 외부 출처 스크립트 차단(youtube iframe_api만 허용)과
7         frame/object 제한. 'unsafe-inline' script는 Vite dev의 react-refresh
8         preamble 때문에 필요하고, connect-src https:/wss:는 가변 RAG 터널
9         (*.trycloudflare.com)·smplr 사운드폰트 CDN·백엔드를 포괄한다.
10         accounts.google.com 은 Google 로그인(GIS) 때문에 script/style/frame 셋 다
11         필요하다 — 스크립트만 허용하면 버튼이 iframe 이라 렌더되지 않는다.
12         'wasm-unsafe-eval' 은 기기 OCR(tesseract.js, public/tesseract/)과 pdf.js 의 JBIG2·JPEG2000
13         디코더(public/pdfjs-wasm/) 때문 — 내 리얼북 곡 감지가 WebAssembly 로 돈다(2026-09-20). eval 은 여전히 막힌다. -->
14    <meta http-equiv="Content-Security-Policy" content="
15      default-src 'self';
16      script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' https://www.youtube.com https://s.ytimg.com https://accounts.google.com;
17      style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdn.jsdelivr.net https://accounts.google.com;
18      font-src 'self' data: https://fonts.gstatic.com https://cdn.jsdelivr.net;
19      img-src 'self' data: blob: https:;
20      media-src 'self' blob: https:;
21      connect-src 'self' https: wss: ws: blob: data:;
22      frame-src https://www.youtube.com https://www.youtube-nocookie.com https://accounts.google.com;
23      worker-src 'self' blob:;
24      object-src 'none';
25      base-uri 'self'">
26    <!-- 파비콘 — 앱 로고(public/logo/LOGO_Jazzify.png)에서 생성. 예전엔 색소폰 이모지를 넣은
27         SVG 라 브라우저·OS 마다 다른 모양으로 그려졌다(이모지 폰트 의존).
28         .ico 는 16~256px 다중 해상도라 탭·북마크·즐겨찾기에서 각각 선명하다. -->
29    <link rel="icon" href="/favicon.ico" sizes="any" />
30    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
31    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
32    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no" />
33    <meta name="mobile-web-app-capable" content="yes" />
34    <meta name="apple-mobile-web-app-capable" content="yes" />
35    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
36    <!-- JS 부팅 전 기본값 — 라이트 상단 바(barTop) 색. 부팅 뒤에는 Root 가
37         지금 테마에 맞춰 갱신한다(useThemeColorMeta). 예전엔 #ffffff 로 고정이라
38         다크로 쓰면 주소창·상태바만 흰 띠로 남았다(2026-09-02). -->
39    <meta name="theme-color" content="#F8F8F8" />
40    <title>Jazzify</title>
41    <link rel="preconnect" href="https://fonts.googleapis.com">
42    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
43    <!-- Google 로그인(GIS) — 연결만 미리 열어 둔다. 스크립트 자체(266KB)는 로그인이
44         필요해질 때 받지만, DNS+TLS 가 실측 0.73초라 그만큼을 대기에서 뺀다. -->
45    <link rel="preconnect" href="https://accounts.google.com" crossorigin>
46    <!-- 브랜드 이미지 — <img> 는 JS 부팅 후에야 생겨서 로고가 몇 초 늦게
47         '뿅' 하고 떴다(2026-09-01 신고). HTML 단계에서 미리 받아 두면 React 가
48         그릴 때는 이미 캐시에 있다. webp 축소판(33KB)이라 낭비돼도 무시할 수준.
49         채팅 빈 화면용 LOGO_Jazzify@256 은 preload 에서 뺐다 — 대부분 화면이 몇 초
50         안에 안 써서 브라우저가 매 페이지 경고를 냈다(2026-09-06 점검 B4).
51         원본 PNG 는 PDF 내보내기 전용으로 남아 있다 — 지우지 말 것. -->
52    <link rel="preload" as="image" href="/[email protected]">
53    <!-- Preload the chord font at top priority so it's already downloaded by
54         the time React renders the lead-sheet — eliminates the brief flash of
55         DM Sans where chord symbols look broken. crossorigin matches the
56         @font-face request so the browser actually uses the preloaded copy. -->
57    <link rel="preload" as="font" type="font/otf" href="/MuseJazzText.otf" crossorigin>
58    <!-- Bravura: SMuFL 표준 음악 폰트. 팔레트·툴바 버튼의 악보 기호(임시표·
59         아티큘레이션·음자리표·세뇨/코다 …)를 실제 악보와 같은 글리프로 찍는다.

60         (PDF 내보내기(scoreToPdf)에서도 같은 파일을 임베드한다)
61
62         fetchpriority=low: 둘 다 468KB인데 **악보 화면에서만** 쓰인다(홈·채팅엔
63         글리프가 없다). 미리 받는 것 자체는 그대로 두되 — 빼면 첫 악보에서
64         font-display:block 이 그대로 빈칸으로 나간다 — 첫 화면 JS 뒤로 순서만
65         물린다. 지원 안 하는 브라우저는 속성을 무시해 예전 동작 그대로다. -->
66    <link rel="preload" as="font" type="font/woff2" href="/bravura.woff2" crossorigin fetchpriority="low">
67    <link rel="preload" as="font" type="font/woff2" href="/petaluma.woff2" crossorigin fetchpriority="low">
68    <style>
69      /* Petaluma(Steinberg, OFL) — 손글씨 재즈 음악 폰트. **음자리표만** 이 폰트로
70         그린다(사용자 지시 2026-08-25: 리얼북풍 높은음자리표). SMuFL 표준이라
71         Bravura 와 같은 코드포인트(U+E050 등)를 쓴다 — VexFlow 번들에서 추출. */
72      @font-face {
73        font-family: 'Petaluma';
74        src: url('/petaluma.woff2') format('woff2');
75        font-weight: normal;
76        font-style: normal;
77        /* block — SMuFL 은 사설영역(U+E0xx) 코드포인트라 폴백 폰트에 글리프가
78           **아예 없다**. swap 이면 첫 페인트가 두부(tofu)·빈칸으로 나가고 폰트가
79           온 뒤에야 음표가 생겨 "음표가 깨져 보인다"가 된다(2026-08-25 실측:
80           첫 로드 시 document.fonts.check('40px Petaluma') === false).
81           Bravura 와 같은 block 으로 맞춘다. */
82        font-display: block;
83      }
84      @font-face {
85        font-family: 'Bravura';
86        src: url('/bravura.woff2') format('woff2');
87        font-weight: normal;
88        font-style: normal;
89        font-display: block;
90      }
91      @font-face {
92        font-family: 'MuseJazz Text';
93        src: url('/MuseJazzText.otf') format('opentype');
94        font-weight: normal;
95        font-style: normal;
96        /* `block` over `swap`: keeps chord text invisible for up to 3s so it
97           never paints with the wrong (DM Sans) glyphs in SVG, where browsers
98           don't always re-flow after a font swap. Combined with the preload
99           above, the wait is typically <100ms in practice. */
100        font-display: block;
101      }
102      /* Caveat(OFL) — 리드시트 A/B 섹션 라벨의 필기체. Google Fonts CDN 이 아니라
103         **자체 호스팅**이다: (1) 네이티브 셸·오프라인에서 CDN 폰트는 깨진다
104         (scoreFont.ts 의 Finale Ash 와 같은 이유), (2) A4 PDF 내보내기가
105         `chartToA4Pdf` 의 LOCAL_FONTS 로 같은 파일을 임베드해야 인쇄물의 라벨이
106         화면과 같은 서체로 나온다. latin 서브셋만 받아 51KB. */
107      @font-face {
108        font-family: 'Caveat';
109        src: url('/caveat.woff2') format('woff2');
110        font-weight: 700;
111        font-style: normal;
112        /* swap — 폴백(MuseJazz→Pretendard)에도 A/B/C 글리프가 있어 빈칸이 되지
113           않는다. 음악 폰트들과 달리 block 으로 막을 이유가 없다. */
114        font-display: swap;
115      }
116    </style>
117    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&family=Noto+Serif+KR:wght@400;600&family=Noto+Serif:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Oswald:wght@600;700&display=swap" rel="stylesheet">
118    <link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" rel="stylesheet">
119    

119<script type="module" crossorigin src="/assets/index-BuBZ3kKc.js"></script>

119
120    <link rel="modulepreload" crossorigin href="/assets/chunk-CMxvf4Kt.js">
121    <link rel="modulepreload" crossorigin href="/assets/preload-helper-zJ_50EbN.js">
122    <link rel="modulepreload" crossorigin href="/assets/dist-DE1p5HKj.js">
123    <link rel="modulepreload" crossorigin href="/assets/react-DAHyUmas.js">
124    <link rel="modulepreload" crossorigin href="/assets/chunk-6CSD65Y2-C2C_Tdf3.js">
125    <link rel="modulepreload" crossorigin href="/assets/jsx-runtime-sLPvdpSW.js">
126    <link rel="modulepreload" crossorigin href="/assets/styled-components.browser.esm-Txv4jtxo.js">
127    <link rel="modulepreload" crossorigin href="/assets/auth-BwDQ6cyA.js">
128    <link rel="modulepreload" crossorigin href="/assets/apiError-D_7tBKNE.js">
129    <link rel="modulepreload" crossorigin href="/assets/sheetStaves-BxOI0gww.js">
130    <link rel="modulepreload" crossorigin href="/assets/licks-DrllvYWo.js">
131    <link rel="modulepreload" crossorigin href="/assets/publicOrigin-DZPeZN2k.js">
132    <link rel="modulepreload" crossorigin href="/assets/sessions-C6c6cJG-.js">
133    <link rel="modulepreload" crossorigin href="/assets/platform-Btlt7Ur2.js">
134    <link rel="modulepreload" crossorigin href="/assets/nativeSheet-C9KrhAKC.js">
135    <link rel="modulepreload" crossorigin href="/assets/GlassSquare-B49-Jdjg.js">
136    <link rel="modulepreload" crossorigin href="/assets/notifications-Db1r7PwO.js">
137    <link rel="modulepreload" crossorigin href="/assets/spelling-D184s6u9.js">
138    <link rel="modulepreload" crossorigin href="/assets/leadSheetChordEdit-BqH1MXmC.js">
139    <link rel="modulepreload" crossorigin href="/assets/theme-DhDuWyCj.js">
140    <link rel="modulepreload" crossorigin href="/assets/AppPreviewContext-CkWtYgry.js">
141    <link rel="modulepreload" crossorigin href="/assets/useDialogKeys-Cc7PNGat.js">
142    <link rel="modulepreload" crossorigin href="/assets/jazz-harmony-CLONuMqd.js">
143    <link rel="modulepreload" crossorigin href="/assets/playerSettings-BfZEV5Zn.js">
144    <link rel="modulepreload" crossorigin href="/assets/swing-Bx1pL2bX.js">
145    <link rel="modulepreload" crossorigin href="/assets/engine-CGgsgEMp.js">
146    <link rel="modulepreload" crossorigin href="/assets/parseChordParts-C8VdbgWG.js">
147    <link rel="modulepreload" crossorigin href="/assets/omrImageStore-qQAc2obu.js">
148    <link rel="modulepreload" crossorigin href="/assets/prefsStore-EwSU00I2.js">
149    <link rel="modulepreload" crossorigin href="/assets/pagePrefs-DUs9wWQZ.js">
150  </head>
151  <body>
152    <div id="root"></div>
153  </body>
154</html>