방향과 간격 — 좌표를 쓰지 않는 배치

1편의 화면에는 노드가 셋이었고, 각각 자식을 하나씩만 가졌다. 실제 화면은 그렇지 않다.

여러 개를 담는 노드

{ "type": "linear", "direction": "vertical", "spacing": 12, "alignment": "center",
  "children": [ ... ] }

linear 는 children 을 받는다. 그리고 세 가지만 정한다.

direction — vertical 또는 horizontal
spacing — 사이 간격
alignment — 가로축 정렬

가로로 놓고 싶으면 같은 노드에 direction 만 바꾼다. 자식은 손대지 않는다.

{ "type": "linear", "direction": "horizontal", "spacing": 16,
  "children": [
    { "type": "box", "width": 90, "height": 56, "decoration": { "color": "#ede9fe", "borderRadius": 10 } },
    { "type": "box", "width": 90, "height": 56, "decoration": { "color": "#ddd6fe", "borderRadius": 10 } },
    { "type": "box", "width": 90, "height": 56, "decoration": { "color": "#c4b5fd", "borderRadius": 10 } } ] }

box 는 크기와 겉모습을 가진 사각형이다. 자식을 넣으면 그 자식의 그릇이 되고, 안 넣으면 그냥 색칠한 면이다. 위 세 개는 자식이 없다.

좌표가 없다

이 화면 정의 어디에도 top, left, x, y 가 없다. 그건 이 런타임이 게을러서가 아니다.

화면이 서버에서 온다는 건, 화면을 만든 쪽이 화면이 놓일 자리의 크기를 모른다는 뜻이다. 906바이트짜리 이 파일은 1000픽셀 폭에서도, 태블릿에서도, 창을 반으로 줄인 데스크톱에서도 같은 파일이다. 좌표를 적으면 그 셋 중 하나에서만 맞다.

방향과 간격은 크기를 모르고도 적을 수 있다. 그래서 이 층에는 그것만 있다.

검사 — 좌표가 들어오면 실패

grep -qE '"(top|left|right|bottom|x|y|dx|dy)"' screens/step2.json && \
  die "step2: the layout is positioned by hand"
grep -q '"direction"' screens/step2.json || die "step2: no direction"
grep -q '"spacing"' screens/step2.json || die "step2: no gap"

앞의 두 줄은 방향 반대다. 첫 줄은 있으면 실패, 나머지는 없으면 실패.

이 검사가 필요한 이유는 렌더 결과만 보면 구분이 안 되기 때문이다. 좌표로 찍어도 지금 이 화면과 똑같은 그림이 나온다 — 창 크기가 안 바뀌는 동안은.

렌더

step2  906 B, 12 lines, type "page" -> step2.png

세로 linear 안에 글자 둘과 가로 linear 하나. 가로 안에 색이 다른 상자 셋. spacing 이 12와 16이라 두 층의 간격이 눈에 띄게 다르다.

크기를 어디까지 적을 것인가

box 에는 width, height 를 적었다. 좌표는 아니지만 절대값이긴 하다.

이 구분이 실무에서 애매해진다. 기준은 하나다 — 바깥을 알아야 정할 수 있는 값이면 화면 정의에 적지 않는다. 상자의 크기는 상자 자신의 성질이라 적을 수 있고, 상자의 위치는 형제와 부모를 알아야 정해지므로 linear 에 맡긴다.

직접 돌려보기

cd content/sample/course-ui
bash verify.sh
open captures/step2.png

screens/step2.json 에서 "direction": "horizontal" 을 "vertical" 로 바꾸고 다시 돌리면, 상자 셋이 세로로 선다. 호스트는 안 건드린다.

가져갈 것

linear — direction · spacing · alignment
box — 크기와 겉모습, 자식은 선택
좌표 금지 검사 — 렌더 결과로는 구분이 안 되므로 정의를 본다

다음 편

여기까지 화면은 고정이다. 파일에 적힌 글자만 나온다. 다음은 파일에 없는 값이 화면에 나오는 방법.