# Elio 브랜드와 범위

이 문서는 이 저장소의 **현재 이름·역할·화면 입구·자산 용도**를 연결하는 기준입니다.
Elio는 **CVA의 공용 디자인 시스템**이며, 소개 문구는 **“관계를 고르고, 페이지로 만듭니다.”**입니다.
기존 기술 ID·URL·JSON 형식은 보존합니다. Story의 책 심벌이나 `elio`라는 기존 기술 ID를
디자인 시스템 전체의 새 로고·새 제품으로 해석하지 않습니다.

## 소개에서 전하는 이야기

**관계를 고르고, 페이지로 만듭니다.**

내용을 어떤 순서로, 어떤 관계로 보여줄지 고릅니다. 필요한 요소와 표현으로 페이지를 편집하고,
완성한 페이지는 HTML로, 다시 편집할 구성은 JSON으로 보관합니다.
내용에 맞게 표현을 고르고, 읽기와 조작의 기준을 공유하는 것이 Elio의 역할입니다.

[소개 첫 화면](../index.html)의 주행동은 **라이브러리 시작하기**입니다. 이미 편집할 내용을 정했다면
페이지 제작실로 바로 들어갑니다. Story를 읽거나 Board에서 항목을 살펴보는 사람은 각 입구를 직접
선택합니다. 이 입구들은 의무적인 처리 순서나 제품 사이의 자동 데이터 변환을 뜻하지 않습니다.

| 하려는 일 | 화면·도구 | 얻는 결과 |
| --- | --- | --- |
| 고르기 | Elio 라이브러리 | 요소·모듈·표현을 실제 예제로 보고 필요한 구성 선택 |
| 만들기 | 페이지 제작실 | 내용을 편집하고 HTML·편집 JSON으로 보관 |
| 읽기 | Elio Story | 장면·인물·시간·근거를 따라 읽고 관련 장면으로 복귀 |
| 살펴보기 | Elio Board | 이야기·도감의 항목과 관계를 지도와 보드에서 탐색·편집 |

소개 페이지의 순서·관계 그림은 **구성 예시**입니다. 제품 화면 캡처나 실행 결과로 표시하지 않습니다.
Story의 책 심벌은 Story 입구에만 연결하고, Elio 전체는 CVA 표식과 Elio 이름으로 소개합니다.

## 이름과 화면 입구

