Yun Chan 88c11682b1 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

2026-10-06 16:55:38 +09:00

7 KiB

Raw Blame History

프리셋: anti-grid — 의도적으로 깨진 격자

한 문장: 기억되는 것이 목적일 때. 규칙을 알고 나서 깬다.

규칙적 격자에 비대칭·겹침·예상 밖의 리듬을 의도적으로 더하는 방향이다. 이것이 2026년에 보편적으로 더 효과적이라는 실증 주장은 하지 않는다.

이 프리셋의 범위는 "그리드 해체" 한 가지 문법이다. 예전에는 해체주의·브루탈리즘·그런지·맥시멀을 한 덩어리로 다뤘지만, 넷은 정체성 핵심이 다르다. 사용자가 아래 이름을 말하면 이 프리셋의 제약을 그대로 들이대지 말고 ../style-atlas.md의 해당 카드를 연다.

사용자가 말한 것	정체성 핵심	여는 곳
해체·실험적 레이아웃	격자를 정의하고 깬다	이 프리셋
브루탈리즘	기본값·구조의 노출, 장식 거부	style-atlas 브루탈리즘
네오브루탈리즘	두꺼운 외곽선, 블러 0 오프셋 그림자, 고채도 면색 다수	style-atlas 네오브루탈리즘
그런지·진(zine)	복사기·콜라주 질감, 손 조판	style-atlas 레트로 프린트
맥시멀·키치·멤피스	질서 있는 과잉, 반복 모티프	style-atlas 키치/맥시멀·멤피스

이 프리셋을 지배로 두고 위 카드 하나를 보조 축으로 섞는 것은 ../remix.md의 절차를 따른다.

언제 고르나

에이전시·스튜디오 자사 사이트, 아트/문화 프로젝트, 캠페인, 음악·패션
클라이언트가 "안전한 것 말고"를 명시적으로 요구했을 때
기본적으로 비채택: 전환이 목적인 커머스 구매 경로, B2B SaaS 구매 경로, 접근성 요구가 엄격한 공공. 격자 해체는 읽기 비용을 높인다. 이런 브리프에서도 캠페인 장면 하나에만 쓰는 것은 표면 다이얼(../trustworthy-showcases.md §3)로 검토할 수 있다

결정

타이포그래피

모노스페이스 또는 개성 강한 그로테스크를 주역 후보로 둔다. 한글 모노는 라틴 모노로 조판하지 않는다(README.md 모노 절)
크기 대비를 극단적으로 — 비율 1.618 이상, 또는 스케일을 아예 무시하고 두세 개 크기만 극단적으로 배치
대문자·자간 확대·세로쓰기·회전 같은 조판 장치는 하나의 중심 개념에 복무할 때 쓴다. 장치 개수가 아니라 아래 "과잉과 무질서를 가르는 기준"으로 판정한다
전체 대문자 헤드라인은 AI 생성 화면에서 자주 반복되는 관찰 후보다(../antipatterns.md §2). 쓰려면 이유가 있어야 하고, 긴 문장은 대문자로 읽기 속도가 떨어지므로 짧게 둔다. 한글 화면의 영문 대문자 장식 라벨은 언어 판정과 함께 본다

슬롯	무료(라틴)	유료(라틴)	한글 후보 풀
디스플레이	Karrik, Basteleur, Terminal Grotesque (Velvetyne)	Right Grotesk	Gasoek One · Black Han Sans · Do Hyeon · 제주명조 · Orbit · Bagel Fat One · 여기어때 잘난체
본문	Work Sans, Archivo	Neue Montreal	Gothic A1 · Wanted Sans · SUIT · Noto Sans KR

선택 기준: 디스플레이는 브리프의 소리로 고른다 — 둔탁하고 무거우면 Gasoek One·Black Han Sans, 간판·거리면 Do Hyeon, 레트로 퓨처면 Orbit, 놀이·팝이면 Bagel Fat One, 문학·전통의 비틀기면 제주명조. 본문은 디스플레이와 폭·맺음이 충돌해 긴장을 만들되 읽히는 쪽을 고른다.
서체 성격과 라이선스는 README.md의 한글 서체 후보 풀을 따른다.

