비교할 내용 · 창작 관측 노트
장면을 보고,
근거를 남깁니다.
해안의 풍경을 살펴보고, 수첩에 질문을 남깁니다. 관찰과 해석을 나누어 읽는 같은 내용이 모든 스타일에 사용됩니다.
아래 문구에서 미리보기의 준비 상태를 확인할 수 있습니다.
ELIO / FOUNDATIONS
같은 뜻,
다양한 모습.
표현은 내용에 어울리게.
행동과 관계는 한결같이 읽히게.
Elio는 관계를 고르고, 페이지로 만드는 디자인 시스템입니다. 무엇을 보여 주는지에 따라 분위기는 달라져도, 선택과 실행·내용과 근거는 같은 뜻을 이어갑니다.
- 함께 쓰는 기준
- 행동 · 선택 · 초점 · 피드백
- 내용에 맞는 표현
- 색 · 글자 · 읽기 밀도 · 배치
- 언제나 남는 것
- 내용 · 순서 · 관계 · 시간 · 출처
01 / 만드는 페이지
하나의 기록, 여덟 가지 읽기.
스타일을 골라 같은 내용을 비교해 보세요.
어울리는 내용
항목의 차이와 관계를 차분하게 비교할 때.
표현의 특징
밝은 바탕, 초록색 강조, 넉넉한 여백.
같은 내용의 실제 페이지미리보기 준비 중
장면을 보고,
같은 내용을 불러오고 있습니다.
미리보기 안에서 내용을 스크롤하고 링크·펼침을 사용할 수 있습니다. 스타일을 고르는 동작은 입력한 문장과 이미지·읽는 순서·출처를 바꾸지 않습니다.
여덟 스타일은 무엇을 바꾸나요?
스타일은 색과 글자뿐 아니라 읽기 밀도와 표현 목적을 함께 담습니다. 강조색은 그중 색의 역할만 조정합니다. 기존 스타일 이름과 저장된 문서의 구분은 그대로 유지합니다.
| 스타일 | 어울리는 내용 | 표현의 특징 |
|---|---|---|
| Forma | 항목의 차이와 관계를 비교 | 밝은 바탕과 넓은 여백 |
최종 글자 크기와 배치는 사용하는 구성에 따라 달라집니다. 아래의 제작 기준에서 실제 스타일 소스와 적용 범위를 확인할 수 있습니다.
02 / 페이지를 다루는 도구
어느 화면에서도,
행동의 뜻은 같습니다.
색이 달라도 입력·선택·실행을 구분합니다.
직접 눌러 볼 수 있는 조작 예시입니다.
고르는 순간.
숲의 초록빛 위에서 필요한 내용을 찾습니다.
장면을 선택한 표현입니다.
이 입력과 선택은 화면 표현을 살펴보는 예시입니다. 내용을 저장하거나 다른 페이지에 보내지 않습니다.
이어 만드는 순간.
네이비와 황동색 안에서 다음 행동을 찾습니다.
장면을 선택한 표현입니다.
이 입력과 선택은 화면 표현을 살펴보는 예시입니다. 내용을 저장하거나 다른 페이지에 보내지 않습니다.
선택대상을 표시합니다.
글과 테두리가 함께 바뀝니다.
초점키보드로 조작할 위치입니다.
선택과 별도의 외곽선으로 보입니다.
실행다음 행동을 시작합니다.
목적지를 버튼의 문장에 적습니다.
03 / 내용의 의미
순서와 시간은,
서로 다른 이야기입니다.
화면의 간격으로 시간이나 인과를 추측하지 않습니다.
입력하지 않은 값은 모르는 상태로 남깁니다.
읽는 순서
01 02
어떤 장면부터 읽는가
위 예시는 해안을 살펴본 뒤 수첩의 질문으로 이어집니다. 번호와 배치 사이의 간격은 경과 시간을 뜻하지 않습니다.
작품 속 시간
새벽 정확한 시각 없음
이야기 안에서는 언제인가
첫 장면에 ‘새벽’이라고 적었습니다. 두 번째 장면의 시각은 미정이며, 읽는 순서만으로 같은 시각이라 판단하지 않습니다.
원본 영상의 시각
미입력 원본 영상 없음
어느 영상의 어디인가
영상과 시작 시점이 제공된 경우 그 영상의 기준을 따릅니다. 이 창작 예시에는 재생 시각을 만들어 넣지 않습니다.
편집 결과의 시각
미생성 편집 결과 없음
완성한 편집본의 어디인가
편집한 순서와 길이에 따라 달라지는 별도의 기준입니다. 원본 시각을 그대로 복사해 결과의 시각으로 쓰지 않습니다.
04 / 이어 쓰는 기준
값을 고르고,
뜻을 붙이고, 함께 씁니다.
새 화면도 이미 정한 규칙에서 시작합니다.
- 1
기본값
색과 간격, 글자와 크기를 정합니다.
라이브러리의 밝은 초록 - 2
의미
무슨 역할로 쓰는 값인지 이름을 붙입니다.
주요 행동다음에 할 일 - 3
선택한 장면과 상세현재 대상 · 근거 · 돌아갈 위치원문과 근거설명 · 자료 · 확인한 범위장면과 시간읽는 순서 · 명시한 시간 기준펼치고 이어 읽기질문 · 상세 · 같은 자리의 복귀
사람과 저작 도구가 함께 참고할 제작 기준
바깥의 조작 화면은 design/foundations.css의 --elio-* 값을, 만드는 페이지는 기존 --cva-*와 실제 페이지 스타일을 사용합니다. 위 비교는 제작실과 같은 페이지 렌더러에 같은 문서를 전달하고 스타일·강조색만 바꿉니다.
design/tokens.js는 기존 제품의 호환 값과 스타일 정보를 담습니다. 최종 페이지의 글자·배치 규칙은 cva/module-styles.css와 렌더러에 있으므로, 호환 표의 숫자를 모든 화면의 최종 크기로 해석하지 않습니다.
키보드는 Tab으로 입력·선택·링크·펼침에 도달하고, 버튼은 Enter 또는 Space로 실행합니다. 선택·초점·진행 상태를 색 하나로만 알리지 않습니다. 장면·근거·관계 범례·복귀에 필요한 입력과 상태는 디자인 시스템 사용 기준에서 확인하세요.