페이지 커스터마이징

modernGraphTool 페이지의 초기 표시 내용과 디자인 테마 등을 운영자의 필요에 맞게 자유롭게 바꿀 수 있습니다.

주로 index.html, theme.css, config.js 세 파일을 편집합니다. 단순한 것부터 복잡한 것 순서로 정리되어 있습니다.

페이지 메타데이터 변경 (`index.html`)

index.html 파일은 modernGraphTool의 기본 HTML 구조와 메타데이터를 정의합니다. 페이지 제목, 설명, 미리보기 이미지, 파비콘 등 브라우저와 소셜 미디어 스크래퍼가 읽는 <head> 필드가 모두 여기에 들어 있습니다.

`TITLE`

<title>modernGraphTool</title>
<meta name="title" content="modernGraphTool" />
<meta property="og:title" content="modernGraphTool" />

페이지 제목을 설정합니다.

`DESCRIPTION`

<meta
  name="description"
  content="View and compare frequency response graphs for earphones/headphones."
/>
<meta
  property="og:description"
  content="View and compare frequency response graphs for earphones/headphones."
/>

페이지 설명을 설정합니다.

`KEYWORDS`

페이지 키워드를 설정합니다 (검색 엔진 최적화에 사용).

<meta
  name="keywords"
  content="earphone,headphone,IEM,frequency response,graph,comparison,measurement,FR"
/>

`URL` / `LINK`

페이지 URL과 링크를 설정합니다.

<meta property="og:url" content="/?" /> <link rel="canonical" href="/?" />

`IMAGE`

페이지 미리보기 이미지를 설정합니다.

<meta property="og:image" content="/preview.png" />

`FAVICON`

페이지 파비콘 (탭 아이콘)을 설정합니다.

<link rel="icon" type="image/png" sizes="32x32" href="/favicon.png" />

페이지 스타일 커스터마이징 (`theme.css`)

theme.css 파일은 modernGraphTool의 시각 테마를 구동하는 CSS 커스텀 속성(변수)을 담고 있습니다. D3.js 주파수 응답 그래프와 주변 UI 크롬에 모두 적용되며, 모든 변수는 라이트와 다크 모드 사이에서 자동으로 전환됩니다.

그래프 변수

다음 변수들은 Tailwind 클래스를 적용할 수 없는 SVG 렌더링을 담당합니다.

:root {
  --color-graph-bg: transparent; /* Graph background */
  --color-graph-watermark-opacity: 0.08; /* Watermark opacity */
  --color-graph-grid-major: rgba(0, 0, 0, 0.15); /* Major grid lines */
  --color-graph-grid-minor: rgba(0, 0, 0, 0.06); /* Minor grid lines */
  --color-graph-axis-label: rgba(0, 0, 0, 0.6); /* Axis labels (Hz, dB) */
  --color-graph-grid-text: rgba(0, 0, 0, 0.5); /* Grid value labels */
  --color-graph-baseline: rgba(0, 0, 0, 0.25); /* Baseline indicator */
}

.dark {
  --color-graph-grid-major: rgba(255, 255, 255, 0.15);
  --color-graph-grid-minor: rgba(255, 255, 255, 0.06);
  --color-graph-axis-label: rgba(255, 255, 255, 0.6);
  --color-graph-grid-text: rgba(255, 255, 255, 0.5);
  --color-graph-baseline: rgba(255, 255, 255, 0.25);
}

기본 UI 변수

배경, 텍스트, 버튼, 액센트 같은 UI 크롬은 DaisyUI 스타일의 기본 팔레트로 구동됩니다. 모든 변수는 라이트(:root)와 다크(.dark) 값을 함께 가집니다.

:root {
  --color-base-100: oklch(98% 0.003 247.858); /* Background */
  --color-base-200: oklch(96% 0.007 247.896); /* Elevated surface */
  --color-base-300: oklch(92% 0.013 255.508); /* Highest surface */
  --color-base-content: oklch(20% 0.042 265.755); /* Default text */
  --color-primary: oklch(59% 0.145 163.225); /* Primary accent */
  --color-primary-content: oklch(97% 0.021 166.113);
  --color-secondary: oklch(60% 0.126 221.723);
  --color-secondary-content: oklch(98% 0.019 200.873);
  --color-accent: oklch(44% 0.017 285.786);
  --color-accent-content: oklch(98% 0 0);
  --color-neutral: oklch(44% 0.043 257.281);
  --color-neutral-content: oklch(98% 0.003 247.858);
  --color-info: oklch(68% 0.169 237.323);
  --color-info-content: oklch(97% 0.013 236.62);
  --color-success: oklch(76% 0.233 130.85);
  --color-success-content: oklch(98% 0.031 120.757);
  --color-warning: oklch(79% 0.184 86.047);
  --color-warning-content: oklch(98% 0.026 102.212);
  --color-error: oklch(64% 0.246 16.439);
  --color-error-content: oklch(96% 0.015 12.422);
}

각 --color-* 역할에는 대응하는 --color-*-content 변수가 있어, 그 위에 그려질 전경(텍스트·아이콘) 색상을 정합니다. 덕분에 기본 색상을 바꿔도 대비가 자동으로 유지됩니다.

기본 설정 변경 (`config.js`)

config.js 파일은 modernGraphTool의 동작과 관련된 다양한 설정을 담습니다. 텍스트 에디터로 열어 필요한 항목을 수정합니다.

`INITIAL_PHONES`

// Brand : Sennheiser
// Model : IE200
// Suffix : (Foam Tip)
INITIAL_PHONES: ["Sennheiser IE200 (Foam Tip)"],

// You can add multiple phones to the list.
INITIAL_PHONES: ["Sennheiser IE200", "Sony IER-Z1R"],

페이지 로드 시 기본으로 표시할 Phone(측정 데이터)의 이름을 배열 형태로 지정합니다.

phone_book.json에 정의된 브랜드 + 기기 이름을 사용해야 합니다.
- 표시할 기기 이름에는 suffix가 포함될 수 있습니다. suffix를 지정하지 않으면 첫 번째 파일이 기본으로 표시됩니다.
여러 Phone(측정 데이터)을 동시에 표시할 수 있습니다.

`INITIAL_TARGETS`

INITIAL_TARGETS: ["Harman IE 2019v2 Target"],

// You can add multiple targets to the list.
INITIAL_TARGETS: ["Harman IE 2019v2 Target", "KEMAR DF Target"],

페이지 로드 시 기본으로 표시할 Target(타겟 커브)의 이름을 배열 형태로 지정합니다.

data/target 폴더의 파일명(확장자 제외)을 사용합니다.

`INITIAL_PANEL`

INITIAL_PANEL: "graph",

페이지 로드 시 기본으로 표시될 패널을 지정합니다.

phone, graph, equalizer, misc 중 하나를 선택할 수 있습니다.

`NORMALIZATION`

NORMALIZATION: {
  TYPE: "Hz",
  HZ_VALUE: 500,
},

그래프 정규화(Normalization) 기본 설정을 지정합니다.

`TYPE`

정규화 방식을 설정합니다.

Hz (특정 주파수 기준) 또는 Avg (300~3000Hz 평균 기준) 중 하나를 선택할 수 있습니다.

`HZ_VALUE`

TYPE이 ‘Hz’로 설정된 경우, 입력된 숫자가 기본 주파수로 사용됩니다.

`VISUALIZATION`

VISUALIZATION: {
  ASPECT_RATIO: "16:9",
  DEFAULT_Y_SCALE: 60,
  LABEL: {
    LOCATION: "BOTTOM_LEFT",
    POSITION: {
      LEFT: "0", RIGHT: "0", UP: "0", DOWN: "0",
    },
    TEXT_SIZE: "20px",
    TEXT_WEIGHT: "600",
  },
  BASELINE_LABEL: {
    LOCATION: "TOP_LEFT",
    POSITION: {
      LEFT: "0", RIGHT: "0", UP: "0", DOWN: "0",
    },
    TEXT_SIZE: "15px",
    TEXT_WEIGHT: "500",
  },
  RIG_DESCRIPTION: "Measured with IEC 60318-4 (711)",
},

그래프 시각화 관련 설정을 지정합니다.

`ASPECT_RATIO`

주파수 응답 그래프의 종횡비를 설정합니다.

"16:9" — 표준 와이드스크린 (800×450 viewBox).
"CrinGraph" — CrinGraph의 비율과 동일 (800×346 viewBox).

`DEFAULT_Y_SCALE`

Y축(dB)의 기본 표시 범위를 설정합니다.

30, 40, 50, 60, 80 중 하나를 선택할 수 있습니다.

`LABEL`

그래프 위에 표시되는 Phone/Target 이름 라벨의 위치, 크기, 굵기 등을 설정합니다.

LOCATION : 이름 라벨 위치
- BOTTOM_LEFT, BOTTOM_RIGHT, TOP_LEFT, TOP_RIGHT 중 선택.
POSITION : 이름 라벨 위치 세부 조정값
- LEFT, RIGHT, UP, DOWN 항목 별 조정값 입력 가능.
TEXT_SIZE : 이름 라벨 크기 (px 단위).
TEXT_WEIGHT : 이름 라벨 굵기 (100 ~ 900 중 백 단위 숫자).

`BASELINE_LABEL`

베이스라인(보정) 타겟이 활성화되어 있을 때 그래프에 표시되는 베이스라인 라벨의 위치, 크기, 굵기 등을 설정합니다.

위의 LABEL과 동일한 옵션을 사용할 수 있습니다.

`RIG_DESCRIPTION`

그래프 우측 상단에 표시될 측정 장비 설명을 입력합니다.

`INTERFACE`

INTERFACE: {
  PREFERRED_DARK_MODE_THEME: "light",
  PANEL_POSITION: "left",
  ALLOW_REMOVING_PHONE_FROM_SELECTOR: true,
  SWITCH_PHONE_PANEL_ON_BRAND_CLICK: true,
  TARGET: {
    ALLOW_MULTIPLE_LINE_PER_TYPE: true,
    OMIT_TARGET_SUFFIX: true,
    COLLAPSE_TARGET_LIST_ON_INITIAL: true,
  },
  HIDE_DEV_DONATE_BUTTON: false,
},

사용자 인터페이스 관련 설정을 지정합니다.

`PREFERRED_DARK_MODE_THEME`

다크 모드 설정을 지정합니다.

light, dark, system 중 선택.

`PANEL_POSITION`

데스크톱 UI에서 메뉴 + 패널 열이 표시될 위치를 설정합니다. 모바일 UI에는 영향을 주지 않습니다.

left(기본값 — 컨트롤이 왼쪽, 그래프가 오른쪽; 기존 CrinGraph 레이아웃과 동일) 또는 right(그래프가 왼쪽, 컨트롤이 오른쪽) 중 선택.

`ALLOW_REMOVING_PHONE_FROM_SELECTOR`

Phone(측정 데이터) 선택기에서 이미 추가된 항목을 다시 선택했을 때 그래프에서 제거할지 여부를 설정합니다.

true, false 중 선택.

`SWITCH_PHONE_PANEL_ON_BRAND_CLICK`

모바일 UI에서 브랜드 버튼 클릭 시 자동으로 기기 목록으로 전환할지 여부를 설정합니다.

true, false 중 선택.

`TARGET`

Target 선택기 관련 설정을 지정합니다. ##### ALLOW_MULTIPLE_LINE_PER_TYPE 타입별로 Target 목록을 여러 줄로 표시할지 여부를 설정합니다. - true, false 중 선택. ##### OMIT_TARGET_SUFFIX 각 타겟 항목마다 ‘Target’ 접미어를 생략할지 여부를 설정합니다. - true, false 중 선택. ##### COLLAPSE_TARGET_LIST_ON_INITIAL 초기 페이지 로드 시 타겟 목록을 접어서 표시할지 여부를 설정합니다. - true, false 중 선택.

`HIDE_DEV_DONATE_BUTTON`

‘기부’ 버튼을 숨길지 여부를 설정합니다.

