설명을 읽는 대신,구조를 보게 만드는 도구

feno-canvas는 사용자의 요청을 브라우저에서 읽고 사용할 수 있는 HTML 결과물로 만드는 작성·검증·전달 절차입니다.

사용자의 요청이 실제 파일이 되기까지

목적과 내용을 결정
- 누가 읽고, 무엇을 이해하거나 해야 하는지 정합니다.
- 필요한 사실·조건·예외·출처를 모으고, 확인하지 못한 내용은 구분합니다.
관계에 맞는 구조 선택
- 순서는 흐름도, 차이는 비교표, 포함 관계는 계층으로 표현합니다.
- 시각적 방향을 먼저 정한 뒤 구현 방식을 선택합니다. 기존 starter는 필요한 기능을 참고할 때 사용합니다.
내용을 문장으로 표현
아래의 3단계 언어 흐름을 적용합니다. 시각물로 충분히 전달되는 사실은 문장으로 다시 쓰지 않습니다.
HTML과 사용 경로 구현
- 실제 내용으로 첫 화면과 주된 읽기·조작 경로를 만듭니다.
- 제목·언어·화면 크기 설정과 실제 동작에 맞는 메타데이터를 넣고, 인쇄와 움직임 감소 설정을 준비합니다.
- 기존 Canvas 출력 위치에 파일을 저장합니다.
검증하고 화면을 확인
- 실제 파일에 기존 manager의 validate --design-smoke를 실행합니다.
- 데스크톱·좁은 화면을 보고, 있는 조작 요소는 포인터와 키보드로 사용합니다.
- 문제가 있으면 결과물을 고친 뒤 해당 검사를 다시 합니다.

단일 HTML로 충분하면 한 파일로 만듭니다. 라이브러리·모듈·미디어를 분리해야 하면 필요한 파일만 포함한 bundle로 구성합니다.

기본은 online입니다. offline은 외부 통신 없이 동작해야 합니다. 시각적 복잡도·상호작용·네트워크 사용·서버 필요성은 따로 결정합니다. 이 안내는 글꼴을 online으로 불러오며, 사용자 데이터 저장이나 서버 기능은 없습니다.

먼저 · 의미 확정
내용 완전성
필수 사실, 수치, 조건, 예외, 출처와 불확실성을 빠짐없이 정합니다. 표현을 짧게 만들기 위해 필요한 의미를 지우지 않습니다.
그다음 · 의미 정리
ASD-STE100 영어 중간 표현
통제된 영어 표현으로 주체와 동작을 분명히 합니다. 능동형과 한 문장에 한 가지 의미를 사용하고, 앞 단계의 조건을 그대로 보존합니다.
마지막 · 독자에게 전달
자연스러운 한국어
정리한 의미를 익숙한 한국어로 표현합니다. 독자가 필요한 제품명·명령은 유지합니다. 영어 중간 문장은 최종 HTML에 넣지 않습니다.

형태 선택: 관계를 바로 보여줄 수 있으면 구조·흐름도·비교표·계층을 사용합니다. 문장은 그 구조만으로 전달되지 않는 조건과 설명을 맡습니다.

이번 요청과 현재 사본의 차이: 이 3단계 흐름은 이번 요청의 작성 조건으로 실행했습니다. 읽은 프로젝트 스킬과 관련 작성 가이드에는 STE 중간 표현 계약이 별도로 명시되어 있지 않습니다.

HTML·CSS 선언과 구조를 읽는 진단입니다. 실제 화면의 모든 상태를 관찰하는 검사는 아닙니다.
검사 대상	현재 manager가 확인하는 내용	결과의 의미
기본 화면 준비	유형·디자인 방향·lane 선언, viewport, 인쇄 CSS, 움직임 감소 CSS	누락이나 준비 부족을 알립니다.
글꼴과 한국어 조판	주요 글꼴 선언, 한글 글꼴 이름, 단어 단위 줄바꿈, 균형 줄바꿈 선언	한글 40자 이상이면 일부 조판 진단이 오류로 처리됩니다.*
읽기와 조작	판독 가능한 본문 색의 명암비, 조작 요소의 보이는 포커스 스타일	명암비 4.5:1 미만 등을 알립니다. 모든 배경·상태를 증명하지는 않습니다.
구성과 구별성	강조색 수, 적용 가능한 기존 구성·starter 재작성·유사도 진단	기존 방식에 따른 주의점입니다. 미적 품질 인증은 아닙니다.
그림·차트·도식	그림 제목·캡션·접근 가능한 설명·필요한 대체 설명, 선언된 차트 수치·범위·단위·비례, 적용 가능한 도식 구조·라벨 진단	실제 포함된 시각물과 선언에 따라 검사합니다.

* word-break: keep-all이 없거나, text-wrap: balance를 선언하거나, 선언된 글꼴 목록에 한글 글꼴 이름이 없으면 현재 한국어 조판 오류가 발생합니다.

결과물 메타데이터와 리소스·무결성·패키징 규칙을 확인합니다. online의 API 사용은 열려 있고, offline은 외부 통신을 사용하지 않는 계약을 따릅니다.

화면 품질, 내용 완전성, 전체 접근성을 보장하지 않습니다. 현재 사본에는 prose: 진단이 없으므로, 경고 0건으로 STE 준수나 문장 품질을 자동 검증했다고 말할 수 없습니다.

ship필요한 원본 보정검증·버전 등록수신자·대상 결정SMBCloudflarelive 확인 · 선택

원본 보정 이후에는 다시 확인합니다. ship은 viewport, 색, 포커스, 인쇄·움직임 감소 CSS와 일부 메타데이터를 바꿀 수 있습니다. 바뀐 화면의 이전 캡처를 최종 근거로 사용하지 않습니다.

전달 결과는 각각 기록합니다. 일반적인 결과물 요청에는 기존 전달 기본값이 적용됩니다. 로컬 전용 요청은 이를 끕니다. 게시 설정이 부족하면 로컬 모드로 남고, 뒤 단계가 실패해도 앞 단계 성공이나 등록된 버전은 사라지지 않습니다.

설명의 근거와 읽는 범위