estEL 디자인 표준 — ZPC "Quantum Precision"

개요

zpcryo.com(Zero Point Cryogenics) 디자인을 스크리닝해 estEL(한별QC 양자컴퓨팅 브랜드)의 디자인 표준으로 채택. 쿨 뉴트럴 + 스틸블루 단일 액센트, 프리미엄·정밀·미니멀. CSS는 공유 함수(getEstel2CSS 말미 오버라이드)라 KO/EN 동시 반영.

ZPC 스크리닝 결과 (근거)

• 테마: Salient(Nectar) + 자식테마(zpc-* 커스텀). 자식 style.css에서 실 브랜드 신호 추출.
• 액센트: 스틸블루 #4675ab(주). 슬레이트 #545d76, 그레이 #606060/#a2a2a2. 베이스 흰/검.
• 다크 히어로/카드에 rgba(0,0,0,.6) 오버레이. 라이트↔다크 섹션 교대 리듬.
• 폰트: Montserrat(디스플레이/헤딩, 700/600), Public Sans(본문), Castoro(세리프 액센트).
• 버튼: see-through-2(투명+얇은 보더, 호버 채움) 아웃라인 + 솔리드 CTA. 미니멀 라운드.
• 시그니처: cheveron-top-flair(셰브론 디바이더), 두 줄 헤더, 대문자 라벨, 제품 대형 이미지, advantages 정의목록. 넉넉한 여백, 과한 장식 없음.

estEL 적용 토큰 (디자인 표준 SSOT)

토큰	라이트	다크
bg / bg2 / bg3	#f5f7fb / #fff / #eef2f8	#0b0f16 / #131c29 / #1a2433
text / text2 / text3	#0f1622 / #4c576b / #8a94a6	#eef2f8 / #adb8ca / #7c8698
accent	#4675ab (steel blue)	#6b93c4
accent2 / accent3	#365a86 / #6b93c4	#8bafd8 / #4675ab
border	#dde4ee	#26303f
ink / ink2 (다크밴드)	#0b0f16 / #131c29	#070a0f / #0f1723

