72337b7ee0
Some checks failed
ci / build (push) Failing after 5s
- 핵심 규칙 6: 완료의 정의는 게이트 통과. 사용자를 QA로 쓰지 않는다 - 5단계 기계 검사 4번째: design-gate 실행 의무화 - references/audit-gate.md: 사고-검사 매핑, SEO/meta 체크리스트, OS/브라우저 특성, 하니스 규칙 - tools/design-gate.mjs: 범용 게이트(메타/SEO·대비·수축·리듬·트랙·스케일×폭 + 옵션 L0/L3/L4, checks 깊은 병합) - 리듬·트랙 불변식: 숫자 라벨 등폭·빈 셀 트랙 균일·등간격 — 시간표 자동배치 결함 재현 픽스처 검출, 앱 15뷰 통과(오탐 0) feat(site): 관리 앱 2종 프로덕션 콘솔(v6→v18) - 가온 학적부 9뷰·두레 수강신청 6뷰: shadcn 문법, Pretendard/Noto Serif/IBM Plex 폰트 전략, 볼드 금지(400/500/600), WCAG AA 대비 전면 교정, 한글 keep-all 조판 - LMS 필수 요소(알림 센터·공지·진도·평가 유형·출결 사유·학점 경고), 12명 기준 데이터 정합, SEO 구조(h1 유일·OG/twitter·og.png) - 시간표 자동배치 결함 수리(명시적 격자 좌표) - QA 게이트: L0 stylelint/html-validate · L1 단위 30 · L2 감사 61+불변식 · L3 시각회귀 30화면 · L4 WebKit · L5 키보드 탐색 — npm run verify 실패 시 배포 금지 체인
86 lines
9.3 KiB
Markdown
86 lines
9.3 KiB
Markdown
# 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에서 관찰된 안 좋은 선례. 링크·본문 모두 지정 체계 안에서만.
|