true, false 중 선택.

`URL`

URL: {
  AUTO_UPDATE_URL: true,
  COMPRESS_URL: true,
},

AUTO_UPDATE_URL: 선택된 기기 및 타겟에 따라 URL을 자동으로 업데이트할지 여부를 설정합니다.
- true, false 중 선택.
COMPRESS_URL: URL을 압축할지 여부를 설정합니다.
- 활성화하면 base62 알고리즘을 사용해 URL을 압축합니다.
- true, false 중 선택.

`RANKING`

기기 선택 목록에서 펼쳐진 기기 항목에 표시되는 등급 표시를 설정합니다. 서로 독립적인 두 가지 기능으로 구성되어 있으며, 대부분의 배포에는 첫 번째만 필요합니다.

등급에 링크 걸기. URL만 설정하면 phone_book.json에 이미 들어 있는 reviewScore가 링크로 바뀝니다 — 스프레드시트, 리뷰 사이트, squigRanking 페이지 등 어디로든 연결할 수 있습니다. 시트를 불러오지 않으며 점수 자체는 달라지지 않습니다.
게시된 CSV에서 등급 읽어오기. CONFIG_URL 또는 SOURCE를 설정하면 스프레드시트가 등급의 원본이 되어, phone_book.json을 건드리지 않고 시트 수정만으로 등급이 갱신됩니다. 선택 기능이며, 네트워크를 사용하는 쪽은 이 기능뿐입니다.

// 전체가 선택 기능입니다 — RANKING을 생략하면 기존 동작이 그대로 유지됩니다.
// (phone_book.json의 점수가 링크 없는 일반 텍스트로 표시)

// 1. 링크만. 모든 랭킹 페이지, 스프레드시트, 블로그에 사용할 수 있습니다:
RANKING: {
  URL: "https://docs.google.com/spreadsheets/.../pubhtml",  // 매개 변수 없음 → 그대로 사용
},

// 2. 동일한 서버의 squigRanking 페이지, 해당 시트에서 등급을 읽어옴:
RANKING: {
  URL: "/ranking/?type={type}#{slug}",
  TYPE: "earphone",
  CONFIG_URL: "/ranking/ranking-config.js",
},

// 3. squigRanking 없이 일반 CSV만 사용:
RANKING: {
  URL: "https://reviews.example.com/#{slug}",
  SOURCE: {
    CSV_URL: "https://docs.google.com/spreadsheets/d/e/.../pub?output=csv",
    RANK_COLUMN: "Rank",
    SCALE: [
      { value: "S", color: "#6c63ff" },
      { value: "A", color: "#00bfff" },
      { value: "B", color: "#8bc34a" },
    ],
  },
},

옵션	설명
`URL`	등급 표시에 사용할 링크 템플릿. 비어 있거나 없으면 등급은 표시 전용이 됩니다.
`TYPE`	이 배포가 해당하는 squigRanking `types` 키 (`earphone`, `headphone` 등). 시트 선택과 `{type}` 치환에 사용. 기본값 `earphone`.
`CONFIG_URL`	squigRanking의 `ranking-config.js` 주소. 시트 URL, 등급 열, 등급 스케일을 읽어옵니다.
`SOURCE`	게시된 CSV를 직접 선언. `CONFIG_URL`이 유효하면 무시됩니다.
`DISPLAY`	`auto`(기본값), `badge`, `stars`, `text`. 아래 참조.
`MATCH`	`strict`(기본값) 또는 `loose`. 아래 참조.
`CACHE_TTL`	불러온 시트를 다시 읽기까지의 시간(초). 기본값 `900`(15분).

링크

URL은 템플릿입니다. 다음 매개 변수가 각 행마다 대체되며 URL로 인코딩됩니다(단, {slug}는 -가 읽히도록 인코딩되지 않습니다).

매개 변수	설명
`{brand}`	기기의 브랜드
`{model}`	기기의 모델
`{slug}`	`{brand}-{model}` 소문자, 공백 → `-` (squigRanking의 `deepLink` 슬러그 형식과 일치)
`{fullName}`	`{brand} {model}` 결합
`{type}`	`TYPE`에 설정한 값

템플릿에 매개 변수가 없는 경우(예: Google Sheet URL), 해당 입력값이 그대로 사용됩니다 — 슬러그나 쿼리 문자열이 추가되지 않습니다.

시트에서 등급 읽어오기

CONFIG_URL 또는 SOURCE 중 하나를 설정합니다.

**CONFIG_URL**은 squigRanking 배포의 ranking-config.js를 가리킵니다. 랭킹 페이지가 이 파일을 불러오는 방식 그대로 일반 <script>로 불러온 뒤, 시트 URL·등급 열·scale·카드 앵커 형식을 읽습니다. 등급 정의가 한 곳에만 남으므로, 랭킹 페이지에서 등급 색상이나 이름을 바꾸면 기기 목록에도 그대로 반영됩니다. 위에 나열된 키만 읽으며 나머지는 무시합니다 — 이 도구가 모르는 최신 configVersion도 문제가 되지 않습니다.
**SOURCE**는 랭킹 페이지 없이 CSV를 직접 선언합니다. CSV_URL은 필수이며, RANK_COLUMN·BRAND_COLUMN·MODEL_COLUMN의 기본값은 각각 Rank·Brand·Model입니다. SCALE은 { value, color, textColor, label, score } 항목을 순서대로 나열한 목록입니다. ROW_FILTER: { FIELD, VALUES }를 쓰면 조건에 맞는 행만 사용하므로, 이어폰 배포와 헤드폰 배포가 시트 하나를 공유할 수 있습니다.

알아두면 좋은 동작들:

일치하는 행이 없는 기기는 phone_book.json의 점수를 그대로 유지합니다. 이 기능을 켜면 등급이 추가될 뿐, 이미 표시되던 등급이 사라지지는 않습니다. 등급 칸이 비어 있는 행은 행이 없는 것으로 간주합니다.
시트를 불러오지 못해도 달라지는 것은 없습니다 — 기능이 꺼져 있을 때와 똑같이 phone_book.json 기준으로 표시되며, 원인은 브라우저 콘솔에 기록됩니다(대개 404이거나, CORS 헤더 없이 제공된 CSV입니다).
시트는 한 번만 읽고 마는 것이 아닙니다. CACHE_TTL초가 지나면 방문자가 기기 목록을 열 때 시트를 다시 불러오므로, 재배포 없이 수정된 등급이 반영됩니다. 다만 Google Sheets 자체도 게시된 CSV를 몇 분간 캐싱한다는 점을 감안하세요.
링크는 해당 행의 카드를 가리킵니다. 행이 일치한 경우 {slug}는 폰북이 아니라 시트에 적힌 표기를 기준으로 만들어지므로, 두 파일의 표기가 달라도 링크가 올바른 카드로 연결됩니다.

`DISPLAY`

값	표시 방식
`auto`	스케일에 정의된 값이면 색상 배지, 단순 숫자면 0–5 별점, 그 외에는 일반 텍스트. 기본값.
`badge`	항상 배지. 스케일에 없는 값은 테마 기본 색상을 사용합니다.
`stars`	항상 별점. 스케일의 `score`를 사용하며, 숫자로 환산할 수 없는 값은 텍스트로 표시됩니다.
`text`	항상 일반 텍스트.

배지의 글자 색은 스케일에 textColor가 명시되지 않은 경우 color와의 명도 대비를 계산해 자동으로 정해집니다.

`MATCH`

두 파일 모두 상대를 가리키는 식별자를 갖고 있지 않으므로, 시트의 행은 브랜드와 모델명으로 기기와 대응시킵니다.

strict(기본값)는 대소문자·공백·문장 부호를 정규화한 뒤의 완전 일치만 허용합니다 — 따라서 True-Ear / Projekt.Wen도 TrueEar / Projekt Wen과 일치합니다.
**loose**는 부분 일치까지 허용합니다. 더 많은 기기가 일치하는 대신, 잘못 일치하는 경우도 늘어납니다. 예를 들어 Blessing 2는 Blessing 2 Dusk 행과 일치해 그 등급을 그대로 표시하게 됩니다.

기본값이 strict인 것은 의도된 선택입니다 — 등급이 표시되지 않는 기기는 눈에 띄어 시트에서 바로 고칠 수 있지만, 다른 기기의 등급이 표시되는 경우에는 전혀 이상해 보이지 않기 때문입니다.

`CDN_MODE`

CDN_MODE: {
  MAJOR_VERSION: 2,
  // BASE: "https://cdn.jsdelivr.net/gh/potatosalad775/modernGraphTool@cdn",
  // BASE_PATH: "/headphones",
  // VERSIONS_URL: "https://raw.githubusercontent.com/potatosalad775/modernGraphTool/cdn/versions.json",
},

CDN 배포 관련 설정을 구성합니다. cdn-index.html로 배포할 때만 사용되며, 표준 dist/ 배포에서는 이 섹션을 주석 처리한 채로 두세요.

MAJOR_VERSION — 앱을 특정 메이저 버전에 고정합니다(예: 2는 v2.x.x 안에서 자동 업데이트).
BASE — 커스텀 CDN 기본 URL. CDN 자산을 직접 호스팅하는 고급 사용자만 바꿉니다.
BASE_PATH — 배포 하위 경로(예: "/headphones"). 끝에 슬래시는 붙이지 마세요. (서브)도메인 루트가 아닌 모든 배포에 반드시 필요합니다. example.com/headphones/나 username.squig.link/headphones/에 사이트가 있다면 BASE_PATH: "/headphones"로 설정하세요. 사이트가 (서브)도메인 루트(예: example.com/, username.squig.link/)에 있을 때만 설정 없이 둡니다. 빠뜨리면 홈 페이지는 정상 로드되지만 공유 링크 딥 라우트가 모두 404가 됩니다. 거의 항상 필요한 이유는 CDN 배포 가이드에서 자세히 다룹니다.
VERSIONS_URL — versions.json의 전체 URL. 기본적으로 로더는 BASE에서 raw.githubusercontent.com URL을 유도해 GitHub에서 직접 versions.json을 가져오며, jsDelivr를 거치지 않습니다. 의도된 동작입니다. jsDelivr 엣지 캐시는 오래된 versions.json 응답을 몇 시간씩 잡아 두는 일이 있어 새 릴리스가 사용자에게 닿는 시점이 늦어집니다. versions.json은 이 지연이 문제가 되는 유일한 파일이라 로더가 일부러 우회합니다. cdn 브랜치를 자체 포크로 호스팅하거나 GitHub이 아닌 출처에서 제공하는 경우에만 VERSIONS_URL을 재정의하세요.

`LANGUAGE`

LANGUAGE: {
  LANGUAGE_LIST: [
    ["en", "English"], ["ko", "한국어"]
  ],
  ENABLE_I18N: true,
  ENABLE_SYSTEM_LANG_DETECTION: true,
},

LANGUAGE_LIST: 사용 가능한 언어 목록을 설정합니다.
- 각 언어마다 ["언어코드", "언어이름"] 형태로 추가합니다.
ENABLE_I18N: 다국어 지원을 활성화할지 여부를 설정합니다.
- 비활성화 시 언어 선택 UI가 제거되고, 영어만 표시됩니다.
- true, false 중 선택.
ENABLE_SYSTEM_LANG_DETECTION: 사용자의 시스템 언어를 자동으로 감지할지 여부를 설정합니다.
- true, false 중 선택.

`PATH`

PATH: {
  PHONE_MEASUREMENT: "./data/phones",
  TARGET_MEASUREMENT: "./data/target",
  PHONE_BOOK: "./data/phone_book.json",
},

PHONE_MEASUREMENT: Phone(측정 데이터) 파일이 저장된 폴더 경로를 설정합니다.
TARGET_MEASUREMENT: Target(타겟 커브) 파일이 저장된 폴더 경로를 설정합니다.
PHONE_BOOK: Phone(측정 데이터) 정보가 기록된 phone_book.json 파일 경로를 설정합니다.

