Omd Landing

omd:landing — 압도적 원페이지

한 페이지가 스크롤로 쌓이며 방문자를 압도하게 만든다. 카드 그리드를 늘어놓는 것이 아니라 하나의 시각 컨셉이 히어로에서 태어나 섹션마다 다른 구도로 변주되다가 CTA에서 닫힌다. 브랜드 근거는 프로젝트 DESIGN.md, 구도 관측은 랜딩 크래프트 코덱스(규칙 ID LC-n), 제품 행동과 로컬 결정의 권한은 브리프에서 읽는다. 코덱스 위치 — 레포: docs/design-excellence/landing-craft-codex.md · 설치본: node_modules/oh-my-design-cli/docs/design-excellence/landing-craft-codex.md (둘 다 없으면 node -p "require('path').dirname(require.resolve('oh-my-design-cli/package.json'))"로 패키지 루트를 찾아 그 아래 docs/design-excellence/를 읽는다). 둘 다 읽지 않았으면 시작하지 않는다.

입력

1. DESIGN.md 전문(Core v2면 §Scope·Foundations·Components·Content·Motion 앵커, legacy면 전 절). 토큰은 여기 있는 것만 쓴다 — 발명 금지. .omd/preferences.md의 pending은 DESIGN.md를 덮는다.
2. 브리프 한 줄 이상: 방문자가 느껴야 할 것 + 해야 할 행동. 없으면 한 배치의 질문(최대 5개)으로 받는다. 무인 모드(unattended)면 각 질문의 첫 선택지를 고르고 trace.md에 autoSelected로 남긴다.
3. 코덱스 landing-craft-codex.md — 규칙 표를 그대로 읽고, 이 런에서 적용할 규칙 ID를 골라 storyboard에 적는다.

런 디렉터리 (먼저 만든다)

SLUG=$(printf '%s' "<brand-or-brief>" | tr '[:upper:] ' '[:lower:]-' | tr -cd 'a-z0-9-' | cut -c1-40)
RUN=.omd/runs/landing-$SLUG-$(date +%Y%m%d-%H%M)
mkdir -p "$RUN/assets" && printf '%s\n' "<브리프 원문 그대로>" > "$RUN/task.md"

<run> = 위 $RUN. 산출은 전부 이 안에만 쓴다(omd-harness와 같은 관례, .omd/runs/INDEX.md에 한 줄 append).

산출 (run 디렉터리 안에만)

<run>/
  concept.md        아트디렉터 산출 — 컨셉 한 문장, 무드, 팔레트 사용법, 에셋 방향, 금지 목록
  storyboard.md     섹션 표: 순서·목적·뷰포트 높이·구도(LC-n)·에셋 계획(프롬프트)·스크롤 연출·카피 골격
  assets/           생성 이미지(omd:media 채널) + 인라인 SVG 원본
  render.html       단독 파일(외부 요청 0), 1440·390 대응, IntersectionObserver 리빌, pinned ≤1, reduced-motion
  system.md         이 페이지의 디자인 시스템 설명(토큰 인용 경로 포함)
  loop-trace.json   자평 회차별 결함 수(render-integrity·landing-integrity·designer-review), autoSelected
  trace.md          이미지 프롬프트 원문, 채널, 비용, sha256, 재시도

절차

1. 컨셉 (에이전트 omd-art-director)

DESIGN.md의 브랜드 사실(§1 서사·§Principles·§Voice)과 브리프에서 컨셉 한 문장을 뽑는다. 컨셉은 형용사 나열이 아니라 페이지가 무엇을 "보여 주는가"다(예: "결제가 흐르는 배관을 단면으로 본다"). 아트디렉터는 컨셉·무드·에셋 방향·금지(코덱스의 anti-pattern + Vercel 「generated-design reflexes」류)를 concept.md에 쓴다. 빌드 전에 같은 파일에 적용 범위 표를 둔다: 결정 | 근거 종류(브랜드 사실/권한 있는 프로젝트 결정/코덱스 관측) | 출처·대상 surface | 이번 적용/미해결 이유 | 검증 방법. 공개 컨트롤의 flat 관측은 그 컨트롤의 증거이며 모든 랜딩 오브젝트·3D·조명을 금지하는 근거가 아니다. 로컬 장면 연출을 기업 사실로 승격하지 않고, 미확인 토큰도 만들지 않는다. 출처와 대상이 다르면 검토 사유로 남긴다. 호출 프롬프트에 이미 있는 에셋은 말로 서술해 넘긴다(피사체·구도·주조색·빈 여백 위치, 픽셀 크기는 sips -g pixelWidth -g pixelHeight). 아트디렉터는 이미지 파일을 Read로 열지 않는다 — 대용량 이미지 tool_result 뒤에서 세션이 멈춘 사례(도그푸딩 2026-09-02).

2. 스토리보드

섹션 6~8개. 각 섹션에 (a) 목적 한 문장, (b) 뷰포트 높이(코덱스의 섹션 리듬 규칙 인용), (c) 구도 패턴 — 코덱스 표의 패턴 이름과 LC-n(bleed / inset / stacked / split / pinned-reveal …), (d) 에셋 계획 — 종류(사진/렌더/일러스트/추상 UI)·밝히는 제품 상태/의미·비율·배치·피사체의 화면 점유 목표·생성 프롬프트 원문(브랜드 팔레트 hex를 프롬프트에 잠근다), (e) 스크롤 연출(리빌 방식, 지속·이징은 DESIGN.md Motion 토큰), (f) 카피 골격. 압도 지점을 하나 정한다 — 페이지가 정점에 이르는 섹션과 그 직전의 여백 섹션.

