# 1단계 — 레퍼런스 조사 (한성활자연구소)

## 브리프
한글 활자 파운드리 사이트. 타입 스페시멘이 주인공이 되는 구조, 한지 톤(#F5F1E8) 배경에 인주 레드(#A63D2F) 1색 강조, 방문객이 직접 글자를 시험해 보는 인터랙티브 조판 시험대가 핵심.
관찰 방법: WebFetch(페이지 취득) + 원본 HTML/CSS 소스 직접 확인(curl). 아래 수치는 전부 소스에서 실제 관찰된 값이며, 추출 한계로 확인 못 한 항목은 그렇게 명시했다.

## R1 · 구조 — Klim Type Foundry
URL: https://klim.co.nz (같은 업종: 타입 파운드리. 접근 성공)

### 관찰
**내비게이션**
- 헤더는 극히 절제: 로고 + "Fonts" + 햄버거(☰) 3개뿐. 나머지 전부 푸터로 내림.
- 푸터 4열: Fonts(리테일 폰트 26개 링크) / Custom fonts(10개: PayPal Sans 등) / Information(About, Blog, Interviews, Awards, Fonts in use, Account) / Support(Contact, FAQs, Font licences, Payments & refunds, Privacy policy) + 뉴스레터 폼 + 소셜 행.
- 스페시멘 페이지 헤더: 브레드크럼(Font → Signifier), Select ⭥ 셀렉터, ◑ 토글, "Download test fonts", "Buy fonts".

**홈 구성(위→아래)**: 피처드 폰트(패밀리별 서브 스타일 + Buy 링크) → Fonts in use(실사용 프로젝트 7건, 사용 폰트 명시) → Blog(6건) → 뉴스레터 → 푸터. "See all fonts →" 식 섹션 통로.

**스페시멘 페이지 구성(Signifier, 위→아래)**: 히어로 → 디자이너 기술문(개념 설명 + "Continue reading →" 블로그 링크) → 아코디언 패널(Credits & awards / Technical details / Variable font axes / Language support) → 최소 크기·파일 크기 표(스타일별 px 최소값 + 웹폰트 파일용량) → 액션 링크(테스트 폰트 다운로드, PDF 스페시멘) → 14 스타일 전개(#spc-thin ~ #spc-black-italic 앵커, 웨이트 번호 표기) → Specimens → OpenType features → Glyphs("Show outlines" 토글 2개) → in use(6건) → 푸터.
- 메타데이터 노출: 14 스타일, 글리프 956개/스타일, OT 기능 14종(onum, tnum, ss01, smcp, frac…), 수동 VTT 힌팅, 커닝 11,355페어/스타일. 기술 정보가 곧 콘텐츠.

**레이아웃 시스템(인라인 CSS에서 관찰)**
- 고정 max-width 컨테이너가 아니라 CSS 그리드 풀블리드: `--gridColumnCount: 12`(데스크톱) / `6`(≤768px), 뷰포트 기준점 `--viewportBasis: 430 / 768 / 1680` 3단.
- 타이포 단계(관찰된 변수): `--fontSizeBlog: 18px→24px`(뷰포트별), `--fontSizeBlogGlyph: 17px→23px`, `1.7vw`. 버튼/필은 `--lozengeMaxWidth`로 별도 제어.
- 색(소스 관찰): 배경 #f9f9f9·#ffffff, 텍스트 #000000·#1c1c1c·#353535, 회색 램프 #e2e2e2→#cecece→#c6c6c6→#aaa→#8d8d8d→#717171→#555, 강조 레드-오렌지 #d33c03·#E4001C, 포인트 #3c585f(청회색). 거의 무채도 + 드문 레드 점묘.
- UI 서체를 자사 리테일 폰트로 소화: SOEHNE(본문), MARTINA_PLANTIJN, SOEHNE_MONO, CALIBRE2 — 자기 폰트로 자기 사이트를 조판하는 도그푸딩.
- 이미지 없는 타입 전시: 스페시멘 본체는 텍스트 추출이 비어 있어(빈 앵커) 렌더러 출력/이미지 혼합으로 판단되나 fetch로는 확정 불가 — 이 한계 그대로 기록.

### 가져올 축
- "스페시멘 = 제품 페이지": 디자이너 기술문 → 접이식 기술 패널 → 스타일 전개 → 글리프/OT 기능 → in use 순서의 수직 스크롤 서사.
- 기술 메타(글리프 수, 커닝 페어, 최소 크기)를 장부처럼 표로 노출 — 활자소의 '조판 기록' 톤과 맞음.
- 12컬럼 풀블리드 그리드 + 절제 헤더(링크 2개) — 콘텐츠 폭을 폰트 크기가 지배하게 하는 구조.
- 무채도 배경 + 레드 1색 점묘(#d33c03/#E4001C가 실제로 쓰이는 방식) — 인주 레드 단일 강조의 선례.

### 변형
- klim은 백색 배경(#f9f9f9) → 우리는 한지 톤(#F5F1E8)으로 뒤집고, 레드 점묘를 인주 #A63D2F 하나로 통일.
- klim 다국어 라틴 중심 → 우리는 한글 자모 블록(ㄱ~ㅎ 조합)을 거대 글리프 주인공으로.
- "Fonts in use" → "활자 인쇄물"로 명칭 전환, PDF 스페시멘은 유지.

## R2 · 톤 — Motet.ch (제네바 아마추어 합창단)
URL: https://www.motet.ch (업종 다름 확인: 타입 파운드리 아님 — 합창단/공연 사이트. 접근 성공)

### 관찰
- 플랫폼: Wix(메타 generator에서 관찰). 단일 페이지 수직 스크롤 + "top/bottom of page" 앵커.
- 내비 6항목: Accueil, Le Motet, Concerts, Médias, Contact, Espace choristes + "Plus". 키보드 접근 안내 문구("Use tab to navigate through the menu items")가 UI에 상주.
- 폰트(소스 관찰, 선언 수): 'Raleway' 20회(본문 sans), 'Playfair Display' 16회(디스플레이 serif), Arial/Helvetica 폴백. sans+디스플레이 세리프 2체 구성.
- 색(소스 관찰): 흰색 #FFFFFF 지배, 텍스트 #080808, 링크 #116dff(플랫폼 기본 파랑), 포인트 #F2BF5E(골드), #9E8686(더스티 로즈), 보조 #8F8F8F·#E2E2E2.
- 공연 정보(2026-11-19 Nabucco, Victoria Hall)가 카스트 목록·티켓팅 링크와 장부처럼 나열됨 — 종이 프로그램 표지에 가까운 정보 밀도.
- 여백·밀도의 시각적 체감은 fetch로 관찰 불가(텍스트 추출 한계) — 확인된 것은 색·폰트·구조뿐.

### 가져올 축
- Playfair Display형 고전 세리프 + Raleway형 가독 sans의 2체 짝 — 공연 프로그램/장부의 인쇄 감각. 우리는 한글 명조 계열(스페시멘 주인공) + 작은 고딕(라벨) 짝으로 번역.
- 골드 #F2BF5E·더스티 로즈 #9E8686 같은 안료 느낌 포인트가 흰 배경 위에서만큼은 '인쇄 잉크' 인상을 줌 — 채도 낮은 강조색 운용의 참고.
- 날짜·이름·장소를 표로 성실하게 적는 장부식 정보 배치.

### 변형
- 흰 배경+기본 파랑 링크(#116dff)는 Wix 템플릿 기본값 인상 — 우리는 한지 #F5F1E8 배경 + 인주 #A63D2F 링크로 교체(파랑 완전 배제).
- 키보드 접근 안내를 상주 문자로 두는 방식은 인계받아, 나머지 템플릿 감각(기본 링크색, 과한 골드)은 배제.

## R3 · 디테일 — 폰트 테스터 UI

### 테스터 기법 (관찰된 것)
klim 스페시멘 페이지의 서버 렌더 DOM에서 관찰:
- 스타일/웨이트 전환기: Radix UI `role="combobox"` 버튼 + 시각적으로 숨긴 진짜 `<select>`(`clip:rect(0,0,0,0)` + `tabindex="-1"`)를 나란히 두는 미러 패턴 — 커스텀 UI와 스크린리더 호환을 동시에 확보.
- `role="switch"` + `data-cy="renderMode"`(◑ 아이콘): 렌더 모드 전환 토글(웹폰트/대체 렌더 추정).
- 글리프 섹션 "Show outlines" 토글 2개, 기술 패널은 `Accordion` 버튼, 상단엔 NotableDetails 페이지네이션 버튼 12개.
- **서버 HTML에 `type="range"` 슬라이더 0개, contenteditable 0개** — 크기/트래킹 조절 컨트롤은 fetch로 관찰 불가(JS 수화 후 생성되거나 없음). 이 사실 그대로 기록.
- DINAMO 테스터(dinamodisplay.com/fontswitcher)는 접근 실패로 관찰 못 함(실패 기록 참조).

### 구현 제약 (우리 시험대 설계 지침)
- 슬라이더는 `<input type="range">`를 쓰더라도 `aria-label`(예: "글자 크기"), 키보드 방향키 동작, 값 표시를 함께 둘 것 — klim의 숨은 진짜 select 미러 패턴이 증명하는 원칙: 커스텀 컨트롤 옆에 네이티브 의미를 남겨라.
- 한글 테스터는 자소 조합(받침 포함)이 실시간 편집에 부담이므로, 편집 가능 영역 + 미리 정의된 조판 문단(시편/장부 문형) 전환의 2모드로 시작.
- 웹폰트 로드 실패 대비 renderMode 스위치(klim ◑의 교훈): 시험 텍스트를 이미지/정적 폴백으로 전환할 출구를 설계에 반영.
- 서버 사이드에서도 테스터 기본 상태가 HTML에 남도록(크기·문구 기본값이 소스에 보이게) — 크롤러·스크린리더 모두에게 첫 상태가 존재해야 함.

## 접근 실패 기록
| 대상 | 시도 | 결과 |
|---|---|---|
| dinamodisplay.com | WebFetch 1회 | 실패 — connect ECONNREFUSED |
| dinamodisplay.com/fontswitcher + www 호스트 | curl 2회 | 실패 — exit 7, http_code 000 (연결 거부) → 2회 실패로 대체 후보 1회 시도 |
| griffetype.com (대체 후보) | WebFetch 1회 | 실패 — getaddrinfo ENOTFOUND (DNS 미해석). 여기서 중단 |
| klim.co.nz, motet.ch | — | 접근 성공. 다만 WebFetch 텍스트 추출은 색·폭·크기 정보를 주지 않아 원본 HTML/CSS 소스(curl)로 보완 관찰함 |

## 안 할 것 (3개)
1. **klim의 색 팔레트 다색 사용을 본뜨지 않는다** — 회색 램프는 가져와도 #d33c03/#E4001C/#3c585f/#24a7f2 식 포인트 난사는 버리고, 강조는 인주 #A63D2F 단일색으로.
2. **동적 슬라이더만 있는 테스터를 만들지 않는다** — 관찰된 klim조차 서버 HTML에 range 슬라이더 없이 셀렉터+스위치로 출발하므로, 접근성 미지원 커스텀 슬라이더(드래그 전용 캔버스 등)는 금지. 네이티브 input + aria 없는 컨트롤 금지.
3. **템플릿 기본값 링크 파랑(#116dff류)·플랫폼 기본 폰트(Arial/Helvetica)를 화면에 노출하지 않는다** — motet.ch에서 관찰된 안 좋은 선례. 링크·본문 모두 지정 체계 안에서만.