| 이름 | 역할 | 이 저장소의 입구 |
| --- | --- | --- |
| **CVA** | Elio를 포함한 상위 브랜드 | [Elio 소개](../index.html)의 원본 로고·[ttaem.com](https://ttaem.com) |
| **Elio** | 요소·관계 표현·템플릿과 제작 흐름을 제공하는 공용 디자인 시스템 | [소개](../index.html) |
| **Elio 라이브러리** | 필요한 요소·모듈·표현을 고르는 화면 | [`cva/library.html`](../cva/library.html) |
| **페이지 제작실** | 페이지의 구성·내용·스타일을 편집하고 HTML·JSON으로 보관하는 화면 | [`cva/index.html`](../cva/index.html) |
| **Elio Story** | 장면·관점·시간·원문 근거를 따라 읽는 이야기 리더 | [창작 이야기 읽기](../examples/story.html) · [원본 전체 템플릿](../examples/templates/index.html) |
| **Elio Board** | 이야기·도감 항목과 관계를 탐색·편집하는 보드 | [`board/index.html`](../board/index.html) |

라이브러리와 페이지 제작실은 Elio 안의 작업 화면입니다. 별도 제품 이름으로 늘리지 않습니다.
Story를 읽는 입구와 전체 템플릿 목록은 다른 목적지로 표시합니다.
내부 `studio`, `forma-pattern`, `FW_*`, 기존 profile 값과 저장 문서의 식별자는 이름 정리로 바꾸지 않습니다.

## CVA 안의 VEIL

**VEIL**은 CVA 아래에서 스트리머의 라이브 표현·배치·조작을 돕는 도구 브랜드입니다.
Elio의 페이지 제작·이야기 읽기와 역할을 나누며, Elio를 사용하기 위해 VEIL을 설치할 필요는 없습니다.
[VEIL 제품 안내](https://ttaem.com/brand/products.html#veil)에서 MWBP·OBS Filter·Camera Placement의
기능·지원 상태와 개별 설치 입구를 확인합니다. 세 제품의 버전·라이선스·공개 상태는 각각 유지합니다.

VEIL은 공통 **V와 VEIL 이름**을 함께 표시하고, V의 작은 우하단 표식으로 연결 고리(MWBP)·
빛(필터)·배치 프레임(캠 배치)을 구분합니다. [CVA의 패밀리 아이콘 기준](https://ttaem.com/brand/identity-board.html#veil-icons)을
따르며, 기존 MWBP 이미지를 잘라 공통 로고로 쓰지 않습니다. 이 Elio 패키지의 CVA·Story 표식은
아래 자산 목록이 소유하고, VEIL 제품의 앱·설치 자산과 적용 상태는 해당 제품이 소유합니다.

## 같은 이름의 수치는 같은 목록에서

| 화면의 수치 | 집계 기준 |
| --- | --- |
| 제작실의 관계·장면 표현 전체 | `CVA_PATTERNS.enrich(FW_CATALOG)`와 `CVA_SCENES.entries`의 합 |
| 자체 관계 표현 | [`catalog.js`](../catalog.js)의 현재 등록 목록 |
| 확장 장면 표현 | [`cva/scene-catalog.js`](../cva/scene-catalog.js)의 `entries` |
| 표현 계열 | [`cva/patterns.js`](../cva/patterns.js)의 `families` |
| 요소 라이브러리 전체 | [`cva/library-map.js`](../cva/library-map.js)가 구성 단위별로 모은 항목 |

제작실의 선택 메뉴와 결과 수는 같은 실행 목록에서 계산합니다. 검색·필터 후의 결과 수는
전체 수와 함께 보여 줍니다. 요소 라이브러리는 UI 요소·모듈·템플릿 등을 함께 세므로
관계·장면 표현 수와 비교하지 않습니다. 사적 원형 키트의 과거 126개 항목은 현재 제공 수가 아닙니다.

## 자산과 기본 표현

| 자산 | 용도 | 기준 |
| --- | --- | --- |
| [`cva/assets/cva-symbol.svg`](../cva/assets/cva-symbol.svg) | 소개·라이브러리·제작실·아이콘 가이드의 32px CVA 표식 | CVA v4 compact의 S1 중심 보정본. 64 그리드·3.2 획·16 모서리. Elio 독립 로고를 새로 만든 것이 아님 |
| [`cva/assets/cva-symbol-micro.svg`](../cva/assets/cva-symbol-micro.svg) | 16px 파비콘의 CVA 표식 | 같은 중심 보정을 적용한 micro 자산. 작은 크기에서 3.8 획 사용 |
| [`assets/logo.svg`](../assets/logo.svg) | 소개·README의 다람쥐와 워드마크 | 원본 비율을 유지하고 충분한 크기(가이드 최소 160px)로 표시 |
| `cva/assets/cva-color.svg` | 기존 원본 로고 자산 경로 | 호환을 위해 유지. 작은 헤더에서 새로 축소해 쓰지 않음 |

작은 표식은 CVA 정본 `docs/design/cva-brand-v1/media/icons/v4/`의 `cva-color.svg`와 `cva-micro.svg`에서 가져왔습니다.
S1 자산 출처는 `ttaem00/chzz-vod-analyzer`의 `91602249d9046d97eb22e7fd5f329e3174a242f5`입니다.
S1에서 마름모만 왼쪽으로 2 이동해 중심을 (32, 32)에 맞췄습니다. 고리·시작 노드·색·크기는 유지합니다.
원본 로고를 표시하는 기존 소개·재배포 고지는 유지합니다.

기본 CVA 표현은 네이비 `#141D2B`, 종이 `#FAF5EB`, 황동 `#F4BE70`을 공유합니다.
Pretendard Variable, 기본 본문 16px/1.75, 짧은 영문 인사 Georgia, 시간·수치의 고정 폭 숫자를 사용합니다.
제품별 색·밀도·본문 리듬은 기존 profile의 역할을 따릅니다. [`design/tokens.js`](../design/tokens.js)는
관찰한 호환 값·profile·팔레트를, [`cva/module-styles.css`](../cva/module-styles.css)는
조합 페이지의 실제 타입·간격·반경을 정의합니다. Story의 원형 규칙은 해당 reader가 유지합니다.
본문 16px/1.75는 공통 기본값이며 편집 화면·큰 설명 화면 등 명시된 profile 값을 덮어쓰는 규칙이 아닙니다.
포커스와 의미는 색만으로 전달하지 않으며 모션 감소 설정을 존중합니다.

### 화면 안에서 이어지는 시각 언어

헤더는 32px CVA 표식과 Elio 이름을 함께 사용합니다. 라이브러리와 페이지 제작실은
이름 아래의 한국어 화면 이름으로 현재 작업을 알리고, 아이콘 가이드는 탐색 영역에서
현재 페이지를 표시합니다. 작은 화면에서도 표식을 줄이지 않으며, 헤더 탐색 링크는
44px 이상의 조작 높이를 확보합니다.

| 화면 | 바깥 화면의 표현 | 먼저 읽을 정보 |
| --- | --- | --- |
| Elio 소개·브랜드 아이콘 가이드 | 종이색, 네이비, 황동 | Elio의 역할과 시작할 일 / 표식의 이름·크기·용도 |
| Elio 라이브러리 | 기존 숲색 바탕과 연두 강조 | 실제 예제, 이름, 쓰임, 선택할 행동 |
| 페이지 제작실 | 기존 네이비 바탕과 황동 강조 | 편집 중인 페이지, 현재 구성, 미리보기·내보내기 |

화면의 성격을 모두 같은 색으로 만들지 않습니다. 표식·이름·정렬·읽는 위계를 공유하고,
라이브러리의 숲색과 제작실의 네이비는 각 과업의 맥락으로 유지합니다. 라이브러리 카드의
선택에 필요한 설명은 14px, 분류·상태·행동의 보조 정보는 12px 이상으로 읽습니다.
예제 안의 profile·palette와 저장한 문서의 표현은 바깥 화면의 스타일과 독립적입니다.

[아이콘 가이드의 적용 예시](../examples/brand-icons.html#usage-title)는 헤더의 32px,
제품 카드의 24px, 작은 탐색 표식의 16·20px을 실제 표시 크기로 보여 줍니다.
밝은 면의 단색과 어두운 면의 반전도 같은 Elio Story 표식으로 비교합니다.
이 예시들은 사용 맥락을 설명하는 정적 구성으로, 제품 실행 화면이나 기능 검증 결과를 뜻하지 않습니다.

## 브랜드 아이콘을 고르고 사용하기

[브랜드 아이콘 가이드](../examples/brand-icons.html)에서 실제 크기와 밝은·어두운 배경을
비교하고 각 SVG 원본을 받을 수 있습니다. CVA 모브랜드와 일곱 도구의 표식이며,
각각 color·micro·mono·reverse 네 변형을 제공합니다. 책 심벌의 이름은 **Elio Story**입니다.
ManagerCue·타임링크의 자산은 CVA 탐색용 심벌이며 연관 제품의 공식 로고를 대체하지 않습니다.

| 표시할 상황 | 선택할 자산 |
| --- | --- |
| 16·20px 컬러 표식 | 내부 특징을 간결하게 남긴 `micro` |
| 24px 이상 컬러 표식 | 일반 `color` |
| 밝은 배경의 단색 표식 | 투명 배경의 `mono` |
| 어두운 배경의 밝은 표식 | 투명 배경의 `reverse` |

자산은 [`cva/assets/brand-icons/v4/`](../cva/assets/brand-icons/v4/)에 보관합니다.
가이드는 [자산 목록](../cva/assets/brand-icons/manifest.json)의 이름·역할·파일 경로를 그대로 읽습니다.
목록에는 CVA의 정확한 출처 커밋과 파일별 SHA256이 함께 있으며, 이 문서에 별도 수치를 복제하지 않습니다.

정본 저작은 CVA의 `build_identity.py`가 담당합니다. Elio에서 SVG를 개별 수정하지 않고
검증한 정본 묶음을 동기화합니다. `node scripts/check-brand-icons.cjs`는 복사본과 목록의 해시,
헤더·파비콘 사본의 일치를 확인합니다. CVA 작업 사본이 함께 있으면
`--canonical <CVA의 media/icons/v4 경로>`를 추가해 실제 정본 바이트까지 비교합니다.

이름이 옆에 있으면 아이콘 이미지에는 빈 `alt`를 사용해 중복 낭독을 피합니다.
단독 이미지에는 제품 이름을, 아이콘만 있는 버튼에는 행동의 이름을 제공합니다.
그림의 16px 크기를 버튼의 조작 영역으로 사용하지 않으며 포커스·여백을 별도로 확보합니다.
이 가이드는 브랜드 표식의 선택·연결을 다루며 기존 Lucide UI 아이콘이나 제품 데이터·저장 계약을 바꾸지 않습니다.

## 행동과 상태 · S4

[Elio UI states](../examples/ui-states.html)는 이동과 실행 결과를 살펴보는 사용 가이드입니다.
새 제품 이름이 아니며, 기존 라이브러리의 아이콘 렌더러·상태 처리 함수·피드백 CSS를 사용합니다.
브랜드 표식은 제품을 찾는 데, 행동 아이콘은 이동·복사·닫기 같은 조작을 이해하는 데 씁니다.

| 상황 | 시각 표현 | 함께 읽을 내용 |
| --- | --- | --- |
| 같은 탭의 내부 이동 | 우측 화살표 | 이동할 화면이나 대상 |
| 새 탭 이동 | 바깥으로 향하는 화살표와 열린 창 | 목적지와 새 탭 안내 |
| 진행 중 | 열린 원, 황동색 | 지금 수행하는 작업 |
| 완료 | 확인 표시, 초록색 | 실제로 끝난 결과 |
| 실패 | 교차 표시, 붉은색 | 하지 못한 일과 다시 시도하거나 직접 처리할 방법 |

글 옆의 행동 아이콘은 기본 18px이며 24 그리드·2 획·둥근 끝을 공유합니다.
16·18·20px의 실제 크기를 가이드에서 비교합니다. 기호는 수축하지 않는 상자 안에 놓고,
조작 영역·포커스·접근 가능한 이름은 버튼과 링크가 담당합니다. 장식 기호는 낭독에서 제외합니다.
제작실의 닫기는 기존 `x` 경로를 사용하고, 작은 화면의 펼침 표식은 글꼴 대신 CSS 선으로 만듭니다.

라이브러리의 `CVA_LIBRARY_INTERACTIONS.run`은 실제 작업의 진행·성공·실패에 따라
`data-state`와 상태 문장을 갱신합니다. S4의 CSS는 이 값을 그대로 표시하며, 중복 실행 방지와
작업 후 기존 버튼 내용·이름·활성 상태 복원은 같은 함수를 유지합니다. 실패해도 같은 버튼으로
다시 시도할 수 있습니다. 기호와 색을 알아보지 못해도 문장만으로 상황과 다음 행동을 이해해야 합니다.
움직임 줄이기 설정에서는 진행 표식이 정지합니다.
새 피드백 영역에는 `action-feedback` 클래스를 쓰고 공용 `design/foundations.css`를 불러옵니다.
영역을 `data-elio-shell="library|studio|guide"` 중 해당 값의 root에 두며, 화면 전체의
`library.css`를 상태 표현만을 위해 가져오지 않습니다.
상태 문장은 `role="status"`와 `aria-live="polite"`로 전달하며, 기존 helper도 이 속성을 설정합니다.

가이드의 문장 복사는 실제 클립보드 작업입니다. 실패 체험은 **시뮬레이션**으로 명시하고,
정적 상태 카드는 표현 예시로 표시합니다. 실제 작업의 완료를 시간 경과만으로 알리지 않습니다.
행동 기호는 [`library-icons.js`](../cva/library-icons.js)의 기존 고정 Lucide 경로와
[사용권 고지](../cva/LUCIDE_NOTICE.txt)를 따릅니다. 브랜드 정본 SVG 32개·문서 형식·내보내기
및 Story·Board 실행 구조는 이 단계의 변경 대상이 아닙니다.

## 디자인 시스템의 공용 기준 · S5

[디자인 기준](FOUNDATIONS.md)은 작업 화면의 색·간격·포커스·선택·피드백과
콘텐츠 profile의 역할을 연결하는 사용 기준입니다. [시각적 가이드](../examples/foundations.html)에서
같은 역할의 컨트롤과 기존 8가지 profile을 확인할 수 있습니다. 새로운 제품 이름은 추가하지 않습니다.

라이브러리·페이지 제작실·상태 가이드는 `design/foundations.css`의
기본값 → 의미 → 컴포넌트 역할을 공유합니다. 공용 상태 CSS는 이 파일로 이동했으며
S4의 실제 작업 함수·문장·고정 기호는 유지합니다. 구조 구획선과 조작 경계, 선택과
포커스의 역할을 나누고, 바깥 화면의 `--elio-*`는 출력 콘텐츠의 `--cva-*`와 분리합니다.

기존 8개 profile과 네 팔레트, 내용·관계·시간·출처의 계약은 그대로입니다.
profile을 선택하는 행위가 새 사실·관계·영상 위치를 생성하지 않으며, 현재 제공하는
컴포넌트의 입력과 사용 기준을 사람과 저작 도구가 함께 참고합니다.

## 버전

라이브러리·페이지 제작실·Elio Story·Elio Board의 현재 버전은 **Elio 1.1.0** 하나입니다.
공개 릴리스는 [v1.1.0](https://github.com/ttaem00/CVA-Elio/releases/tag/v1.1.0)입니다. 저장 형식·API의 버전과 제품 버전은 따로 표기합니다.

## 소스와 반영 상태

이름·자산 용도는 이 문서, 실제 표현 목록은 위 등록 소스, 동작 계약은
[소유 표현 runtime](OWNED_RUNTIME.md)과 [이야기 저작 안내](STORY_AUTHORING.md)를 따릅니다.
`manifest.json`의 후보 상태와 hash는 추출 당시의 기록입니다. 현재 소스는 검토 중인
브랜치·커밋을 확인하고, 기본 브랜치 병합과 실제 웹 서비스 반영은 각각 확인합니다.
문서나 소개 문구를 고친 것만으로 배포 완료·공식 제휴·기능 검증을 주장하지 않습니다.

## 출처와 제공 범위

Elio로 만든 모든 결과물의 로고·ttaem.com·cva-elio 원본 저장소 표시는 권장 사항이며 생략할 수 있습니다. 기본 표시를 제거해도 허용된 결과물 사용·공유 권한을 잃지 않습니다. 코드·패키지·스킬 자체의 재배포에는 세 가지 출처와 이용허락·저작권·제3자 고지를 모두 유지합니다. 자발적으로 로고를 사용하면 원형·색·비율을 보존하며 공식 제휴·보증을 뜻하지 않습니다. 정확한 조건은 LICENSE를 따릅니다.

이 저장소는 CVA 소유 관계 엔진·라이브러리·페이지 제작실·자체 Board 카드와 기존 Story 소스를 제공합니다. Forma 원본 코드·Aceternity 구현·TimerLink fixture는 포함하지 않습니다. 기억 테이프와 달의 기억은 관리자가 지정한 기존 명조 작품 예제 그대로 제공하며, 게임·제휴 작품의 권리를 CVA 소프트웨어 권리와 구분합니다. 외부 서비스 로고는 문자로 표시합니다.