밀도 예산 (숫자로 적는다 — 서술만 하면 빈 페이지가 나온다)

개수와 비율만으로 의미 있는 장면이 증명되지는 않는다. 아래 수치를 보존하되, 에셋마다 어떤 제품 상태/의미를 밝히는지와 컨테이너가 아닌 실제 피사체의 점유 면적을 계획하고 렌더에서 확인한다. 개수 채우기용 반복 SVG, 같은 빈 종이의 크롭·확대본, 의미 없는 위성 이미지는 금지한다.

• 미디어 총량 ≥ 페이지 vh × 1.0. 12vh 페이지면 미디어 12개 이상이다. 이미지·영상·의미 있는 인라인 SVG를 센다 (아이콘 하나하나는 세지 않는다 — 24px 이상, 장식이 아니라 내용인 것).
• 폴드(첫 화면) 미디어 ≥ 3개. 코덱스 실측에서 affinity 폴드는 8개다.
• 스크롤러(LC-15)를 쓰면 항목 ≥ 8개. 3~4개짜리 가로 스크롤은 밀도 밸브가 아니라 빈 줄이다.
• 모션 에셋 ≥ 1개. omd:setup이 영상 채널을 잡아 뒀으면 image_to_video로 섹션 에셋 하나를 6초 루프로 만든다. prefers-reduced-motion에서는 같은 프레임의 정지 이미지로 대체한다(자동재생·무음·loop·playsinline). 채널이 없으면 그 사실을 trace.md에 적는다 — 조용히 건너뛰지 않는다.
• 섹션별 잉크 목표 ≥ 26%(코덱스 실측대역 26–54%의 하단). 부족하면 패딩·피사체 크기·필요한 상태 표현을 조정한다.
• 세로 패딩을 하나의 고정 vh로 통일하지 않는다. 첫 산출은 모든 섹션이 18vh/24vh로 같아 리듬이 없었다 (중앙값 = 최댓값 = 378px). 밀도가 낮은 섹션은 패딩을 줄이고, 압도 지점 앞뒤에만 큰 여백을 준다.

3. 에셋

omd:media가 감지한 채널로 storyboard의 프롬프트를 실행한다(채널 없음 → 프롬프트 팩과 수동 큐를 assets/QUEUE.md에 남기고, 자리에는 브랜드 팔레트의 추상 SVG 플레이스홀더를 넣는다 — 스톡·이모지 금지). 얼굴 사진 생성 금지, 로고 생성 금지(텍스트 워드마크). 각 이미지의 프롬프트·채널·비용을 trace.md에. 실패한 생성은 원인에 맞춰 고치고, 채널 한계·플레이스홀더는 실제 개수와 함께 trace.md에 적는다. 하나의 원본 장면으로 목적이 충족된다면 복제물을 늘리지 말고 그 구성으로 검토본을 렌더한다. 밀도 예산 미달과 원시 checker FAIL은 그대로 남겨 적용 경계 검토에 보낸다. 검토본 생성은 완료·waiver·PASS가 아니다. 이미지 비율은 그 이미지가 들어갈 슬롯의 실측 종횡비에서 가져온다(기본값 금지 — omd:media §1).

4. 빌드

단독 render.html. CSS 변수는 DESIGN.md 토큰 이름을 그대로 쓴다(--color-…, --space-…). UA 기본 스타일 리셋(figure/blockquote 마진 — #78). 이미지는 assets/ 상대 경로 또는 data URI. 모션은 transform·opacity만, 지속 3단계 이하, @media (prefers-reduced-motion: reduce)에서 전부 정지. 텍스트 최대 폭·타입 스케일·섹션 높이는 코덱스 수치 범위 안에서. 사진 위 글자에는 스크림이 있어야 한다 (LC-36 "압도는 읽혀야 한다"): 히어로·핀 스테이지·반전 섹션의 nav·wordmark· lead·CTA·포커스 링은 배경 픽셀 대비 WCAG 4.5:1(일반)·3:1(큰 텍스트·UI)을 넘겨야 하고, 그 수단은 토큰 색의 알파 스크림(::before)과 포커스 링 halo다 — 첫 toss 런이 스크림 없이 nav 1.05:1·wordmark 1.07:1로 BLOCK 6을 받았다. muted 계열 토큰은 눈썹·법적 고지를 포함한 어떤 본문 텍스트에도 쓰지 않는다(3.0:1). 스크롤 리빌(opacity:0)은 <noscript>와 @media (scripting: none)에서 전부 보이게 — JS 없이 빈 페이지는 결함이다. 대비·키보드 요건과 이 스킬의 터치 조작성 목표는 관찰된 브랜드 geometry가 아니다. 기존 토큰 조합으로 충족하지 못하면 필요한 로컬 결정을 적용 범위 표에 제안하고 권한 경계를 따른다. 브랜드 일치를 이유로 접근성 실패를 면제하지 않는다.