`WATERMARK`

WATERMARK: [
  {
    TYPE: "TEXT",
    CONTENT: "© 2025 modernGraphTool", LOCATION: "BOTTOM_RIGHT",
    SIZE: "15px", FONT_FAMILY: "sans-serif", FONT_WEIGHT: "600", COLOR: "#000000", OPACITY: "0.4",
  },
  // You can even put multiple TEXT or IMAGE in Array.
  // Randomly picked content will be rendered on every load.
  {
    TYPE: "IMAGE",
    SIZE: "50px", LOCATION: "TOP_LEFT", POSITION: {UP: "20", DOWN: "0", LEFT: "0", RIGHT: "10"}, OPACITY: "0.2",
    CONTENT: [
      "./assets/images/icon_1.png", "./assets/images/icon_2.png", "./assets/images/icon_3.png",
    ]
  }
],

그래프에 표시될 워터마크를 설정합니다.

여러 개의 워터마크를 동시에 표시할 수 있습니다. 각 워터마크는 {} 객체로 구분됩니다.
modernGraphTool은 TEXT와 IMAGE 두 가지 워터마크 타입을 지원합니다.
- 객체 내 TYPE 필드로 워터마크 타입을 지정합니다.

TEXT
IMAGE

TYPE : 워터마크 타입을 지정합니다. - TEXT로 설정. - CONTENT : 워터마크에 표시될 텍스트를 설정합니다. - 여러 개의 문자열을 배열 형태로 입력할 수 있습니다 ([]로 감쌈). - 2개 이상의 문자열이 지정되면 첫 로드 시 무작위로 선택된 문자열이 표시됩니다. - LOCATION : 워터마크 위치를 설정합니다. - TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT 중 선택. - SIZE : 워터마크 크기 (px 단위). - FONT_FAMILY : 워터마크 폰트. - FONT_WEIGHT : 워터마크 폰트 굵기 (100 ~ 900 중 백 단위 숫자). - COLOR : 워터마크 색상 (HEX 코드). - OPACITY : 워터마크 투명도 (0 ~ 1).

TYPE : 워터마크 타입을 지정합니다. - IMAGE로 설정. - CONTENT : 워터마크에 표시될 이미지 파일 경로를 설정합니다. - 여러 개의 이미지 파일 경로를 배열 형태로 입력할 수 있습니다 ([]로 감쌈). - 2개 이상의 이미지 경로가 지정되면 첫 로드 시 무작위로 선택된 이미지가 표시됩니다. - LOCATION : 워터마크 위치를 설정합니다. - TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT 중 선택. - SIZE : 워터마크 크기 (px 단위). - POSITION : 워터마크 위치 세부 조정. - UP, DOWN, LEFT, RIGHT 필드로 워터마크의 상하좌우 위치를 설정합니다 (px 단위). - OPACITY : 워터마크 투명도 (0 ~ 1).

`TARGET_MANIFEST`

TARGET_MANIFEST: [
  { type:"Harman",      files:["Harman IE 2019v2","Harman IE 2017v2"] },
  { type:"Neutral",     files:["KEMAR DF (KB006x)","ISO 11904-2 DF","IEF Neutral 2023"] },
  { type:"Reviewer",    files:["Banbeucmas","HBB","Precogvision","Super 22 Adjusted"] },
  { type:"Preference",  files:["AutoEQ","Rtings","Sonarworks"] },
  { type:"Δ",           files:["Universal ∆"] }
],

Target 선택기에 표시될 타겟을 그룹화하고 정렬하는 방식을 정의합니다.

type 필드는 타겟 그룹의 이름을 정의합니다.
files 필드는 해당 그룹에 속하는 타겟들의 파일 이름을 배열 형태로 지정합니다.

`SAMPLES`

SAMPLES: {
  DEFAULT_COUNT: 1,
  DEFAULT_DISPLAY: ["avg"],
  FILL_OPACITY: 0.3,
},

샘플 세트의 사이트 전역 기본값입니다. 샘플 세트란 여러 번 측정한 variant를 말합니다(반복 측정, 착용 위치 스윕, 이어패드별 측정 등). phone_book.json 쪽은 샘플 세트를 참고하세요.

DEFAULT_COUNT: variant가 자체 samples를 선언하지 않았을 때의 측정 횟수. 데이터베이스의 모든 기기를 같은 횟수로 측정하는 경우가 아니라면 1로 두세요. 그런 경우라면 항목마다 적는 대신 여기서 한 번만 지정하면 됩니다.
DEFAULT_DISPLAY: display를 선언하지 않은 샘플 세트를 그리는 방식. 다음의 조합:
- "avg" — 모든 측정의 평균 곡선.
- "curves" — 각 측정을 개별 곡선으로.
- "fill" — 측정 범위를 감싸는 음영 밴드. ["avg", "fill"]은 평균선과 그 주위의 편차 밴드를 함께 그립니다.
FILL_OPACITY: 음영 밴드의 투명도 (0 ~ 1).

더 이상 사용되지 않음: MULTI_SAMPLE, HPTF

SAMPLES가 두 섹션을 모두 대체하며, 예전 섹션은 향후 릴리스에서 제거될 예정입니다. 지금은 폴백으로 계속 읽히므로 기존 config.js도 그대로 동작하지만, 다음에 파일을 손볼 때 SAMPLES를 설정하고 예전 섹션은 지우세요. Config Editor가 이 변환을 대신해 줍니다. 현재 config.js를 불러온 뒤 다시 내보내면 됩니다. phone_book.json의 hptfs[] 키도 마찬가지이며, 데이터 관리 문서를 참고하세요.

MULTI_SAMPLE.DEFAULT_DISPLAY: "average" → DEFAULT_DISPLAY: ["avg"]
MULTI_SAMPLE.DEFAULT_DISPLAY: "all" → DEFAULT_DISPLAY: ["avg", "curves"]
HPTF.FILL_OPACITY → SAMPLES.FILL_OPACITY

