designpaca/research/dogfood-foundry/01-references.md

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에서 관찰된 안 좋은 선례. 링크·본문 모두 지정 체계 안에서만.