feat(site): rework 19 marketing showcases for composition diversity
Some checks are pending
ci / build (push) Waiting to run
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.
This commit is contained in:
Yun Chan
parent
88c11682b1
commit
8e3cdb0d3b
296 changed files with 19131 additions and 17538 deletions
|
|
@ -1,27 +1,122 @@
|
|||
# Orbit Aerospace design.md
|
||||
# design.md — 궤도 우주공학 ORBIT-75 사양서
|
||||
|
||||
## 진행 상태
|
||||
|
||||
- 0 현행 감사 완료(2026-10-06) · 1 레퍼런스 3슬롯 실측 · 2 카드 3장 → A 선택(위임) · 3 토큰 재정의 · 4 구현(레이아웃 → 유리 → 선 그리기) · 5 검증 통과(아래) · 6 이 문서.
|
||||
|
||||
## 브리프
|
||||
|
||||
- 무엇을: 가상 엔진 사양·도면·시험 기록의 읽기 순서를 보여 주는 페이지.
|
||||
- 누구에게: 값과 그 측정 조건을 같은 행에서 비교하려는 방문자.
|
||||
- 제약: 수치·조건·가상 사양서 표기를 바꾸지 않고, 도면은 설명용 표면으로 제한한다.
|
||||
- 무엇을: 가상 메탄 엔진 ORBIT-75의 사양서 한 장. 종단면도, 측정 조건이 붙은 사양표, 지상 연소 시험 다섯 회의 기록.
|
||||
- 누구에게: 발사체 통합 엔지니어. 값과 그 측정 조건을 같은 줄에서 읽고 자기 발사체에 맞는지 판단한다. 목표 행동은 없다(가상 브랜드, 자료 요청을 받지 않는다).
|
||||
- 제약: 정적 HTML/CSS, 기본 언어 ko-KR(기존 로컬라이제이션). 수치·시험 기록·사진 2장·상호는 바꾸지 않는다. plan.md 배정값(아래 지문) 안에서 고른다. 한자 금지.
|
||||
- 화면: `index.html` 한 장.
|
||||
|
||||
## 결정표
|
||||
## 미확정
|
||||
|
||||
| 축 | 관찰과 적용 범위 | 결정·역할 토큰 | 기각 조건 |
|
||||
- 방향 선택은 사용자 위임(재작업 분배표). 카드 A를 고른 이유는 "방향" 절.
|
||||
- 모든 수치·시험 기록·사진은 예시다(푸터·자료 요청 절에 고지).
|
||||
|
||||
## 레퍼런스
|
||||
|
||||
| 슬롯 | 출처 | 실측(2026-10-06, 브라우저 1440) | 가져온 것 |
|
||||
|---|---|---|---|
|
||||
| 구도 | 기준 화면의 모눈이 도면 밖 본문까지 이어져 본문과 도면의 역할이 섞였다. | 모눈을 `.blueprint` 표면에만 두고 본문은 단색 잉크 바탕에 둔다. `--surface`, `--surface-raised`, `--line`. | 본문 줄과 표의 값이 모눈과 경쟁하면 모눈을 더 약화한다. |
|
||||
| 타입 | 도면 라벨·치수는 설명이고 사양·시험표는 비교 대상이다. | 도면 라벨을 본문색으로, 치수는 `--font-mono`와 보조색으로 분리한다. | 320px/200%에서 라벨 또는 조건 열이 겹치면 도면·표의 폭을 별도 조정한다. |
|
||||
| 색 | 구리는 냉각 경로·리더선의 관계를 보이는 강조 역할이다. | `--accent`, `--accent-stroke`을 유로·리더선에만 사용한다. | 구리선이 값·조건을 가리거나 가상성 표기보다 더 강하면 선 굵기와 대비를 되돌린다. |
|
||||
| R1 구조(같은 시장) | 이노스페이스 한빛-나노 https://www.innospc.com/page/sub01_01_1 | 어두운 바탕, 사양을 묶음(OVERVIEW·탑재체·2단·1단)으로 나누고 "엔진추력 34 kN / 연소시간 270 sec / 비추력 325 sec"처럼 값에 단위를 붙인 행. 발사 궤도 도해를 전폭(약 2.3:1) 라벨 도면으로 실음. 본문 IBM Plex Sans KR 16px | 값+단위+조건을 한 행에, 도면은 전폭 라벨 도해로 |
|
||||
| R2 톤 | Rocket Lab Electron https://www.rocketlabcorp.com/launch/electron/ | h1 "Electron" 한 낱말 56px/300 자간 넓음, 전폭 사진 무대, 표 "Height 18 m / 59 ft …". 푸터는 5열 색인(Contact·Launch·Space Systems·About·Missions) + 소제목 굵게 | 제품명 한 낱말 표제, 다열 색인 푸터 |
|
||||
| R3 디테일 | developer.chrome.com scroll-driven-animations 문서 | 오른쪽 측면 차례 x=1253·폭 163px, 상단 73px 고정, 링크 16/24px, 현재 항목 `aria-current` + 강조색 | 오른쪽 고정 레일 + `aria-current` 현재 위치 |
|
||||
| 미검증 | rocketlabcorp·perigee.kr 텍스트 페처 403 → 브라우저로 열어 실측. ursamajor.com/engines/hadley 404 | — |
|
||||
|
||||
## 근거와 경계
|
||||
## 방향
|
||||
|
||||
[art-direction.md](../../../../../packages/skill/references/art-direction.md)의 Hofmann 관련 면적·정렬 관찰은 도면 표면과 읽기 표면 분리에만 적용했다. [typography.md](../../../../../packages/skill/references/typography.md)의 Ruder 관련 숫자와 조건 proof는 동일 행의 표 조판에만 적용했다. [visual-design-lineage.md](../../../../../packages/skill/references/visual-design-lineage.md)의 Albers 관련 맥락색 관찰은 구리선과 야간 바탕의 구분에만 적용했다. 원전은 보편 성능 주장으로 사용하지 않는다.
|
||||
지문: 표제+전폭 무대(도면 파노라마 4:1) · Orbit / Noto Sans KR · 어두운 청 #081018 · 강조 200° 시안 #45bcf7 · radius 2px · 흐름 [한 낱말 표제 + 사실 목록 → 도면 무대 → 사양표 → 시험 기록표 → 재생냉각(글 + 3:4 사진 유리 패널) → 연소 장면(16:9 유리 패널) → 자료 요청 → 다열 색인] · 오른쪽 고정 측면 색인(좁은 화면은 위쪽 차례 띠) · 다열 색인 푸터(4열) · 이미지 원본 비율, 유리 패널 안, 캡션은 패널 안 하단 · scroll-driven 도면 선 그리기(냉각 유로만), 나머지 정지
|
||||
|
||||
[trustworthy-showcases.md](../../../../../packages/skill/references/trustworthy-showcases.md)에 따라 가상 사양·시험 기록 표기와 값/조건의 가까운 연결을 유지한다.
|
||||
한 문장 컨셉: 발사체 통합 엔지니어가 ORBIT-75의 종단면과 사양을 한 화면에서 읽고, 값마다 붙은 측정 조건으로 자기 발사체에 맞는지 판단한다.
|
||||
|
||||
## 2026-09-12 현재 검증 기록
|
||||
프리셋: dark-instrument 지배. 재질 축만 svg-glass(유리 패널)로 보조.
|
||||
|
||||
- `verify-final` 18개 묶음은 16개가 즉시 통과했다. 전체 묶음의 invariant·visual 검사는 Gaon·Dure를 대상으로 하며, 나머지 2개는 수정 뒤 release 독립 재실행에서 ALL PASS·ALL MATCH였다.
|
||||
- root는 28개 모바일, 21개 데스크톱, 7개 하위 경로와 30개 앱 상태를 직접 검토해 수용했다. stress 112건은 hard failure 0이며, 가로 넘침 4건은 targeted fix 뒤 390px 재측정에서 0이다.
|
||||
- 이 기록은 렌더·계약 범위의 현재 결과다. 모든 폭·키보드 경로·인쇄 등 개별 기능을 완전 재실행했다는 뜻이 아니며, 참여자 과업 효과도 미측정이다.
|
||||
제시한 카드(위임):
|
||||
|
||||
| 카드 | 한 줄 | 첫 화면 | 포기하는 것 |
|
||||
|---|---|---|---|
|
||||
| A. 도면 한 장짜리 사양서 | 엔진 이름을 한 낱말로 크게, 사실 네 줄, 그 아래 눕힌 종단면 파노라마 | 표제 → 사실 4열 → 4:1 도면 무대 | 첫 화면 행동 버튼 없음 |
|
||||
| B. 시험장 일지 | 최근 시험 "SF-31, 62 s"가 표제. 무대는 시험 다섯 회의 지속 시간 띠 | 표제 → 시험 띠 → 시험표가 먼저 | 엔진 형상이 첫 화면 밖 |
|
||||
| C. 유로 180개 | "구리 유로 180개"가 표제. 무대는 냉각 벽 단면의 반복 유로 패턴 | 표제 → 유로 단면 파노라마 → 재생냉각 글 | 엔진 전체 개요가 늦게 나옴 |
|
||||
|
||||
고른 카드: **A** — 브리프가 "엔진 사양서"이고 R1(이노스페이스)이 기체 도해 바로 옆에 사양 묶음을, R2(Rocket Lab)가 제품명 한 낱말을 표제로 둔다. 방문자가 검색창에 치는 말도 엔진 이름이다. B는 시험 한 회에 기대고, C는 부품 하나로 좁다.
|
||||
|
||||
반사실: 첫 화면 고유 요소 = Orbit으로 조판한 "ORBIT-75 메탄 엔진", 추력·비추력·연소실 압력·최근 연소의 측정 조건이 붙은 사실 목록, 눕힌 엔진 종단면 도면(인젝터→노즐). 같은 업종 치환(다른 엔진 회사)에서는 수치와 도면이 바뀌어야 하고, 세무사무소로 바꾸면 도면 무대와 사실 목록 구조가 성립하지 않는다 → 3개, 통과.
|
||||
|
||||
수렴(B-2, form-architecture와 대조 — 같은 히어로 패밀리·측면 색인·scroll-driven 배정): 섹션 흐름 다름(표제+무대 → 표 → 표 → 사진 vs 표제+무대 → 도면+사양 → 사진 → 연구소) · 히어로 글 묶음 다름(한 낱말 + 사실 목록 vs 긴 문장 3줄 단독) · 내비 같음(측면 색인; 좌/우, 고정 방식 같음) · 푸터 다름(다열 색인 vs 워드마크) · 이미지 다름(원본 비율 컬러, 유리 패널 안 캡션 vs 흑백 극단 비율, 캡션 위/아래) · 모션 같음(scroll-driven 선 그리기) → 같음 2/6, 통과. B-1(히어로 5축): 구도 같음, 표제 서체 다름, eyebrow 둘 다 없음(같음), CTA 둘 다 없음(같음), 캡션 문법 다름 → 3 같음. 둘 다 "없음"이 같음으로 세는 규칙이라 걸리지만, 라벨·버튼 없음은 plan.md 배정값이다(표제 꼴 "라벨 없음", 패밀리가 첫 화면 버튼을 포기). 배정자 판단으로 수용.
|
||||
|
||||
표현 리스크: Orbit(모노 셀 한글)으로 표제 한 줄. 과업 적합 이유 — 계기·도면 문맥의 숫자·라틴을 한글과 같은 리듬으로 묶는다. 검증 — 1440 한 줄, 390 두 줄(마지막 줄 2어절), 글리프 충돌 없음(final-1440-fold, final-390-fold).
|
||||
|
||||
보존 자산: 상호 궤도 우주공학, ORBIT-75 수치 6개와 조건, SF-27~31 기록, 사진 2장(channel-macro 3:4, static-fire 16:9), 섹션 id `engine`·`spec`·`fires`·`contact`(E2E 앵커), 표의 `thead`/`tbody` 구조(E2E 가독 판정), 배경 #081018.
|
||||
|
||||
## 토큰과 예산
|
||||
|
||||
값: `styles/tokens.css`. 역할만 적는다.
|
||||
|
||||
- 서체: Orbit(표제·색인 번호·캡션 번호. Google Fonts 한글 슬라이스 있음, 웨이트 400 하나) / Noto Sans KR 400·500(본문·표·사실 값). 모노 없음 — 숫자는 `tabular-nums`.
|
||||
- 색: surface #081018(유지), ink/muted/faint 대비 16.2 / 8.7 / 6.2, accent #45bcf7(HSL 200°, 대비 8.9; similarity 도구는 OKLCH 250°로 보고), accent-stroke(유로 선, 6.2), ink-on-glass(유리·모눈 위 캡션 전용).
|
||||
- 스케일: 13 / 16 / 18 / clamp(22~28) / 표제 clamp(40~104)px. 행간 본문 1.7, 제목 1.3, 표제 1.1. measure 36em.
|
||||
- radius 2px. 간격 4·8·16·24·40·64·96·clamp(72~136).
|
||||
- 유리: fill rgb(14 24 35 / .58), blur 14px, 헤어라인 linear-gradient 100°(conic 금지, svg-glass §1), reduced-transparency에서 불투명.
|
||||
|
||||
예산(tokens §5 데모/포트폴리오) 실측(로컬, Chrome):
|
||||
- JS 0.9KB 인라인(색인 현재 위치만) · 히어로 전송 ≈ 700KB(이미지는 lazy, 첫 화면 0KB).
|
||||
- 폰트 344KB(Orbit 61 + Noto Sans KR 가변 슬라이스 283, 파일 21개) — **200KB 초과, 올렸다.** 본문 한글 범위가 슬라이스 20개를 건드린다. 배정 서체를 지키면서 줄일 수단(자체 서브셋 호스팅)은 공통 규칙 8(Google Fonts/jsdelivr 링크)에 막힌다.
|
||||
- LCP 448ms(1440, h1) / 324ms(390) · CLS 0.0007 / 0.0345(390, Orbit swap 전후 표제 높이) · INP 미측정(실기기 없음).
|
||||
|
||||
## 이펙트와 폴백
|
||||
|
||||
- 도면 선 그리기: `.bp-cool`·축 화살표에 `pathLength="1"` + `stroke-dasharray: 1`, `@supports (animation-timeline: scroll())` 안에서 `scroll(root block)` 0~60vh 구간에 dashoffset 0.55 → 0. 실측 1440: 스크롤 0 → 0.55, 250px → 0.30, 700px → 0. 390(세로 도면): 0.55 → 0.007(500px). 감소 모션·Firefox(미지원)·가드 밖: dashoffset 0 = 완성 상태.
|
||||
- 유리 패널: `backdrop-filter: blur(14px) saturate(1.25)` + 마스크 헤어라인. 뒤에 섹션의 시안 radial 글로우를 두어 흐림이 보인다. 굴절(`backdrop-filter: url()`)은 쓰지 않았다 — 모눈이 휘면 도면이 아니다. 본문 텍스트에는 `filter`를 걸지 않는다. `prefers-reduced-transparency`에서 불투명 + blur 4px.
|
||||
- 측면 색인 현재 위치: IntersectionObserver(rootMargin −35%/−55%)가 `aria-current`를 옮긴다. JS 없으면 01이 정적 current.
|
||||
- 좁은 화면(≤40rem): 가로 4:1 도면을 숨기고 세로 종단면(460×560)을 보인다(layout §2-b "무대 비율을 다시 정한다"). 라벨은 SVG 안 16px 단위 → 실제 약 12px.
|
||||
|
||||
## 하지 않기로 한 것
|
||||
|
||||
- 스크롤 리빌(IntersectionObserver fade-up) 전부 삭제 — 배정표에 없다.
|
||||
- 상단 고정 바·backdrop 헤더 — 측면 색인으로 대체. 좁은 화면 차례 띠는 접지 않는다: 접으면 안의 링크가 포커스를 못 받아 instrument E2E(40번 Tab 안 모든 앵커 도달)가 깨지고, 항목 6개가 두 줄에 들어간다.
|
||||
- 모노 서체(JetBrains Mono) — 하우스 룩, 한글 혼용 라벨 흩어짐.
|
||||
- 구리 강조(이전 #d08a5a) — 배정 200° 시안으로 교체. 도면의 열색 은유보다 배정 분포가 우선.
|
||||
- 가운뎃점 메타 문자열 전부 쉼표/문장으로.
|
||||
- 사진 재처리(듀오톤·흑백) — 배정이 "원본 비율"이고 유리 패널이 처리 역할을 한다.
|
||||
- 모바일 하단 행동 바 — 목표 행동이 없다.
|
||||
|
||||
## 검증
|
||||
|
||||
자동(2026-10-06, apps/site):
|
||||
- html-validate 오류 0 · stylelint 통과 · no-hanja PASS 3 files · showcase-audit PASS 6/FAIL 0(320·390·768·1440·1920·2560) · design-gate 충족 12 / 미검증 1 / 실패 0(꺼짐 3: static·visual·webkit) — 미검증 1 = 그라디언트·유리 위 대비 9요소 → 아래 수동 실측으로 닫음 · instrument-showcases-e2e(orbit 블록) desktop·mobile PASS, 앵커 24개 모두 존재·Tab 도달, 표 2개 가독 · similarity 경고 0.
|
||||
- 대비 실측(렌더 픽셀 중 가장 밝은 배경 대비, 1440/390): 색인 링크 7.8/8.7 · 사실 dt 5.9 · 사실 조건 8.2 · 도면 캡션 7.0/6.9 · 사진 캡션 8.6 · 도면 라벨 12.6 · 치수 6.8 · 표 조건 6.7 · 표 값 6.8 · 푸터 8.7 · 버튼 8.9. 세로 도면 "유로 (CH₄)"는 스크립트가 윗줄 글리프를 배경으로 잡아 1.07로 나왔으나 2x 캡처(v3-390-stage-2x)에서 선과 겹치지 않음을 눈으로 확인.
|
||||
- 키보드: skip → 워드마크 → 색인 6 → (390: 표 스크롤 영역 2) → 사양 다시 보기 → 푸터 링크 15. 포커스 링 2px 시안.
|
||||
- 표제 마지막 줄 어절: h1 1440 3 / 390 2, h2 전부 ≥3.
|
||||
|
||||
시각 루브릭(critique §2-1, 약한 축부터; 캡처 `outputs`가 아닌 세션 스크래치 `scratchpad/orbit/final-*`):
|
||||
|
||||
| 축 | 점수 | 근거 | 2점 반례 |
|
||||
|---|---|---|---|
|
||||
| R3 묶음·정렬 | 1 | 1440 시작선 x=52(표제·사실·섹션)·x=24(무대)·x=1332(레일) + 표 안 x=68. 넷째 선(표 패딩)을 의미로 설명하기 어렵다 | — |
|
||||
| R6 이미지 | 1 | 사진 2장 각 1회, 역할(유로 접사·연소 장면) 기록, 원본 비율. 그러나 390 첫 화면에 사진이 없고(컨셉은 "도면이 주연"이라 실패 신호는 아님) 두 사진의 조도(실내 금속 vs 야간 연소)가 한 세계로 읽히는지는 보는 이에 따라 갈린다 | — |
|
||||
| R1 첫인상 | 2 | 3초 문장 "궤도 우주공학의 ORBIT-75 메탄 엔진, 75.4 kN, 단면도와 측정 조건" — final-1440-fold·final-390-fold 모두 | 390에서 도면은 상단만 보인다 |
|
||||
| R2 위계 | 2 | 흐림 캡처(final-1440-blur) 시선 표제 → 도면 → 사실 4열. 의도와 같음. 표제/본문 차이 크기+서체+색 | 사실 값 4개가 같은 무게로 나란하다(의도된 목록) |
|
||||
| R4 타이포 | 2 | 합성 이탤릭 없음, 자간 −0.01em에서 글리프 충돌 없음, 마지막 줄 어절 ≥2, 모노 한글 없음, measure 36em | Orbit 한글의 넓은 모노 셀이 "메탄 엔진" 낱말 사이를 벌린다(word-spacing −0.3em으로 줄임) |
|
||||
| R5 리듬·긴장 | 2 | 묶음 안(사양표→시험표 0) < 묶음 사이(space-8); 극단 = 표제 104px vs 본문 16px(6.5배) | 사진 두 섹션 사이 간격은 다른 섹션과 같다 |
|
||||
| R7 카피 | 2 | h2 "값 여섯 개, 측정 조건을 같은 줄에 적었습니다", "지상 연소 다섯 회, 보류한 두 회도 기록에 남겼습니다" — 경쟁사 치환에서 깨짐. §13-c grep 0건, 은유 0, 합니다체 통일 | h1은 제품명이라 화법 비교 대상이 아니다 |
|
||||
| R8 구분성 | 2 | 고유 요소 3개(위), B-2 같음 2/6 | B-1에서 "없음=같음" 2축 포함 3 같음(배정값, 위에 기록) |
|
||||
| R9 마감 | 2 | 2x 크롭(spec·foot·rail·stage) 숫자 열 정렬, 캡션 여백, 패널 radius 2px 일치. 도면 화살표 방향 수정(위→아래, 좌→우) | — 찾지 못함 |
|
||||
| R10 모바일 | 2 | 390 첫 화면: 브랜드·차례·표제·사실·도면 시작. 세로 도면으로 재편집, 사실 목록 1열 | 차례 띠가 두 줄 |
|
||||
|
||||
합계 18/20, 0점 없음, R1·R8 2점 — 통과선 충족.
|
||||
|
||||
미검증: WebKit 렌더(꺼짐) · Firefox 실행(폴백 코드 경로만) · 실기기 INP · 스크린리더 · `prefers-reduced-transparency` 렌더.
|
||||
|
||||
## 피드백 기록 · 보존 목록
|
||||
|
||||
- 2026-10-06 재작업(분배표 배정, 방향 위임). 피드백 없음.
|
||||
- 보존: 수치·시험 기록·사진·상호·섹션 id 4개·표 구조.
|
||||
|
||||
## 변경 기록
|
||||
|
||||
- 2026-10-06 · 분배표 재작업 · 분할 히어로+상단 고정 바+고지 푸터를 표제+전폭 도면 무대·오른쪽 측면 색인·다열 색인 푸터로. Pretendard+JetBrains Mono+구리 → Orbit+Noto Sans KR+200° 시안. 스크롤 리빌 삭제, scroll-driven 유로 선 그리기·유리 패널 추가. 가운뎃점 메타 문자열 제거, 섹션 제목을 사실 문장으로.
|
||||
- 2026-10-02 · 카피 기준 수정 · h1 "메탄 75 kN, 62초를 태웠다" → "75 kN 메탄 엔진, 지상 연소 62초 완료", 잠언형 문장을 정보 문장으로, 합니다체 통일, 제목·OG를 "ORBIT-75 메탄 엔진 사양"으로.
|
||||
- 2026-10-02 · 레드팀 06 · 상투 은유 h1 제거, 면책 문구를 히어로에서 푸터·자료 요청으로 이동("예시" 10회 → 1회), 한글 라벨을 모노에서 본문 서체로.
|
||||
|
|
|
|||
|
|
@ -3,158 +3,196 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>궤도 우주공학 · 엔진 사양서 구성</title>
|
||||
<title>ORBIT-75 메탄 엔진 사양 — 궤도 우주공학</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="재생냉각 엔진의 단면도와 지상 연소 기록을 읽는 가상 사양서 구성입니다. 수치와 시험 기록은 예시입니다."
|
||||
content="가상 우주기업 궤도 우주공학의 75 kN급 다단연소 메탄 엔진 ORBIT-75 사양서. 단면도, 측정 조건을 같은 줄에 적은 사양표, 지상 연소 시험 다섯 회의 기록을 정리했습니다."
|
||||
/>
|
||||
<meta property="og:title" content="궤도 우주공학 · 엔진 사양서 구성" />
|
||||
<meta property="og:description" content="재생냉각 엔진의 단면도와 연소 기록을 읽는 가상 사양서 구성." />
|
||||
<meta property="og:title" content="ORBIT-75 메탄 엔진 사양 — 궤도 우주공학" />
|
||||
<meta property="og:description" content="75 kN급 재생냉각 메탄 엔진 ORBIT-75의 단면도, 사양, 지상 연소 시험 기록." />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="https://designpaca.chanpaca.net/work/orbit-aerospace/assets/static-fire.webp" />
|
||||
<meta property="og:image:alt" content="SF-31 지상 연소 연출 이미지: 붉게 빛나는 노즐과 배기 기둥" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="theme-color" content="#081018" />
|
||||
|
||||
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
|
||||
href="https://fonts.googleapis.com/css2?family=Orbit&family=Noto+Sans+KR:wght@400;500&display=swap"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap"
|
||||
/>
|
||||
<link rel="stylesheet" href="./styles/main.css?v=20260912all" />
|
||||
<link rel="stylesheet" href="./styles/main.css?v=20261006" />
|
||||
<link
|
||||
rel="icon"
|
||||
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23081018'/%3E%3Cpath d='M16 4l6 7v17h-12V11z' fill='none' stroke='%23C57A45' stroke-width='1.6'/%3E%3Cpath d='M13 11h6M12 18h8' stroke='%23C57A45'/%3E%3C/svg%3E"
|
||||
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23081018'/%3E%3Cpath d='M4 12h10c4 0 6 2 6 4s-2 4-6 4H4' fill='none' stroke='%23e6edf3' stroke-width='1.6'/%3E%3Cpath d='M20 16c3-1 6-1 8 0' stroke='%2345bcf7' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a class="skip" href="#main">본문으로 건너뛰기</a>
|
||||
|
||||
<header class="site-head">
|
||||
<div class="wrap head-inner">
|
||||
<a class="wordmark" href="#main">궤도 우주공학 <span class="wordmark-en">ORBIT</span></a>
|
||||
<nav class="nav" aria-label="섹션">
|
||||
<a href="#engine">엔진</a>
|
||||
<a href="#spec">사양</a>
|
||||
<a href="#fires">시험 기록</a>
|
||||
<a href="#contact">구성 안내</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<nav class="index" aria-label="차례">
|
||||
<a class="wordmark" href="#main">궤도 우주공학</a>
|
||||
<ol class="index-list">
|
||||
<li><a href="#engine" data-part="engine" aria-current="true"><span class="index-no">01</span>단면도</a></li>
|
||||
<li><a href="#spec" data-part="spec"><span class="index-no">02</span>사양</a></li>
|
||||
<li><a href="#fires" data-part="fires"><span class="index-no">03</span>시험 기록</a></li>
|
||||
<li><a href="#cooling" data-part="cooling"><span class="index-no">04</span>재생냉각</a></li>
|
||||
<li><a href="#plate" data-part="plate"><span class="index-no">05</span>연소 장면</a></li>
|
||||
<li><a href="#contact" data-part="contact"><span class="index-no">06</span>자료 요청</a></li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<main id="main">
|
||||
<section id="engine" class="hero" aria-labelledby="hero-h">
|
||||
<div class="wrap hero-grid">
|
||||
<div class="hero-text">
|
||||
<p class="hero-kicker reveal">가상 엔진 사양서 · 재생냉각 기록 형식</p>
|
||||
<h1 id="hero-h" class="reveal" style="--delay: 60ms">
|
||||
도면은 말하지 않는다.<br />측정만 한다
|
||||
</h1>
|
||||
<p class="lead reveal" style="--delay: 120ms">
|
||||
이 페이지의 수치와 시험 기록은 엔진 사양서를 읽는 방식을 보여 주는
|
||||
예시입니다. 실제 지상 시험 데이터, 발사체 제안, 또는 운용 성능을
|
||||
뜻하지 않습니다.
|
||||
</p>
|
||||
<a class="btn reveal" style="--delay: 180ms" href="#spec">사양 형식 보기</a>
|
||||
<dl class="run-register reveal" style="--delay: 220ms">
|
||||
<div>
|
||||
<dt>시험 구간 예시</dt>
|
||||
<dd>지상 연소 기록</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>표본</dt>
|
||||
<dd>기록 형식 예시</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>표기 기준</dt>
|
||||
<dd>값과 조건을 함께 제시</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<figure class="blueprint reveal" style="--delay: 100ms">
|
||||
<svg
|
||||
viewBox="0 0 460 560"
|
||||
role="img"
|
||||
aria-label="가상 엔진 단면도 예시: 상부 인젝터, 연소실, 중앙 스로트, 확장 노즐과 벽면의 재생냉각 유로"
|
||||
>
|
||||
<defs>
|
||||
<g id="half">
|
||||
<path
|
||||
class="bp-wall"
|
||||
d="M 230 70
|
||||
L 168 70
|
||||
L 168 210
|
||||
C 168 250 194 262 194 286
|
||||
C 194 310 118 350 112 470
|
||||
L 108 500"
|
||||
/>
|
||||
<path
|
||||
class="bp-wall inner"
|
||||
d="M 230 92
|
||||
L 184 92
|
||||
L 184 214
|
||||
C 184 246 206 258 206 284
|
||||
C 206 306 136 348 130 468
|
||||
L 127 494"
|
||||
/>
|
||||
<path
|
||||
class="bp-cool"
|
||||
d="M 176 100 L 176 212 C 176 248 198 262 198 286 C 198 308 126 350 121 468 L 118 492"
|
||||
/>
|
||||
<path
|
||||
class="bp-cool"
|
||||
d="M 170 100 L 170 210 C 170 244 192 260 192 288 C 192 312 120 352 114 470 L 111 496"
|
||||
/>
|
||||
<rect class="bp-block" x="168" y="46" width="50" height="18" />
|
||||
<path class="bp-wall thin" d="M 168 64 L 218 64" />
|
||||
</g>
|
||||
</defs>
|
||||
<use href="#half" />
|
||||
<use href="#half" transform="translate(460 0) scale(-1 1)" />
|
||||
<path class="bp-axis" d="M 230 30 V 540" />
|
||||
<g class="bp-flow">
|
||||
<path d="M 230 120 V 220" />
|
||||
<path d="M 230 220 l -5 10 M 230 220 l 5 10" />
|
||||
</g>
|
||||
<g class="bp-label">
|
||||
<path class="bp-lead" d="M 218 55 H 150" />
|
||||
<text x="144" y="59" text-anchor="end">인젝터</text>
|
||||
<path class="bp-lead" d="M 168 160 H 96" />
|
||||
<text x="90" y="164" text-anchor="end">연소실</text>
|
||||
<path class="bp-lead" d="M 200 275 H 78" />
|
||||
<text x="72" y="279" text-anchor="end">스로트</text>
|
||||
<path class="bp-lead" d="M 128 400 H 60" />
|
||||
<text x="54" y="404" text-anchor="end">노즐</text>
|
||||
<path class="bp-lead" d="M 186 180 H 120" />
|
||||
<text x="114" y="196" text-anchor="end"></text>
|
||||
<text x="242" y="150">재생냉각</text>
|
||||
<text x="242" y="166">유로 (CH₄)</text>
|
||||
</g>
|
||||
<g class="bp-dim">
|
||||
<path d="M 356 92 H 372 M 364 92 V 214" />
|
||||
<text x="380" y="157"></text>
|
||||
</g>
|
||||
<g class="bp-dim">
|
||||
<path d="M 60 500 H 96 M 78 500 V 520" />
|
||||
<text x="60" y="542">Ø 460 — 노즐 출구</text>
|
||||
</g>
|
||||
</svg>
|
||||
<figcaption>ORBIT-75 단면 · 재생냉각 벽면은 그림 2겹으로 단순화</figcaption>
|
||||
</figure>
|
||||
<div class="wrap hero-head">
|
||||
<h1 id="hero-h">ORBIT-75 메탄 엔진</h1>
|
||||
<dl class="facts">
|
||||
<div>
|
||||
<dt>추력</dt>
|
||||
<dd><span class="fact-value">75.4 kN</span><span class="fact-cond">해수면, 정상 상태 30초 평균</span></dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>비추력</dt>
|
||||
<dd><span class="fact-value">325.8 s</span><span class="fact-cond">진공, 고도 모사 노즐</span></dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>연소실 압력</dt>
|
||||
<dd><span class="fact-value">12.5 MPa</span><span class="fact-cond">피에조 계측, 샘플링 1 kHz</span></dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>최근 지상 연소</dt>
|
||||
<dd><span class="fact-value">62 s</span><span class="fact-cond">SF-31, 2026-07-18 완료</span></dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<figure class="stage glass">
|
||||
<svg
|
||||
class="bp bp-wide"
|
||||
viewBox="0 0 1600 400"
|
||||
role="img"
|
||||
aria-label="ORBIT-75 종단면도: 왼쪽 인젝터에서 오른쪽 노즐 출구까지 눕힌 단면. 연소실, 스로트, 확장 노즐과 벽 안의 재생냉각 유로"
|
||||
>
|
||||
<defs>
|
||||
<g id="half-w">
|
||||
<path
|
||||
class="bp-wall"
|
||||
d="M 200 100 L 620 100 C 700 100 740 152 780 152 C 900 152 1100 60 1460 30"
|
||||
/>
|
||||
<path
|
||||
class="bp-wall inner"
|
||||
d="M 200 114 L 616 114 C 696 114 736 164 780 164 C 896 164 1096 72 1452 42"
|
||||
/>
|
||||
<path
|
||||
class="bp-cool"
|
||||
pathLength="1"
|
||||
d="M 206 104 L 618 104 C 698 104 738 156 780 156 C 898 156 1098 64 1456 34"
|
||||
/>
|
||||
<path
|
||||
class="bp-cool"
|
||||
pathLength="1"
|
||||
d="M 206 109 L 617 109 C 697 109 737 160 780 160 C 897 160 1097 68 1454 38"
|
||||
/>
|
||||
<rect class="bp-block" x="124" y="112" width="76" height="88" />
|
||||
<path class="bp-wall thin" d="M 200 100 V 200" />
|
||||
</g>
|
||||
</defs>
|
||||
<use href="#half-w" />
|
||||
<use href="#half-w" transform="translate(0 400) scale(1 -1)" />
|
||||
<path class="bp-axis" d="M 60 200 H 1470" />
|
||||
<g class="bp-flow">
|
||||
<path pathLength="1" d="M 300 200 H 720" />
|
||||
<path d="M 720 200 l -12 -6 M 720 200 l -12 6" />
|
||||
</g>
|
||||
<g class="bp-label">
|
||||
<path class="bp-lead" d="M 162 86 V 108" />
|
||||
<text x="162" y="76" text-anchor="middle">인젝터</text>
|
||||
<path class="bp-lead" d="M 410 86 V 98" />
|
||||
<text x="410" y="76" text-anchor="middle">연소실</text>
|
||||
<path class="bp-lead" d="M 780 136 V 150" />
|
||||
<text x="780" y="126" text-anchor="middle">스로트</text>
|
||||
<path class="bp-lead" d="M 1180 326 V 348" />
|
||||
<text x="1180" y="370" text-anchor="middle">노즐</text>
|
||||
<path class="bp-lead" d="M 440 300 V 348" />
|
||||
<text x="440" y="370" text-anchor="middle">재생냉각 유로 (CH₄)</text>
|
||||
</g>
|
||||
<g class="bp-dim">
|
||||
<path d="M 1484 30 H 1516 M 1484 370 H 1516 M 1500 30 V 370" />
|
||||
<text x="1512" y="196">Ø 460</text>
|
||||
<text x="1512" y="216">노즐 출구</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
class="bp bp-tall"
|
||||
viewBox="0 0 460 560"
|
||||
role="img"
|
||||
aria-label="ORBIT-75 단면도: 상부 인젝터, 연소실, 중앙 스로트, 확장 노즐과 벽면의 재생냉각 유로"
|
||||
>
|
||||
<defs>
|
||||
<g id="half-t">
|
||||
<path
|
||||
class="bp-wall"
|
||||
d="M 230 70 L 168 70 L 168 210 C 168 250 194 262 194 286 C 194 310 118 350 112 470 L 108 500"
|
||||
/>
|
||||
<path
|
||||
class="bp-wall inner"
|
||||
d="M 230 92 L 184 92 L 184 214 C 184 246 206 258 206 284 C 206 306 136 348 130 468 L 127 494"
|
||||
/>
|
||||
<path
|
||||
class="bp-cool"
|
||||
pathLength="1"
|
||||
d="M 176 100 L 176 212 C 176 248 198 262 198 286 C 198 308 126 350 121 468 L 118 492"
|
||||
/>
|
||||
<path
|
||||
class="bp-cool"
|
||||
pathLength="1"
|
||||
d="M 170 100 L 170 210 C 170 244 192 260 192 288 C 192 312 120 352 114 470 L 111 496"
|
||||
/>
|
||||
<rect class="bp-block" x="168" y="46" width="50" height="18" />
|
||||
<path class="bp-wall thin" d="M 168 64 L 218 64" />
|
||||
</g>
|
||||
</defs>
|
||||
<use href="#half-t" />
|
||||
<use href="#half-t" transform="translate(460 0) scale(-1 1)" />
|
||||
<path class="bp-axis" d="M 230 30 V 540" />
|
||||
<g class="bp-flow">
|
||||
<path pathLength="1" d="M 230 120 V 220" />
|
||||
<path d="M 230 220 l -5 -10 M 230 220 l 5 -10" />
|
||||
</g>
|
||||
<g class="bp-label">
|
||||
<path class="bp-lead" d="M 218 55 H 150" />
|
||||
<text x="144" y="59" text-anchor="end">인젝터</text>
|
||||
<path class="bp-lead" d="M 168 160 H 96" />
|
||||
<text x="90" y="164" text-anchor="end">연소실</text>
|
||||
<path class="bp-lead" d="M 200 275 H 78" />
|
||||
<text x="72" y="279" text-anchor="end">스로트</text>
|
||||
<path class="bp-lead" d="M 128 400 H 60" />
|
||||
<text x="54" y="404" text-anchor="end">노즐</text>
|
||||
<path class="bp-lead" d="M 300 150 H 286" />
|
||||
<text x="306" y="155">재생냉각</text>
|
||||
<text x="306" y="173">유로 (CH₄)</text>
|
||||
</g>
|
||||
<g class="bp-dim">
|
||||
<path d="M 60 500 H 96 M 78 500 V 520" />
|
||||
<text x="60" y="542">Ø 460 노즐 출구</text>
|
||||
</g>
|
||||
</svg>
|
||||
<figcaption class="stage-cap">
|
||||
<span class="cap-no">도면 01</span>
|
||||
<span>ORBIT-75 종단면. 재생냉각 벽은 2겹으로 단순화했고, 시안 선이 메탄 유로입니다</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<section id="spec" class="section band" aria-labelledby="spec-h">
|
||||
<section id="spec" class="section" aria-labelledby="spec-h">
|
||||
<div class="wrap">
|
||||
<h2 id="spec-h" class="reveal">사양 예시</h2>
|
||||
<div class="table-wrap reveal" style="--delay: 80ms">
|
||||
<h2 id="spec-h">값 여섯 개, 측정 조건을 같은 줄에 적었습니다</h2>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption class="sr-only">ORBIT-75 엔진 사양 예시 — 항목, 값, 조건</caption>
|
||||
<caption class="sr-only">ORBIT-75 엔진 사양: 항목, 값, 측정 조건</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">항목</th>
|
||||
|
|
@ -163,42 +201,41 @@
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<tr id="spec-thrust">
|
||||
<th scope="row">추력 (해수면)</th>
|
||||
<td class="num">75.4 kN</td>
|
||||
<td>지상 시험 스탠드 · 정상 상태 30초 평균</td>
|
||||
<td>지상 시험 스탠드, 정상 상태 30초 평균</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<tr id="spec-isp">
|
||||
<th scope="row">비추력 Isp (진공)</th>
|
||||
<td class="num">325.8 s</td>
|
||||
<td>고도 모사 노즐 · 추진제 혼합비 3.4</td>
|
||||
<td>고도 모사 노즐, 추진제 혼합비 3.4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<tr id="spec-pc">
|
||||
<th scope="row">연소실 압력</th>
|
||||
<td class="num">12.5 MPa</td>
|
||||
<td>피에조 계측 · 샘플링 1kHz</td>
|
||||
<td>피에조 계측, 샘플링 1 kHz</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<tr id="spec-cycle">
|
||||
<th scope="row">사이클</th>
|
||||
<td class="num">다단연소</td>
|
||||
<td>연료리치 프리버너 1기</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<tr id="spec-cooling">
|
||||
<th scope="row">냉각</th>
|
||||
<td class="num">재생냉각</td>
|
||||
<td>구리합금 채널 180개 · CH₄ 유량 92%</td>
|
||||
<td>구리합금 채널 180개, CH₄ 유량 92%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">시동 신호→연소</th>
|
||||
<tr id="spec-start">
|
||||
<th scope="row">시동 신호에서 연소까지</th>
|
||||
<td class="num">2.8 s</td>
|
||||
<td>TEA-TEB 점화 · 12회 평균</td>
|
||||
<td>TEA-TEB 점화, 12회 평균</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p class="measure-note reveal" style="--delay: 140ms">
|
||||
표의 값과 조건은 사양서가 수치의 범위와 측정 상황을 함께 보여 주는
|
||||
방식을 설명하기 위한 예시입니다.
|
||||
<p class="measure-note">
|
||||
추력 값은 측정 조건이 같아야 비교할 수 있습니다. 해수면과 진공 여부, 평균 구간을 값과 같은 줄에 적었습니다.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -206,15 +243,14 @@
|
|||
<section id="fires" class="section" aria-labelledby="fires-h">
|
||||
<div class="wrap fires-grid">
|
||||
<div class="fires-text">
|
||||
<h2 id="fires-h">지상 연소 기록 형식</h2>
|
||||
<h2 id="fires-h">지상 연소 다섯 회, 보류한 두 회도 기록에 남겼습니다</h2>
|
||||
<p>
|
||||
도면만으로는 판단할 수 없는 항목을 결과와 함께 남기는 기록 형식입니다.
|
||||
보류·완료 표기는 실제 시험 이력이 아니라 기록 구조의 예시입니다.
|
||||
중단 원인을 다음 시험 조건에 반영하기 때문입니다. SF-28의 냉각유로 압력 강하를 보고 SF-29의 유량을 조정했습니다.
|
||||
</p>
|
||||
</div>
|
||||
<div class="table-wrap reveal">
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption class="sr-only">지상 연소 시험 기록 — 번호, 날짜, 지속, 결과</caption>
|
||||
<caption class="sr-only">지상 연소 시험 기록: 번호, 날짜, 지속 시간, 결과</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">시험</th>
|
||||
|
|
@ -224,88 +260,143 @@
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><th scope="row">SF-31</th><td>2026-07-18</td><td class="num">62 s</td><td>완료 · 노즐 온도 상한 내</td></tr>
|
||||
<tr><th scope="row">SF-30</th><td>2026-06-27</td><td class="num">31 s</td><td>보류 · 프리버너 시동 지연</td></tr>
|
||||
<tr><th scope="row">SF-29</th><td>2026-06-02</td><td class="num">60 s</td><td>완료 · 추력 편차 0.4%</td></tr>
|
||||
<tr><th scope="row">SF-28</th><td>2026-05-11</td><td class="num">12 s</td><td>보류 · 냉각유로 압력 강하</td></tr>
|
||||
<tr><th scope="row">SF-27</th><td>2026-04-20</td><td class="num">58 s</td><td>완료</td></tr>
|
||||
<tr id="sf-31"><th scope="row">SF-31</th><td class="date">2026-07-18</td><td class="num">62 s</td><td>완료, 노즐 온도 상한 내</td></tr>
|
||||
<tr id="sf-30"><th scope="row">SF-30</th><td class="date">2026-06-27</td><td class="num">31 s</td><td>보류, 프리버너 시동 지연</td></tr>
|
||||
<tr id="sf-29"><th scope="row">SF-29</th><td class="date">2026-06-02</td><td class="num">60 s</td><td>완료, 추력 편차 0.4%</td></tr>
|
||||
<tr id="sf-28"><th scope="row">SF-28</th><td class="date">2026-05-11</td><td class="num">12 s</td><td>보류, 냉각유로 압력 강하</td></tr>
|
||||
<tr id="sf-27"><th scope="row">SF-27</th><td class="date">2026-04-20</td><td class="num">58 s</td><td>완료</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section plate" aria-label="가상 지상 연소 기록 연출 이미지">
|
||||
<figure class="plate-fig reveal">
|
||||
<img
|
||||
src="./assets/static-fire.webp"
|
||||
alt="가상 지상 연소 기록을 위한 연출 이미지 — 붉게 빛나는 노즐과 배기 기둥"
|
||||
width="1440"
|
||||
height="810"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption class="wrap">지상 연소 연출 이미지 · 가상 시험 기록</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<section class="section cooling" aria-labelledby="cool-h">
|
||||
<section id="cooling" class="section cooling" aria-labelledby="cool-h">
|
||||
<div class="wrap two">
|
||||
<figure class="two-photo reveal">
|
||||
<div class="two-text">
|
||||
<h2 id="cool-h">연료가 구리 유로 180개를 지나며 벽을 식힙니다</h2>
|
||||
<p>
|
||||
재생냉각 방식에서는 벽의 열을 흡수한 메탄이 그대로 연소실로 들어갑니다. 냉각에 쓴 연료를 버리지 않기 때문에 냉각과 추력에 같은 유량을 나눠 씁니다.
|
||||
</p>
|
||||
<p class="muted">
|
||||
유로 폭이 조금만 달라져도 벽 온도와 압력 강하가 함께 바뀌므로 단면도에 유로를 따로 표기했습니다.
|
||||
</p>
|
||||
</div>
|
||||
<figure class="panel glass two-photo">
|
||||
<img
|
||||
src="./assets/channel-macro.webp"
|
||||
alt="재생냉각 유로를 설명하는 가상 구리합금 단면 연출 이미지"
|
||||
alt="재생냉각 유로가 드러난 구리합금 연소실 벽 단면 연출 이미지"
|
||||
width="900"
|
||||
height="1200"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption>연소실 유로 접사 · 밀링 후 청소 전</figcaption>
|
||||
<figcaption class="panel-cap">
|
||||
<span class="cap-no">사진 01</span>
|
||||
<span>연소실 유로 접사, 밀링 후 청소 전. 연출 이미지</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<div class="two-text">
|
||||
<h2 id="cool-h">재생냉각 원리를<br />읽는 예시</h2>
|
||||
<p>
|
||||
재생냉각은 추진제가 벽을 지나는 동안 열을 가져가도록 설계하는 방식을
|
||||
말합니다. 여기의 온도·유로 수·치수는 그 관계를 설명하는 예시이며 실제
|
||||
엔진의 운용 한계나 설계값이 아닙니다.
|
||||
</p>
|
||||
<p class="muted">
|
||||
작은 유로 치수도 열과 압력의 관계에 영향을 준다는 점을 도면에서 읽게
|
||||
하는 것이 이 예시의 목적입니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="section band contact" aria-labelledby="contact-h">
|
||||
<section id="plate" class="section plate" aria-labelledby="plate-h">
|
||||
<div class="wrap">
|
||||
<h2 id="plate-h">SF-31, 62초 지상 연소</h2>
|
||||
<figure class="panel glass plate-fig">
|
||||
<img
|
||||
src="./assets/static-fire.webp"
|
||||
alt="지상 연소 연출 이미지: 붉게 빛나는 노즐과 배기 기둥"
|
||||
width="1440"
|
||||
height="810"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption class="panel-cap">
|
||||
<span class="cap-no">사진 02</span>
|
||||
<span>2026-07-18 지상 시험 스탠드. 연출 이미지</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="section contact" aria-labelledby="contact-h">
|
||||
<div class="wrap contact-grid">
|
||||
<h2 id="contact-h">구성 안내</h2>
|
||||
<h2 id="contact-h">기술 자료 요청은 받지 않습니다</h2>
|
||||
<p>
|
||||
이 페이지는 엔진 사양·도면·시험 기록을 한 흐름으로 보여 주는 가상
|
||||
프로젝트입니다. 발사체 통합, 시험 데이터, 기술 자료 요청을 받지 않습니다.
|
||||
궤도 우주공학은 가상 브랜드 쇼케이스입니다. 엔진 수치, 시험 기록, 도면은 모두 예시이며 발사체 통합 문의와 시험 데이터 요청을 받지 않습니다.
|
||||
</p>
|
||||
<a class="btn" href="#spec">사양 형식 다시 보기</a>
|
||||
<a class="btn" href="#spec">사양 다시 보기</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-foot">
|
||||
<div class="wrap foot-inner">
|
||||
<p>궤도 우주공학 · 가상 엔진 사양서</p>
|
||||
<p class="mono foot-meta">SPECIFICATION FORMAT STUDY</p>
|
||||
<div class="wrap foot-grid">
|
||||
<section class="foot-col" aria-labelledby="foot-spec">
|
||||
<h2 id="foot-spec" class="foot-h">사양 항목</h2>
|
||||
<ul>
|
||||
<li><a href="#spec-thrust">추력 75.4 kN</a></li>
|
||||
<li><a href="#spec-isp">비추력 325.8 s</a></li>
|
||||
<li><a href="#spec-pc">연소실 압력 12.5 MPa</a></li>
|
||||
<li><a href="#spec-cycle">사이클 다단연소</a></li>
|
||||
<li><a href="#spec-cooling">냉각 유로 180개</a></li>
|
||||
<li><a href="#spec-start">시동 2.8 s</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="foot-col" aria-labelledby="foot-fires">
|
||||
<h2 id="foot-fires" class="foot-h">지상 연소 시험</h2>
|
||||
<ul>
|
||||
<li><a href="#sf-31">SF-31 완료 62 s</a></li>
|
||||
<li><a href="#sf-30">SF-30 보류 31 s</a></li>
|
||||
<li><a href="#sf-29">SF-29 완료 60 s</a></li>
|
||||
<li><a href="#sf-28">SF-28 보류 12 s</a></li>
|
||||
<li><a href="#sf-27">SF-27 완료 58 s</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="foot-col" aria-labelledby="foot-media">
|
||||
<h2 id="foot-media" class="foot-h">도면과 사진</h2>
|
||||
<ul>
|
||||
<li><a href="#engine">도면 01 종단면</a></li>
|
||||
<li><a href="#cooling">사진 01 유로 접사</a></li>
|
||||
<li><a href="#plate">사진 02 지상 연소</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="foot-col" aria-labelledby="foot-brand">
|
||||
<h2 id="foot-brand" class="foot-h">궤도 우주공학</h2>
|
||||
<ul>
|
||||
<li>가상 브랜드 쇼케이스</li>
|
||||
<li>수치와 기록은 모두 예시</li>
|
||||
<li>값 옆에 측정 조건을 적는 표기</li>
|
||||
<li><a href="#contact">자료 요청 안내</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const io = new IntersectionObserver(
|
||||
(entries) => {
|
||||
for (const e of entries) {
|
||||
if (!e.isIntersecting) continue;
|
||||
e.target.classList.add("is-in");
|
||||
io.unobserve(e.target);
|
||||
// 측면 색인의 현재 위치 표시. 등장 모션이 아니라 내비 상태다(layout §2-c "현재 위치 표시").
|
||||
(function () {
|
||||
var links = document.querySelectorAll(".index-list a[data-part]");
|
||||
if (!links.length || !("IntersectionObserver" in window)) return;
|
||||
var byId = {};
|
||||
links.forEach(function (a) { byId[a.getAttribute("data-part")] = a; });
|
||||
var setCurrent = function (id) {
|
||||
links.forEach(function (a) {
|
||||
if (a.getAttribute("data-part") === id) a.setAttribute("aria-current", "true");
|
||||
else a.removeAttribute("aria-current");
|
||||
});
|
||||
};
|
||||
var visible = {};
|
||||
var io = new IntersectionObserver(function (entries) {
|
||||
entries.forEach(function (e) { visible[e.target.id] = e.isIntersecting; });
|
||||
var order = Object.keys(byId);
|
||||
for (var i = 0; i < order.length; i += 1) {
|
||||
if (visible[order[i]]) { setCurrent(order[i]); return; }
|
||||
}
|
||||
},
|
||||
{ rootMargin: "0px 0px -8% 0px", threshold: 0.05 },
|
||||
);
|
||||
for (const el of document.querySelectorAll(".reveal")) io.observe(el);
|
||||
}, { rootMargin: "-35% 0px -55% 0px", threshold: 0 });
|
||||
Object.keys(byId).forEach(function (id) {
|
||||
var el = document.getElementById(id);
|
||||
if (el) io.observe(el);
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import url("./tokens.css?v=20260912all");
|
||||
@import url("./tokens.css?v=20261006");
|
||||
|
||||
/* ==========================================================================
|
||||
궤도 우주공학 — technical-schematic. 사양서 1페이지.
|
||||
궤도 우주공학 — ORBIT-75 사양서. 표제 + 전폭 도면 무대, 오른쪽 측면 색인, 다열 색인 푸터.
|
||||
========================================================================== */
|
||||
|
||||
*,
|
||||
|
|
@ -18,6 +18,7 @@ html {
|
|||
scroll-behavior: smooth;
|
||||
background: var(--surface);
|
||||
color-scheme: dark;
|
||||
font-synthesis-style: none;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html {
|
||||
|
|
@ -29,42 +30,52 @@ body {
|
|||
background: var(--surface);
|
||||
color: var(--ink);
|
||||
font-family: var(--font-body);
|
||||
font-weight: var(--weight-body);
|
||||
font-size: var(--step-0);
|
||||
line-height: var(--leading-normal);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
:where(h1, h2) {
|
||||
font-weight: 500;
|
||||
line-height: var(--leading-tight);
|
||||
letter-spacing: -0.015em;
|
||||
/* 한글 조판 정본(typography §6-5) */
|
||||
:lang(ko) {
|
||||
word-break: keep-all;
|
||||
overflow-wrap: break-word;
|
||||
text-wrap: balance;
|
||||
overflow-wrap: anywhere;
|
||||
line-break: strict;
|
||||
}
|
||||
h1 {
|
||||
font-size: var(--step-3);
|
||||
:lang(ko) :is(em, i, cite, dfn, var, address) {
|
||||
font-style: normal;
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--step-2);
|
||||
}
|
||||
:where(p, th, td, figcaption) {
|
||||
word-break: keep-all;
|
||||
overflow-wrap: break-word;
|
||||
line-height: var(--leading-normal);
|
||||
text-wrap: pretty;
|
||||
:lang(ko) a {
|
||||
text-underline-position: under;
|
||||
}
|
||||
|
||||
.lead {
|
||||
color: var(--ink-muted);
|
||||
max-width: 34em;
|
||||
h1 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
font-size: var(--step-display);
|
||||
line-height: var(--leading-tight);
|
||||
letter-spacing: -0.01em;
|
||||
word-spacing: -0.3em; /* Orbit은 띄어쓰기도 한 칸 전각이라 낱말 사이가 벌어진다. 실측 후 줄였다 */
|
||||
text-wrap: balance;
|
||||
}
|
||||
h2 {
|
||||
font-weight: var(--weight-strong);
|
||||
font-size: var(--step-2);
|
||||
line-height: var(--leading-heading);
|
||||
letter-spacing: -0.01em;
|
||||
max-width: 24em;
|
||||
text-wrap: balance;
|
||||
}
|
||||
:where(p, th, td, dd, dt, figcaption, li) {
|
||||
text-wrap: pretty;
|
||||
}
|
||||
p {
|
||||
max-width: var(--measure);
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
.mono {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
|
@ -99,146 +110,149 @@ a {
|
|||
margin-inline: auto;
|
||||
}
|
||||
|
||||
/* ── 헤더 ─────────────────────────────────────────────────────────────── */
|
||||
/* ── 측면 색인 — 좁은 화면에서는 위쪽 차례 띠, 넓은 화면에서는 오른쪽 고정 레일 ───── */
|
||||
|
||||
.site-head {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
background: color-mix(in srgb, var(--surface) 86%, transparent);
|
||||
backdrop-filter: blur(8px);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.head-inner {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
padding-block: var(--space-3);
|
||||
.index {
|
||||
padding: var(--space-3) var(--pad-inline) 0;
|
||||
}
|
||||
.wordmark {
|
||||
display: inline-block;
|
||||
font-weight: var(--weight-strong);
|
||||
font-size: var(--step-1);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.wordmark-en {
|
||||
color: var(--ink-faint);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--step--1);
|
||||
font-weight: 400;
|
||||
margin-left: var(--space-2);
|
||||
}
|
||||
.nav {
|
||||
.index-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin-top: var(--space-2);
|
||||
display: flex;
|
||||
gap: clamp(var(--space-3), 2vw, var(--space-5));
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-1) var(--space-3);
|
||||
font-size: var(--step--1);
|
||||
}
|
||||
.nav a {
|
||||
text-decoration: none;
|
||||
color: var(--ink-muted);
|
||||
padding-block: 2px;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: color var(--dur-quick) var(--ease-soft),
|
||||
border-color var(--dur-quick) var(--ease-soft);
|
||||
}
|
||||
.nav a:hover {
|
||||
color: var(--ink);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* ── 히어로 + 단면도 ──────────────────────────────────────────────────── */
|
||||
|
||||
.hero {
|
||||
padding-block: var(--space-8) var(--space-7);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
|
||||
gap: var(--space-6) var(--space-7);
|
||||
align-items: center;
|
||||
}
|
||||
.hero-kicker {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--step--1);
|
||||
color: var(--accent);
|
||||
letter-spacing: 0.08em;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.hero .lead {
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
.hero .btn {
|
||||
margin-top: var(--space-5);
|
||||
}
|
||||
.run-register {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-5);
|
||||
padding-top: var(--space-3);
|
||||
border-top: 1px solid var(--line-strong);
|
||||
}
|
||||
.run-register > div {
|
||||
min-width: 0;
|
||||
}
|
||||
.run-register dt,
|
||||
.run-register dd {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.6875rem;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.run-register dt {
|
||||
color: var(--accent);
|
||||
}
|
||||
.run-register dd {
|
||||
margin-top: 0.2rem;
|
||||
color: var(--ink-muted);
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.btn {
|
||||
.index-list a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
border: 1px solid var(--accent);
|
||||
color: var(--accent);
|
||||
gap: 0.4em;
|
||||
min-height: 32px;
|
||||
padding-block: 2px;
|
||||
color: var(--ink-muted);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
padding: 0.7rem 1.4rem;
|
||||
border-radius: var(--radius);
|
||||
transition: background var(--dur-quick) var(--ease-soft),
|
||||
color var(--dur-quick) var(--ease-soft);
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: color var(--dur-quick) var(--ease-soft), border-color var(--dur-quick) var(--ease-soft);
|
||||
}
|
||||
.btn:hover {
|
||||
background: var(--accent);
|
||||
color: var(--surface);
|
||||
.index-no {
|
||||
font-family: var(--font-display);
|
||||
font-size: 0.75rem;
|
||||
color: var(--ink-faint);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.index-list a:hover {
|
||||
color: var(--ink);
|
||||
}
|
||||
.index-list a[aria-current="true"] {
|
||||
color: var(--accent);
|
||||
border-bottom-color: var(--accent);
|
||||
}
|
||||
.index-list a[aria-current="true"] .index-no {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* 단면도 */
|
||||
.blueprint {
|
||||
background-color: var(--surface-raised);
|
||||
background-image:
|
||||
linear-gradient(color-mix(in srgb, var(--line) 78%, transparent) 1px, transparent 1px),
|
||||
linear-gradient(90deg, color-mix(in srgb, var(--line) 78%, transparent) 1px, transparent 1px);
|
||||
background-size: 2.5rem 2.5rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-4) var(--space-3) var(--space-3);
|
||||
/* ── 히어로: 표제 + 사실 목록 → 전폭 무대 ──────────────────────────────── */
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
padding-top: var(--space-7);
|
||||
}
|
||||
.blueprint svg {
|
||||
.hero-head {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
.facts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: var(--space-3) var(--space-4);
|
||||
}
|
||||
.facts > div {
|
||||
min-width: 0;
|
||||
padding-top: var(--space-2);
|
||||
border-top: 1px solid var(--line-strong);
|
||||
}
|
||||
.facts dt {
|
||||
font-size: var(--step--1);
|
||||
color: var(--ink-faint);
|
||||
}
|
||||
.facts dd {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 0 var(--space-2);
|
||||
}
|
||||
.fact-value {
|
||||
font-weight: var(--weight-strong);
|
||||
font-size: var(--step-2);
|
||||
line-height: 1.2;
|
||||
color: var(--ink);
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.fact-cond {
|
||||
font-size: var(--step--1);
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
/* 전폭 무대 — 유리판 위의 도면. 뒤에는 시안 글로우가 있어 흐림이 보인다 */
|
||||
.stage {
|
||||
position: relative;
|
||||
margin-top: var(--space-6);
|
||||
margin-inline: var(--space-3);
|
||||
padding: var(--space-4) var(--space-4) var(--space-3);
|
||||
/* 모눈은 도면 표면에만 */
|
||||
background-image:
|
||||
linear-gradient(color-mix(in srgb, var(--line) 85%, transparent) 1px, transparent 1px),
|
||||
linear-gradient(90deg, color-mix(in srgb, var(--line) 85%, transparent) 1px, transparent 1px);
|
||||
background-size: 2.5rem 2.5rem;
|
||||
background-position: center;
|
||||
}
|
||||
.hero::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background:
|
||||
radial-gradient(60% 50% at 70% 70%, var(--accent-glow), transparent 70%),
|
||||
radial-gradient(40% 40% at 20% 90%, rgb(24 155 220 / 0.12), transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.bp {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 78vh;
|
||||
}
|
||||
.blueprint figcaption {
|
||||
font-family: var(--font-mono);
|
||||
.bp-tall {
|
||||
display: none;
|
||||
max-width: 24rem;
|
||||
margin-inline: auto;
|
||||
}
|
||||
.stage-cap,
|
||||
.panel-cap {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
align-items: baseline;
|
||||
margin-top: var(--space-3);
|
||||
font-size: var(--step--1);
|
||||
color: var(--ink-on-glass); /* 유리·모눈 위 텍스트는 대비를 올린다(svg-glass §3 vibrancy). 실측 4.0 → 재측정 */
|
||||
}
|
||||
.cap-no {
|
||||
font-family: var(--font-display);
|
||||
font-size: 0.75rem;
|
||||
color: var(--ink-faint);
|
||||
margin-top: var(--space-2);
|
||||
text-align: center;
|
||||
color: var(--accent);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 도면 선 */
|
||||
.bp-wall {
|
||||
fill: none;
|
||||
stroke: var(--ink);
|
||||
|
|
@ -253,7 +267,9 @@ a {
|
|||
.bp-cool {
|
||||
fill: none;
|
||||
stroke: var(--accent-stroke);
|
||||
stroke-width: 1.25;
|
||||
stroke-width: 1.5;
|
||||
stroke-dasharray: 1;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
.bp-block {
|
||||
fill: none;
|
||||
|
|
@ -270,11 +286,18 @@ a {
|
|||
stroke: var(--accent);
|
||||
stroke-width: 1.2;
|
||||
}
|
||||
.bp-flow path[pathLength] {
|
||||
stroke-dasharray: 1;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
.bp-label text {
|
||||
font-family: var(--font-body);
|
||||
font-size: 13px;
|
||||
font-size: 18px;
|
||||
fill: var(--ink);
|
||||
}
|
||||
.bp-tall .bp-label text {
|
||||
font-size: 16px;
|
||||
}
|
||||
.bp-lead {
|
||||
stroke: var(--accent);
|
||||
stroke-width: 1;
|
||||
|
|
@ -285,25 +308,102 @@ a {
|
|||
stroke-width: 0.8;
|
||||
}
|
||||
.bp-dim text {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
font-family: var(--font-body);
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 16px;
|
||||
fill: var(--ink-muted);
|
||||
}
|
||||
.bp-tall .bp-dim text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 스크롤에 따라 유로가 그어진다 — 가드 안에 초기 상태를 둔다(motion §3 코드 B). 도면 한 곳만 */
|
||||
@supports (animation-timeline: scroll()) {
|
||||
.bp-cool,
|
||||
.bp-flow path[pathLength] {
|
||||
animation: bp-draw 1ms linear both;
|
||||
animation-timeline: scroll(root block);
|
||||
animation-range: 0 60vh;
|
||||
}
|
||||
@keyframes bp-draw {
|
||||
from {
|
||||
stroke-dashoffset: 0.55;
|
||||
}
|
||||
to {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.bp-cool,
|
||||
.bp-flow path[pathLength] {
|
||||
animation: none;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 유리 패널(svg-glass §1 헤어라인, §3 위계) ───────────────────────────── */
|
||||
|
||||
.glass {
|
||||
position: relative;
|
||||
background-color: var(--glass-fill);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--glass-shadow), inset 0 1px 0 rgb(255 255 255 / 0.05);
|
||||
backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
|
||||
}
|
||||
.glass::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
padding: 1px;
|
||||
border-radius: inherit;
|
||||
background: var(--glass-rim);
|
||||
-webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
|
||||
mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
pointer-events: none;
|
||||
}
|
||||
@media (prefers-reduced-transparency: reduce) {
|
||||
.glass {
|
||||
background-color: var(--surface-raised);
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
padding: var(--space-3);
|
||||
}
|
||||
.panel img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
/* ── 섹션 공통 ────────────────────────────────────────────────────────── */
|
||||
|
||||
.section {
|
||||
padding-block: var(--space-8);
|
||||
}
|
||||
.band {
|
||||
background: var(--surface-raised);
|
||||
border-block: 1px solid var(--line);
|
||||
.section + .section {
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.hero + .section {
|
||||
border-top: 0;
|
||||
}
|
||||
/* 사양표와 시험 기록은 같은 "기록" 묶음 — 사이를 좁히고 선을 긋지 않는다(묶음 안 < 묶음 사이) */
|
||||
#fires {
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
/* ── 표 ───────────────────────────────────────────────────────────────── */
|
||||
|
||||
.table-wrap {
|
||||
margin-top: var(--space-4);
|
||||
margin-top: var(--space-5);
|
||||
overflow-x: auto;
|
||||
}
|
||||
table {
|
||||
|
|
@ -312,14 +412,14 @@ table {
|
|||
}
|
||||
thead th {
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
font-weight: var(--weight-strong);
|
||||
font-size: var(--step--1);
|
||||
color: var(--ink-faint);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border-bottom: 1px solid var(--ink-faint);
|
||||
border-bottom: 1px solid var(--line-strong);
|
||||
}
|
||||
tbody th {
|
||||
font-weight: 500;
|
||||
font-weight: var(--weight-strong);
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -328,17 +428,34 @@ tbody th {
|
|||
padding: var(--space-3);
|
||||
border-bottom: 1px solid var(--line);
|
||||
vertical-align: baseline;
|
||||
/* 자동 폭 셀에서 anywhere는 열을 글자 단위로 쪼갠다(typography §6-5 예외) */
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
tbody td:not(.num, .date) {
|
||||
min-width: 12em;
|
||||
}
|
||||
.date {
|
||||
white-space: nowrap;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
tbody td:not(.num) {
|
||||
color: var(--ink-muted);
|
||||
font-size: var(--step--1);
|
||||
}
|
||||
.num {
|
||||
font-family: var(--font-mono);
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
tbody .num {
|
||||
color: var(--accent);
|
||||
}
|
||||
tr:target {
|
||||
background: color-mix(in srgb, var(--accent) 10%, transparent);
|
||||
}
|
||||
tr:target th {
|
||||
color: var(--accent);
|
||||
}
|
||||
.measure-note {
|
||||
margin-top: var(--space-3);
|
||||
font-size: var(--step--1);
|
||||
|
|
@ -362,45 +479,52 @@ tbody td:not(.num) {
|
|||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* ── 시험 사진 판 ─────────────────────────────────────────────────────── */
|
||||
|
||||
.plate-fig img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.plate-fig figcaption {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
color: var(--ink-faint);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
/* ── 재생냉각 2단 ─────────────────────────────────────────────────────── */
|
||||
/* ── 재생냉각 2단: 글 + 3:4 사진 유리 패널 ───────────────────────────────── */
|
||||
|
||||
.two {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
|
||||
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
|
||||
gap: var(--space-6) var(--space-7);
|
||||
align-items: center;
|
||||
}
|
||||
.two-photo img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
.two-photo figcaption {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
color: var(--ink-faint);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
.two-text p + p {
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
.two-text h2 + p {
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
.cooling {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
}
|
||||
.cooling::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background: radial-gradient(45% 60% at 80% 50%, var(--accent-glow), transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ── 문의 ─────────────────────────────────────────────────────────────── */
|
||||
/* ── 연소 장면: 16:9 유리 패널 ──────────────────────────────────────────── */
|
||||
|
||||
.plate {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
}
|
||||
.plate::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background: radial-gradient(50% 50% at 50% 70%, rgb(24 155 220 / 0.14), transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.plate-fig {
|
||||
margin-top: var(--space-5);
|
||||
}
|
||||
|
||||
/* ── 자료 요청 ───────────────────────────────────────────────────────── */
|
||||
|
||||
.contact-grid {
|
||||
display: grid;
|
||||
|
|
@ -412,76 +536,158 @@ tbody td:not(.num) {
|
|||
color: var(--ink-muted);
|
||||
max-width: 34em;
|
||||
}
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
border: 1px solid var(--accent);
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
font-weight: var(--weight-strong);
|
||||
padding: 0.7rem 1.4rem;
|
||||
border-radius: var(--radius);
|
||||
transition: background var(--dur-quick) var(--ease-soft), color var(--dur-quick) var(--ease-soft);
|
||||
}
|
||||
.btn:hover {
|
||||
background: var(--accent);
|
||||
color: var(--surface);
|
||||
}
|
||||
|
||||
/* ── 푸터 ─────────────────────────────────────────────────────────────── */
|
||||
/* ── 다열 색인 푸터 ───────────────────────────────────────────────────── */
|
||||
|
||||
.site-foot {
|
||||
border-top: 1px solid var(--line);
|
||||
padding-block: var(--space-4);
|
||||
border-top: 1px solid var(--line-strong);
|
||||
padding-block: var(--space-6) var(--space-7);
|
||||
font-size: var(--step--1);
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
.foot-inner {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3) var(--space-5);
|
||||
flex-wrap: wrap;
|
||||
.foot-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: var(--space-5) var(--space-4);
|
||||
}
|
||||
.foot-meta {
|
||||
font-size: 0.75rem;
|
||||
color: var(--ink-faint);
|
||||
.foot-h {
|
||||
font-size: var(--step--1);
|
||||
font-weight: var(--weight-strong);
|
||||
color: var(--ink);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
/* ── 등장 모션 ────────────────────────────────────────────────────────── */
|
||||
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
translate: 0 12px;
|
||||
transition: opacity var(--dur-normal) var(--ease-soft),
|
||||
translate var(--dur-normal) var(--ease-soft);
|
||||
transition-delay: var(--delay, 0ms);
|
||||
.foot-col ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
.reveal.is-in {
|
||||
opacity: 1;
|
||||
translate: 0 0;
|
||||
.foot-col li {
|
||||
padding-block: 0.15rem;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.reveal {
|
||||
opacity: 1;
|
||||
translate: 0 0;
|
||||
transition: none;
|
||||
}
|
||||
.foot-col li:not(:has(a)) {
|
||||
padding-block: 0.4rem; /* 링크 행(패딩 포함)과 같은 행 높이 */
|
||||
}
|
||||
.foot-col a {
|
||||
display: inline-block;
|
||||
padding-block: 0.25rem;
|
||||
color: var(--ink-muted);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: color var(--dur-quick) var(--ease-soft), border-color var(--dur-quick) var(--ease-soft);
|
||||
}
|
||||
.foot-col a:hover {
|
||||
color: var(--ink);
|
||||
border-bottom-color: var(--accent);
|
||||
}
|
||||
|
||||
/* ── 반응형 ───────────────────────────────────────────────────────────── */
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.hero-grid,
|
||||
@media (min-width: 72rem) {
|
||||
/* 레일: 오른쪽 고정. 긴 문서에서 현재 위치가 늘 보여야 하므로 고정한다(layout §2-c) */
|
||||
.index {
|
||||
position: fixed;
|
||||
top: var(--space-5);
|
||||
right: var(--space-4);
|
||||
bottom: var(--space-5);
|
||||
width: var(--rail-w);
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
text-align: right;
|
||||
z-index: 20;
|
||||
}
|
||||
.index-list {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 0;
|
||||
}
|
||||
.index-list a {
|
||||
flex-direction: row-reverse;
|
||||
border-bottom: 0;
|
||||
border-right: 2px solid transparent;
|
||||
padding-right: var(--space-2);
|
||||
min-height: 36px;
|
||||
}
|
||||
.index-list a[aria-current="true"] {
|
||||
border-right-color: var(--accent);
|
||||
}
|
||||
.wrap {
|
||||
width: min(100% - 2 * var(--pad-inline) - var(--rail-w), var(--container));
|
||||
margin-left: max(var(--pad-inline), calc((100% - var(--container) - var(--rail-w)) / 2));
|
||||
}
|
||||
.stage {
|
||||
margin-inline: var(--space-4) calc(var(--rail-w) + var(--space-5));
|
||||
}
|
||||
.hero {
|
||||
padding-top: var(--space-8);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 56rem) {
|
||||
.facts {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
.fires-grid,
|
||||
.two,
|
||||
.contact-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
.hero,
|
||||
.two-photo {
|
||||
max-width: 26rem;
|
||||
}
|
||||
.section {
|
||||
padding-block: var(--space-6);
|
||||
}
|
||||
.foot-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.run-register {
|
||||
@media (max-width: 40rem) {
|
||||
.hero {
|
||||
padding-top: var(--space-5);
|
||||
}
|
||||
.bp-wide {
|
||||
display: none;
|
||||
}
|
||||
.bp-tall {
|
||||
display: block;
|
||||
}
|
||||
.stage {
|
||||
margin-inline: 0;
|
||||
margin-top: var(--space-5);
|
||||
padding: var(--space-3);
|
||||
}
|
||||
.facts {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.head-inner {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
.nav {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.fact-value {
|
||||
font-size: var(--step-1);
|
||||
}
|
||||
.index-list a {
|
||||
min-height: 36px;
|
||||
}
|
||||
.foot-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,39 +1,64 @@
|
|||
/* ==========================================================================
|
||||
궤도 우주공학 — 디자인 토큰
|
||||
프리셋: technical-schematic
|
||||
컨셉 한 문장: 사양서 1페이지 — 도면은 말하지 않고 측정만 한다.
|
||||
레퍼런스: 방향 앵커 dogfood-aerospace(우주업종 기술 노출). 그 파일의 6축
|
||||
수치는 audit-references.md 에서 날조 판명 — 토큰은 브리프에서
|
||||
재정의. 실측 가능했던 사실만 계승: rocketlabcorp의 '엔진을 상품으로
|
||||
쓰는' 구성. 색은 야간 시험장(짙은 남흑 + 구리 노즐 열색)에서 왔다.
|
||||
하지 않은 것: 지표 배너(고객수·성공률), 로켓 3D 렌더, 발사 카운트다운,
|
||||
대문자 타이틀. 이유: 사양서의 신뢰는 측정 조건에서 나온다.
|
||||
궤도 우주공학 — 디자인 토큰 (2026-10-06 재작업)
|
||||
컨셉 한 문장: 발사체 통합 엔지니어가 ORBIT-75의 단면도와 사양을 한 화면에서
|
||||
읽고, 값마다 붙은 측정 조건으로 자기 발사체에 맞는지 판단한다.
|
||||
배정(plan.md): 표제 + 전폭 무대(도면 파노라마) · 측면 색인 · 다열 색인 푸터 ·
|
||||
Orbit / Noto Sans KR · 어두운 청 #081018 · 200° 시안 · radius 2px ·
|
||||
scroll-driven 도면 선 그리기 · svg-glass 패널
|
||||
레퍼런스: R1 이노스페이스 한빛-나노(어두운 바탕, 단위 붙은 사양 행, 전폭 궤도 도해),
|
||||
R2 Rocket Lab Electron(제품명 한 낱말 표제 + 전폭 무대, 다열 푸터),
|
||||
R3 developer.chrome.com 문서(오른쪽 측면 색인, aria-current)
|
||||
하지 않은 것: 모노 서체(JetBrains Mono — 하우스 룩), 구리 강조(59° — 다른 쇼케이스와
|
||||
30° 구간 충돌), 스크롤 리빌, 고정 상단 바, 지표 배너·3D 렌더·카운트다운.
|
||||
========================================================================== */
|
||||
|
||||
:root {
|
||||
/* 타입 — 최대(54px) ÷ 본문(16px) ≈ 3.4배 */
|
||||
/* 타입 — 표제(Orbit) 최대 ≈ 104px ÷ 본문 16px ≈ 6.5배. 극단은 표제 한 축에만 둔다 */
|
||||
--step--1: 0.8125rem;
|
||||
--step-0: 1rem;
|
||||
--step-1: 1.1875rem;
|
||||
--step-1: 1.125rem;
|
||||
--step-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
|
||||
--step-3: clamp(2rem, 1.4rem + 3vw, 3.375rem);
|
||||
--step-display: clamp(2.5rem, 1rem + 6vw, 6.5rem);
|
||||
|
||||
--leading-tight: 1.28;
|
||||
--leading-normal: 1.78;
|
||||
--leading-tight: 1.1;
|
||||
--leading-heading: 1.3;
|
||||
--leading-normal: 1.7;
|
||||
|
||||
--font-body: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
|
||||
--font-mono: "JetBrains Mono", monospace;
|
||||
/* Orbit은 Google Fonts 한글 슬라이스를 가진다(2026-10-06 css2 응답에서 U+AC00~D7A3 범위 확인).
|
||||
한글·라틴·숫자 모두 Orbit으로 조판하고, 웨이트는 400 하나뿐이다 */
|
||||
--font-display: "Orbit", "Noto Sans KR", sans-serif;
|
||||
--font-body: "Noto Sans KR", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
|
||||
|
||||
/* 색 — 야간 시험장: 남흑 배경, 구리 강조(텍스트·선), 청사진 흰선 */
|
||||
--weight-body: 400;
|
||||
--weight-strong: 500;
|
||||
|
||||
--measure: 36em;
|
||||
|
||||
/* 색 — 야간 시험장의 남흑 바탕(유지), 강조는 200° 시안(계기 눈금·냉각 유로).
|
||||
대비는 #081018 위 실측: ink 16.2 · muted 8.7 · faint 6.2 · accent 8.9 · accent-stroke 6.2 */
|
||||
--surface: #081018;
|
||||
--surface-raised: #0d1520;
|
||||
--ink: #e7ecf1;
|
||||
--ink-muted: #97a3af;
|
||||
--ink-faint: #7d8b99;
|
||||
--line: #1f2937;
|
||||
--line-strong: #33415280;
|
||||
--accent: #d08a5a; /* 구리 — 열색. 텍스트용 밝기 */
|
||||
--accent-stroke: #a45f33; /* 도면 선용 */
|
||||
--surface-raised: #0e1823;
|
||||
--ink: #e6edf3;
|
||||
--ink-muted: #a3b1be;
|
||||
--ink-faint: #8494a3;
|
||||
--ink-on-glass: #c3ced8; /* 유리 패널·모눈 위 캡션. 모눈 선 위에서도 4.5:1 이상 */
|
||||
--line: #1c2a38;
|
||||
--line-strong: #2b3b4c;
|
||||
--accent: #45bcf7;
|
||||
--accent-stroke: #189bdc;
|
||||
--accent-glow: rgb(24 155 220 / 0.22);
|
||||
|
||||
/* 유리 패널(svg-glass §1·§3) */
|
||||
--glass-fill: rgb(14 24 35 / 0.58);
|
||||
--glass-rim: linear-gradient(
|
||||
100deg,
|
||||
rgb(255 255 255 / 0.28) 0%,
|
||||
rgb(255 255 255 / 0.08) 26%,
|
||||
rgb(255 255 255 / 0.05) 58%,
|
||||
rgb(255 255 255 / 0.22) 100%
|
||||
);
|
||||
--glass-blur: 14px;
|
||||
--glass-shadow: 0 24px 48px -32px rgb(0 0 0 / 0.9);
|
||||
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
|
|
@ -48,6 +73,7 @@
|
|||
|
||||
--container: 1240px;
|
||||
--pad-inline: clamp(1.25rem, 1rem + 2.5vw, 5rem);
|
||||
--rail-w: 11rem;
|
||||
|
||||
--dur-quick: 160ms;
|
||||
--dur-normal: 420ms;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue