- 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
11 KiB
remix — 두 스타일을 섞는 문법
2단계에서 연다. 브리프나 사용자가 둘 이상의 스타일 또는 이질적 물성을 명시했을 때(예: "스위스 그리드 + Y2K 크롬", "한지 질감 + 다크 인스트루먼트"), 또는 R1 구조와 R2 톤이 서로 다른 스타일 계보에서 왔을 때다.
리믹스가 아닌 것:
- 한 스타일의 표현 강도를 화면마다 바꾸는 것 → 표면 다이얼(
trustworthy-showcases.md§3) - 한 프리셋에 R2 톤을 섞는 것 → 프리셋 기본 절차(
presets/README.md)
리믹스가 없으면 결과는 "지배 프리셋 + 보조 스타일의 버튼 하나" 같은 표면 접착으로 끝난다. 이 문서의 목적은 두 스타일의 축을 분해해 소유권을 나누는 것이다. 스타일의 핵심·클리셰 정의는 style-atlas.md와 presets/에서 가져온다.
프리셋 문서와 재질 문서의 "이 프리셋에는 X가 어울리지 않는다" 류 문장은 단독 사용 시 기본 비채택이다. 아래 축 소유권 표에서 그 축의 소유자가 보조 스타일로 정해지면 채택할 수 있고, 그 결정을 design.md에 기록한다. 하드 게이트(접근성·진실성)는 예외가 아니다.
이 문서의 R-1R-5는 리믹스 절차의 단계다. SKILL.md 파이프라인의 06단계가 아니다. 예전에는 "1단계~5단계"로 적어 파이프라인 2단계(방향)와 헷갈렸다.
R-1 — 스타일 게놈 분해 (9축)
각 원천 스타일을 9축으로 분해하고, 축마다 C(정체성 핵심) 인지 S(치환 가능) 인지 표시한다. 판정 질문: "이 축을 다른 스타일 값으로 바꿔도 여전히 그 스타일로 읽히는가?" 읽히면 S, 아니면 C. 약한 핵심은 C(약)로 적는다.
| 축 | 무엇을 보나 |
|---|---|
| 1 구조·그리드 | 열 체계, 정렬, 대칭/비대칭, 깨짐 |
| 2 타입 | 서체 성격, 스케일 대비, 정렬, 대소문자·자간 |
| 3 색 역할 | 배경 명도, 강조 hue, 면 대 선, 색 개수 |
| 4 표면·재질 | 평면, 종이, 광택, 유리, 질감 |
| 5 형태 언어 | radius, 선 두께, 도형, 외곽선 |
| 6 깊이·elevation | 그림자, 겹침, 투과, 표면 단계 |
| 7 모션 | 속도, 이징, 피드백 대 연출 |
| 8 이미지·도상 | 사진 성격, 일러스트, 도표, 상징 |
| 9 밀도·리듬·목소리 | 정보량, 여백 리듬, 카피 어조 |
분해 예:
| 축 | 스위스 | Y2K | 한지(물성) | 다크 인스트루먼트 |
|---|---|---|---|---|
| 1 구조 | C 모듈·비대칭 | S | S | C 정렬 엄격 |
| 2 타입 | C 그로테스크·극단 스케일 | C(약) 와이드·픽셀 | S | C tabular 수치 |
| 3 색 | S(원색 제한) | C 실버·아쿠아·핫핑크 | C(약) 생지색·먹 | C 저조도·좁은 강조 |
| 4 재질 | S(평면) | C 크롬·젤리 | C 섬유·반투명·번짐 | S |
| 5 형태 | S | C 캡슐·블롭 | S | S |
| 6 깊이 | S | C(약) 광택 하이라이트 | C(약) 겹침 투과 | C 표면 3단 |
| 7 모션 | S(피드백) | C(약) 반짝임 | S | C 빠르고 정확 |
| 8 이미지 | C 객관 사진·도표 | C 미래 도상 | S | C 실제 데이터 |
| 9 밀도 | C(약) 정보 질서 | S | S | C 고밀도 |
R-2 — 지배/보조 선언과 축 소유권
- 지배 스타일(D) 하나를 선언한다. 기본값은 브리프의 과업(읽기·비교·전환·몰입)에 맞는 쪽이다. 사용자가 순서를 말했으면 그 순서를 따르고, 인터뷰의 "주 방향" 기록과 연결한다. 과업으로도 순서로도 정할 수 없으면 "어느 쪽이 구조를, 어느 쪽이 표면을 맡나요?"를 사용자에게 묻는다(묻는 방법은
brief-interview.md). - 축 소유권 표를 만든다. 축마다 소유자는 하나다: D / A(보조) / 브리지(공유).
- 비율 규칙 — 면적이 아니라 축 개수와 노출 범위로 잰다.
- D는 구조축(1·9)과 위계 축(2의 본문, 6) 을 반드시 소유한다. 구조축을 둘로 나누면 그리드 두 개가 싸운다.
- A는 자기 C 축 중 1~3개만 가져간다. 그 이상이면 A가 사실상 지배이므로 D/A를 바꿔 다시 선언한다.
- A에는 노출 예산을 준다: "히어로 오브젝트 1 + 주 행동 1 + 반복 모티프 1"처럼 컴포넌트 범위로 적는다. 본문·폼·표·오류 상태는 기본적으로 D 소유다.
- 브리지 축을 하나 이상 찾는다. 두 스타일이 이미 공유하는 성질이다(예: 스위스와 Y2K는 기술 낙관과 산세, 한지와 다크 인스트루먼트는 정밀한 제작 공정). 브리지가 없으면 두 스타일은 콜라주로 보인다. 브리지를 못 찾으면 섞지 말고 사용자에게 하나를 고르도록 되묻는다(예 C).
R-3 — 충돌 해소 순위 (위가 이긴다)
- 하드 게이트 — 대비·포커스·감소 모션·감소 투명도·진실성. 어떤 스타일 핵심보다 우선한다.
- 브랜드 자산이 잠근 축 — 로고 색이면 색축 잠금, 기존 서체면 타입축 잠금.
- D의 정체성 핵심(C).
- A의 정체성 핵심(C) — A가 가져가기로 한 축에 한해서.
- 양쪽의 치환 가능(S) 축 — 브리지 축과 일관된 쪽을 택한다.
| 충돌 유형 | 예 | 처리 |
|---|---|---|
| 구조 대 구조 | 스위스 모듈 그리드 대 그리드 해체 | 하나만 남긴다. 다른 쪽은 "한 장면의 예외"로 강등 |
| 물성 대 물성 | 스위스 평면 대 Y2K 광택 | 층위 분리 — 광택은 오브젝트(제품·로고·주 CTA)에만, UI 크롬·텍스트 면은 평면 |
| 색 체계 | 다크 저조도 대 한지 생지색 | 한쪽은 면(surface), 다른 쪽은 빛·물성 레이어 — 다크 면 위 한지는 반투명 오버레이·빛 투과로만 |
| 시대 신호 | 아르데코 장식 대 미니멀 | 장식을 구조 장치(보더·구분선·숫자 체계)로 번역하고 장식 면적 상한을 적는다 |
| 밀도 | 럭셔리 여백 대 데이터 밀도 | 표면 다이얼로 화면별 분리 |
| 핵심 정면 충돌 | 뉴모피즘 저대비 대 대비 기준 | 1순위가 이긴다 → 핵심을 포커스·상태 보강으로 재설계하거나 사용자에게 트레이드오프를 알린다 |
R-4 — 브랜드 정합
- "왜 이 두 스타일이 이 브리프에 맞는가"를 한 문장으로 적는다. 하나의 이유만 말할 수 있으면 나머지는 장식이다.
- 반사실 점검: "이 조합이 다른 업종 브리프에서도 그대로 나왔을 것인가?" 그렇다면 조합이 아니라 유행이다.
- 클리셰 감사: 스타일 카드의 클리셰 중 사용한 것을 센다. 각 스타일당 정체성 핵심이 아닌 클리셰는 0~1개. 예: Y2K에서 크롬은 핵심이지만 홀로그램 + 반짝이 + 픽셀 서체를 동시에 쓰면 클리셰 누적이다.
- 문화 물성이 들어가면 style-atlas.md §7 번역 절차를 먼저 끝낸다.
R-5 — 리믹스 렌더 검증
기존 하드 게이트·감소 투명도·저사양 폴백에 더해 세 가지를 캡처로 확인한다.
- 지배 식별 — 회색조 + 효과 off + A 요소 제거 상태에서 D 스타일로 읽히는가.
- 보조 식별 — A가 소유한 요소만 남긴 크롭에서 A 스타일로 읽히는가. 안 읽히면 A가 희석된 표면 접착이다.
- 경계 — A 요소가 D 소유 영역(본문·폼·표·오류)에 새어 들어갔는가. 노출 예산과 대조한다.
하나라도 실패하면 R-2(소유권)로 돌아간다.
design.md 기록 템플릿
## 리믹스
- 원천: D = <스타일> · A = <스타일>
- 이 브리프에 둘 다 필요한 이유: <한 문장>
- 브리지 축: <공유 성질>
- 축 소유권: 구조 D / 타입 D(표제만 A) / 색 D + A 강조 1 / 재질 A(오브젝트 한정) / 형태 D / 깊이 D / 모션 D + A(히어로 1회) / 이미지 A / 밀도 D
- A 노출 예산: <컴포넌트 범위>
- 단독 비채택을 푼 항목: <프리셋·재질 문서의 문장> → <소유 축과 이유>
- 충돌과 결정: <유형> → <처리> / 근거
- 클리셰 감사: <스타일별 사용 클리셰 수>
- 검증: 지배 식별 · 보조 식별 · 경계 결과(캡처 경로)
적용 예
예 A — 스위스 그리드 + Y2K 크롬 (기술 하드웨어 브랜드 랜딩)
- D = 스위스(사양 비교가 과업). A = Y2K(브랜드의 미래 낙관).
- 브리지: 기술 진보에 대한 낙관과 산세 → 표제는 넓게 설계된 그로테스크로 Y2K의 폭 감각을 스위스 산세 계보 안에서 수용한다.
- 유지: 모듈 그리드, 플러시 레프트, 사양 표, 객관적 제품 사진. A 소유: 제품 오브젝트와 주 CTA의 크롬 재질(
svg-filters.md금속·젤리 레시피), 강조색 1개를 아쿠아-실버로. - 비채택: 크롬 텍스트 본문, 홀로그램 배경 전면, 표·폼의 광택.
- 검증: 효과 off에서 스위스 포스터로, 히어로 크롭만 보면 Y2K로 읽혀야 한다.
예 B — 한지 질감 + 다크 인스트루먼트 (전통 공예 데이터 아카이브, ko-KR)
- D = 다크 인스트루먼트(소장품 측정값 비교가 과업). A = 한지 물성(브랜드가 공방 기반).
- 브리지: 정밀한 제작 공정. 한지의 섬유 방향성을 계기 눈금·측정선과 같은 방향 패턴으로 번역한다.
- 유지: 표면 3단, tabular 수치, 빠른 피드백 모션. A 소유: 재질 축만 — 니어블랙이 아니라 먹의 깊이가 있는 저채도 갈흑, 상세 패널의 한지 반투명 레이어(비등방
feTurbulence), 이미지 캡션 경계의 번짐. dark-instrument의 "그레인 거의 안 씀"은 재질 축 소유권으로 풀고 기록한다. - 비채택: 붓글씨 표제, 낙관 장식, 의미 없는 한자 문구. 문양 대신 공정·물성만(
style-atlas.md§7). - 검증: 반투명 합성 상태에서 대비 실측, 감소 투명도에서 한지 레이어를 불투명 면으로 바꿔도 정보가 같다.
예 C — 아르데코 + 데이터 밀도 라이트 (호텔 그룹 객실 요금 비교)
- D = 데이터 밀도 라이트(요금·조건 비교가 과업). A = 아르데코(브랜드 유산).
- 브리지: 대칭 질서와 숫자 체계. 아르데코의 계단형 기하를 표 머리와 섹션 구분선의 단계로, 금속 색을 강조 1색(황동)과 숫자 서체의 고대비로만 가져간다.
- 비채택: 금색 그라디언트 텍스트, 부채꼴 배경 전면, 표 셀 장식.
- 검증: 장식 보더를 지워도 표가 그대로 읽히고, 히어로·섹션 머리 크롭만으로 아르데코가 읽힌다.
되묻는 사례 — 네오브루탈리즘 + 럭셔리 미니멀
- 정체성 핵심이 정면 충돌한다(하드 그림자·고채도 다색 대 절제·희소성). 공유하는 성질이 없어 브리지 축을 찾을 수 없다.
- 섞지 않는다. 사용자에게 "이 브랜드가 약속하는 것은 친근한 에너지인가, 희소한 품질인가"를 묻는다. 답에 따라 하나를 D로 정하고, 다른 쪽은 캠페인 표면 하나에만 쓰는 표면 다이얼 분리로 제안한다.
- 같은 판단이 필요한 신호: 브리지 후보가 "둘 다 예쁘다" 수준이거나, A가 C 축을 4개 이상 요구하거나, 하드 게이트 1순위가 한쪽 핵심을 전부 지운다.