• 타이포: 헤딩/라벨/브랜드/제품명 = Montserrat(라틴) → Pretendard(한글 폴백). 본문 = Pretendard. h1 자간 -.035em, 라벨 자간 .24em 대문자 + 앞 스틸블루 틱(::before).
• 버튼: 솔리드 CTA(#4675ab, 흰텍스트, radius 5px) / see-through 세컨더리(투명+border, 호버 시 accent 보더·텍스트). 라이트·다크·자동다크 모두 흰텍스트 유지.
• 다크 밴드: .e-hero(스틸블루 틴트 radial-gradient) + .eint-sec(MCP/크라우니AI 존) = 항상 다크. 나머지 라이트. → ZPC식 리듬.
• 라운드: 카드 8px, 버튼 5px, 칩 4px(미니멀). 쿨 보더 + 은은한 그림자, 호버 스틸블루 글로우.
• 파트너 로고 흰칩(.plogo) 유지(라이트/다크 판독).

구현 위치

• /Users/ef/crowny-byeol/server-byeol.js — getEstel2CSS() 말미 "estEL Design Standard — ZPC Quantum Precision" 블록(최후 로드 오버라이드). Montserrat <link>는 pageEstel/pageEstelEN head.
• 라이브: estel.crowny.org (KO/EN 공통 CSS).

잔여

• 울트라 디자인 QA(3렌즈: 대비/다크모드/충실도) 결과로 폴리시 반영 예정.
• 향후 다른 estEL 하위 페이지·하드웨어 브로슈어도 이 표준 준수.

v2 (2026-07-07 밤) — 디자인 학습 도구 + 구조(색 아닌 구조) 캐치 + estEL 개명

브랜드 개명

• 오타였던 setEL을 정본 estEL로 전면 환원(사이트 132건 + 로고 est+EL 복원). 식별자(estel/ESTEL)는 불변.

디자인 학습 도구 (재사용) — ~/.claude/scripts/디자인학습.sh

• 사용법: 디자인학습.sh <url> [별칭] → ~/.claude/design-assets/<별칭>.md 자산 생성.
• catch-list 4차원(사용자 확정): ①타이포·글자간격 ②프레임·여백 스케일 ③배치(레이아웃) ④컴포넌트·모티프.
• HTML→CSS 수집(홑/겹따옴표·절대/상대·쿼리 처리) → 차원별 측정치 추출 → 4상 판정(코어 디자인캐치판정.한선: 티=확정/옴=재분석/타=해당없음/음=모호→[?ASK] 사용자에게 물어 자산화).
• ZPC 실행 결과 = ~/.claude/design-assets/zpc.md (4차원 티:캐치확정, CSS 272KB 수집).

ZPC 구조 캐치 (색 아닌 구조 — "색만 바뀜" 피드백 반영)

실측 캐치: 유동 clamp 타이포(디스플레이 최대 5.5rem·weight 900)·행간 디스플레이 1.15/본문 1.65~1.95·measure 65ch/75ch·컨테이너 1000px·2단 그리드·버튼 좌우 2rem·대문자 라벨. → estEL Structure Standard(getEstel2CSS 말미, 강도=과감히): H1 clamp(2.7→4.8rem·w900·자간 -.045em), H2 clamp(1.7→2.7rem·w800), 본문 max 65ch·행간 1.82, 섹션 pad clamp 4.5→9rem, 버튼 pad .72/2rem, 라벨 .26em 대문자+틱. → 색이 아니라 타이포·글자간격·여백·measure·배치가 실제로 바뀜. KO/EN 동시.

동반 한선씨

• ~/.claude/scripts/디자인캐치판정.한선 (4상 캐치 판정 코어, 컴파일·실행 검증).

v3 (2026-07-07 심야) — 정직한 정량 비교 + 갭 게이트 도구화 + 실제 과감한 히어로

정직 자기교정 (중요)

• 이전 "구조 개선" 보고는 estEL-vs-이전estEL(값 변경) 기준이었고 레퍼런스(ZPC)와 비교한 적 없음 → 근거 없는 보고였음(인정).
• 실측(Chrome 헤드리스 스크린샷 + PIL, 히어로 첫 뷰포트): ZPC 고유색 13,269·밝기변화 24.2·1.64MB vs 이전 estEL 1,198·10.1·0.19MB → estEL은 거의 빈 검은 사각형. 색만 바뀌고 이미지·구성 미변경.
• 원인 = 토큰 오버라이드(싸고 안전) 경로 선택, 고임팩트 축(이미지·풀블리드 구성) 회피.

도구화 (재사용) — '쉬운 경로' 방지 게이트

• ~/.claude/scripts/디자인갭검증.sh: 레퍼런스·타깃 스크린샷 → 히어로 정량(밝기변화=리치니스, 고유색, 용량) → 4상 게이트(디자인갭판정.한선). 타:토큰만→exit 2로 "개선됨" 보고 차단. 검증: 이전 estEL=SCORE 29 타(차단), 신규=55 옴.
• ~/.claude/scripts/디자인학습.sh + 디자인캐치판정.한선: 사이트 구조 4차원 캐치→자산(design-assets/). 음=모호→물어 자산화.
• 리포트 자산: ~/.claude/design-assets/estel-gap.md, zpc.md.

실제 과감한 작업 (측정으로 증명)

• 풀블리드 히어로 비주얼: 오리지널 SVG 기술 라인아트(냉동기 플레이트 스택+동심 믹싱챔버 링+큐트릿 발광 격자+격자그리드), public/photos/estel-hero.svg(/photos 라우트 svg 지원 추가). 셰브론 스크롤 큐, 대형 헤드라인(clamp≤7rem), 태그를 디스플레이 메시지로 격상.
• 측정 개선: 고유색 1,198→4,402→(밝힘)↑, 밝기변화 10.1→12.1→14.x, 파일 0.19→0.91MB. 게이트 SCORE 29(타)→55(옴). 구성 갭(빈 배경→풀블리드)이 핵심적으로 닫힘. 잔여=사진급 밝기(브랜드 다크 정체성상 의도적 절제).

v4 (2026-07-07) — Claude(Anthropic) 디자인 스크리닝 → estEL 재적용 (게이트 통과)

• 도구 재사용: 디자인학습.sh https://www.anthropic.com anthropic → design-assets/anthropic.md(4차원 티). 실 토큰: 크림 #f0eee6·클레이 #d97757·잉크 #141413·카드 #e8e6dc, 폰트 Anthropic Serif/Sans/Mono.
• estEL × Claude Design 오버라이드(getEstel2CSS 최후 로드): 웜 크림+클레이 팔레트(스틸블루 반전, 라이트/웜다크), 세리프 디스플레이(Fraunces+나눔명조)×산세리프 본문, 차콜 솔리드 CTA, 헤어라인 웜카드, 대문자 라벨+클레이 틱, 웜 라이트 에디토리얼 히어로(다크 크라이오스탯 제거), MCP밴드=웜 차콜.
• 정량 검증(디자인갭검증.sh vs anthropic.com): SCORE 68 → 티:과감히달성(리치 74%·색 59%). ZPC 시도(55·옴)보다 높음 — Claude 미감(웜팔레트+세리프+에디토리얼)은 CSS만으로 충실 재현 가능(풀블리드 사진 불필요)해서 레퍼런스 근접이 쉬웠음.
• KO/EN 공유 CSS라 동시 반영. 폰트=Fraunces+Nanum Myeongjo(오리지널 구현, Anthropic 독점폰트/에셋 미복제).