보이는 설계 — feno-canvas 1.8 디자인 가이드

01 / thesis

1.8의 변화는 “더 화려하게”가 아니라 정지 상태부터 완성되게 만드는 것이다.

한글은
공기를 먹는다

글자 수가 같아도 행간과 줄바꿈이 다르면 호흡이 달라진다. 아래 두 표본은 내용은 같고, 타이포그래피만 다르다.

좋은 시각 문서는 독자가 어디서 시작하고 어디서 멈춰야 하는지 알려준다. 그러나 좁은 행간과 무리한 자간, 글자 단위 줄바꿈은 한글의 덩어리를 잘게 부수고 시선을 지치게 만든다. 내용이 틀리지 않아도 전달은 실패할 수 있다.

좋은 시각 문서는 독자가 어디서 시작하고 어디서 멈춰야 하는지 알려준다. 1.7의 행간, 0의 자간, 어절을 지키는 줄바꿈은 한글의 덩어리를 보존한다. 내용이 같아도 호흡이 살아나면 독자는 더 오래, 더 정확하게 읽는다.

02 / static-first motion

REDUCED

MOTION

기본 상태가 곧 완성본. 인쇄, 자바스크립트 없음, 모션 감소 설정에서도 모든 정보와 위계가 그대로 남는다.

움직임을 허용한 화면에서만 강조선이 살아난다. 사라졌다 나타나는 정보는 없고, 이미 보이는 의미의 순서만 또렷해진다.

먼저 멈춰 있는 화면을 설계하고, 그 위에 단 하나의 움직임을 더한다.

1.8은 새 문법을 “효과”로 소비하지 않는다. 레이아웃의 맥락, 컴포넌트의 경계, 모션의 조건을 코드 자체가 설명하게 한다.

페이지 폭이 아니라 콘텐츠가 놓인 자리를 기준으로 비교 표본이 자연스럽게 한 열로 바뀐다.

CONTAINER QUERY

.compare { container-type:inline-size; }
@container (max-width:760px) { … }

강조색이 문서 전체로 새지 않고, 의도한 섹션 안에서만 역할을 갖는다.

CSS SCOPE

@scope (.feature-stack) {
  strong { color:var(--accent-support); }
}

정적 화면이 기본이고, 사용자가 허용한 경우에만 설명하는 움직임이 더해진다.

ADDITIVE MOTION

@media screen and
(prefers-reduced-motion:no-preference) {
  .mark { animation:reveal 700ms; }
}

@keyframes와 현대 CSS at-rule, // 주석은 허용된다. 예전의 GSAP 유료 플러그인도 2025년 4월부터 무료지만, 이 예시처럼 오프라인 네이티브 표현이 기본이다.

CONTAINMENT

allowed: @keyframes · @container · //
blocked: @import · external url() · fetch()