diff --git a/apps/site/design.md b/apps/site/design.md index 7ed32df..c8c1f0a 100644 --- a/apps/site/design.md +++ b/apps/site/design.md @@ -222,11 +222,24 @@ WebGL 게이트: `prefers-reduced-motion` 이면 **아예 시작하지 않는다 **실측 3층** (스크롤 1000 → 1600): 격자 **+14.9px** · 산출물 **-14px** · 단계명 **0**. 한 층은 반드시 고정이다. 전부 움직이면 기준이 없어 그냥 흔들리는 페이지가 된다. -### 배경 사진 (gpt-image-2 로 생성) +### 배경 사진 넉 장 (gpt-image-2 로 생성) CSS 그라디언트 광원만으로는 기준면이 약해서, 굴절과 그레인이 실제로 들어 있는 이미지를 넣었다. Codex CLI 의 내장 `image_gen`(gpt-image-2)을 ChatGPT 구독 인증으로 호출해 만들었다 — 스톡 이미지가 아니다. +**섹션마다 다른 그림을 쓴다.** 같은 배경을 전부에 깔면 그건 벽지고, +모션에 적용한 규칙("섹션마다 다른 말을 해야 한다")이 배경에서만 면제될 이유가 없다. + +| 이미지 | 무엇 | 어디 | 그 섹션의 주장 | +|---|---|---|---| +| `bg-refraction` | 겹친 유리판을 통과한 빛 | 재료 · 설치(flip) | 표면은 한 겹이 아니다 | +| `bg-split` | 한 빔이 둘로 갈라진다 | 사례 | 같은 파이프라인, 다른 결과 | +| `bg-align` | 정렬선 여럿 중 **하나가 어긋나 끊겨 있다** | 프리플라이트 | 자기 결과물을 남의 것처럼 본다 | +| `bg-paper` | 무광 인쇄용지, 섬유와 데클 엣지 | 조판(밝은 밴드) | 한글이 종이 위에 있어야 한다 | + +**격자를 쓰는 파이프라인·수치에는 사진을 넣지 않았다.** 거기서는 격자가 그 섹션의 주장이다. +규칙·히어로도 그대로 뒀다 — 히어로에는 three.js 가 있고, 규칙 목록은 담백해야 한다. + 프롬프트는 **이 페이지의 토큰 값을 그대로** 넣었다: - 바탕 `#0B0E12` — 순흑도 네이비도 아니게 @@ -242,13 +255,17 @@ Codex CLI 의 내장 `image_gen`(gpt-image-2)을 ChatGPT 구독 인증으로 호 절대배치한다 — background-image 로 깔면 **항상 받고 최적화도 안 된다.** 같은 이미지를 설치 섹션에서는 `flip` 으로 좌우 반전해 같은 그림으로 읽히지 않게 했다. -| 크기 | 빌드 결과 (WebP) | -|---|---| -| 1920px | **26KB** | -| 1400px | 14KB | -| 860px | 7KB | +소스 WebP: `refraction` 37KB · `split` 14KB · `align` 11KB · `paper` 112KB +(종이만 큰 이유는 섬유 질감이 고주파라 압축이 안 붙기 때문이다) -추상 그라디언트라 압축이 잘 붙는다. 소스도 PNG 2MB 대신 **WebP 37KB** 로 두었다. +빌드 결과 12개 파일 합계 **276KB**. 실제로는 뷰포트에 맞는 크기 하나씩만, +그것도 `loading="lazy"` 로 받는다. + +**codex 0.147.0 메모** — `codex-image` 스킬의 `extract_imagegen.py` 는 rollout JSONL 의 +`image_generation_call` base64 를 찾는데, 0.147.0 은 다시 **파일**로 저장한다 +(`~/.codex/generated_images//exec-*.png`, 이벤트는 `custom_tool_call` + `image_generation_end`). +그래서 추출이 fail-loud 로 죽는다 — 이미지는 실제로 생성돼 있다. +그리고 `$imagegen` 은 **프롬프트 맨 앞**에 있어야 내장 도구가 발동한다. ## 그리드의 `wide` 트랙을 좁은 화면에서 닫는다 diff --git a/apps/site/src/assets/bg/bg-align.webp b/apps/site/src/assets/bg/bg-align.webp new file mode 100644 index 0000000..6283669 Binary files /dev/null and b/apps/site/src/assets/bg/bg-align.webp differ diff --git a/apps/site/src/assets/bg/bg-paper.webp b/apps/site/src/assets/bg/bg-paper.webp new file mode 100644 index 0000000..5fae845 Binary files /dev/null and b/apps/site/src/assets/bg/bg-paper.webp differ diff --git a/apps/site/src/assets/bg/bg-split.webp b/apps/site/src/assets/bg/bg-split.webp new file mode 100644 index 0000000..8354953 Binary files /dev/null and b/apps/site/src/assets/bg/bg-split.webp differ diff --git a/apps/site/src/components/BgPhoto.astro b/apps/site/src/components/BgPhoto.astro index dfbad4a..1af18c3 100644 --- a/apps/site/src/components/BgPhoto.astro +++ b/apps/site/src/components/BgPhoto.astro @@ -1,36 +1,40 @@ --- import { Image } from "astro:assets"; -import bgRefraction from "../assets/bg/bg-refraction.webp"; +import refraction from "../assets/bg/bg-refraction.webp"; +import paper from "../assets/bg/bg-paper.webp"; +import split from "../assets/bg/bg-split.webp"; +import align from "../assets/bg/bg-align.webp"; + +/** + * 배경은 섹션마다 다른 말을 해야 한다. 같은 그림을 전부에 깔면 그건 벽지다. + * 넷 다 gpt-image-2 로 만들었고, 프롬프트에 이 페이지의 토큰 값을 그대로 넣었다. + * + * refraction 겹친 유리판을 통과한 빛 재질이 주제인 자리 + * split 한 빔이 둘로 갈라진다 같은 절차, 다른 결과 + * align 정렬선 하나가 어긋나 있다 자기 검사 + * paper 무광 인쇄용지 밝은 밴드. 한글이 종이 위에 있어야 한다 + */ +const SOURCES = { refraction, paper, split, align } as const; interface Props { - /** 0~1. 이 레이어는 본문 뒤에 깔리므로 기본값을 낮게 둔다 */ + variant?: keyof typeof SOURCES; + /** 0~1. 본문 뒤에 깔리므로 기본값을 낮게 둔다 */ opacity?: number; - /** 좌우 반전. 같은 이미지를 두 섹션에 쓸 때 같은 그림으로 안 읽히게 한다 */ + /** 좌우 반전. 같은 그림을 두 섹션에 쓸 때 되풀이로 안 읽히게 한다 */ flip?: boolean; } -const { opacity = 0.45, flip = false } = Astro.props; +const { variant = "refraction", opacity = 0.45, flip = false } = Astro.props; +const src = SOURCES[variant]; --- {/* - 배경 사진 레이어. - - CSS 그라디언트로 만든 광원과 달리 굴절·그레인·빛의 감쇠가 실제로 들어 있어 - 패럴랙스의 기준면으로 훨씬 잘 읽힌다. 대신 무게가 있으므로 규칙이 붙는다. - - `loading="lazy"` — 초기 번들에 들어가지 않는다. CSS background-image 로 깔면 이 통제권을 잃는다(항상 받고, 최적화도 안 된다). 그래서 를 절대배치한다 - `aria-hidden` + 빈 alt — 장식이다. 보조기술이 읽을 것이 없다 - opacity 기본 0.45 — 본문 대비를 지키는 선. 올리려면 그 위 글자를 다시 재라 */}