왜 modernGraphTool인가?
오디오 측정 커뮤니티의 눈높이는, 한때 제 몫을 충실히 해낸 도구들이 감당할 수 있는 선을 이미 넘어섰습니다.
modernGraphTool은 최신 웹 기술과 모듈화된 아키텍처 위에 처음부터 새로 작성한 도구입니다. 측정 데이터베이스 운영자와 오디오 애호가를 비롯한 커뮤니티의 요구에 맞춰 함께 진화하도록 설계했습니다.
CrinGraph의 유산
CrinGraph는 2019년경 등장한 주파수 응답 곡선 시각화 도구로, 오디오 애호가 커뮤니티에서 사실상 표준으로 자리잡았습니다.
측정값을 불러오고, 곡선을 겹치고, 헤드폰을 비교하는 작업을 단순하면서도 효과적으로 해내며 본래의 역할을 훌륭히 수행했습니다.
squig.link 네트워크의 측정 데이터베이스 대부분은 지금도 CrinGraph나 그 파생 버전을 씁니다. CrinGraph가 FR 데이터 시각화 방식에 남긴 영향은 누구도 부정하기 어렵습니다.
modernGraphTool은 CrinGraph를 '부정'하는 도구가 아닙니다. 오히려 계승하는 도구에 가깝습니다.
데이터 형식, 폴더 구조, phone_book.json을 비롯한 데이터 구조를 그대로 유지했습니다. 기존 측정 데이터를 변환할 필요 없이 곧바로 사용할 수 있습니다.
어디서부터 어려워졌는가
커뮤니티가 자라면서 새로운 기능들이 차츰 필요해졌지만, CrinGraph의 원래 설계로는 이를 모두 담아내기 어려웠습니다.
단일 스크립트가 모든 것을 처리하는 구조
CrinGraph는 데이터 로딩, 그래프 렌더링, UI 구성, 상태 관리 같은 핵심 기능이 수천 줄에 달하는 단일 JavaScript 파일 안에 복잡하게 얽혀 있습니다.
그래서 숙련된 개발자라도 다른 부분을 망가뜨리지 않고 특정 부분만 손대기가 까다롭습니다. 프로그래밍 경험이 없는 운영자에게는 사실상 불가능에 가깝죠.
흩어진 스타일
화면을 그리는 코드는 여러 CSS 파일에 흩어져 있고, JavaScript 곳곳의 createElement 호출 안에 인라인 스타일로 박혀 있기도 합니다. 도구 전체의 외관을 한 번에 바꾸려고 열어볼 만한 단일 파일이 없습니다.
색상이나 외관을 손보려면 CSS와 JS를 양쪽 다 뒤져가며, 빠뜨린 곳이 없기를 바라야 합니다.
여러 갈래로 갈라진 버전들, 기능의 파편화
Diffuse Field 타겟용 선호도 조정 기능처럼 새로운 요구가 등장할 때마다, 애호가들은 CrinGraph 프로젝트 전체를 포크해 핵심 스크립트를 직접 고쳐야 했습니다.
'하나의 스크립트가 모든 것을 처리한다'는 구조의 복잡성 탓에, 한 포크에 추가된 기능을 다른 포크로 옮기는 일도 만만치 않았습니다. 운영자들은 자신이 원하는 기능 조합을 골라야 했고, 여러 포크의 장점을 함께 누릴 길은 없었습니다.
modernGraphTool은 어떻게 다른가
modernGraphTool은 SvelteKit, TypeScript, D3.js 위에 완전히 새로 만든 그래프 도구입니다.
낡은 코드베이스에 패치를 덕지덕지 붙이는 대신, 처음부터 커뮤니티가 필요로 하는 기능을 염두에 두고 설계했습니다.
| CrinGraph / 포크 | modernGraphTool | |
|---|---|---|
| 아키텍처 | 수천 줄에 달하는 단일 JS 스크립트 | 모듈화된 SvelteKit 컴포넌트 (TypeScript) |
| 테마 | 여러 CSS 파일 + 인라인 스타일 | CSS 변수 기반 단일 theme.css + 테마 생성기 |
| 타겟 조정 | 포크에 따라 다름. 타겟 하나에 하드코딩된 3~4개 필터 | 다수의 타겟 조정 가능, 설정 가능한 필터, 필터 프리셋 |
| 파라메트릭 EQ | 포크마다 파편화된 외부 플러그인 | AutoEQ, 실시간 미리 듣기, 인터랙티브 EQ를 기본 제공 |
| Device PEQ 브리지 | jeromeof의 외부 플러그인 | 내장 컴포넌트로 흡수 및 최적화 적용 |
| 다국어 | 미지원 | 영어 + 한국어 (컴파일 타임 i18n, 확장 가능) |
| 성능 | 번들링 없는 vanilla JS | 각종 코드 간소화 및 압축 기술 적용 |
| 업데이트 | 수동 파일 교체 | CDN 모드 사용 시 자동 업데이트 적용 |
| 데이터 형식 | phone_book.json + FR 텍스트 파일 | 동일한 형식 — 그대로 호환 |
운영자를 위한 설계
modernGraphTool은 측정 데이터베이스 운영자가 소스 코드를 건드리지 않고도 사이트를 설치·커스터마이징·유지보수하도록 만들었습니다.
- 하나의 통합 설정 파일 —
config.js가 초기 기기, 타겟, 정규화, 워터마크, 기능 토글 등 거의 모든 것을 제어합니다. - 하나의 통합 테마 파일 —
theme.css는 그래프 색상과 UI 액센트 등을 CSS 커스텀 속성으로 정의합니다. 온라인 Theme Generator가 자동으로 만들어 줍니다. - CDN 배포 — 페이지를 CDN에 연결해 두면 업데이트를 알아서 받습니다. 데이터와 설정값은 운영자 서버에 그대로 남습니다.
- 데이터 호환성 — 기존
data/폴더와phone_book.json을 그대로 씁니다. 변환도, 전환 스크립트도 필요 없습니다. - 이중 호스팅 — 원한다면 기존 CrinGraph와 같은 도메인에서 함께 운영해 점진적으로 전환할 수 있습니다.
활발한 유지보수
CrinGraph와 그 주요 포크는 더 이상 활발히 유지보수되지 않습니다. modernGraphTool은 다릅니다. 개발자 본인이 여러분과 같은 'Squiggler'이자 오디오 리뷰어이기도 합니다.
그래서 새로운 기능, 버그 수정, 각종 개선 사항이 꾸준히 배포됩니다. CDN 모드를 쓰면 이러한 내용이 반영된 업데이트가 자동으로 적용됩니다.
환경을 구성하려면 환경 구성 가이드로, 이미 modernGraphTool을 실행 중이라면 페이지 커스터마이징으로 바로 이동하세요.