색

원색 또는 극단적 대비. 중간 톤을 피하는 것이 출발점이다
배경 명도 범위: 제한 없음. 원색 면(OKLCH C 0.15 이상)을 배경 전체로 쓰는 것을 먼저 검토한다 — 흰 배경이나 웜 오프화이트를 기본값이라고 가정하지 않는다
강조색 계열: 두 색의 강한 대비에서 시작한다. 색을 더 늘리는 것은 실패가 아니다 — 늘릴 때는 각 색의 역할(면/글자/행동)을 나누고, 아래 기준을 통과하는지 본다. 역할 없이 늘어난 무지개는 혼돈이다
radius 범위: 0이나 완전 원형(pill) 같은 극단을 우선 검토한다. 2~4px 중간값은 이 프리셋의 의도를 흐리기 쉽다

간격

격자를 정의한 뒤에 깬다. 그리드 없이 배치하면 깨진 게 아니라 그냥 엉망이다
요소를 겹치게(z-index, 음수 마진) 배치 — 단 겹침이 읽기를 방해하면 실패
화면 밖으로 흘려보내기, 극단적 여백과 극단적 밀집을 한 페이지에 공존시키기

재질 (`svg-filters.md`)

거친 질감이 어울린다: 강한 그레인, 리소그래프 인쇄, 잉크 번짐(feTurbulence + feDisplacementMap)
크로마틱 애버레이션을 호버에 얹기
매끄러운 유리·글로우는 기본적으로 비채택이다. Y2K·사이버펑크 카드를 보조 축으로 섞기로 했다면 ../remix.md의 축 소유권 표에 재질 축 소유자를 적고 채택한다

모션 (`motion.md`)

갑작스럽게. steps() 이징, 짧고 각진 전환
커서 인터랙션(마그네틱, 왜곡)이 잘 맞는다
prefers-reduced-motion 대응이 특히 중요하다. 이 프리셋의 모션은 강해서 어지러움을 유발하기 쉽다

과잉과 무질서를 가르는 기준

장치 개수나 색 개수로 판정하지 않는다. 다음 세 질문에 모두 "예"면 의도된 과잉이다.

읽기 경로가 하나로 고정되는가 — 회색조·390px에서 첫 시선 → 메시지 → 행동 순서를 한 문장으로 설명할 수 있다.
반복 모티프로 통일되는가 — 장치들이 같은 형태·각도·색 관계를 되풀이해 한 시스템으로 묶인다.
효과 off에서 메시지가 남는가 — 질감·모션·겹침을 끈 정지 화면에서도 히어로 메시지와 주 행동이 읽힌다.

하나라도 "아니오"면 장치를 줄이거나 한 장면으로 몰아넣는다.

흔한 실패

그리드를 정의하지 않고 시작 → 깬 게 아니라 못 맞춘 것으로 보인다
읽을 수 없게 만들고 "의도"라고 함 → 해체도 읽혀야 한다. 히어로 메시지는 반드시 읽혀야 한다
중심 개념 없이 장치를 동원 → 대문자 + 자간확대 + 겹침 + 회전 + 그레인이 서로 다른 이야기를 하면 소음이다. 위 세 질문으로 판정한다
접근성 포기 → 포커스 링과 대비는 이 프리셋에서도 지킨다
과업이 비교·구매·입력인 화면 전체에 적용 → 그 화면은 다른 프리셋이 지배하고, 해체는 진입 장면 하나로 좁힌다

리스크 후보

히어로 텍스트를 화면 밖으로 절반 흘려보내기
스크롤에 따라 그리드 자체가 재배치되기
배경을 원색 하나로 덮고 이미지를 흑백으로

7 KiB Raw Blame History