# INSIDE·OUT 디자인 시스템 명세서 (Design System Specification)
> 레퍼런스: [Inside Out (Awwwards Nominee)](https://www.awwwards.com/sites/inside-out) · [bbb agency](https://www.bb-b.net/)  
> 대상 프로젝트: **아르콘(Archon)** · **메리디안(Meridian)** · **WSTiger**

---

## 1. 궁극적으로 사이트가 추구하는 가치관 (Ethos & Core Philosophy)
- **Inside Out (내면의 외현화)**:
  의사결정의 내부 메커니즘, 구조적 갈등, 복잡한 전제와 대가(트레이드오프)를 감추지 않고 있는 그대로 바깥 표면으로 인출합니다. 화려한 장식이나 모호한 그래픽으로 본질을 호도하지 않으며, 냉철한 엔지니어링 투명성을 지향합니다.
- **스위스 국제 인더스트리얼 모더니즘 (Swiss Industrial Modernism)**:
  그리드는 장식이 아닌 질서의 골격입니다. 모든 헤어라인 분할선과 수치, 좌표는 사안을 조망하는 계측 도구로 작동합니다.
- **반증 가능성과 책임성 (Falsifiability & Accountability)**:
  모든 판단은 "무엇이 달라지면 이 결정을 뒤집을 것인가"라는 무효화 지표를 내장함으로써 지적 정직성을 담보합니다.

---

## 2. 타이포그래피 (Typography Specifications)

| 구분 | 폰트 패밀리 | 크기 (Size) | 자간 (Tracking) | 줄간격 (Leading) | 장평 (Stretch) | 두께 (Weight) |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| **Hero Display** | Söhne / Pretendard | 64px–105px | `-0.035em` | `1.02` (Tight) | 100% (정규) | 800–900 (Bold/Black) |
| **Section H2** | Söhne / Pretendard | 28px–44px | `-0.025em` | `1.15` | 100% (정규) | 700 (Bold) |
| **Subhead H3** | Söhne / Pretendard | 20px–24px | `-0.018em` | `1.25` | 100% (정규) | 600 (Semibold) |
| **본문 사안 (Body)** | Söhne Buch / Pretendard | 15px–16px | `0.00em` | `1.58` (호흡 확보) | 100% (정규) | 400 (Regular) |
| **메타 태그 / 코드** | IBM Plex Mono / SFMono | 10px–12px | `+0.085em` | `1.25` | 100% (정규) | 500–600 (대문자) |

- **장평 원칙**: 인위적인 가로 장평 압축/확장을 일체 금지하며 100% 본래 서체의 글리프 비율을 유지하여 시각적 왜곡 없는 단단한 기하학성을 형성합니다.
- **자간 원칙**: 디스플레이 헤드라인은 음수 자간(-0.035em)으로 묵직한 긴장감을 부여하고, 메타 태그는 양수 자간(+0.085em)의 대문자 표기를 적용합니다.

---

## 3. 컬러 톤앤매너 (Color Tone & Manner)

- **Base Surface (Light)**: `#f0efeb` (본 화이트 / 본 스톤 플라스터 텍스처)
- **Base Surface (Dark)**: `#0a0a0a` / `#121212` (옵시디언 딥 챠콜)
- **Signature Accent**: **`#fa4500`** (Electric Safety Orange — 고시인성 산업 안전 주황)
- **Primary Ink**: `#000000` (Light) / `#ffffff` (Dark)
- **Hairlines**: `rgba(0, 0, 0, 0.12)` (Light) / `rgba(255, 255, 255, 0.16)` (Dark)
- **Muted Inks**: `#757470` / `#9e9b93` (건축적 중립 그레이)

---

## 4. 사이트 구성 오브제 & 비주얼 요소 (Visual Objects & Motifs)

1. **아키텍처 크로스헤어 (`+`)**:
   - 패널의 네 모서리 교차점에 13px × 13px 헤어라인 크로스헤어를 배치하여 도면/설계도의 정밀 감각을 환기.
2. **전기 주황색 리스트 불릿 (`var(--bbb-list-bullet)`)**:
   - 일반 점 불릿 대신 6px 정방형 솔리드 주황색 블록을 배치. 호버 시 1.4배 스케일 업.
3. **45도 회전 인터랙티브 화살표 (`↗`)**:
   - 링크와 버튼에 붙는 기본 `↗` 화살표가 호버 시 즉각 `rotate(-45deg)`로 전환되며 `#fa4500`으로 발색.
4. **인더스트리얼 SVG 파비콘 & 로고**:
   - 32×32 흑색 정방형에 중앙 오렌지 코어 도트와 헤어라인 십자선이 새겨진 파비콘.
   - `INSIDE` + 오렌지 도트 + `OUT` 기하학적 로고.

---

## 5. 이미지 큐레이션 및 결 (Image Texture & Treatment)

- **선정 기준**: 고밀도 콘크리트 건축물, 정밀 산업 기계 모듈, 미니멀한 기하학적 파사드, 연산 코어 회로 등 고대비 흑백 사진 큐레이션.
- **인터랙션 액션**:
  - 기본 정지 상태: 100% 흑백(`grayscale(100%)`) 및 미세 콘트라스트 보정으로 차분하게 안착.
  - 마우스 호버 상태: `0.5s cubic-bezier(0, 0, 0.2, 1)`에 걸쳐 100% 완전한 컬러 및 원본 선명도(`grayscale(0%)`, `scale(1.025)`)로 유려하게 전이.

---

## 6. 트랜지션 액션 & 인터랙션 (Motion & Action)

- **스크롤 리빌**: 화면 인입 시 행 및 단어 단위로 `translateY(18px) opacity: 0` → `translateY(0) opacity: 1` 슬라이드 업.
- **언더라인 드로잉**: 링크 호버 시 좌측에서 우측으로 1px 주황색 선이 가로 스케일(`scaleX(0)` → `scaleX(1)`)로 펼쳐짐.
- **부드러운 관성 스크롤**: Lenis 연동 또는 네이티브 스무스 스크롤로 묵직한 하중감 제공.

---

## 7. 메뉴 구성 및 페이지네이션 (Menu & Pagination)

- **상단 내비게이션 바**:
  - 64px 높이의 스티키 헤더, 헤어라인 보더, 투명 블러 백드롭, 스킨 셀렉터 토글 캡슐.
- **전면 분할 오버레이 드로어 (Full Drawer)**:
  - 거대한 인덱스 타이포그래피(`01`, `02`, `03`), 호버 시 좌측 16px 인덴트 및 주황 강조.
- **모노스페이스 수치 페이지네이션**:
  - `[ 01 / 12 ]` 형식의 실시간 인덱스, 헤어라인 프로그레스 트랙 바, 정밀 화살표 버튼(`←`, `→`).

---

## 8. 서사 구조 (Narrative Progression)

1. **질문과 긴장 (Tension)**: 사안의 행위자, 가용 자원, 물리적 시한을 즉시 대면.
2. **다중 관점 대조 (Options & Disagreements)**: 대안별로 획득하는 가치와 잃어버리는 손실(대가)을 냉정하게 대비.
3. **판단과 판결 (Judgment)**: 코퍼스 외부의 통찰과 기록을 근거로 명확한 선택 확정.
4. **무효화 조건 (Invalidation)**: 판을 뒤집는 조건 수치를 명문화하여 결정의 수명주기를 완성.