레이아웃

This content is for v0.4. Switch to the latest version for up-to-date documentation.

레이아웃 제너레이터는 텍스트와 셰이프를 감싸는 상자를 CSS flexbox나 grid로 배치해 그립니다. 타이틀 카드, 로어 서드, 대시보드, 줄바꿈된 텍스트 패널 같은 것들입니다. 엔진은 실제로 그릴 때 쓰는 폰트와 크기로 레이아웃하므로, 프리뷰와 export 모두에서 상자가 텍스트에 꼭 맞습니다. 이 페이지는 요약 가이드이며, 모든 필드는 레이아웃 레퍼런스에 있습니다.

레이아웃은 제너레이터입니다

레이아웃은 다른 제너레이터와 같은 방식으로 씁니다. 제너레이터 소스, 컴포지션의 generator 노드, 또는 레이아웃 소스를 가리키는 media 노드로 쓸 수 있습니다. 그림의 크기는 캔버스와 같고, 클립이 이를 배치하고 시간을 정하고 애니메이션합니다.

{ "id": "lower-third", "kind": "generated", "generator": { "type": "layout", "root": { "children": [] } } }

애니메이션할 수 있는 값은 여기서도 { "mode": "constant", "value": ... }나 키프레임 형태로 씁니다.

상자

트리의 모든 노드는 상자입니다. children이 있으면 컨테이너, text나 shape가 있으면 리프, 둘 다 없으면 빈 상자(간격, 막대, 장식)입니다.

그룹	필드
컨테이너	`display`(`flex` 또는 `grid`), `gap`, `row_gap`, `column_gap`, `justify_content`, `align_items`, `align_content`
flex 컨테이너	`flex_direction`, `flex_wrap`
grid 컨테이너	`grid_template_columns`, `grid_template_rows`, `grid_auto_columns`, `grid_auto_rows`, `grid_auto_flow`, `justify_items`
상자	`padding`, `background`, `border`, `border_radius`, `overflow`
항목	`width`, `height`, `min_`, `max_`, `aspect_ratio`, `margin`, `align_self`, `position`, `inset`
flex 항목	`flex_grow`, `flex_shrink`, `flex_basis`
grid 항목	`grid_column`, `grid_row`, `justify_self`
텍스트 스타일(상속됨)	`font_family`, `font_size`, `font_weight`, `color`, `line_height`, `letter_spacing`, `text_align`, `outline`
레이아웃 후에 그림	`opacity`, `translate`, `scale`, `rotation_degrees`

루트는 그림 그 자체입니다. 루트의 border box가 캔버스이므로 크기, margin, 항목 필드를 받지 않습니다. 내용은 루트의 justify_content, align_items, padding으로 배치하세요.

필드 이름은 CSS 속성 이름을 snake_case로 쓴 것이고, 키워드도 CSS 키워드를 snake_case로 씁니다("justify_content": "space_between"). grid 트랙 목록과 라인의 값 문자열은 CSS 표기를 그대로 씁니다("repeat(auto-fill, minmax(160px, 1fr))"). 그 자리에 맞지 않는 필드는 이유와 함께 거부됩니다. 예를 들면 root.children[0] sets grid_column, a grid item field, in a flex container입니다.

단위

표기	뜻
`0.05`	그림의 짧은 변에 대한 비율. 같은 숫자가 16:9와 9:16 캔버스에서 같은 비율을 유지합니다.
`"12px"`	프로젝트 캔버스의 픽셀.
`"50%"`	부모 content box에 대한 퍼센트. 크기와 inset에만 씁니다.

padding, margin, inset은 CSS 축약형("8px 16px")이나 변별 객체를 받습니다. 색은 CSS hex("#1e2230")나 { red, green, blue, alpha } 객체로 씁니다.

Grid

"display": "grid"는 자식을 CSS grid로 배치합니다. 이 대시보드에는 텍스트 셀 두 개와 두 열에 걸친 막대가 있습니다.

{
  "id": "dashboard",
  "kind": "generated",
  "generator": {
    "type": "layout",
    "root": {
      "display": "grid",
      "grid_template_columns": "1fr 1fr",
      "gap": { "mode": "constant", "value": "24px" },
      "padding": { "mode": "constant", "value": "48px 64px" },
      "background": { "mode": "constant", "value": "#101418" },
      "font_family": "Hanken Grotesk",
      "children": [
        {
          "text": { "mode": "constant", "value": "Revenue" },
          "font_size": { "mode": "constant", "value": "48px" }
        },
        {
          "text": { "mode": "constant", "value": "Margin" },
          "font_size": { "mode": "constant", "value": "48px" }
        },
        {
          "grid_column": "1 / -1",
          "height": { "mode": "constant", "value": "50%" },
          "background": { "mode": "constant", "value": "#1e2230" },
          "border_radius": { "mode": "constant", "value": "12px" }
        }
      ]
    }
  }
}

트랙 목록에는 길이, 퍼센트, fr, auto, min-content, max-content, minmax(), fit-content(), repeat()(횟수, auto-fill, auto-fit)를 쓸 수 있습니다. 이름 있는 라인과 grid_template_areas는 지원하지 않습니다.

텍스트

상자의 text는 한 문단이며, 상자의 content 너비에서 줄바꿈됩니다. 텍스트 스타일은 CSS처럼 상속됩니다. 루트에 font_family를 지정하면 그 아래 모든 텍스트가 이를 씁니다. 텍스트는 크기에 맞추려고 줄어들지 않으며, 문자열은 보간되지 않으므로 시간에 따라 바꿀 때는 hold 키프레임만 쓸 수 있습니다.

애니메이션

숫자 값은 셰이프와 마찬가지로 그림의 시간으로 키프레임합니다. opacity, translate, scale, rotation_degrees는 레이아웃이 끝난 뒤 상자의 중심을 기준으로 그려지고 다른 상자를 밀어내지 않습니다. 상자는 렌더링 픽셀 단위로 배치되어 느리게 애니메이션하는 크기는 픽셀 단위로 끊겨 움직이므로, 부드러운 움직임에는 이 속성들을 애니메이션하세요. 위의 로어 서드는 opacity와 translate로 카드를 페이드하며 밀어 넣습니다. 키프레임이 없는 레이아웃은 한 번만 레이아웃하고 이후 프레임에서 재사용합니다.

렌더링 전에 측정하기

alpha2/layout의 measureLayout은 주어진 폰트, 그림 크기, 시각에서 프레임이 레이아웃하는 것과 똑같이 레이아웃합니다. 각 노드의 border box와 content box(그림에 대한 비율), 줄 수와 베이스라인, 그리고 넘침 여부를 알려 줍니다. 넘침이란 텍스트가 상자보다 높거나 단어가 잘리는 경우, 또는 자식이 padding box 밖으로 나가는 경우입니다. 넘치는 상자도 렌더링은 되므로, 측정해서 문서를 고치세요.

import init, { WasmTextMeasurer } from "alpha2/wasm";
import { measureLayout } from "alpha2/layout";

await init();
const measurer = new WasmTextMeasurer();
measurer.addFont("Hanken Grotesk", fontBytes, 0);
const picture = { width: 1280, height: 720 };
const { nodes } = measureLayout(measurer, generator, picture, 0, picture);
const overflowing = nodes.filter((node) => node.overflow).map((node) => node.at);

네이티브에서는 alpha2_engine::measure_layout이 비트 단위까지 같은 답을 내고, Python에서는 alpha2.TextMeasurer가 같은 일을 합니다. 그림을 실제로 그릴 크기에서 측정하세요. 크기가 다르면 줄바꿈 위치가 달라질 수 있습니다.

alpha2/layout은 box, text, shape로 CSS 비슷한 props에서 레이아웃을 작성하는 빌더도 제공하며, 그 결과는 validateProject가 받아들이는 평범한 문서입니다. Python 패키지의 alpha2.layout에도 같은 빌더가 있습니다.

다음 단계

레이아웃 레퍼런스모든 레이아웃 필드와 값.

제너레이터채우기, 셰이프, 텍스트.

자막자막 트랙의 시간 지정 텍스트.