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-136 은 무엇을 어디에 놓는가만 규정했고 마감 층이 없었다. 그 층이 LC-3747 이고, 이 스킬은 그것을 강제한다.

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

검사	조건
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 마스크. 단일 blur()+border-radius 금지.
• 비네트(LC-45): 풀블리드 미디어에 radial-gradient(ellipse, transparent 50%, rgba(0,0,0,.7) 100%) 수준.
• 색보정(LC-43): 모든 img·video 에 같은 filter: contrast() saturate() 프리셋을 공통 클래스로.
• 조판(LC-37): 헤딩 text-wrap: balance, 본문 text-wrap: pretty. 끝줄 한 단어 금지.
• 브라우저 기본값 제거(LC-42): ::selection, :focus-visible, 스크롤바 썸을 브랜드 액센트로.
• 스크롤 연동(LC-40): animation-timeline/view-timeline 우선, 미지원 시 opacity 리빌 폴백.
• 이징(LC-41): 페이지 지배 duration 하나 유지. linear() 스프링은 히어로 정착이나 CTA 도착 한 곳만.
• 커서(LC-44): 미디어 표면에만, @media (hover: hover) 로 터치 기기 비활성, 상태 최대 3개.
• 호버 정책(LC-49·50·57·58): 호버는 리프트·밝기 2% 또는 정지/감속까지. in 120–160ms / out 250–450ms(delay ≥200ms). 열림은 클릭/탭으로 고정, Esc/재클릭으로 닫힘. @media (hover: none) 에서는 열린 상태가 기본형.
• 유휴 장식(LC-53): 자동 모션은 T1~T4 통과분만 — 반복 샘플, 정적 대체 경로, 호버 정지, reduced-motion 정지.
• 스니펫 토큰 치환: fx-library 스니펫의 반경·간격·duration 기본값은 인라인 전에 DESIGN 토큰으로 바꾼다(r3: 반경 토큰 밖 43건이 스니펫 기본값에서 유입).
• 빌드 중 자기 비평: 섹션을 만들 때마다 1440·390 스크린샷을 찍어 보고, 고친 것과 버린 시도를 trace.md 에 한 줄씩 남긴다.

5. 검증

omd check render <render.html>
omd check contrast <render.html>
omd check landing <render.html>

전부 통과할 때까지 고친다(최대 3회). 미달 항목은 기준을 낮추지 말고 산출을 고친다. 3회에도 못 넘으면 마지막 출력과 시도한 것을 trace.md 에 남기고 그 상태로 제출한다 — 통과한 척하지 않는다. 그다음 omd-designer-review 서브에이전트를 스폰해 BLOCK 0 을 확인한다(입력: render.html 절대경로 + DESIGN.md 경로). 눈 검사 격리: 리뷰어에게 검사기 출력·trace 를 주지 않는다. 렌더만 보고 판정을 먼저 쓰게 하고, 기계 결과는 그 뒤에 붙여 종합한다 — 깨끗한 스캔은 위계·리듬·크기를 증명하지 못한다(r3: LI 전항목 ok·BLOCK 0 인데 60점). 페르소나 워크스루 3인(omd-persona-tester, 지표는 task_success·friction_count 만): 마우스 데스크탑 / 한 손 엄지 모바일(390) / 키보드·호버 없음. 각 페르소나가 섹션마다 "입력 없이 본 것"을 한 줄로 적고, 호버·드래그 없이는 못 본 콘텐츠가 있으면 그 섹션은 미완성이다. 데스크탑과 모바일은 한 라운드에 묶어 검사하고, 라운드 상한(3) 안에서 끝낸다.

6. 쇼케이스 영상 (만들 때만)

omd:showcase 를 쓰되 홍보 영상 문법을 지킨다(2026-09-03 조사).

• 정지 화면으로 시작하지 않는다. 첫 프레임부터 이미 움직이고 있어야 한다.
• 컷 전환보다 카메라 이동으로 시간을 건너뛴다(줌·패닝).
• 중반에 전환점을 둔다 — 문제/평범 → 전환 → 마무리의 3막.
• 조회 대부분이 무음이다. 자막은 장식이 아니라 필수이고, 화면 변화와 동기화한다.
• 나란히 비교(2열·3열)를 쓸 때는 지금 볼 열을 하이라이트·디밍으로 강제한다. 3열 비교의 실증 사례는 확인되지 않았다 — 쓰려면 이 조건을 반드시 건다.

하드 룰

• DESIGN.md 에 없는 브랜드 사실을 발명하지 않는다. 가상 브랜드면 그 사실을 페이지 하단에 Unofficial generated concept 류로 명시하고, 실존 브랜드를 흉내 내지 않는다.
• 실존 인물 얼굴 생성 금지, 실존 로고 원본 사용 금지(텍스트 워드마크로 대체).
• 가상 통계 수치 금지. 수치가 필요하면 정성 카피로 바꾼다.
• 스톡 사진·이모지 금지. 채널이 없으면 프롬프트 팩과 수동 큐를 남기고 자리에는 브랜드 팔레트의 추상 SVG.
• 검사를 건너뛰거나 문턱을 낮춰 통과시키지 않는다.
• 산출물은 지정된 런 디렉터리 밖에 쓰지 않는다.