| name | box-cut-design |
| version | 1 |
| description | 박스컷·박스컷디자인·box-cut-design — Supreme·Off-White·Virgil 스타일 흑백 캠페인·데이터 HTML 디자인·시각화. 따옴표 라벨("DROP")·하드보더·슬래시 디바이더·드롭 넘버링·거대 Pretendard 900·티커 밴드로 캠페인 오브제를 만들고, 같은 미감으로 데이터·스펙·로드맵·비교표까지 흑백 8패밀리(해치 막대·스트로크 링·실선 노드맵·농담 히트맵)로 담습니다. 색·둥근모서리·그림자·그라디언트 없이 흑백·해치·농담·선두께로만 위계를 만듭니다. Box Cut Design — Supreme / Off-White / Virgil-inspired black-and-white campaign and data HTML system: quote labels, hard boxes, slash dividers, drop numbering, bold sans type, monochrome data viz.
|
| license | Proprietary. Brand references are used only as observed visual inspiration. |
Box Cut Design
흑백, 하드엣지, 따옴표 라벨. 캠페인 오브제처럼 읽혀야 합니다. 데이터 페이지도 "스펙 시트"와 "드롭 리스트"의 미감으로 냅니다.
미감 디렉티브 — 디폴트를 박스컷 최대치로
디폴트를 박스컷이 낼 수 있는 최대 미감으로 끌어올립니다. "단순 박스 나열"은 디폴트에서 추방하고, 8패밀리 모두를 박스컷 시그니처(흑백 두 톤·하드보더·컷라인·슬래시바·따옴표 라벨·거대 Pretendard 900·드롭 넘버링·c/o 메타)로 일관되게 번안합니다.
흑백 정보 위계는 네 가지 도구로 만듭니다(references/tokens.css에 토큰화).
- 채움 대비 — 검정 채움(강조·100%) / 흰 바탕+검정 보더(기본) / 검정 12·24·40·60% 농담 셀(분포·히트맵). 색 없이 채움률로 값을 읽힙니다.
- 해치 패턴 — 45도 사선·수직·도트·크로스해치 4종을 SVG
<pattern>으로 정의해 막대·셀·면적의 농담 단계와 차트 시리즈를 색 없이 구분합니다.
- 선 두께 계층 — thin 1px(보조선·그리드) / thick 2px(축·구획) / fat 4px(강조 노드·강조 막대).
- 농담 계층 —
--bc-tone-100/60/40/24/12 다섯 단계로 스코어카드 신호등·히트맵·분포를 표현합니다.
미감 강도 — 핵심 수치 한 개는 fs-giant(120px) 이상으로 키워 한 페이지 한 주인공을 만듭니다. 여백 리듬은 space-6/7(48·64px)로 크게 끊고, 데이터 밀집 구역만 space-3로 조입니다. 캡션·축 라벨은 micro-mono(9px·letter-spacing 0.25em)로 깔아 도면 같은 정밀감을 줍니다. 금지(색·둥근모서리·그림자·그라디언트)는 안티패턴 방어용이지 표현 위축용이 아닙니다 — 흑백 안에서 해치·농담·두께·채움으로 최대 대비를 만듭니다.
범위 — 디자인·시각화 전용 (문체·내용 불가침)
이 스킬은 시각 디자인만 책임집니다. 사용자가 준 텍스트는 텍스트층(작성자·UP·shaper-skill)의 영토이며 침범하지 않습니다.
- 본문·제목의 어휘·어미·문장구조·문단·문체를 한 글자도 바꾸지 않습니다. 받은 텍스트 그대로(verbatim) 시각만 입힙니다.
- UP 입니다체(또는 작성자 문체)를 유지합니다. 박스컷의 흑백·하드엣지·deadpan·선언적 무드 때문에 본문을
~다체·명령형·단문 fragment로 다시 쓰는 것은 절대 금지입니다. 디자인이 선언적이라고 문체를 선언형으로 바꾸지 않습니다.
- 형용사 삭제·문장 단문화·카피·헤드라인 생성·톤 변환은 이 스킬의 일이 아닙니다 → 텍스트는 미리 받습니다(없으면 작성자·shaper-skill·copywriting-skill).
- 따옴표 라벨·메타·번호 같은 디자인 가구는 본문 둘레에 얹는 시각 장식이며, 본문 카피의 재작성이 아닙니다.
상세: references/text-handling.md · references/separation-rule.md.
Use When
- 흑백 캠페인·드롭 페이지·티저·매니페스토·포스터형 랜딩·스트리트웨어 에디토리얼.
- 그 미감을 유지한 채 데이터·스펙·로드맵·비교표를 담는 흑백 정보 페이지·캡슐 스펙 시트.
- 압축·라벨·번호 섹션·강한 대비가 효과적인 콘텐츠.
형이 "박스컷으로", "오프화이트 스타일로", "슈프림 느낌으로", "흑백 캠페인", "버질처럼", "드롭 페이지"라고 하면 이 스킬을 잡습니다.
NOT — 색을 원하면 박스컷이 아닙니다.
| 안 씁니다 | 라우팅 |
|---|
| 비비드 풀채도·프리미엄 벤토·빅타이포 | apple-canvas |
| 무채색+그라디언트 9 MECE 장문 | prism-design |
| lowercase·deadpan 카탈로그 | teenage-design |
| 매거진 세리프·에디토리얼 본문 | editorial-design |
| 앱·대시보드·관리자 단일화면 UI·풀페이지 대시보드 | ui-designer |
| 본문 글쓰기·산문 | shaper-skill |
| 카피·헤드라인·태그라인 생성 | copywriting-skill |
매핑 게이트 — 스타일 입히기 전 강제 통과
스타일을 입히기 전에 이 5스텝을 반드시 통과하고, 산출물 맨 앞에 매핑표를 명세로 남깁니다. 박스컷은 캠페인 오브제 미감이라 모델이 항상 같은 그리드·거대 타이포 나열로 귀결되기 쉽습니다 — 이 게이트가 그 쏠림을 막습니다.
STEP1 인벤토리 — 페이지의 섹션을 순서대로 나열하고, 각 섹션이 담은 정보가 무엇인지 한 줄로 적습니다(산문 문단인지, 데이터·단계·항목·관계인지부터 가릅니다).
STEP2 논리 판별 — 각 섹션이 8패밀리 중 어떤 논리인지 판정합니다.
FLOW 흐름·절차 / HIERARCHY 계층·구성 / COMPARE 비교·대조 / METRIC 수치·그래프 / RELATION 관계·망 / TIME 시간·변화 / DISTRIBUTION 분포·위치 / TABLE 표·구조화.
산문·선언·카피는 어느 패밀리도 아닙니다 — 박스컷 본래의 Hero·Manifesto·Ticker로 둡니다.
STEP3 문법 선택 — 결정트리로 그 논리에 가장 직관적인 시각문법 1개를 고릅니다.
- 순서·단계가 있나 → FLOW(step-rail / branch-fork / sequence-band / pipeline-band)
- 상하 포함·구성인가 → HIERARCHY(pyramid-stack / layer-stack / org-tree)
- 둘 이상을 맞대나 → COMPARE(spec-matrix / quad-2x2 / before-after-split / keyval-spec)
- 수치를 보여주나 → METRIC(kpi-stat / hatch-bar-chart / stroke-ring / gauge-bar / funnel-band / line-plot)
- 항목 간 연결인가 → RELATION(node-map / venn-overlap / ecosystem-orbit)
- 시간 축인가 → TIME(drop-timeline / now-next-later / changelog-rail / gantt-grid)
- 위치·농담·분포인가 → DISTRIBUTION(position-map / hatch-heatmap / score-card)
- 행·열 정렬 데이터인가 → TABLE(ruled-table / def-table)
STEP4 리듬 — 인접 섹션이 같은 문법으로 연속되지 않게 배치합니다. 카드그리드 3연속 금지, 같은 패밀리 2연속 시 한쪽을 다른 문법으로 교체합니다. 페이지 전체에 최소 3개 이상 패밀리가 고루 분포되게 하고, 거대 타이포(Hero)는 페이지당 1~2회로 절제합니다.
STEP5 스타일 — 선택된 문법을 박스컷 미감(흑백·하드보더·해치·농담·따옴표 라벨·드롭 넘버링)으로 렌더합니다.
빌드 전에 이 매핑표를 먼저 냅니다.
| # | 섹션 | 정보유형 | 시각문법(패밀리) | 컴포넌트 |
|---|
| 1 | (섹션명) | (산문/단계/비교/수치/관계/시간/분포/표) | (FLOW 등) | (step-rail 등) |
분리 규칙 — 문체 불가침 vs 정보 재구성
text-handling.md의 "verbatim·본문을 표로 쪼개지 마라"가 과잉 적용되어 데이터·단계·항목까지 산문으로 묶어버리는 것을 교정합니다. 불가침과 재구성을 분리합니다.
불가침 — 문장은 한 글자도 바꾸지 않습니다.
- 본문 문장의 어미·어휘·문장구조·문단·문체(UP 입니다체)는 그대로 둡니다. 박스컷의 흑백·deadpan·선언 무드 때문에 본문을
~다체·명령형·fragment로 다시 쓰지 않습니다.
- 산문 문단은 문장 그대로 둡니다 — Hero·서문·Manifesto·서술 단락은 verbatim.
- 카피·헤드라인·태그라인 생성은 이 스킬의 일이 아닙니다(→ copywriting-skill).
재구성 권장 — 구조는 시각문법으로 드러냅니다.
- 절차·비교·관계·수치·시간·분포·항목 정보는 그 논리에 맞는 시각문법으로 구조화합니다.
- 단계가 적힌 문장 → FLOW step-rail의 각 칸에 그 문장을 그대로 넣습니다(문장은 보존, 배치만 단계로).
- "A는 X, B는 Y" 비교 → COMPARE spec-matrix의 셀에 그 값들을 그대로 배치합니다.
- 수치가 든 문장 → METRIC kpi-stat·hatch-bar로 그 수치를 시각화하되, 설명 문장은 캡션으로 verbatim 유지합니다.
경계 — 문장을 다시 쓰지 말고, 문장이 담은 구조를 드러냅니다. 산문 문단은 그대로 두고, 데이터·단계·항목·관계만 시각문법으로 구조화합니다.
상세: references/separation-rule.md.
Design Rules
- 검정·흰색·near-black/near-white만 씁니다.
- 모든 텍스트(라벨·메타 포함)에 Pretendard만 씁니다. 다른 font family나 fallback stack을 넣지 않습니다.
- 핵심 라벨은 따옴표를 씁니다:
"DROP", "SYSTEM", "SEOUL".
- 하드보더·컷라인을 씁니다. 둥근 카드·그림자·글래스·그라디언트·색 액센트는 쓰지 않습니다.
- 번호·디바이더를 씁니다:
01 /, N°06, c/o, 슬래시바.
- letter spacing은 읽히게 유지합니다. Codex frontend 규칙이 옛 음수 트래킹 습관을 덮습니다 — 음수 letter spacing 금지.
- 한국어 텍스트는
word-break: keep-all; line-break: strict; overflow-wrap: break-word;.
- reduced motion을 존중하고,
prefers-reduced-motion에서 ticker·marquee를 멈춥니다.
Codex Workflow
references/samples/에서 샘플을 하나 고릅니다(데이터 밀도가 높으면 spec-deck.html).- 매핑 게이트(STEP1~5)를 통과하고 매핑표를 먼저 냅니다.
references/tokens.css와 고른 스니펫(components.html·viz-grammar.html)을 출력에 복사합니다.apply_patch로 편집합니다.bash /Users/jason/.codex/skills/box-cut-design/scripts/qc.sh <html-file>로 검증합니다.- Browser로 텍스트 맞춤·대비·모바일 프레이밍을 검수합니다.
Components — 캠페인 오브제 (references/components.html)
| Group | Use |
|---|
| C1 Hero | 포스터 타이틀, 따옴표 오프너, 슬래시 오프너 |
| C2 Label | 따옴표 라벨, 드롭 넘버, c/o 크레딧 |
| C3 Divider | 슬래시 디바이더, 티커 바, 컷 라인 |
| C4 Grid | 투톤 스플릿, 컬럼, 캠페인 블록 |
| C5 Type | 거대 Pretendard, 라벨 메타, 풀 쿼트 |
| C6 Ticker | 스크롤 티커, 마키 밴드, 리핏 루프 |
데이터 시각화 8패밀리 (references/viz-grammar.html)
| 패밀리 | 컴포넌트 | 흑백 번안 |
|---|
| V1 FLOW | step-rail · branch-fork · sequence-band · pipeline-band | 검정 번호 박스·직각 fat 분기·슬래시 연결·티커 밴드 |
| V2 HIERARCHY | pyramid-stack · layer-stack · org-tree | 채움률 위계·농담 레이어·직각 thick 커넥터 |
| V3 COMPARE | spec-matrix · quad-2x2 · before-after-split · keyval-spec | 정사각 체크·thick 십자축·좌우 대칭·케어라벨 행 |
| V4 METRIC | kpi-stat · hatch-bar-chart · stroke-ring · gauge-bar · funnel-band · line-plot | 거대 수치·해치 막대·흑백 링·진행바·펀넬·실선 플롯 |
| V5 RELATION | node-map · venn-overlap · ecosystem-orbit | 실선 노드·해치 교집합·동심 궤도 |
| V6 TIME | drop-timeline · now-next-later · changelog-rail · gantt-grid | 드롭 넘버 축·농담 시간거리·룰드 행·흑백 간트 |
| V7 DISTRIBUTION | position-map · hatch-heatmap · score-card | 정사각 마커·농담 셀·흑백 RAG 신호등 |
| V8 TABLE | ruled-table · def-table | 헤더 반전·thin 룰·정의 2열 |
References
| Need | Files |
|---|
| Text handling (문체 불가침) | references/text-handling.md |
| Separation rule (불가침 vs 재구성) | references/separation-rule.md |
| Campaign components | references/components.html |
| Data viz 8패밀리 | references/viz-grammar.html |
| Tokens | references/tokens.css |
| Scope | references/NOT-scope.md |
| Samples | references/samples/ (drop · manifesto · teaser · spec-deck) |
