/omd-aphrodite

name: omd-aphrodite
description: "Maximum-craft one-page landing — the wow bar. omd:landing 의 구조 위에 마감(서체 조달·그레인·깊이·색보정·스크롤 타임라인)과 최고급 에셋을 얹고, 랜딩 검사 전 항목 통과를 합격선으로 삼는다. Trigger: '와우', '압도적인', '최고급', '쇼케이스용', 'aphrodite', '데모용 랜딩', '이거 자랑할 거야'."
argument-hint: "<브랜드 또는 가상 브랜드 + 톤/업종 + 목적>"
user-invocable: true

omd:aphrodite — 와우 합격선

이 문서가 설치된 디렉터리를 `<omd-aphrodite-skill-root>` 로 둔다. 아래 도구와 reference는 모두 그 디렉터리 안에 함께 설치되며, 현재 프로젝트나 oh-my-design 저장소의 경로로 바꾸지 않는다.

**이 스킬은 `omd:landing` 의 대체가 아니라 그 위의 합격선이다.** 구조(섹션 리듬·에셋 배치·밀도)는 `omd:landing` 과 같은 절차를 그대로 쓴다. 다른 것은 **통과 조건**과 **마감·에셋의 등급**이다. 일상 랜딩은 `omd:landing`, 자랑할 한 장은 이 스킬이다.

왜 있나

밀도만 채운 페이지는 여전히 밋밋했다. 2026-09-03 계측에서 우리 최고 산출물은 디스플레이 서체가 OS 기본이었고 그림자·글래스·마스크·블렌드·3D·클립패스·그레인이 **전부 0**이었다 (`docs/reviews/landing-craft-gap-2026-09-03.md`). 코덱스 LC-1~36 은 **무엇을 어디에 놓는가**만 규정했고 마감 층이 없었다. 그 층이 LC-37~47 이고, 이 스킬은 그것을 강제한다.

합격선 (하나라도 미달이면 미완성 — 스스로 통과 선언 금지)

| 검사 | 조건 | |---|---| | `omd check landing` | **LI-1~40 전 항목 ok**. 특히 LI-24 화면 잉크 · LI-25 폴드 미디어 · LI-26 미디어 밀도 · LI-27 디스플레이 서체 · LI-28 깊이 · LI-29 메시/그레인 · LI-30 브라우저 기본값 · LI-31 미디어 색보정 · LI-32 alt 구체성 · LI-33 정착 타이밍 · **LI-34 주 미디어 점유율 · LI-35 호버 관문 0 · LI-36 초점비 · LI-37 폴드 ≤5 · LI-38 모션 채널 ≤2 · LI-39 홀드 콘텐츠 · LI-40 여백 덩어리** | | `omd check contrast` | FAIL 0 · no-JS 숨김 0 | | `omd check render` | 1440×900 · 390×844 양쪽 PASS | | `omd-designer-review` | BLOCK 0 — 리뷰어는 **검사기 결과를 보기 전에** 렌더만 보고 먼저 판단한다(§5) | | 페르소나 워크스루 3인 | 마우스 데스크탑 · 한 손 엄지 모바일 · 키보드/호버 없음 — 각자 "입력 없이 본 것" 이 섹션마다 있고 관문에 막힌 곳 0 (§5) |

검사를 못 돌리는 상황(브라우저 없음 등)은 **통과가 아니라 실패**다. 그 사실을 `trace.md` 에 적는다.

0. 채널 확인 (건너뛰지 않는다)

`node scripts/omd-setup-detect.mjs` (설치본: `omd setup detect`) 로 지금 쓸 수 있는 이미지·영상 채널을 확인하고 `trace.md` 첫 줄에 적는다. 채널이 바뀌면 결과의 등급이 바뀐다 — 나중에 왜 이 품질이 나왔는지 설명하려면 기록이 필요하다.

• **영상 채널이 없으면 생성 영상을 포기하되 모션은 포기하지 않는다.** CSS/SVG 로 만든 움직임

(마스크 리빌, 스크롤 연동 변형, SVG 경로 애니메이션, 그레인 셰이더 흉내)이 대안이며, 수상작 상당수가 실제로 이 방식이다. 「영상 없음」을 `trace.md` 에 사유와 함께 남긴다.

• 잔액 소진(402)·키 없음은 **조용히 건너뛰지 말고** 사용자에게 알린다.

1. 서체 조달 (LC-47 — 이 단계를 빼면 합격선 못 넘는다)

omd font inline --list
omd font inline --family fraunces --out /tmp/display.css

• 디스플레이 1종 + 본문 1종. 같은 종을 옵티컬 사이즈 축으로 나눠 써도 된다.
• 산출된 `@font-face` 블록을 HTML `<style>` 안에 그대로 넣는다. **렌더 시 외부 요청 0건**이 되어야 한다.
• 큰 글자에는 `font-variation-settings` 의 `opsz` 를 크게, 본문에는 작게 준다 — 이 축이 "제대로 짠 조판"의 신호다.
• 라이선스(OFL 계열, 임베딩 허용)를 확인하고 `trace.md` 에 적는다.
• **금지**: `-apple-system`·`system-ui`·`Helvetica`·`Arial` 로 디스플레이 헤딩을 쓰는 것.

1.5 라이브러리 정책 — 제로 베이스 금지

"렌더 시 네트워크 요청 0" 은 **라이브러리 0 이 아니다.** 라이선스가 허용하는 오픈소스는 minified 소스를 `<script>`/`<style>` 로 인라인한다. 검증된 조합은 `<omd-aphrodite-skill-root>/docs/design-excellence/fx-library/` 에 있다 — 스크롤 안무는 `scroll-gsap/`(GSAP 3.15 + ScrollTrigger, 114.7KB, 라이선스 `lib/LICENSES.md` 인용 필수), CSS 효과는 INDEX.md 의 17종(전부 재배포 가능, 데모 콘솔 에러 0). 예산: 인라인 라이브러리 **≤ 120KB**, 효과 종류 **≤ 7/페이지**. 라이브러리 밖의 효과를 새로 쓰면 같은 구조(README+demo+snippet)로 fx-library 에 편입해 다음 런이 재사용하게 한다.

2. 컨셉과 스토리보드

`omd:landing` §1~2 를 그대로 따르되, 스토리보드에 **개수·크기·마감을 숫자로** 적는다.

• **첫 줄 다이얼(LC-59)**: `밀도 n/10 · 모션 n/10`. 밀도 ≤5 면 아래 밀도 예산보다 **상한**(초점비·폴드 ≤5·채널 ≤2)이 우선한다 — 바닥 규칙을 "최대로 채운다"로 읽지 않는다.
• **크기 락(LC-51)**: 섹션마다 주 미디어의 비율(16:9·3:2·2:3)과 **뷰포트 점유율(%)** 을 적는다. 섹션 중앙값 ≥35%, 풀블리드(≥90%) ≥1, 폴드 주 미디어 ≥45vw 또는 ≥40vh. 여러 장은 공간이 아니라 시간에 쌓는다(동시 미디어 ≤6). 시험: 히어로 이미지를 빼도 첫 화면이 멀쩡하면 이미지가 약한 것이다.
• **한 화면 한 초점(LC-52)**: 1등:2등 면적비 ≥2:1, 섹션당 층(스크롤·유휴·호버·진입) ≤2, 동시 모션 채널 ≤2.
• **무노동(LC-49·50·53)**: 호버로만 보이는 콘텐츠 0. 자동으로 움직이는 것은 장식 시험 T1~T4(정보 유일성·정적 대체 경로·사용자 제어·무노동) 통과분만. 펼침은 진입 시 자동 1회 + 고정, 열기는 클릭/탭이고 열린 상태는 지속.

• 밀도 예산(미디어 ≥ 페이지 vh × 1.0 · 폴드 ≥ 3 · 스크롤러 항목 ≥ 8 · 모션 ≥ 1 · 섹션 잉크 ≥ 26%) — 다이얼 ≥6 에서 전량 적용. 폴드 의미 단위는 언제나 ≤5(LC-54), 진입 애니 ≤1.2s·H1/CTA 덮기 금지.
• 섹션마다 쓸 마감 기법을 LC 번호로 지정 — 어느 섹션에 그레인(LC-38), 어디에 글래스(LC-39),

어디에 비네트(LC-45), 스크롤 타임라인은 어느 리빌에(LC-40), 스프링 이징은 **한 순간에만**(LC-41).

• **압도 지점 1개**와 그 직전의 호흡 섹션. 피크는 개수가 아니라 규모다(LC-33).
• **이미지마다 동사 1개**(줌스루·회전·스크럽·와이프·가로 이동·컷 연결·기울기·열림·관통·정지). "정지"가 60% 를 넘으면

이미지를 그냥 쓴 페이지다(60점 라운드의 원인). 동사는 `fx-library/scroll-gsap/recipes` 의 레시피 번호로 적는다.

• **액센트 전략 선언**: 절제형(액센트는 CTA·진행·선택 상태·면 1회) 또는 전면형 중 하나. 첫 뷰포트 액센트 요소 ≤ 3.

섹션 태그·캡션에 액센트 금지 — 10개 사이트 실측에서 액센트는 CTA 에 산다.

2.5 스토리보드 리뷰 게이트 (빌드 전, 필수)

`<omd-aphrodite-skill-root>/docs/design-excellence/storyboard-review.md` v2 의 A(색)·B(구도)·C(효과, C9 크기 락·C10 정직한 K 포함)·**D(사용자: 입력 없이 보이는 것·터치·키보드·첫 5초 문장·관문 0)**·E(자기 표절 시험) 표를 스토리보드에 채워 넣고 판정한다. **FAIL 이 하나라도 있으면 §3·§4 로 가지 않는다.** 빌드 뒤 리뷰는 늦다 — 색·구도·효과 예산은 여기서 잡는다. 판정 결과는 런 디렉터리의 `storyboard-*.md` 끝에 남긴다. 업종 무관: 특정 색·톤이 아니라 역할·빈도·숫자로만 판정한다.

3. 에셋 — 최고급 프롬프트 규격

`omd:media` 를 쓰되 이 스킬에서는 아래를 **필수**로 지킨다.

**프롬프트 순서**: 배경·장면 → 피사체 → 핵심 디테일 → 제약 → 용도. `8k`, `ultra detailed`, `masterpiece` 류는 쓰지 않는다 — 약한 컨셉을 보정하지 못하고, 구도·조명이 비면 모델이 AI 기본값(과한 대칭·플라스틱 질감·가짜 보케)으로 채운다.

**조명·렌즈를 말로 지정한다**: 소프트박스/림라이트/렘브란트/골든아워 백라이트 같은 세팅 이름과 85mm·50mm·35mm·24mm 의 성격을 프롬프트에 넣는다. 이것이 "스튜디오에서 찍은 것 같다"와 "AI 그림"을 가른다.

**일관성은 스타일 접미사로만 잡는다.** 우리 이미지 채널(grok `image_gen`, Codex `$imagegen`)에는 **시드 파라미터가 없다**(조사로 확인). 그래서 한 세트의 모든 프롬프트 끝에 **토씨 하나 바꾸지 않은** 공통 블록을 붙인다 — 브랜드 팔레트 hex + 조명 성격 + 재질 어휘 + 그레인/필름 표현. Recraft 키가 있으면 참조 1~10장으로 `style_id` 를 만들어 쓰는 쪽이 더 강하다.

**회피 문구를 넣는다**: plastic/waxy texture, perfect symmetry, generic AI aesthetic, oversaturated, fake bokeh. 긍정 지시로 바꿔 적는 편이 더 잘 듣는다 — film grain, off-center framing, imperfect surface.

**비율은 슬롯에서 가져온다**(`omd:media` §1). 기본값 16:9 로 뽑아 놓고 잘라 넣지 않는다.

**영상(채널이 있을 때)**: 클립당 카메라 이동 **1개만**, 피사체 움직임은 최소. 시작·끝 프레임이 거의 같아야 루프 이음새가 안 보인다. 6초 무음 `loop` `muted` `playsinline`, `prefers-reduced-motion` 에서는 같은 프레임의 정지 이미지로 대체하고 `poster` 를 채운다.

4. 마감 구현 (LC-37~46 레시피)

인라인만 쓴다. 렌더 시 네트워크 요청 금지 — 라이브러리는 §1.5 정책대로 소스를 인라인한다(출처·라이선스를 trace 에).

• **그레인(LC-38)**: 인라인 SVG `feTurbulence`(fractalNoise) 를 data URI 배경으로,

`opacity: .05~.15` + `mix-blend-mode: overlay`. 넓은 단색·그래디언트 면마다 얹는다.

• **메시(LC-46)**: 반투명 `radial-gradient` **3겹 이상** 레이어링. 2-스톱 단일 `linear-gradient` 배경 금지.
• **글래스(LC-39)**: 베이스 블러 + 밝은 엣지 블러 2겹, 둥근 모서리는 SVG 마스크. 단일 `bl