feat(skill): route fixes, delivery report, composition diversity, platform refresh
- route table: extension route for products with an existing visual language, feedback row, derived state tokens stay local - completion: blocking 0 plus reported unverified; hard-gate surface is the touched scope; delivery report starts with what and how to open - design.md created at step 0 with a skeleton, fingerprint line and change log; product-surface rubric reading; direction delegation states the chosen card and reason - layout: hero families, nav forms, footer forms; art-direction page convergence 6 axes; genre sections; image treatments; placeholder conventions; multi-screen order; Tailwind theme mapping - platform: scroll-driven examples, anchor positioning, canvas OT, three/R3F pins, shadcn style prefixes, Safari 26 notes, subgrid - design-gate: four result states, exit codes, cwd module resolution, --url/--out-dir/--strict, oklch contrast, dead selector word match - Korean font budget split from the Latin baseline
This commit is contained in:
parent
9bcb45cbd3
commit
88c11682b1
51 changed files with 5834 additions and 2259 deletions
|
|
@ -9,6 +9,24 @@ AI가 만든 티는 **못 만들어서** 나는 게 아니라 결정을 설명·
|
|||
|
||||
---
|
||||
|
||||
## 이 문서를 읽는 법
|
||||
|
||||
통째로 읽지 않는다. 지금 하는 일에 맞는 절만 연다.
|
||||
|
||||
| 상황 | 읽을 곳 |
|
||||
|---|---|
|
||||
| 2단계 방향을 정하며 AI 수렴 클러스터와 대조한다 | §0, §1, §3 |
|
||||
| 서체·타입 스케일 후보를 점검한다 | §2 |
|
||||
| 컴포넌트·모션 기본값을 점검한다 | §4, §5 |
|
||||
| 카피를 쓰거나 고친다 | §6 |
|
||||
| 이미지 슬롯을 점검한다 | §7 |
|
||||
| 한글이 들어간다 | §8(지문만). 값은 [typography.md](typography.md) §6-5 |
|
||||
| 5단계 프리플라이트 자동 검사 | §9 grep, §10 채점표 |
|
||||
| 측정 도구 결과가 이상하다 | §9-b |
|
||||
| 사용자 지적을 받아 고친다 · 여백을 문장으로 채우려 한다 · 데모와 카피의 순서를 정한다 | §9-c |
|
||||
|
||||
---
|
||||
|
||||
## 0. 먼저 보는 반복 후보
|
||||
|
||||
원자료와 재현 가능한 표본이 없는 빈도 수치는 규칙의 근거가 될 수 없다. 아래 항목은 흔한 기본값을 찾는 검색 후보이며, 색·대문자·번호가 존재한다는 사실만으로 실패가 아니다.
|
||||
|
|
@ -30,7 +48,7 @@ AI가 만든 티는 **못 만들어서** 나는 게 아니라 결정을 설명·
|
|||
| **다크 모드를 브리프 근거 없이 기본값으로** (`bg-slate-900`, `#0B0B0F`) | 대상 환경·브랜드·콘텐츠에 맞는지 설명하지 못하면 선택이 기본값처럼 보일 수 있다 | 라이트·다크의 역할 토큰, 실제 기기 대비, 사용자 설정·테마 전환 필요성을 비교한다 |
|
||||
| **보라→파랑 그라디언트 히어로** (`from-purple-600 to-blue-500`, `#6366f1→#a855f7`) | 제품·브랜드·정보 역할과 무관하면 배경 장식만 남을 수 있다 | 단색·동일 hue 변화·다중 hue를 같은 콘텐츠에서 비교하고, 텍스트 대비와 행동 위계를 확인한다 |
|
||||
| **라벤더 퍼플이 어디에나** (`#a78bfa`, `#c4b5fd`) | 맥락 없는 반복은 기본값처럼 보일 수 있음 | 브랜드·접근성·표면 역할을 설명하고 실제 렌더에서 위계를 확인 |
|
||||
| **네온 온 다크** — 시안(`#22d3ee`)·바이올렛이 검정 위에서 발광 | 색의 의미·대비·주변광에서의 읽기 비용을 확인해야 한다 | 상태·행동·콘텐츠 역할과 연결하고, 저채도/고채도·명도 대비를 실제 기기에서 비교한다 |
|
||||
| **네온 온 다크** — 시안(`#22d3ee`)·바이올렛이 검정 위에서 발광 | 색의 의미·대비·주변광에서의 읽기 비용을 확인해야 한다 | 상태·행동·콘텐츠 역할과 연결하고, 저채도/고채도·명도 대비를 실제 기기에서 비교한다. 사용자가 사이버펑크·게임 장르를 요청했으면 관찰 후보가 아니다 — [style-atlas.md](style-atlas.md) 사이버펑크 카드의 위험 칸(광과민·작은 글자 번짐)으로 검증한다 |
|
||||
| **컬러 글로우** (`box-shadow: 0 0 80px rgba(139,92,246,.5)`) | 깊이·계층·상태를 글로우만으로 표현하면 의미가 모호해질 수 있다 | 그림자·경계·여백·글로우 후보 중 실제 계층과 성능을 가장 잘 드러내는 것을 선택한다 |
|
||||
| **히어로 뒤 방사형 그라디언트 오브·헤일로** | 메시지·제품 증거·구도보다 장식이 먼저 읽히는지 점검한다 | 배경·제품 화면·타입 중심 구도를 같은 콘텐츠로 비교한다 |
|
||||
| **순백 `#ffffff` / 순흑 `#000000`** 을 배경·텍스트로 | 극단값이 브랜드·매체·환경에 맞는지 점검한다 | 대상 기기·주변광·텍스트 대비와 실제 렌더의 눈부심을 확인한다. 색 자체를 실패로 취급하지 않는다. 출처: [WCAG 2.2 Contrast](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)와 프로젝트 브리프 |
|
||||
|
|
@ -40,9 +58,9 @@ AI가 만든 티는 **못 만들어서** 나는 게 아니라 결정을 설명·
|
|||
| **크림/베이지(`#FDF8F3`)를 "고급"의 기본값으로** | 보라를 대체한 신종 슬롭 | 크림을 쓸 거면 왜 크림인지 브리프와 연결하고 텍스트·액센트를 그에 맞춰 재설계 |
|
||||
| **여러 hue가 경쟁함** | 행동·상태·정보의 우선순위가 색 때문에 흐려질 수 있다 | 색 역할과 화면 면적을 실제 상태에서 비교한다. hue 수·60/30/10은 출발 가설일 뿐 통과 기준이 아니다 |
|
||||
| **다크에서 본문 대비 미달** | 적용 WCAG 성공 기준을 실제 배경 합성값으로 충족하는지 점검한다 | `#0f172a` 위 `#94a3b8`의 WCAG 대비는 약 **6.96:1**이므로 미달 사례가 아니다. WCAG 2.2 AA 본문 판정에는 contrast ratio를 사용하며 APCA는 이를 대체하지 않는다. 반투명·이미지 배경은 실제 렌더에서 계산한다. 출처: [WCAG 2.2 Contrast](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) |
|
||||
| **웜크림 배경 + 하이컨트라스트 세리프 + 테라코타 액센트** (배경 `#F4F1EA` 부근, 세리프 디스플레이, 액센트 `#D97757` 부근) | **관찰 후보** — 지금 AI 생성 디자인이 가장 자주 수렴하는 클러스터 중 하나다. `#D97757` 부근은 Anthropic 자체 상호작용 액센트와 겹쳐, 사용자 브리프에서는 Claude 계열 도구가 만들었다는 티로 먼저 읽힐 수 있다(자기지시적 경고) | 이 조합을 브랜드·업종 근거로 골랐는지 확인한다. 근거가 없으면 다른 웜톤이나 다른 액센트 hue를 브리프에서 다시 끌어온다. 브리프가 정확히 이 룩을 요구하면 그대로 쓴다. 출처: [SKILL-FRONTEND-DESIGN] |
|
||||
| **거의 검정 배경 + 단일 비비드 애시드그린·버미리언 액센트** | **관찰 후보** — 대비되는 두 번째 흔한 클러스터. 다크 배경 자체는 문제가 아니지만 "네온 액센트 하나"라는 조합이 브랜드와 무관하게 반복된다 | 브랜드·상태 역할과 실제 렌더 대비로 액센트 선택의 근거를 남긴다. 출처: [SKILL-FRONTEND-DESIGN] |
|
||||
| **뷰 하나에 여러 요소가 동시에 채색됨** (버튼·배지·아이콘·텍스트 링크가 한 화면에서 전부 강조색) | **관찰 후보** — 강조색이 여러 곳에 흩어지면 "지금 할 행동"을 색만으로 구분하기 어려워진다 | 뷰당 주요 행동 하나에만 채운 강조색을 쓰고, 나머지는 중성 톤이나 다른 상태 표시로 구분한다. 색 체계 상세는 `references/color.md`. 출처: [SKILL-BETTER-COLORS] |
|
||||
| **웜크림 배경 + 하이컨트라스트 세리프 + 테라코타 액센트** (배경 `#F4F1EA` 부근, 세리프 디스플레이, 액센트 `#D97757` 부근) | **관찰 후보** — 지금 AI 생성 디자인이 가장 자주 수렴하는 클러스터 중 하나다. `#D97757` 부근은 Anthropic 자체 상호작용 액센트와 겹쳐, 사용자 브리프에서는 Claude 계열 도구가 만들었다는 티로 먼저 읽힐 수 있다(자기지시적 경고) | 이 조합을 브랜드·업종 근거로 골랐는지 확인한다. 근거가 없으면 다른 웜톤이나 다른 액센트 hue를 브리프에서 다시 끌어온다. 브리프가 정확히 이 룩을 요구하면 그대로 쓴다. 대안 방향의 예와 4축 수렴 점검은 [presets/README.md](presets/README.md) "피하는 수렴 클러스터"를 따른다. 출처: [SKILL-FRONTEND-DESIGN] |
|
||||
| **거의 검정 배경 + 단일 비비드 애시드그린·버미리언 액센트** | **관찰 후보** — 대비되는 두 번째 흔한 클러스터. 다크 배경 자체는 문제가 아니지만 "네온 액센트 하나"라는 조합이 브랜드와 무관하게 반복된다 | 브랜드·상태 역할과 실제 렌더 대비로 액센트 선택의 근거를 남긴다. 대안 방향의 예와 4축 수렴 점검은 [presets/README.md](presets/README.md) "피하는 수렴 클러스터"를 따른다. 출처: [SKILL-FRONTEND-DESIGN] |
|
||||
| **한 결정 단위 안에서 여러 요소가 동시에 채색됨** (버튼·배지·아이콘·텍스트 링크가 같은 영역에서 전부 강조색) | **관찰 후보** — 강조색이 여러 곳에 흩어지면 "지금 할 행동"을 색만으로 구분하기 어려워진다 | 결정 단위(폼 하나, 히어로 하나, 반복 모듈 하나)당 주요 행동 하나에만 채운 강조색을 쓰고, 나머지는 중성 톤이나 다른 상태 표시로 구분한다. 상품 카드·요금제 열 같은 반복 모듈은 모듈마다 하나가 정상이다. 상세는 `references/color.md` §7. 출처: [SKILL-BETTER-COLORS] |
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -59,7 +77,7 @@ AI가 만든 티는 **못 만들어서** 나는 게 아니라 결정을 설명·
|
|||
| **히어로 = pill 배지 + 거대 헤드라인** (`✨ Now in beta` + H1) | 배지가 실제 상태·시간성·제약을 설명하는지 점검한다 | 배지·문장 안 상태·내비 상태·생략을 비교하고, 첫 행동에 필요한 경우만 남긴다 |
|
||||
| **`_01_ _02_ _03_` 장식 번호 라벨** | 에디토리얼 흉내인데 구조는 없음 | 번호가 순서를 의미할 때만 |
|
||||
| **본문/헤드라인 자간이 읽기를 방해함** | 글꼴·언어·크기·폭에 따라 글리프 충돌, 단어 인식, 줄바꿈이 달라진다 | 0, 양수, 음수 자간을 대표 문구·지원 viewport·200% 확대에서 비교한다. 단일 `em` 수치를 보편 기준으로 쓰지 않는다 |
|
||||
| **본문 크기·행간이 과업에 맞지 않음** | 작은 글자나 촘촘한 행간은 읽기·확대·오류 복구 비용을 높일 수 있다 | 글꼴·언어·콘텐츠 밀도별 후보를 실제 기기·200% 확대·긴 문단에서 검증한다. 16px이나 고정 line-height를 보편 하한으로 선언하지 않는다 |
|
||||
| **본문 크기·행간이 과업에 맞지 않음** | 작은 글자나 촘촘한 행간은 읽기·확대·오류 복구 비용을 높일 수 있다 | 글꼴·언어·콘텐츠 밀도별 후보를 실제 기기·200% 확대·긴 문단에서 검증한다. 16px이나 고정 line-height를 보편 하한으로 선언하지 않는다(단 한글 본문은 typography §6-5의 시작값 — 16px 이상, 행간 하한 1.5 — 을 따른다) |
|
||||
| **모노스페이스를 장식으로 사용** | 코드·데이터 외 용도에서도 의미·가독성·브랜드 톤을 돕는지 점검한다 | 대상 언어·크기·대비·긴 문자열을 실제 렌더에서 비교한다. 모노스페이스 자체나 용도만으로 실패시키지 않는다. 출처: `references/typography.md` |
|
||||
|
||||
---
|
||||
|
|
@ -78,7 +96,7 @@ AI가 만든 티는 **못 만들어서** 나는 게 아니라 결정을 설명·
|
|||
| **벤토 그리드를 기본 선택지로** | 타일 크기 차이가 정보 위계나 과업을 설명하지 못할 수 있다 | 벤토·단순 목록·비교 grid를 콘텐츠와 작은 폭 재배치에서 비교한다. 연도별 트렌드 주장은 근거가 아니다 |
|
||||
| **콘텐츠 여백·본문 폭이 읽기를 방해함** | viewport·글꼴·언어·확대에 따라 줄 길이와 행동 영역이 달라진다 | gutter와 measure 후보를 320px·200% 확대·넓은 폭에서 렌더해 검증한다. 고정 px·ch 범위는 출발값일 뿐이다 |
|
||||
| **푸터가 링크 4열 + 소셜 아이콘 + 카피라이트뿐** | AI가 가장 성의 없이 만드는 곳 | 실제 정보(연락처, 주소, 사업자 정보)를 넣어라. 링크가 4개뿐이면 4열로 만들지 마라 |
|
||||
| **브로드시트 클러스터** (헤어라인 룰 전체, `border-radius: 0` 전면 적용, 신문형 조밀 컬럼) | **관찰 후보** — 세 번째로 흔한 AI 생성 클러스터. 헤어라인·radius 0 자체가 나쁜 것은 아니지만 브랜드·매체 근거 없이 반복되면 에디토리얼 흉내로 읽힌다 | 브랜드·콘텐츠 밀도와 연결해 근거를 남기고, 좁은 컬럼에서 실제 가독성을 검증한다. 출처: [SKILL-FRONTEND-DESIGN] |
|
||||
| **브로드시트 클러스터** (헤어라인 룰 전체, `border-radius: 0` 전면 적용, 신문형 조밀 컬럼) | **관찰 후보** — 세 번째로 흔한 AI 생성 클러스터. 헤어라인·radius 0 자체가 나쁜 것은 아니지만 브랜드·매체 근거 없이 반복되면 에디토리얼 흉내로 읽힌다 | 브랜드·콘텐츠 밀도와 연결해 근거를 남기고, 좁은 컬럼에서 실제 가독성을 검증한다. 대안 방향의 예와 4축 수렴 점검은 [presets/README.md](presets/README.md) "피하는 수렴 클러스터"를 따른다. 출처: [SKILL-FRONTEND-DESIGN] |
|
||||
| **섹션마다 페이드업 리빌 + 모든 카드에 호버 전환** (예외 없이 전부) | **관찰 후보** — 섹션 단위 등장과 카드 호버를 빠짐없이 걸면 "하나의 오케스트레이션된 모먼트"가 아니라 흩어진 장식 모션의 기본값으로 읽힌다 | 모션은 중요한 변화 한둘에만 걸고 나머지는 정적으로 둔다. `references/motion.md`의 저비용 기본·결정 표와 일관되게 선택한다. 출처: [SKILL-FRONTEND-DESIGN] |
|
||||
| **본문 전체를 justify 정렬** | **관찰 후보** — 자동 하이픈 없이 본문 전체를 양쪽 정렬하면 단어 사이 공백이 불규칙해져 읽기가 나빠질 수 있다. 한글은 어절 단위 줄바꿈이라 영향이 다르게 나타난다 | 왼쪽 정렬을 기본으로 하고, justify가 필요하면 하이픈네이션과 좁은 컬럼에서 실제 렌더로 확인한다. 세부는 `references/typography.md`. 출처: [SKILL-BETTER-TYPE] |
|
||||
|
||||
|
|
@ -128,6 +146,8 @@ AI가 만든 티는 **못 만들어서** 나는 게 아니라 결정을 설명·
|
|||
|
||||
이 절은 브랜드 차별성을 주장하는 마케팅 카피(헤드라인·브랜드 약속)를 다룬다. 버튼·오류·빈 상태·토글 같은 제품 UI 카피의 목소리·용어 규칙은 `references/product-copy.md`.
|
||||
|
||||
**한국어 카피 지문 요약** — 번역체(무생물 주어+사람 동사, `~를 통해`·`당신의`·`여정`·`재정의`), 명사 종결 수수께끼 표제, 선언·잠언형 과장, `~가 아니라 ~다` 대구 남발, 감성 어휘(결·온도·숨·머무는·깃든) 반복, 내용 없는 영문 장식 라벨. 정본과 나쁜 예→고친 예는 [product-copy.md](product-copy.md) §13-c이고, 여기서는 중복 규정하지 않는다.
|
||||
|
||||
### 진단 범위
|
||||
브랜드가 특별하다고 주장하는 헤드라인·브랜드 약속에만 제품·회사 이름을 **경쟁사 이름으로 바꿔 읽는다.** 다른 업체에도 그대로 성립하면 차별성의 근거와 구체성을 다시 본다.
|
||||
|
||||
|
|
@ -230,19 +250,22 @@ B 라면, 반응형에서 매번 바뀌는 것을 지목한 것이다. 지목하
|
|||
|
||||
## 8. 한글 조판 (한국어 프로젝트 필수)
|
||||
|
||||
한국어는 글꼴·줄바꿈·fallback·문장 리듬을 실제 콘텐츠와 지원 기기에서 별도로 검증한다. 영문 출발값을 그대로 복사하지 않는다.
|
||||
**정본은 [typography.md](typography.md) §6-5다.** 값과 이유는 그곳에만 있다. 이 절은 프리플라이트에서 훑을 지문만 둔다. 영문 출발값을 그대로 복사하지 않는다.
|
||||
|
||||
| 규칙 | 값 | 이유 |
|
||||
| 지문 | 왜 문제 | 대신 |
|
||||
|---|---|---|
|
||||
| **한글 글꼴과 fallback 미확인** | 한국어 glyph coverage·줄바꿈·숫자·운영체제 fallback이 과업에 맞는지 점검한다 | 시스템 한글 폰트를 포함해 실제 지원 기기에서 긴 제목·본문·숫자를 렌더하고, 선택·라이선스·fallback metric을 기록한다. 시스템 폰트 사용만으로 완성도 미달로 취급하지 않는다. 출처: `references/typography.md`, 프로젝트 브리프 |
|
||||
| **한글 line-height 후보** | 글꼴·크기·문단 길이·화면 폭에 따라 읽기 리듬이 달라진다 | 1.6–1.8을 포함한 후보를 실제 본문·확대 상태에서 비교한다. 특정 값이 보편 기준은 아니다 |
|
||||
| **한글 음수 자간** | 글리프 충돌·단어 인식·확대 상태에서의 읽기성을 점검한다 | 본문·대형 제목·지원 viewport·200% 확대에서 실제 렌더를 비교한다. 음수 자간의 존재만으로 실패시키지 않고, 충돌이나 읽기 저하가 확인되면 조정한다. 출처: `references/typography.md`, 프로젝트 렌더 검증 |
|
||||
| **줄바꿈·measure·fallback 순서** | 단어 단위 줄바꿈, 라틴/한글 숫자 렌더, 폭은 글꼴과 콘텐츠에 따라 달라진다 | `word-break`, `overflow-wrap`, measure, fallback 순서를 대표 문단·긴 단어·숫자·지원 기기에서 비교한다. 고정 글자 수나 순서를 규범으로 쓰지 않는다 |
|
||||
| **`word-break: keep-all` 없음**, 또는 keep-all만 있고 `overflow-wrap` 짝이 없음 | 어절 중간이 끊기거나, 긴 URL·영문 토큰이 컨테이너를 뚫는다 | 둘을 짝으로 둔다(§6-5 어절 줄바꿈) |
|
||||
| **한글에 `font-style: italic`** (이탤릭 면 없는 서체, UA 기본 `em`·`i` 포함) | 브라우저가 만든 가짜 사체가 가장 아마추어처럼 보인다 | 굵기·색·밑줄·드러냄표로 강조(§6-5 강조) |
|
||||
| **한글이 섞인 라벨의 첫 서체가 라틴 모노** | 한글이 폴백으로 그려지며 낱글자로 흩어진다 | 본문 서체 + `tabular-nums` 또는 합성 서체(§6-5 모노 서체) |
|
||||
| **큰 표제의 음수 자간으로 글리프가 닿음** | 받침·쉼표가 옆 글자와 부딪힌다 | 충돌 검사 후 되돌린다(§6-5 큰 표제 자간) |
|
||||
| **한글 라벨에 넓은 양수 자간**(0.1em 이상) | 자소 묶음이 낱글자로 흩어진다 | 크기·굵기·색으로 구분(§6-5 양수 자간) |
|
||||
| **표제 마지막 줄에 한 어절** | 고아 줄이 표제 덩어리를 깬다 | balance + keep-all, ` ` 묶기, 문구 수정(§6-5 제목 마지막 줄) |
|
||||
| **`max-width: 40ch`류로 적은 한글 measure** | `ch`는 "0" 폭이라 한글 20자 남짓이 된다 | `em`으로 적는다(§6-5 measure) |
|
||||
| **행간 1.5 미만의 한글 본문**, 라틴 표제 행간 1.1을 한글 두 줄 제목에 그대로 | 줄과 줄의 받침·초성이 붙는다 | 본문 1.6~1.8, 제목 1.2~1.35(§6-5 행간) |
|
||||
| **한글 서체 미지정이 결정 기록 없이 남음** | OS마다 다른 서체로 그려져 화면마다 다른 디자인이 된다 | 서체를 명시하거나, 시스템 서체를 고른 이유를 기록(typography §6-4) |
|
||||
| **번역투 가능성** | 문맥·대상 독자와 맞지 않는 직역은 의미를 흐릴 수 있다 | 실제 독자와 용어 체계에 맞춰 문장을 다듬고, 제시 표현을 기계적 치환 규칙으로 쓰지 않는다 |
|
||||
|
||||
**한글 폰트 후보**
|
||||
- Pretendard, 마루 부리, Spoqa Han Sans Neo, 본고딕/Noto Sans KR 등은 목적·glyph coverage·라이선스·fallback·전송량을 비교할 후보다.
|
||||
- 캠페인 display 폰트도 업종 자체로 배제하지 않는다. 실제 문구·브랜드·작은 크기·지원 기기에서 읽기와 인상을 검증한다.
|
||||
**한글 서체 후보**는 [typography.md](typography.md) §6-6에 역할·라이선스와 함께 있다. Pretendard + 마루 부리 + JetBrains Mono를 기본값으로 쓰지 않는다 — 쓰려면 다른 후보와 비교한 proof 기록을 남긴다. 캠페인 display 폰트도 업종 자체로 배제하지 않는다.
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -291,8 +314,11 @@ It's not .* it's
|
|||
|
||||
```
|
||||
# 확인 후보 — 프로젝트 계약과 실제 렌더로 평가
|
||||
word-break:\s*keep-all
|
||||
Pretendard|Noto Sans KR|본고딕|마루부리
|
||||
word-break:\s*keep-all (있으면 overflow-wrap 짝 확인, 없으면 누락 후보)
|
||||
Pretendard|Noto Sans KR|본고딕|마루부리|MaruBuri
|
||||
font-style:\s*italic|<em>|<i> (한글에 걸리는지)
|
||||
font-family:[^;]*(Mono|mono) (한글 텍스트에 걸리는지)
|
||||
max-width:\s*[0-9.]+ch (한글 본문 measure인지)
|
||||
|
||||
# 세밀하게 확인할 후보 — 프로젝트 계약과 실제 렌더로 평가
|
||||
letter-spacing:\s*-0\.0[3-9] (한글 본문)
|
||||
|
|
@ -364,6 +390,8 @@ WebGL 판이 본문 뒤를 지나가는 화면을 보고 "대비가 죽었다"
|
|||
|
||||
---
|
||||
|
||||
## 9-c. 고칠 때의 작업 규율
|
||||
|
||||
### 여백이 필요하면 여백을 만들어라 — 문장으로 채우지 마라
|
||||
|
||||
sticky 캔버스가 끝까지 돌려면 목록 뒤에 스크롤 구간이 필요했다.
|
||||
|
|
@ -445,7 +473,7 @@ sticky 캔버스가 끝까지 돌려면 목록 뒤에 스크롤 구간이 필요
|
|||
|
||||
| 카테고리 | 걸린 항목 | 조치 |
|
||||
|---|---|---|
|
||||
| 0 최우선 3종 | | |
|
||||
| 0 먼저 보는 반복 후보 | | |
|
||||
| 1 컬러 | | |
|
||||
| 2 타이포 | | |
|
||||
| 3 레이아웃 | | |
|
||||
|
|
@ -456,18 +484,13 @@ sticky 캔버스가 끝까지 돌려면 목록 뒤에 스크롤 구간이 필요
|
|||
| 8 한글 조판 | | |
|
||||
|
||||
**검토 조건 — 근거와 결과를 남긴다**
|
||||
- [ ] 반복 후보(보라 CTA / 전체 대문자 / 1·2·3 단계)를 발견했으면 프로젝트 계약·브리프·실제 렌더 근거로 유지·수정·제거를 결정했다
|
||||
- [ ] grep 검사에서 나온 항목은 자동 실패로 취급하지 않고, 출처·관찰·결정·검증을 기록했다
|
||||
- [ ] 브랜드 차별성 주장은 경쟁사 치환 진단으로 근거·구체성을 검토했고, 안내 카피는 실제 질문·검증 가능한 사실·업종 표현으로 검토했다
|
||||
- [ ] 이펙트가 없어도 정보와 핵심 과업이 남고, 감소 모션에서도 상태와 조작이 유지된다
|
||||
- [ ] 강조색을 지워도 페이지가 읽힌다
|
||||
- [ ] 색을 회색조로 바꿔도 위계 순서가 비즈니스 우선순위와 일치한다
|
||||
- [ ] 키보드만으로 전 인터랙션이 가능하고 포커스 링이 보인다
|
||||
- [ ] (한국어) 글꼴·fallback·줄바꿈 규칙이 실제 지원 기기와 긴 제목·본문·숫자에서 읽히는지 검증하고, 프로젝트 계약에 선택 근거를 남겼다
|
||||
- [ ] 제목→본문 간격이 각 섹션의 정보 관계를 설명하고, 의도하지 않은 0px·겹침·불균형이 없는지 실제 렌더에서 확인했다
|
||||
- [ ] 화면에 적은 수치는 **전부 그 화면을 캡처해 잰 값**이다 (추정치·기대치가 섞여 있지 않다)
|
||||
- [ ] 이미지의 실제 표시 비율·크롭·해상도가 의도한 콘텐츠 역할과 화면 폭에 맞는지 측정했다. 원본 픽셀과의 일치만으로 `aspect-ratio` 동작을 판정하지 않는다
|
||||
- [ ] 내비·버튼 그룹의 **행 수를 `top` 값으로** 셌다 (개별 높이로는 못 잡는다)
|
||||
|
||||
납품 판정은 [preflight.md](preflight.md) M-A·M-B·M-C·A1·A2·C8·V1~V7이 하고, 시각 축은 [critique.md](critique.md) §2-1 루브릭(회색조 위계 = R2)이 판정한다. 반복 후보의 유지·수정·제거(M-B), grep 결과를 자동 실패로 보지 않기(M-B), 경쟁사 치환(M-C), 이펙트 없이 남는 과업(M-A), 키보드·포커스(A1·A2), 수치는 캡처로 잰 값(C8)은 거기서 본다. 한국어 글꼴·줄바꿈은 [typography.md](typography.md) §6-5와 preflight P8h다. 여기에는 그 밖의 점검만 둔다.
|
||||
|
||||
- 강조색을 지워도 페이지가 읽힌다
|
||||
- 제목→본문 간격이 각 섹션의 정보 관계를 설명하고, 의도하지 않은 0px·겹침·불균형이 없는지 실제 렌더에서 확인했다
|
||||
- 이미지의 실제 표시 비율·크롭·해상도가 의도한 콘텐츠 역할과 화면 폭에 맞는지 측정했다. 원본 픽셀과의 일치만으로 `aspect-ratio` 동작을 판정하지 않는다
|
||||
- 내비·버튼 그룹의 **행 수를 `top` 값으로** 셌다 (개별 높이로는 못 잡는다)
|
||||
|
||||
**판정**
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue