인터페이스 둘러보기
원리와 개념 설명은 여기까지입니다. 이 문서부터는 화면에 보이는 버튼과 조작법을 다룹니다. 세부 조작으로 들어가기 전에, 도구의 큰 그림을 먼저 그려보겠습니다.
화면의 세 가지 영역
기기 사이즈와 무관하게, 도구 화면은 항상 세 개의 큰 영역으로 나뉩니다:
- 상단 바 (Top bar) — 화면 맨 위를 지나는 얇은 막대입니다. 사이트 제목과 운영자가 설정해 둔 외부 링크가 표시됩니다. 사이트가 squig.link 소속이라면, 다른 리뷰어 사이트로 바로 넘어갈 수 있는 선택 메뉴가 여기 나타납니다.
- 그래프 영역 (Graph area) — 주파수 응답 커브가 실제로 그려지는 큰 캔버스입니다. 시선이 가장 오래 머무는 공간입니다.
- 패널 영역 (Panel area) — 헤드폰 기기 데이터를 로드하고, 그래프를 설정하거나 EQ를 적용하는 컨트롤 버튼이 모인 곳입니다. 여러분이 직접 조작하는 모든 작업은 이 패널 영역에서 일어납니다.
창 크기(화면 폭)에 따라 그래프 영역과 패널 영역이 화면을 나눠 갖는 방식(레이아웃)은 변하지만, 세 영역이 존재한다는 기본 틀은 변하지 않습니다.
네 개의 패널
패널 영역은 길게 늘어진 하나의 화면이 아닙니다. 작은 패널 전환 메뉴(Menu carousel)(네 개의 아이콘 묶음)를 눌러 서로 전환하는 네 개의 독립 패널로 나뉩니다. 패널마다 목적이 뚜렷합니다:
| 패널 명칭 | 주요 용도 | 상세 가이드 |
|---|---|---|
| 기기 (Device) | 데이터베이스를 탐색·검색하고, 헤드폰 커브를 화면에 불러옵니다. | 기기 로드하기 |
| 그래프 (Graph) | 타겟을 선택하고, 그래프 환경을 설정하며, 화면에 불려진 커브 선형을 관리합니다. | 그래프 컨트롤 & 커브 다루기 |
| 이퀄라이저 (Equalizer) | 나만의 EQ 프로파일을 만들고, 소리를 미리 듣거나 하드웨어 장비로 EQ를 직접 전송합니다. | EQ 적용 |
| 기타 (Misc) | 화면 테마, UI 번역 언어, 사이트 소개 및 앱 시스템 정보를 관리합니다. | 외관과 언어 |
화면에는 한 번에 하나의 패널만 열립니다. 패널 간 전환은 즉각적입니다. 그래프는 그 자리에 고정된 채, 선택한 패널 내용물만 옆에서 미끄러지듯 들어옵니다.
데스크톱 환경이라면 키보드 숫자 1, 2, 3, 4 키로 기기, 그래프, 이퀄라이저, 기타 패널로 즉시 이동합니다. 단축키 조합 없이 숫자만 누르면 됩니다.
데스크톱 레이아웃
브라우저 창의 너비가 1000 픽셀 이상이면, modernGraphTool은 데스크톱 레이아웃으로 작동합니다:
- 그래프 영역은 화면 왼쪽에 배치되며 가장 넓은 면적을 차지합니다.
- 패널 영역은 화면 오른쪽에 위치합니다. 기본 너비가 정해져 있지만, 마우스로 크기를 자유롭게 조절합니다.
- 두 영역 사이에는 얇은 **드래그 구분선(Drag divider)**이 있습니다. 이 선을 클릭한 채 좌우로 끌면 그래프와 패널이 차지하는 공간 비율이 바뀝니다.
- 그래프 바로 밑에는 (정규화, 스무딩, 스크린샷 등을 조작하는) 그래프 툴바가 놓이며, 그 아래로 주파수 튜토리얼 띠와 작은 키보드 단축키 안내 바가 그래프 칼럼 맨 아래에 들어갑니다.
- 주의할 점: 화면에 로드된 커브 객체를 관리하는 **선택 목록(Selection list)**은 그래프 바로 밑에 있지 않습니다. 오른쪽 구역의 그래프(Graph) 패널 안에 들어 있습니다. 따라서 특정 커브 선의 옵션을 조작하려면 먼저 "그래프 패널" 탭으로 넘어가야 합니다.
모바일 레이아웃
브라우저 창 너비가 1000 픽셀보다 좁아지면 (스마트폰, 세로로 든 태블릿, 작게 줄여 둔 PC 창 등), modernGraphTool은 모바일 레이아웃으로 완전히 바꿉니다:
- 그래프 영역은 화면 상단에 고정됩니다.
- 패널 영역은 그래프 밑으로 내려와 나머지 화면 전체를 차지합니다. 화면 스와이프와 터치 조작은 모두 여기서 진행됩니다.
- 패널 사이를 오가는 전환 메뉴는 패널 영역 하단으로 내려가 엄지로 닿기 쉬운 위치에 놓입니다.
- (정규화, 스무딩 등을 조작하던) 그래프 툴바는 좁은 화면을 아끼려고 접이식 아코디언 메뉴 안으로 들어가 그래프 패널 최상단에 놓입니다. 탭을 눌러 펼쳐야 내용물이 보입니다.
- 모바일 레이아웃에는 드래그 구분선이 없습니다. 그래프와 패널 영역의 화면 점유 비율은 고정입니다.
선택 목록(Selection list)은 데스크톱이든 모바일이든 항상 "그래프 패널" 안에 들어 있습니다. 따라서 "내 커브 선을 조작하려면 우선 그래프 패널로 들어가야 한다"는 멘탈 모델은 모든 환경에서 동일합니다.
모바일 패널 구역에서는 하단의 메뉴 전환 아이콘을 직접 탭해 패널을 바꿀 수도 있고, 패널 영역 안에서 손가락을 좌우로 쓸어 넘겨(스와이프) 패널 사이를 오갈 수도 있습니다.
키보드와 포커스 조작
UI 내부의 대다수 버튼 기능은 마우스 없이 키보드만으로도 접근됩니다:
- Tab 키를 누르면 다음 상호작용 요소로 포커스가 넘어가고, Shift+Tab을 누르면 이전 요소로 돌아옵니다.
- Enter 나 Space 키는 현재 포커스된 컨트롤(버튼)을 실행합니다.
- Ctrl+Z 및 Ctrl+Shift+Z (또는 Ctrl+Y) 조합은 커브를 로드하거나 지우거나 수정한 행동 내역을 실행 취소 / 다시 실행 처리합니다.
- 데스크톱 환경에서는 숫자 1 / 2 / 3 / 4 키로 4개의 패널을 즉시 넘나듭니다.
키보드 조작성과 시각장애인용 스크린 리더(Screen-reader) 지원은 아직 다듬는 중입니다. 탭으로 움직여도 포커스가 닿지 않는 컨트롤 버튼이나 스크린 리더가 읽지 못하는 레이블을 마주하셨다면 버그 리포트를 남겨주세요.
기본 흐름은 파악되셨나요? 그럼 이제 실제 음향 데이터가 어디서 어떻게 불려 오는지 기기 로드하기 문서에서 자세히 살펴봅시다.