환경 구성
이 페이지는 설치 단계에서 정해야 할 사항을 정리하고, 상황에 맞는 배포 옵션으로 안내합니다. 옵션마다 아래 표에 링크된 전용 가이드가 따로 있습니다.
준비물
- modernGraphTool 프로젝트 파일 — 고른 배포 옵션에 따라 사전 빌드 릴리스를 받거나 소스 저장소를 클론해야 합니다.
- 텍스트 에디터 —
config.js,theme.css같은 설정 파일을 수정할 때 씁니다. 구문 강조와 자동 완성을 지원하는 Visual Studio Code를 권장합니다.
GitHub Pages 옵션은 둘 다 필요 없습니다. 템플릿 저장소에서 시작해 브라우저에서 편집합니다.
배포 옵션
modernGraphTool은 네 가지 배포 방식을 제공합니다. 먼저 정할 것은 이미 웹 서버가 있는지 여부입니다. 없다면 GitHub Pages가 무료로 하나 제공해 줍니다. 그다음은 업데이트와 커스터마이징을 어디까지 직접 손대고 싶은지에 따라 고르세요.
| 옵션 | 적합한 운영자 | 업데이트 | 커스터마이징 | 하위 디렉터리 호스팅 |
|---|---|---|---|---|
| GitHub Pages | 호스팅이 없는 운영자 | 자동 | 설정·테마·데이터·HTML 메타데이터 | 자동으로 처리됨 |
| CDN 배포 (권장) | 대부분의 운영자 | 자동 | 설정·테마·데이터 | 설정 한 줄(BASE_PATH) 필요 |
| 사전 빌드 릴리스 | 통제된 배포 환경 | 수동(재다운로드) | 설정·테마·데이터·HTML 메타데이터 | 추가 설정 없이 동작 |
| 소스에서 빌드 | 개발자, 포크 운영자 | 수동(git pull + 빌드) | 전부 | 추가 설정 없이 동작 |
GitHub Pages
GitHub이 제공하는 무료 호스팅으로, 전 과정을 브라우저에서 처리합니다. 서버도 FTP도 설치할 프로그램도 없습니다. 동작하는 사이트가 이미 들어 있는 템플릿 저장소를 복사하고, Pages를 켠 다음, 예시 측정 데이터를 본인 것으로 바꾸면 됩니다. 내부적으로는 CDN 배포이므로 업데이트가 자동이고, 아래에서 설명하는 BASE_PATH 문제도 대신 해결해 줍니다.
단, 공개 저장소가 필요하므로 비공개 데이터베이스에는 쓸 수 없습니다.
CDN 배포
서버에는 최소한의 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로 설정할 수 있는 범위 이상의 커스터마이징이 필요할 때 선택할 수 있습니다.
텍스트 에디터 설치
텍스트 에디터는 여러 가지가 있지만, 코드 강조와 자동 완성 같은 편의 기능을 갖춘 Visual Studio Code를 권장합니다.
VS Code는 누구나 무료로 받을 수 있고, Windows·macOS·Linux를 모두 지원합니다.
- VS Code 웹사이트에서 운영체제에 맞는 설치 파일을 받아 설치합니다.
- modernGraphTool 프로젝트 폴더(또는 압축을 푼 릴리스 폴더)를 VS Code로 엽니다.
- 이제 설정 파일을 수정하고 데이터를 관리할 준비가 끝났습니다.