8e3cdb0d3b
Some checks are pending
ci / build (push) Waiting to run
Measured convergence before: split hero 13/19, top-bar nav 19/19, one-line notice footer 14/19, body Pretendard 17/21, 10 similarity pairs above 0.78. Each showcase got a pre-assigned hero family, nav form, footer form, type pair, background, accent hue, radius, motion grammar and material from outputs/rework-2026-10-06/plan.md; direction cards and the chosen reason are recorded in every design.md. After: 0 similarity warnings, 19 distinct display faces, 7 hero families, 5 nav forms, 5 footer forms, no scroll reveals, 5 showcases with SVG filter materials. Example contact values replace bracket placeholders under the existing fictional-brand notices. Thumbnails, OG images, card copy and three e2e assertions updated; dead CSS in dure-enrollment and hannam-jari removed; similarity.mjs learns the new font families.
98 lines
12 KiB
Markdown
98 lines
12 KiB
Markdown
# design.md — RFS 실시간 유체 시뮬레이터 (2026-10-06 재작업)
|
||
|
||
## 진행 상태
|
||
|
||
- 0단계 현행 감사 완료(8,222px·띠 교대 8개·고지 푸터 724px·Pretendard+IBM Plex Mono가 saebyeok과 0.887 수렴)
|
||
- 1단계 레퍼런스 실측 완료(windy.com·earth.nullschool.net 브라우저 실측, luminary·flexcompute·simscale 푸터 텍스트 페처)
|
||
- 2단계 방향 카드 3장 → A "계기판" 선택(사용자 위임)
|
||
- 3단계 토큰 `styles/tokens.css` 재정의 완료
|
||
- 4단계 구현 완료(레이아웃 → 재질 없음 → 모션은 캔버스뿐)
|
||
- 5단계 검증 완료(html-validate·stylelint·no-hanja·showcase-audit 6/6·design-gate 13/0/0·recent-showcases-e2e rfs 전부 통과·루브릭 17/20)
|
||
- 6단계 이 문서
|
||
|
||
## 브리프
|
||
|
||
- 데이터센터 열관리용 실시간 GPU 유체 시뮬레이터 RFS(Twentyoz)의 소개 페이지. 방문자는 설비·운영 담당자다.
|
||
- 목표 행동: 도입 문의(mailto). 그 전에 "설비를 건드리면 기류가 바로 바뀐다"를 첫 화면에서 직접 확인하게 한다.
|
||
- 확정 슬롯(plan.md 배정): 데이터·도구가 주인 히어로(캔버스·제어가 먼저, 표제 작게) · 상단 바 · 다열 색인 푸터 · Spoqa Han Sans Neo 표제·본문 · 밝음·쿨 #f3f6f8, 띠 교대 제거 · 246° 청 유지 · radius 0 · 캔버스 유지, 등장 모션 없음 · 재질 없음.
|
||
- 화면: `index.html` 한 장. 2차 페이지 없음.
|
||
- 유지한 사실·자산: 상호·연락처(hello@twentyoz.kr, 070-4353-1190), 버전 0.13.0, 솔버 사양 8항목+SoA, 장비 5종, 에디터 기능 6항목·단축키, 시각화 4종, 5계층, 요구사항 표, 실물 렌더 2장(`assets/sph-topview.webp`, `assets/sph-sideview.webp`), 2D 데모 스크립트 `scripts/thermal-field.js`.
|
||
|
||
## 미확정
|
||
|
||
- 성능·정확도 수치 없음(이전 판에서 공개 근거 없는 값을 이미 제거했다). 푸터 고지 한 줄이 그 사실을 적는다.
|
||
- og:image는 첫 화면 캡처(`og.png`, 1440×900)다. 1200×630 전용 이미지가 아니다.
|
||
- `src/assets/shots/work-rfs-cfd*.png`(사이트 카드 썸네일)는 옛 어두운 판이다 — `node tools/capture-new-shots.mjs --slug rfs-cfd`로 다시 찍어야 한다(이 작업의 소유 범위 밖).
|
||
|
||
## 레퍼런스
|
||
|
||
| 슬롯 | 출처 | 실측(2026-10-06) | 가져온 원리 |
|
||
|---|---|---|---|
|
||
| R1′ 구도 | https://www.windy.com/ (playwright 1440×900) | 지도 캔버스가 1440×900 전부, h1 없음. 제어는 가장자리 패널(좌상 390px 검색·예보, 우측 레이어 버튼 세로 열, 하단 시간축 띠, 범례 kt 0~60). radius 0 384:83 | 제어를 캔버스 옆 세로 열(패널)에, 범례·캡션을 캔버스 아래 띠에 둔다 |
|
||
| R1′ 구도 | https://earth.nullschool.net/ (playwright) | 캔버스 1440×900, h1 "earth" 18px 좌하단, 배경 #000005, radius 0 455:312 | 표제는 도구 옆에 작게 |
|
||
| R1 푸터 | https://luminary.ai/ · https://www.flexcompute.com/ · https://www.simscale.com/ (텍스트 페처) | 셋 다 5열 색인 푸터(Platform/Resources/Industries/Company/Developers 등) | 다열 색인 푸터: 기술 차례·제품 사실·문의 3열 + 브랜드 |
|
||
| R2 톤 | 제품 실물 렌더 `assets/sph-*.webp` | 어두운 바탕 위 시안→초록 입자 | 어두운 면은 캔버스 화면 하나뿐. 온도 램프는 실물 색 언어 |
|
||
| 미검증 | ciechanow.ski(DNS 실패), simscale·luminary 첫 화면에 제품 UI 없음 | — | 캔버스 옆 제어 패널의 CFD 업계 실측 사례는 없음 — windy/nullschool(기상 시각화)로 대체 |
|
||
|
||
## 방향
|
||
|
||
지문: 히어로 데이터·도구(캔버스 좌 + 제어 패널 우, 표제 28px) · Spoqa Han Sans Neo 700 / Spoqa Han Sans Neo 400 · 바탕 밝음·쿨 #f3f6f8(어두운 면은 캔버스 하나) · 강조 LCh 246° #2a6b8a · radius 0 · 흐름 "계기판 → 기존 CFD 대비 → 솔버 사양 원장+5계층 → 장비 5종+에디터 → 시각화(실물 렌더 탭) → 요구사항+문의 → 다열 색인 푸터" · 상단 바(고정 아님, 흐림 없음, 브랜드+앵커 4+문의) · 푸터 다열 색인(브랜드·기술·제품·문의 + 고지 한 줄) · 이미지 실물 렌더 원본 비율 contain, 캡션 아래 · 모션 캔버스 시뮬레이션만, 등장 모션 없음
|
||
|
||
한 문장 컨셉: 데이터센터 설비 담당자가 랙 부하와 급기량을 직접 움직여 기류가 바로 다시 계산되는 것을 첫 화면에서 확인하고, 사양·요구사항을 읽은 뒤 도입 문의를 보낸다.
|
||
|
||
프리셋: 새로 정의 "instrument-light"(밝은 계기판). dark-instrument를 쓰지 않은 이유는 배정(밝음·쿨)과, 저장소에 어두운 계기판이 이미 둘(pulsegate·synapse) 있기 때문이다. 표현 리스크: 어두운 캔버스 한 장이 밝은 페이지 안에 있다 — 띠가 아니라 부품으로 읽히는지 회색조 캡처로 확인했다(첫 시선이 캔버스 → 패널 순).
|
||
|
||
제시한 카드(사용자 위임, 구조가 다른 3장):
|
||
|
||
- A **계기판** — 1440: 왼쪽 표제(작게)+리드+캔버스 808px, 오른쪽 흰 제어 패널 352px(장면 3·슬라이더 2·판독). 포기: 캔버스 전폭, 390에서 판독이 첫 화면 밖.
|
||
- B **콘솔 전폭** — windy처럼 캔버스를 전폭으로 깔고 제어를 오버레이, h1 좌하단. 포기: 캔버스 위 글자에 어두운 스크림이 필요해 배정(띠 교대 제거)과 충돌, 390에서 오버레이가 캔버스를 가린다.
|
||
- C **판독표가 먼저** — 세 장면(기준·과부하·급기저하)을 3열 수치표로 비교하고 캔버스는 작은 썸네일. 포기: 캔버스를 만지는 경험이 2차가 되고, E2E가 단언하는 장면 버튼·슬라이더 구조를 표 셀로 바꿔야 한다.
|
||
|
||
고른 카드: A. 이유 — 배정값("제어 패널이 캔버스 옆에 있는 계기판")과 R1′ windy의 "캔버스 + 가장자리 제어 열" 구성이 A와 같고, `tools/recent-showcases-e2e.mjs`가 단언하는 `.scenario-btn`·`#ctlLoad`·`#fieldState` 구조를 그대로 쓸 수 있다. saebyeok(같은 히어로 패밀리)은 시세표 꼴이므로 rfs는 캔버스+패널 꼴로 갈린다.
|
||
|
||
반사실: 첫 화면 고유 요소 — 살아 있는 2D 열유동 캔버스(FWU·서버랙 형상, 온도 램프), 운전 장면 3종(기준 운전·랙 과부하·급기 저하)과 판독 문장, "2D 축소 표현" 진실 라벨. 같은 업종 치환(다른 CFD 벤더)에서는 실시간 캔버스와 장면 프리셋이 성립하지 않는다(그들은 배치 계산). 다른 업종(세무사무소)에서는 캔버스·슬라이더·판독이 무의미 → 구조를 바꿔야 함 → 통과.
|
||
|
||
수렴(plan 값·saebyeok 기준): 히어로 패밀리 같음 / 글 묶음 다름(작은 표제+한 문장 리드+행동 없음 vs 시세표) / 내비 다름(상단 바 vs 탭) / 푸터 다름(다열 색인 vs 연락처 카드) / 이미지 다름(렌더 contain vs 흘림) / 모션 다름(캔버스 vs 카운터) → 1/6. 토큰 4축: 서체·배경 명도(둘 다 밝음)·강조·radius 중 배경 명도 1개만 같음.
|
||
|
||
보존 자산: 실물 렌더 2장, 데모 스크립트(프리셋·판독·감소 모션·화면 밖 정지 계약), 파비콘 유동 곡선.
|
||
|
||
## 토큰과 예산
|
||
|
||
값은 `styles/tokens.css` 한 곳. 역할: 표제·본문 Spoqa Han Sans Neo(400·700만 @font-face, jsdelivr `spoqa/spoqa-han-sans@3.3.0` 한글 서브셋, OFL 1.1, `font-display: swap`). 모노 없음 — 숫자는 `.num`(tabular-nums). 바탕 #f3f6f8 / 패널 #fff / 푸터 면 #e8edf1 / 글자 #121a21 / 보조 #4a5a67(6.56:1) / 희미 #55656f(5.56:1) / 강조 #2a6b8a(LCh 246°, 흰 글자 5.88:1, 바탕 위 5.42:1, 푸터 면 위 4.99:1). 캔버스 화면 #0e1114 위 글자 #98a3ab 7.36:1, 표식 선 #3e8fb0 5.20:1. radius 0 한 값. 간격 8단계, 섹션 간격 `--space-8` clamp(64, 112px).
|
||
|
||
예산(tokens §5 데모 기준): JS 150KB → 실측 `thermal-field.js` 28KB(비압축). 폰트 200KB → **초과 364KB**(Regular 180.6KB + Bold 183.7KB, jsdelivr 한글 서브셋이 2,350자 단일 파일이라 더 못 줄인다. 배정 서체라 유지, `swap`이라 LCP를 막지 않는다). 첫 화면 같은 출처 전송 ≤2MB → E2E 통과. LCP ≤3.5s(로컬) → E2E 통과. CLS ≤0.1 → E2E 통과. LCP 후보는 히어로 폴백 이미지(`fetchpriority="high"`, lazy 아님).
|
||
|
||
## 이펙트와 폴백
|
||
|
||
- 캔버스: WebGL2 Stable Fluids + 파티클(`thermal-field.js`, 변경 없음). `data-field-state` loading → live. 화면 밖·탭 숨김이면 정지.
|
||
- 폴백: WebGL 없음·감소 모션 → `static`, 실물 측면 렌더가 남는다. live가 아닐 때(loading·static·JS 없음)는 2D 데모의 장비 형상·표식·격자를 숨긴다 — 실물 렌더 위에 데모 좌표를 겹치면 라벨이 거짓말이 된다(이번에 추가).
|
||
- 재질 없음. 등장 모션 없음. 전환은 색·테두리 160ms만.
|
||
|
||
## 하지 않기로 한 것
|
||
|
||
- 어두운 띠 교대와 `.band-*` 토큰 재정의 규칙 — 배정대로 제거. 어두운 면은 캔버스 화면과 실물 렌더 프레임뿐.
|
||
- sticky 헤더·backdrop-filter — 페이지가 다섯 화면 남짓이라 늘 보일 이유가 없다(layout §2-c).
|
||
- IBM Plex Mono — 한글 섞인 라벨이 흩어지던 원인. 숫자는 tabular-nums.
|
||
- eyebrow("유체 엔진", "시각화")·"수치 판" 4칸(GPU 커널/연산 모델/SoA/Edit·Play) — SoA는 사양 원장 행으로, Edit·Play는 에디터 설명 문장으로 옮겼다.
|
||
- 가운뎃점 메타 문자열 — 제목·표·푸터·판독(JS 문자열 "랙 배면 · 천장 배기" → "랙 배면과 천장 배기") 전부 쉼표·조사로.
|
||
- 헤더의 "v0.13.0" 모노 표기 — 푸터 제품 열로.
|
||
- 새 이미지 생성 — 하지 않았다.
|
||
|
||
## 검증
|
||
|
||
검증 줄: html-validate 0 오류 · stylelint 0 오류 · no-hanja PASS 4 files · showcase-audit PASS 6/FAIL 0(320~2560) · design-gate 충족 13/미검증 0/실패 0(꺼짐 3: static·visual·webkit) · recent-showcases-e2e rfs 블록 전부 통과(responsive 320/390/768/1440, controls 8/8, visual output 2/2, keyboard 2/2, reduced motion 2/2, axe 0 위반, performance 3/3, no-JS 2/2; 실패 1건은 saebyeok season) · similarity 21종 PASS(rfs-cfd는 상위 15쌍에 없음).
|
||
|
||
시각 루브릭(캡처를 열어 채점, 약한 축부터): R5 여백 1(섹션 간격 전부 `--space-8`로 같다, 극단은 캔버스 486px vs 표제 28px) · R6 이미지 1(실물 렌더 2장에 역할 있음. 측면 렌더가 히어로 폴백과 시각화 측면 탭에 두 번 쓰인다 — live 상태에서는 한 번만 보인다) · R9 마감 1(200% 확대 캡처 미작성) · R1 2(3초 문장 "RFS, 데이터센터 기류를 실시간으로 계산하는 GPU 시뮬레이터, 부하·급기를 움직이면 바로 바뀐다"가 컨셉과 일치, 1440·390 모두) · R2 2(회색조·흐림: 캔버스 → 흰 패널 → 표제, 의도와 같음) · R3 2(1440 시작선 120·968/993 두 묶음) · R4 2(모노·이탤릭 없음, 마지막 줄 어절 ≥2, measure 36em) · R7 2(합니다체 하나, 섹션 제목에 5종·Windows 10·VRAM 6GB 사실) · R8 2(고유 요소 3, 수렴 1/6) · R10 2(390 첫 화면에 브랜드·표제·캔버스·내비, 장면 버튼 y=743). 합계 17/20.
|
||
|
||
미검증: WebKit 렌더, 실기기 터치, 200% 확대 캡처, 폰트 전송량의 실제 네트워크 실측(Content-Length로 계산).
|
||
|
||
## 피드백 기록 · 보존 목록
|
||
|
||
- 보존: 캔버스 조작 계약(프리셋 → 슬라이더 동기화 → 판독), "2D 축소 표현" 진실 라벨, 실물 렌더 탭(상면/측면), 요구사항 표, 합니다체 카피.
|
||
|
||
## 변경 기록
|
||
|
||
- 2026-08-24 · 초판 "암실과 사양서"(어두운 띠 4 + 밝은 띠 4, Pretendard + IBM Plex Mono, luminary·teenage.engineering 레퍼런스).
|
||
- 2026-09-12 · 데스크톱 히어로를 좌 설명·우 캔버스 한 계기면으로 보정, 성능 메타 카피 삭제.
|
||
- 2026-10-02 · 카피를 합니다체로 통일, 말장난 제목 제거, 레드팀 06(h1 여백 0, 캔버스 잘림, 모노 한글 라벨) 수정.
|
||
- 2026-10-06 · 재작업: 띠 교대 제거·밝음 쿨 한 체제, 계기판 히어로(캔버스+제어 패널, 표제 28px), 섹션 8 → 6(솔버+5계층, 장비+에디터 합침), 다열 색인 푸터(724 → 441px), Spoqa Han Sans Neo, 모노 제거, 가운뎃점 제거, 페이지 8,222 → 6,381px. 강조 hue 246°(LCh)·radius 0·캔버스 유지.
|