조리개 토폴로지 스토리 (Aperture Topology Story)
조용한 엔지니어링 문서처럼 행동하면서도 한 번의 영화 같은 움직임을 가진 제품 페이지입니다: 사용자가 네트워크의 한 노드 안으로 스크롤하면 어두운 페이지가 카메라 조리개처럼 열리며 밝은 종이 작업 공간으로 전환되고, 그곳에서 제품의 실제 워크플로우가 카드로 연출됩니다. 이는 가치를 파이프라인으로 보여줄 수 있는(입력 → 소스/피어 → 결과 → 출력) 도구에 적합합니다: 추론 메시, OSINT 및 연구 도구, 데이터 파이프라인, CI, 동기화 엔진, 패키지 레지스트리. 라이프스타일이나 패션 브랜드에는 적합하지 않습니다.
참조 빌드는 example/index.html입니다: OSINT-Book(Android 및 Windows용 패시브, 소스 우선 OSINT 노트북)의 실제 웹사이트, EN/TR 언어, 앱 자체 색상 사용. 상세 코드는 references/components.md에 있으며; screenshots/는 모든 섹션, 모든 스토리 단계, 터키어, 축소 모션 및 모바일을 보여줍니다.
사용자가 참조 사이트를 언급하면 그 스타일만 가져오십시오. 렌더링, 제품명, 카피, 로고 또는 데이터를 절대 복사하지 마십시오.
1. 디자인 전 준비
- 먼저 제품의 소스를 읽으십시오: README, 사용자 가이드, 개인정보/위협 모델, API 또는 소스 레지스트리, 릴리스 노트, CHANGELOG. 페이지의 모든 주장은 그 중 하나에 매핑됩니다. 숫자(버전, 파일 이름, 크기, SHA-256, 포트)를 정확히 복사하십시오. 두 소스가 불일치하는 경우(예: "22개 모듈" vs 20행 테이블), 테이블이 증명하는 바를 보여주십시오.
- 제품 자체에서 색상을 가져오십시오: 실행기 아이콘, Android
colors.xml/ ComposelightColorScheme및darkColorScheme, 웹 CSS 사용자 정의 속성. 앱의 어두운 스킴을 어두운 배경에 매핑하고 밝은 스킴을 조리개 작업 공간에 매핑하십시오 — 그러면 페이지가 말 그대로 앱의 한 테마에서 다른 테마로 전환됩니다. - 스토리 찾기: 제품의 워크플로우를 네 개의 동사로 작성하십시오(OSINT-Book: 대상 → 발견 → 분석 → 보고서; 추론 메시: 모델 → 슬라이스 → 배치 → 서빙). 단계당 하나의 동사. 각 단계에는 6단어 이하의 제목이 필요합니다.
- 스토리의 샘플 데이터는 명백히 샘플이어야 합니다:
example.org, 문서화 IP(192.0.2.x,203.0.113.x), 모든 카드에 "sample data" 칩. 통계, 사용자 수, 벤치마크 또는 사용후기를 절대 만들어내지 마십시오. - 아키텍처 섹션에는 실제 앱 스크린샷(WebP, ~800px 너비)을 사용하십시오.
2. 시각적 DNA
| 요소 | 규칙 |
|---|---|
| 어두운 배경 | 거의 검은색, 브랜드 색으로 약간 착색: --bg-2 (페이지) / --bg / --surface / --surface-2 / --surface-3. 전체 본문에 1px 선의 36px 그리드, 밝은 잉크의 약 7%. 히어로와 스테이지 뒤에 방사형 광원 풀(브랜드 색 ~13%, 두 번째 신호 ~6%). |
| 밝은 작업 공간 | 앱의 밝은 배경(--paper)에 34px 그리드(~5.5% 잉크)와 중앙에 브랜드 컨테이너 색의 부드러운 방사형 워시. 조리개 내부에만 적용. |
| 잉크 | 어두움: --fg / --fg-2 / --muted (muted ≥ 4.5:1 on ground). 밝음: --ink / --ink-2 / --ink-muted. |
| 브랜드 | 대상 노드, 조리개 원점, "sample data" 칩, Attention 상태, 활성 레일 항목, 호버 테두리의 제품 색상. 어두움에서는 더 밝은 톤(--brand-2), 종이에서는 더 진한 톤(--brand-ink) 사용. |
| 신호 | 두 가지 추가 색상, 각각 하나의 의미: 청록 = 무료 / 정상 / 결과 반환; 금색 = 키 필요 / 선택 사항 / 누락. 발신 패킷은 브랜드 색, 수신 패킷은 청록. 심각도는 항상 색상 + 아이콘 + 단어로 표시. |
| 디스플레이 | Rajdhani 700, 줄 높이 .84–.98, 자간 0, 문장 첫 글자 대문자. 히어로 2.6–5.2rem, 4중 광원: 0 0 2px #fff·86%, 0 0 18px brand-2·36%, 0 0 48px teal·14%, 0 18px 52px #000·60%. 종이 위에서는 동일한 서체에 0 1px #fff, 0 14px 34px ink·12%. |
| 본문 / UI | Geist 400–700, 14–17px. |
| 레이블 | Geist Mono 10–13px: 노드 레이블, 서브레이블, 칩, 테이블 할당량, 터미널, 레일, 눈썹(01 / ai analysis, 대문자 + .14em, 여기만). |
| 카드 | 어두운 패널: 16px 모서리 반경, 1px --line-2, 세로 그라데이션 표면. 종이 카드: 흰색, 14px 모서리 반경, 1px 따뜻한 선, 0 14px 34px -14px 그림자. 칩은 알약 형태(20px 높이). 결과 행은 왼쪽에 6×18px 그라데이션 핸들. |
| 버튼 | 기본 = 거의 흰색 채움에 어두운 잉크(8px 모서리 반경, 40px). 고스트 = 1px 선, 호버 시 brand-2로 변경. 내비게이션의 알약 버튼은 단색 접미사(· web-v0.2.2)를 가짐. |
| 아이콘 | 24-그리드 단일 획 1.7px 선 아이콘, 인라인 <symbol> 스프라이트; 동일한 스프라이트가 SVG 그래프 내부에서 <use>됨. |
3. 섹션 패턴
- 고정 내비게이션 (64px, 반투명 어두움 + 16px 블러, 아래쪽 가는 선) – 아이콘 + 두 톤 워드마크, 작은 링크, 버전이 있는 GitHub 알약, EN/TR 토글, 기본 버튼.
- 히어로 – 전체 너비 SVG 토폴로지(viewBox 1200×520; 중앙에 대상 노드(후광 + 링 포함); 곡선 점선 가장자리에 5–7개의 소스 노드, 각각 단색 레이블과 액세스를 나타내는 단색 서브레이블(
key-free,your key)). 디스플레이 헤드라인은 그래프의 왼쪽 아래에 위치. 그 아래: 한 문장 리드와 세 열 행 – "실행하기" (복사 기능이 있는 명령 칩 + 기본/고스트 다운로드 버튼 + "…팔로우" 링크), "이것이 무엇인가" (굵은 첫 문장 + 색상 점이 있는 사실 행), 그리고 작은 브랜드 배지. 제품에 토폴로지가 표시하지 않는 헤드라인 기능이 있는 경우(OSINT-Book: 선택적 AI 분석), 리드에서 언급하고 그 아래에 하나의 알약을 추가: 채워진 브랜드 태그(AI analysis) + 한 줄 + 화살표, 해당 섹션으로 연결되며, 해당 섹션은 스토리 다음에 먼저 옵니다. - 조리개 스토리 (고정, ~640vh) – §4 참조.
- 통합 스트립 – 왼쪽 단색 대문자 레이블, 오른쪽 점으로 구분된 이름들의 줄 바꿈 목록, 위아래 가는 선.
- 아키텍처 전환기 – 섹션 헤드(큰 디스플레이 제목 왼쪽, 단락 오른쪽), 그 다음 하나의 어두운 패널: 탭 목록(채워진 알약 = 선택됨), 텍스트 열(제목, 한 단락, ✓ 목록) 및 HTML 노드와 애니메이션 점선 커넥터가 있는 SVG(브랜드 = 나가는 것, 청록 = 돌아오는 것, 금색 = 선택 사항) 위의 다이어그램, 그 다음 실제 스크린샷의 가로 스트립(단색 캡션 포함), 그 다음 범례 푸터.
- 모듈 블록 – 상단 가장자리에 두 개의 작은 "퍼즐 탭"이 있는 블록: 입력 행 → 측면 / 중앙 / 측면 행(중앙 블록 더 크고, 브랜드 색조, 디스플레이 서체) → 6개 출력 행; 그 아래 하나의 단색 노트.
- 카탈로그 테이블 – 검색 필드 + 단색 레이블 선택 상자, 이름 + 단색 ID, 유형 알약, 색상 점이 있는 액세스 열, 단색 할당량 열, 노트가 있는 테이블; 푸터 "x–y / n 표시 · source file" 및 페이지네이터. 그 아래
<details>"의도적으로 제외됨" 목록. - 범위 분할 – 두 개의 어두운 패널, "하는 일" (청록 사각형) / "절대 하지 않는 일" (빨간 사각형), 각 항목은 굵은 리드인 + 한 문장, 왼쪽 가는 선.
- 설치 – 두 개의 다운로드 카드(아이콘 타일, 이름, 단색 파일 이름 · 크기), 그 다음 터미널 창(신호등, 단색 탭, 명령만 복사하는
COPY, 색상 구분된 프롬프트 / 명령 / 플래그 / 주석 / 출력)과 상태 푸터(빛나는 실시간 점), 그 다음 정직한 금색 "초기 릴리스" 노트. - 푸터 – 소개 텍스트 + 언어 알약, 두 개의 링크 카드 목록(화살표가 있는 행; ↗ 외부, → 문서), 하단 행에 워드마크, 버전 칩 및 귀속 줄.
4. 시그니처 상호작용: 조리개 스토리
하나의 section.story (높이 ≈ 640vh)는 position:sticky; top:0; height:100svh 스테이지를 두 개의 레이어로 보유합니다:
- 어두운 레이어 – 동일한 토폴로지 그래프, 단색 힌트(
scroll · follow one target), 그리고 마무리 문구. - 밝은 레이어 –
clip-path: circle(R at X Y)여기서 X/Y는 대상 노드의 화면 위치입니다(getBoundingClientRect로 측정). 내부: 4개의 쌓인 제목(하나만.on), 논리적 보드(넓은 화면 1120×560, 좁은 화면 360×640)가 화면에 맞게 스케일링, 그리고 단색 단계 레일.
단일 진행 값 p = -rect.top / (story.offsetHeight - innerHeight)이 모든 것을 구동합니다; 모든 요소에는 ease-in-out-cubic으로 보간되어 translate() scale() + opacity로 적용되는 키프레임 [p, {x, y, s, o}]이 있습니다. 뒤로 스크롤하면 정확히 되감깁니다.
| p | 단계 | 움직임 |
|---|---|---|
| .015 → .10 | 조리개 열림 | R이 0에서 가장 먼 모서리까지 커짐; 힌트 사라짐. 그 다음 clip-path:none. |
| .00 → .33 | 1 · 입력 | 입력 카드 위로 올라옴; 체크리스트 행이 하나씩 체크됨(p > .13 + i·.026); 키로 잠긴 행은 체크되지 않은 상태 유지. |
| .31 → .56 | 2 · 결과 | 입력 카드 사라짐; "노트북" 카드가 그 자리를 차지; 주변에 6개의 소스 카드 나타남; 소스당 하나의 칩이 카드에서 노트북의 슬롯으로 날아감(st = .37 + i·.024, st + .04에 도착). 간격 칩은 점선. |
| .56 → .79 | 3 · 해석 | 소스 카드가 점으로 축소됨; 노트북이 왼쪽으로 슬라이드(칩은 변형을 따라감); 세 개의 관찰 카드가 오른쪽에서 슬라이드 들어옴; 점선 커넥터가 인용된 칩에서 각 카드로 그려짐; "no verdict" 알약 나타남. |
| .79 → .92 | 4 · 출력 | 모든 것이 하나의 보고서 카드로 접힘; 그 아래 커밋 카드가 올라오고 여섯 개의 경로 점이 켜짐. |
| .915 → .975 | 조리개 닫힘 | R이 다시 노드 안으로 0으로 축소됨; 어두운 레이어에 빛나는 마무리 문구가 서서히 나타남. |
- 스크롤 중에는
transform,opacity,clip-path및 SVG 속성만 변경됨(하나의 rAF 제한 핸들러). - 그래프 패킷은 그래프가 화면에 보이는 동안에만 rAF 루프에서 실행되며, 축소 모션 또는 숨겨진 탭에서는 절대 실행되지 않음.
- 좁은 화면 (< 760px): 두 번째 보드 레이아웃(소스는 상단에 3×2 알약 그리드, 단계 3에서 노트북은 .6으로 스케일, 관찰은 쌓임, 커넥터는 숨김). 동일한 타임라인.
- 축소 모션 (또는 검토용
?motion=reduce): 핀 없음, 조리개 없음; 스토리는 4개의 정적 종이 프레임(p = .30, .55, .78, 1에서 보드)과 해당 제목으로 렌더링됨. - 보드는
aria-hidden;sr-only순서 목록이 동일한 네 단계를 알려줌.
5. 빌드 규칙
- 하나의 독립
index.html: doctype, charset, viewport,color-scheme: dark, theme-color; 인라인 CSS 및 JS; Google Fonts(Rajdhani, Geist, Geist Mono)만; 이미지는 페이지 옆에 WebP로; 아이콘은 인라인 SVG 스프라이트로. - 토큰은
:root에; 페이지의 모든 색상은 이 토큰에서 비롯됨(§2). 역할에 따라 이름을 지정하고 제품의 16진수 값을 유지. - i18n: 영어는 HTML에 있음(
data-i18n키는 한 번 영어 소스로 읽힘); 다른 언어는 JS 사전에; JS로 빌드된 문자열은T({en, tr})사용. 선택 사항을localStorage에 try/catch 내부에 유지. 눈썹도 번역(대문자 + 터키어 로케일은 "install"을 "İNSTALL"로 변경). - 접근성: 두 배경에서 AA 대비, 가시적 포커스 링(brand-2), 스킵 링크,
role=tab탭,aria-selected, 로빙 tabindex 및 화살표 키, 실제<table>및<details>, 레이블이 있는 복사 버튼. - 반응형: ≥1060px 전체 레이아웃; <1060px 히어로 측면 배지 숨김, AI 그리드 쌓임, 에디션 쌓임; <760px 한 열, 그래프 viewBox 자름(
150 40 900 480), 더 큰 레이블과 서브레이블 없음, 좁은 스토리 보드, 서브라인 없는 다이어그램 노드. 360px에서 가로 스크롤 없음;grid자식에min-width:0이 있는지 확인. innerHTML로 렌더링하는 모든 데이터 문자열에서<및>를 이스케이프(http://<server-ip>).
6. 카피 작성
- 제목은 약속이 아닌 속성을 진술하는 두 개의 짧은 줄: "모든 발견은 출처를 유지합니다." "두 가지 에디션. 하나의 파일 형식." "발견을 읽는 AI. 결코 재작성하지 않습니다."
- 단락: 구체적인 명사(포트, 형식, 알고리즘, 파일 이름)가 포함된 한두 개의 평범한 문장.
- 제한 사항은 기능과 동일한 비중을 얻음("절대 하지 않는 일", "초기 릴리스", "의도적으로 제외됨").
- 단색 레이블은 소문자 및 간결(
key-free,your key,target · sample,sha-256 3f9a…).
7. 완료 체크리스트
- 모든 주장, 숫자, 파일 이름 및 해시가 제품 자체 파일 및 현재 릴리스와 일치.
- 색상 토큰이 제품(아이콘 + 밝은/어두운 스킴)에서 비롯됨; 심각도는 색상만으로 표시되지 않음.
- 스토리가 양방향으로 동기화되고, 조리개가 노드에서 열리고 닫히며, p = .27/.5/.75/.9에서 겹치는 요소 없음.
- 좁은 레이아웃과 축소 모션 프레임이 모두 올바르게 읽힘; 패킷은 화면 밖에서 중지.
- 탭, 페이지네이터, 검색, 필터 및 복사 버튼이 키보드로 작동; 포커스 가시.
- EN/TR 전환이 보드, 다이어그램, 테이블, 터미널 및 눈썹을 다시 렌더링.
- 360/390px에서 가로 스크롤 없음; 콘솔 오류 없음.
- 1440×900 및 390×844에서 스크린샷:
node scripts/screenshots.mjs example/index.html screenshots.