설정 셸과 접근성 기준
Glif의 설정은 한 화면에 모든 기능을 쌓아 둔 목록이 아니다. 일반, 에디터, 계정, 스타일, 단축키, 확장, 시스템이라는 일곱 범주가 각자 소유한 값을 보여 주는 공용 셸이다. 작업을 시작하는 Desk·Template Editor 같은 독립 workspace를 설정 안에 다시 넣지 않고, 반복해서 조정하는 환경 값만 모은다.
이 장에서는 설정을 여는 방법, 각 범주의 책임, 값의 적용 범위와 저장 경계, keyboard 탐색과 복구 순서를 설명한다.
실습 프로젝트 준비
Settings & Appearance Lab 예제 전체를 별도 폴더에 복사하고 Scope로 연다.
| 파일 | 확인할 내용 |
|---|---|
10_contrast-check.md |
설정 변경 전후 제목·본문·링크·코드·표의 표현 |
20_accessibility-checklist.md |
keyboard, 확대, 좁은 화면, 색·focus와 복구 점검 |
README.md |
전체 실습 순서와 원본 보존 원칙 |
원본 fixture를 직접 고치지 말고 복사본을 사용한다. 설정·테마 변경이 Markdown 원문과 분리되는지 확인하기 쉽고, 잘못된 상태에서도 실습을 처음부터 재현할 수 있다.
설정 열기와 닫기
- 앱 오른쪽 위의 설정 열기 단추를 선택한다.
- 왼쪽에서 설정 범주를 선택한다.
- 오른쪽에서 값을 확인하거나 바꾼다.
- 오른쪽 위 닫기를 선택해 이전 workspace로 돌아간다.
설정은 현재 workspace 위에 dialog로 열린다. 바깥을 잘못 눌러 닫히지 않으므로 변경 중인 맥락을 잃지 않는다. 닫은 뒤에도 열어 둔 문서와 workspace는 그대로 남는다.
설정 왼쪽과 내용 사이 splitter를 drag하면 내비게이션 폭을 조절할 수 있다. 항목 설명이 잘리거나 번역된 이름이 길 때 폭을 넓히고, 작은 화면에서는 내용 영역을 확보하도록 줄인다.
일곱 범주의 책임
| 범주 | 여기서 다루는 것 | 여기서 다루지 않는 것 |
|---|---|---|
| 일반 | 인터페이스 언어와 공통 기본값 | 문서 frontmatter의 언어 |
| 에디터 | 쓰기 화면, 맞춤법, 자동링크 같은 편집 동작 | Markdown 본문 자체와 projection 설정 |
| 계정 | 외부 서비스·협업에 필요한 연결 | 비밀값을 문서에 기록하는 일 |
| 스타일 | 앱 테마, 번들 테마, schema 기반 style token, 사용자 CSS | Hugo 사이트의 별도 theme·site style |
| 단축키 | keyboard command binding 확인·변경 | 운영체제 전역 단축키 |
| 확장 | 확장 runtime의 상태와 진단 | 기본 기능처럼 보장되지 않은 plugin 주장 |
| 시스템 | 업데이트, cache, 성능, 초기화와 runtime 정보 | Binder 문서 삭제 |
범주 이름은 기능을 찾는 첫 단서이고, 각 control의 설명은 적용 범위를 판단하는 두 번째 단서다. 이름만 보고 범위를 추측하지 말고 설명과 저장 결과를 함께 확인한다.
적용 범위를 먼저 구분한다
설정 값을 바꾸기 전에 다음 네 범위 중 어디에 속하는지 판단한다.
| 범위 | 예 | 확인 방법 |
|---|---|---|
| 앱 전체 | 인터페이스 언어, 공통 맞춤법, 색상 모드 | 다른 Scope로 전환해도 유지되는지 확인 |
| Scope·작업 폴더 | 쓰기 화면처럼 작업 폴더별로 유지되는 값 | 다른 Scope와 왕복해 비교 |
| Binder·publish | 사이트 설정, provider, 출력 경로 | Binder의 publish 화면과 생성 파일 확인 |
| 문서 | frontmatter, 보기별 문서 설정 | 원문과 해당 문서 projection을 대조 |
Settings shell에 보인다는 이유만으로 모든 값이 앱 전체 설정인 것은 아니다. 예를 들어 에디터 쓰기 화면 일부는 작업 폴더별로 유지될 수 있고, publish 설정은 별도 Site·Publish 표면이 소유한다.
Keyboard로 설정 탐색하기
설정 내비게이션의 각 항목은 button이며 현재 범주는 aria-current="page"로 표시된다. keyboard focus와 현재 선택은 서로 다른 상태다.
- 설정을 연 뒤
Tab으로 닫기 단추와 내비게이션 항목을 이동한다. Shift+Tab으로 이전 control로 돌아간다.Enter또는Space로 범주·tab·button을 실행한다.- focus 윤곽이 배경색과 구분되는지 확인한다.
- focus가 일반에 있어도 현재 내용이 스타일이면 선택 표시는 스타일에 남는지 확인한다.
이번 실증에서 focus 대상은 :focus-visible과 실선 outline을 가졌고, 현재 범주 표시는 별도의 선택 배경으로 유지됐다. 색만으로 둘을 구분하지 않고 윤곽·위치·현재 상태를 함께 사용한다.
활동 중심 정보 구조 읽기
Glif의 상단 workspace와 Settings는 역할이 다르다.
- 상단 workspace는 쓰기, 연결하기, 보기, 조립하기, 게시하기처럼 지금 수행할 활동으로 이동한다.
- Settings는 그 활동이 반복해서 사용할 환경과 정책을 조정한다.
- Desk, Template Editor, Graph 같은 독립 작업 표면은 Settings의 하위 페이지가 아니다.
- 특정 기능을 찾지 못했을 때 Settings만 뒤지지 말고 상단 작업 메뉴와 정보 panel도 확인한다.
이 구분 덕분에 설정 항목이 늘어나도 핵심 작업 흐름이 설정 dialog 안에 매몰되지 않는다.
안전하게 값을 바꾸는 순서
- 바꾸려는 값의 현재 상태를 screenshot이나 메모로 남긴다.
- 앱·Scope·Binder·문서 중 적용 범위를 확인한다.
- 한 번에 한 범주만 바꾼다.
- 설정을 닫고 실제 문서나 workspace에서 결과를 확인한다.
- Scope를 왕복하거나 앱을 다시 열어 persistence 범위를 확인한다.
- 예상과 다르면 범주별 되돌리기, 기본값 또는 초기화 절차를 사용한다.
초기화와 삭제를 혼동하지 않기
시스템의 처음 사용 흐름 초기화는 앱 설정, 최근 작업 폴더와 저장된 작업 폴더 목록을 초기화한다. 기존 문서 폴더의 Markdown을 삭제하는 작업은 아니다. 그래도 실행 전 현재 Scope 경로와 중요한 설정을 기록하고 확인 dialog의 범위를 다시 읽는다.
좁은 화면과 확대
실제 운영체제 200% 확대와 브라우저의 좁은 CSS viewport는 같은 검증이 아니다. 둘 다 별도로 확인한다.
- 200% 확대: Windows display scale 또는 앱이 지원하는 실제 확대 환경에서 확인한다.
- 좁은 화면: 설정 splitter와 scroll 영역에서 모든 action에 도달하는지 확인한다.
- 긴 번역: 내비게이션 폭을 늘렸을 때 이름과 설명이 읽히는지 확인한다.
- 표·token editor: 문서 전체가 아니라 필요한 내부 영역에서 scroll되는지 확인한다.
예상과 다를 때
| 증상 | 먼저 확인할 것 | 조치 |
|---|---|---|
| 설정 단추를 찾을 수 없다 | 오른쪽 상단 도구 영역 표시 상태 | 오른쪽 도구 영역을 다시 표시하고 설정 열기를 찾는다 |
| 원하는 기능이 설정에 없다 | 독립 workspace 또는 정보 panel 기능인지 | 상단 작업 메뉴와 현재 보기의 정보 panel을 확인한다 |
| 값이 다른 Scope에도 적용된다 | 앱 전체 설정인지 | 설명과 canonical 범위를 확인하고 원래 값으로 복구한다 |
| 바꾼 값이 다시 열면 사라진다 | 저장 action과 persistence 범위 | 명시적 저장이 필요한지 확인하고 오류 알림을 기록한다 |
| keyboard focus가 보이지 않는다 | mouse focus가 아니라 keyboard modality인지 | Tab으로 다시 진입하고 high contrast에서도 확인한다 |
| 내용이 잘린다 | 내비게이션 폭과 내부 scroll | splitter를 조절하고 200% 확대·좁은 화면을 따로 재현한다 |
| 초기화가 두렵다 | dialog에 적힌 삭제 범위 | 문서 폴더가 삭제 대상이 아님을 확인하고 중요 설정을 기록한다 |
검증 범위
이 장의 canonical 기능 ID는 WS-16, WS-20이다. Glif 0.1.0, Windows, 한국어, 1200×800 앱 client area에서 설정 dialog와 일곱 범주, 실제 Tab·Shift+Tab focus를 확인했다.
- 확인함: 설정 열기, 일곱 범주,
aria-current,:focus-visible, splitter가 있는 공용 shell, Markdown 원본 보존 - 아직 주장하지 않음: 사람의 screen reader 전체 청취, 실제 OS 200% 확대, Windows high contrast의 모든 control 조합
다음에는 테마, 스타일 토큰과 복구에서 같은 Markdown을 라이트·다크와 두 번들 테마로 비교한다.