배포 방식 고르기
modernGraphTool은 네 가지 배포 방식을 제공합니다. 먼저 정할 것은 이미 웹 서버가 있는지 여부입니다. 없다면 GitHub Pages가 무료로 하나 제공해 줍니다. 그다음은 업데이트와 커스터마이징을 어디까지 직접 손대고 싶은지에 따라 고르세요.
| 옵션 | 적합한 운영자 | 업데이트 | 커스터마이징 | 하위 디렉터리 호스팅 |
|---|---|---|---|---|
| GitHub Pages | 호스팅이 없는 운영자 | 자동 | 설정·테마·데이터·HTML 메타데이터 | 자동으로 처리됨 |
| CDN 배포 (권장) | 대부분의 운영자 | 자동 | 설정·테마·데이터 | 설정 한 줄(BASE_PATH) 필요 |
| 사전 빌드 릴리스 | 통제된 배포 환경 | 수동(재다운로드) | 설정·테마·데이터·HTML 메타데이터 | 추가 설정 없이 동작 |
| 소스에서 빌드 | 개발자, 포크 운영자 | 수동(git pull + 빌드) | 전부 | 추가 설정 없이 동작 |
앱 번들을 제외한 데이터·설정·테마는 모든 옵션에서 똑같습니다. 나중에 옵션을 바꾸더라도 데이터베이스를 다시 만들 필요 없이 index.html만 바꾸면 됩니다.
GitHub이 제공하는 무료 호스팅으로, 전 과정을 브라우저에서 처리합니다. 서버도 FTP도 설치할 프로그램도 없습니다. 동작하는 사이트가 이미 들어 있는 템플릿 저장소를 복사하고, Pages를 켠 다음, 예시 측정 데이터를 본인 것으로 바꾸면 됩니다. 내부적으로는 CDN 배포이므로 업데이트가 자동이고, 아래에서 설명하는 BASE_PATH 문제도 대신 해결해 줍니다.
단, 공개 저장소가 필요하므로 비공개 데이터베이스에는 쓸 수 없습니다.
서버에는 최소한의 index.html 로더와 config.js, theme.css, data/, assets/만 둡니다. 앱 코드 자체는 jsDelivr에서 받아오며, 새 버전이 나오면 알아서 갱신됩니다. 수동 업데이트도, 재업로드도 필요 없는 가장 간편한 방식입니다.
사이트가 /headphones/ 같은 하위 디렉터리에 있다면(squig.link에서 흔한 패턴입니다. 같은 서브도메인에 루트 이어폰 데이터베이스와 /headphones/ 헤드폰 데이터베이스를 함께 두는 식입니다) config.js에 CDN_MODE.BASE_PATH를 설정해야 합니다. 한 줄짜리지만 빠뜨리기 쉬우니 CDN 배포 가이드에서 자세한 설명을 확인하세요.
dist/ 폴더 전체를 다운로드해 서버에 올립니다. 어떤 버전을 언제 띄울지 직접 정할 수 있고, jsDelivr에 런타임 의존성이 없으며, 외부 서버와 단절된 환경에서도 잘 돌아가고, 하위 디렉터리 호스팅도 추가 설정 없이 바로 됩니다. 단점은 새 릴리스가 나올 때마다 다시 받아 다시 올려야 한다는 점입니다.
저장소를 클론해 원하는 만큼 손본 뒤, dist/ 폴더를 직접 빌드합니다. 개발자에게 적합합니다. config.js로 설정할 수 있는 범위 이상의 커스터마이징이 필요할 때 선택할 수 있습니다.
준비물
섹션 제목: “준비물”브라우저에서 편집하는 GitHub Pages를 제외하면, 모든 옵션에 다음이 필요합니다.
- 프로젝트 파일 — 옵션에 따라 릴리스를 받거나 저장소를 클론합니다.
- 텍스트 에디터 —
config.js,theme.css,phone_book.json을 수정할 때 씁니다. Visual Studio Code는 Windows·macOS·Linux에서 무료로 쓸 수 있고, 입력하는 동안 실수를 짚어 줍니다.
설정 파일 편집기, phone_book.json 편집기, 테마 생성기를 쓰면 이 파일들을 직접 작성하지 않고도 대부분의 편집을 처리할 수 있습니다.