HPTF.DEFAULT_DISPLAY에 대응하는 SAMPLES 설정은 없습니다. 이 값은 phone_book.json의 예전 hptfs[] 항목에만 적용될 뿐 샘플 세트 전반의 사이트 기본값을 정하지 않습니다. 해당 항목을 variants[]로 옮기고 각자 display를 지정하세요.

`TRACE_STYLING`

TRACE_STYLING: {
  PHONE_TRACE_THICKNESS: 2,
  TARGET_TRACE_THICKNESS: 1,
  CURVE_COLOR_PALETTE: [
    "#0072B2", "#E69F00", "#009E73", "#CC79A7",
    "#56B4E9", "#D55E00", "#F0E442", "#000000",
  ],
  CURVE_COLOR_PALETTE_RANDOMIZE: false,
  TARGET_TRACE_DASH: [{ name: "KEMAR DF (KB006x)", dash: "10 10" }],
},

그래프 선의 굵기, 점선 스타일, 색상 팔레트 등을 설정합니다. 특정 타겟의 선 스타일을 다르게 지정할 수도 있습니다.

PHONE_TRACE_THICKNESS : Phone(측정 데이터) 그래프 선의 굵기를 설정합니다 (px 단위).
TARGET_TRACE_THICKNESS : Target(타겟 커브) 그래프 선의 굵기를 설정합니다 (px 단위).
CURVE_COLOR_PALETTE : 새 그래프 선에 색을 할당할 때 순서대로 사용되는 색상 팔레트.
- 모든 CSS 색상 표기를 입력받습니다 (#hex, oklch(...), hsl(...), rgb(...)).
- 팔레트가 모두 소진되었거나 사용자가 직접 고른 색과 너무 가까운 경우, modernGraphTool은 OKLCH 기반 자동 생성으로 전환하여 그래프에 이미 표시된 모든 색과 시각적으로 가장 거리가 먼 색을 선택합니다.
- 비워 두거나 생략하면 기본 Okabe-Ito 팔레트(색맹 친화적인 8가지 색)가 사용됩니다.
CURVE_COLOR_PALETTE_RANDOMIZE : true로 설정하면 페이지가 로드될 때마다 CURVE_COLOR_PALETTE 순서가 한 번 무작위로 섞여, 매 세션이 서로 다른 색으로 시작합니다.
- 섞인 순서는 한 세션 내에서는 그대로 유지되므로 추가 / 실행취소 / 다시실행이 일관되게 동작합니다.
- CURVE_COLOR_PALETTE가 비어 있거나 생략된 경우에는 효과가 없습니다.
- 기본값은 false입니다.
TARGET_TRACE_DASH : 특정 타겟의 선 스타일을 설정합니다.
- name 필드는 타겟의 이름을 지정합니다.
- dash 필드는 타겟의 선 스타일을 설정합니다.
  - ‘stroke-dasharray’ 속성에 따른 값을 입력받습니다. 자세한 설명은 MDN 문서를 참고하세요.
  - 0 1로 설정하면 선이 표시되지 않습니다.
  - null로 설정하면 선이 실선으로 표시됩니다.

`TOPBAR`

TOPBAR: {
  TITLE: {
    //TYPE: "TEXT", CONTENT: "modernGraphTool",
    //TYPE: "IMAGE", CONTENT: "./assets/images/sample.jpg",
    TYPE: "HTML", CONTENT: "<h2>modernGraphTool</h2>",
  },
  LINK_LIST: [
    { TITLE: "Home", URL: "/" },
    { TITLE: "Docs", URL: "https://example.com/docs" },
  ],
},

페이지 상단 바의 제목과 링크 목록을 설정합니다.

TITLE : 페이지 상단 바의 제목을 설정합니다.
- TYPE : 제목의 타입을 지정합니다.
  - TEXT로 설정하면 텍스트 형식의 제목이 표시됩니다.
  - IMAGE로 설정하면 이미지 형식의 제목이 표시됩니다.
  - HTML로 설정하면 HTML 형식의 제목이 표시됩니다.
- CONTENT : 제목의 내용을 설정합니다.
  - TYPE이 TEXT인 경우, 텍스트 형식의 제목을 설정합니다.
  - TYPE이 IMAGE인 경우, 이미지 파일 경로를 설정합니다.
  - TYPE이 HTML인 경우, HTML 형식의 제목을 설정합니다.
LINK_LIST : 페이지 상단 바의 링크 목록을 설정합니다.
- TITLE 필드는 링크의 제목을 지정합니다.
- URL 필드는 링크의 URL을 지정합니다.
- 외부 URL에는 반드시 http(s)://를 포함해야 합니다.

`PREFERENCE_BOUND`

PREFERENCE_BOUND: {
  ENABLE_BOUND_ON_INITIAL_LOAD: false,
  BASE_DF_TARGET_FILE: "KEMAR DF (KB006x) Target",
  COLOR_FILL: "rgba(180,180,180,0.2)",
  COLOR_BORDER: "rgba(120,120,120,0.5)",
},

그래프에 음영으로 상·하한 선호 범위를 표시하는 선호도 경계(Preference Bound) 오버레이를 설정합니다.

ENABLE_BOUND_ON_INITIAL_LOAD — 페이지 로드 시 곧바로 선호도 경계를 표시할지 여부.
- true 또는 false.
BASE_DF_TARGET_FILE — 보정 기준선으로 쓸 DF 타겟 파일.
COLOR_FILL — 음영 영역을 채울 색상 (CSS 색상 값).
COLOR_BORDER — 경계선 색상 (CSS 색상 값).

`TARGET_CUSTOMIZER`

TARGET_CUSTOMIZER: {
  CUSTOMIZABLE_TARGETS: ["KEMAR DF (KB006x) Target", "ISO 11904-2 DF"],
  FILTERS: [
    { id: "tilt", name: "Tilt", type: "TILT", freq: 0, q: 0 },
    { id: "bass", name: "Bass", type: "LSQ", freq: 105, q: 0.707 },
    { id: "treble", name: "Treble", type: "HSQ", freq: 2500, q: 0.42 },
    { id: "ear", name: "Ear", type: "PK", freq: 2750, q: 1 },
    { id: "pssr", name: "PSSR", type: "HSQ", freq: 500, q: 0.4 },
  ],
  FILTER_PRESET: [
    { name: "Harman 2013", filter: { bass: 6.6, treble: -1.4 } },
    { name: "Harman 2015", filter: { bass: 6.6, treble: -3, ear: -1.8 } },
    { name: "Harman 2018", filter: { bass: 4.8, treble: -4.4 } },
  ],
  INITIAL_TARGET_FILTERS: [
    { name: "KEMAR DF (KB006x)", filter: { tilt: -0.8, bass: 6 } },
    { name: "ISO 11904-2 DF", filter: { tilt: -0.8, bass: 6 } },
  ],
},

특정 타겟 커브에 타겟별 필터 조정을 적용할 수 있는 Target Customizer를 설정합니다.

CUSTOMIZABLE_TARGETS — 커스터마이즈할 수 있는 타겟 파일 이름 배열.
FILTERS — 사용 가능한 필터 정의. 각 필터는 다음 항목을 가집니다.
- id — 필터 고유 식별자
- name — 표시 이름
- type — 필터 타입. TILT, LSQ(Low Shelf), HSQ(High Shelf), PK(Peaking) 중 하나
- freq — 중심·코너 주파수 (Hz)
- q — Q값 (대역폭)
FILTER_PRESET — 드롭다운에서 고를 수 있는 필터 프리셋 구성.
- name — 프리셋 표시 이름
- filter — 필터 ID와 게인 값을 매핑한 객체
INITIAL_TARGET_FILTERS — 페이지 첫 로드 시 자동으로 적용할 필터.
- name — 필터를 적용할 타겟 이름
- filter — 필터 ID와 게인 값을 매핑한 객체

`CROSS_SITE_SEARCH`

CROSS_SITE_SEARCH: {
  ENABLED: true,
  INDEX_URLS: [],
},

방문자가 검색창에서 다른 측정 데이터베이스까지 함께 검색할 수 있게 합니다. squig.link가 아니어도 어떤 호스팅 환경에서든 동작합니다. 크로스 사이트 검색을 참고하세요.

ENABLED — 크로스 사이트 기기 검색 활성화.
INDEX_URLS — 시도할 인덱스 문서 목록(순서대로). 비워 두면 공식 GraphAggregator 인덱스와 GitHub Pages 미러를 사용합니다. 같은 스키마를 따르는 인덱스를 직접 호스팅한다면 그 URL을 지정하세요.

`SITE_SELECTOR`

SITE_SELECTOR: {
  ENABLED: 'auto',
  INDEX_URLS: [],
},

상단 바에 다른 사이트의 측정 데이터베이스로 이동할 수 있는 드롭다운을 추가합니다. squig.link가 아니어도 어떤 호스팅 환경에서든 동작합니다. 사이트 선택기를 참고하세요.

ENABLED — 'auto'는 이 사이트가 공유 인덱스에 등록되어 있거나(graphaggregator.harutohiroki.com에서 등록) squig.link에서 호스팅될 때만 선택기를 표시합니다. true는 항상 표시하고, false는 표시하지 않으며 인덱스를 받아오지도 않습니다.
INDEX_URLS — 시도할 디렉터리 문서 목록(순서대로). 비워 두면 공식 GAA 인덱스를 사용합니다. 같은 스키마를 따르는 문서를 직접 호스팅한다면 그 URL을 지정하세요.

`DOWNLOAD`

DOWNLOAD: {
  ENABLED: true,
},

그래프 별 다운로드 버튼을 추가합니다. 스무딩, 정규화, 타겟 조정, 파라메트릭 EQ가 모두 적용된 상태 그대로의 곡선을 내보냅니다. 탭으로 구분된 Frequency / dB가 채널 별로 .txt 파일(Name Suffix L.txt, Name Suffix R.txt, …)에 저장됩니다.

ENABLED: 다운로드 버튼을 표시합니다. 기본적으로 비활성화되어 있습니다.

`EQUALIZER`

EQUALIZER: {
  AUTOEQ_DEFAULT_BAND_COUNT: 8,
  EQCAPS_URL: 'https://potatosalad775.github.io/eqcaps/v1/',
},

이퀄라이저 패널의 기본값입니다. 이퀄라이저를 참고하세요.

AUTOEQ_DEFAULT_BAND_COUNT — 필터 목록이 비어 있을 때 AutoEQ 실행이 생성할 필터 밴드 수입니다. 기본값은 8입니다. 목록에 밴드가 하나라도 있으면 그 개수가 우선하므로, 사용자는 실행 전에 밴드를 추가하거나 제거해 원하는 개수를 직접 정할 수 있습니다. 1 미만의 값은 무시되며, 활성화된 EQ 제약 조건의 밴드 상한도 그대로 적용됩니다. 5밴드 기기가 연결되어 있다면 5개가 생성됩니다.
EQCAPS_URL — 하드웨어 EQ와 EQ 제약 조건 선택 창이 기기·앱의 EQ 제약 조건을 읽어오는 곳으로, eqcaps /v1/ 채널의 사본입니다. 기본값은 GitHub Pages의 공식 채널이며, 미러나 직접 호스팅한 사본을 쓸 때 지정합니다. 이 URL은 CORS와 함께 index.json과 profiles/를 제공해야 합니다. 접근할 수 없어도 Built-in 제약 조건은 동작하고, 알려진 제조사의 기기도 연결됩니다.

`SQUIGLINK`

SQUIGLINK: {
  ENABLED: true,
  ANALYTICS_MEASUREMENT_IDS: [],
  ANALYTICS_SITE: "",
  LOG_ANALYTICS: true,
  ENABLE_ANALYTICS: true,
  ENABLE_CROSS_SITE_SEARCH: true,
  ENABLE_SPONSOR: true,
},

squig.link 연동을 설정합니다. *.squig.link 도메인에서 호스팅될 때만 활성화됩니다.

ENABLED — squig.link 연동의 마스터 토글.
ANALYTICS_MEASUREMENT_IDS — GA4 측정 ID 배열. 예: ["G-SQUIGLINK_ID", "G-YOUR_ID"].
ANALYTICS_SITE — 분석 이벤트에 붙일 사이트 이름.
LOG_ANALYTICS — 분석 이벤트를 브라우저 콘솔에 기록할지 여부.
ENABLE_ANALYTICS — 분석 추적의 마스터 토글.
ENABLE_CROSS_SITE_SEARCH — 더 이상 사용하지 않습니다. CROSS_SITE_SEARCH.ENABLED를 사용하세요. 해당 섹션이 없는 기존 설정 파일을 위해 대체값으로만 읽습니다.
ENABLE_SPONSOR — 스폰서 배너와 쇼핑 링크 활성화.

`DESCRIPTION`

DESCRIPTION: [
  //{ TYPE: "TEXT", CONTENT: "Every measurements are done by using IEC 60318-4 (711) Ear Simulator." },
  { TYPE: "HTML", CONTENT: "<p>Every measurements are done by using IEC 60318-4 (711) Ear Simulator.</p>" },
],

기타(Misc) 패널의 ‘설명’ 영역에 텍스트 / 이미지 / HTML 요소를 추가합니다. 여러 개의 설명을 동시에 추가할 수 있습니다. 각 설명은 {} 객체로 구분됩니다.

TYPE : 내용의 타입을 지정합니다.
- TEXT로 설정하면 텍스트 형식으로 표시됩니다.
- IMAGE로 설정하면 이미지 형식으로 표시됩니다.
- HTML로 설정하면 HTML 형식으로 표시됩니다.
CONTENT : 내용을 설정합니다.
- TYPE이 TEXT인 경우, 텍스트 문자열을 설정합니다.
- TYPE이 IMAGE인 경우, 이미지 파일 경로를 설정합니다.
- TYPE이 HTML인 경우, HTML 형식의 내용을 설정합니다.

다국어 지원 (`config.js`)

config.js의 일부 항목은 영어 외 다른 언어로도 작성할 수 있습니다.

다국어 지원을 켜려면 config.js의 LANGUAGE 항목부터 수정합니다.
다국어 구성을 지원하는 항목은 다음과 같습니다.
- TARGET_MANIFEST
- TOPBAR → LINK_LIST
- DESCRIPTION

// Example: TOPBAR.LINK_LIST with multilingual support
TOPBAR: {
  LINK_LIST: {
    default: [
      { TITLE: "Google", URL: "https://www.google.com" },
      { TITLE: "Github", URL: "https://www.github.com" },
    ],
    i18n: {
      ko: [
        { TITLE: "구글", URL: "https://www.google.com" },
        { TITLE: "깃허브", URL: "https://www.github.com" },
      ]
    }
  },
},

다국어 항목은 기본 언어(영어)로 작성한 객체는 default 필드에, 다른 언어로 작성한 객체는 i18n 필드에 둡니다.

i18n 필드 안의 키는 LANGUAGE.LANGUAGE_LIST에 등록된 언어 코드와 일치해야 합니다.
다국어 지원이 필요 없다면 default와 i18n 래퍼 없이 평면 배열 형식만 써도 됩니다.

페이지 커스터마이징

페이지 메타데이터 변경 (index.html)

TITLE

DESCRIPTION

KEYWORDS

URL / LINK

IMAGE

FAVICON

페이지 스타일 커스터마이징 (theme.css)

그래프 변수

기본 UI 변수

기본 설정 변경 (config.js)

INITIAL_PHONES

INITIAL_TARGETS

INITIAL_PANEL

NORMALIZATION

TYPE

HZ_VALUE

VISUALIZATION

ASPECT_RATIO

DEFAULT_Y_SCALE

LABEL

BASELINE_LABEL

RIG_DESCRIPTION

INTERFACE

PREFERRED_DARK_MODE_THEME

PANEL_POSITION

ALLOW_REMOVING_PHONE_FROM_SELECTOR

SWITCH_PHONE_PANEL_ON_BRAND_CLICK

TARGET

HIDE_DEV_DONATE_BUTTON

URL

RANKING

링크

시트에서 등급 읽어오기

DISPLAY

MATCH

CDN_MODE

LANGUAGE

PATH

WATERMARK

TARGET_MANIFEST

SAMPLES

TRACE_STYLING

TOPBAR

PREFERENCE_BOUND

TARGET_CUSTOMIZER

CROSS_SITE_SEARCH

SITE_SELECTOR

DOWNLOAD

EQUALIZER

SQUIGLINK

DESCRIPTION

다국어 지원 (config.js)

페이지 메타데이터 변경 (`index.html`)

`TITLE`

`DESCRIPTION`

`KEYWORDS`

`URL` / `LINK`

`IMAGE`

`FAVICON`

페이지 스타일 커스터마이징 (`theme.css`)

기본 설정 변경 (`config.js`)

`INITIAL_PHONES`

`INITIAL_TARGETS`

`INITIAL_PANEL`

`NORMALIZATION`

`TYPE`

`HZ_VALUE`

`VISUALIZATION`

`ASPECT_RATIO`

`DEFAULT_Y_SCALE`

`LABEL`

`BASELINE_LABEL`

`RIG_DESCRIPTION`

`INTERFACE`

`PREFERRED_DARK_MODE_THEME`

`PANEL_POSITION`

`ALLOW_REMOVING_PHONE_FROM_SELECTOR`

`SWITCH_PHONE_PANEL_ON_BRAND_CLICK`

`TARGET`

`HIDE_DEV_DONATE_BUTTON`

`URL`

`RANKING`

`DISPLAY`

`MATCH`

`CDN_MODE`

`LANGUAGE`

`PATH`

`WATERMARK`

`TARGET_MANIFEST`

`SAMPLES`

`TRACE_STYLING`

`TOPBAR`

`PREFERENCE_BOUND`

`TARGET_CUSTOMIZER`

`CROSS_SITE_SEARCH`

`SITE_SELECTOR`

`DOWNLOAD`

`EQUALIZER`

`SQUIGLINK`

`DESCRIPTION`

다국어 지원 (`config.js`)