Method 1 / Method 2 — 무엇이 다르고, 왜 순서가 중요한가

§ 0한 줄 요약

두 방법은 “어느 축의 여유를 쓰는가”로 갈린다. 나머지 차이는 모두 여기서 파생된다.

width          = 그대로   ← 핵심
줄 수           = 그대로
text height     = 그대로 (실측값)
container height ↑ 가능
y 좌표          변경 가능

text width       ↑      ← 핵심
container width  ↑
줄 수             ↓
text height       ↓ 가능
x / y 좌표        변경 가능

§ 1박스가 두 개다 — 텍스트 bbox ≠ 컨테이너

이 문제에서 가장 먼저 분리해야 하는 개념. 둘을 하나로 보면 알고리즘이 성립하지 않는다.

알고리즘은 텍스트와 컨테이너를 독립된 두 요소로 보지 않는다. 언제나 한 쌍(pair)으로 다룬다 — “텍스트가 들어갈 최소 높이”가 컨테이너 높이의 하드 제약이 되는 형태로.

// 컨테이너 의미론의 인코딩 — 이 한 줄이 §3·§6의 출발점
hard:  h_container ≥ textHeight(w_container, fontScale)   // 넘치면 안 된다
soft:  w_container = w_orig   (strong)                    // 폭은 되도록 유지
soft:  gap_1 = gap_2 = …      (medium)                    // 여백은 되도록 균등
weak:  (x, y) = (x_orig, y_orig)                          // stay constraint = 최소 변위

§ 2절대좌표는 고정인가? — 아니다

두 방법 모두 원래 좌표를 가능한 한 지키지만, hard constraint로 못박지는 않는다.

이 “최소 변위 재배치”를 담당하는 것이 Abacus / VPSC 계열이다. 목적함수가 정확히 “디자이너의 원본에서 최소로 벗어나기”이므로 우리 문제와 그대로 맞물린다.

§ 3Method 1 세로 공간 재분배 — 숫자 3개짜리 장난감 예제

페이지 높이 600px, 요소 3개. 5단계를 눌러가며 보면 Method 1이 하는 일 전부가 보인다.

Method 1이 하는 일 — 5줄

1. 텍스트 width를 유지한다 → 줄바꿈이 고정된다 → 예측이 필요 없다
2. 현재 렌더된 실측 텍스트 높이를 그대로 쓴다
3. 컨테이너 높이를 필요한 만큼 증가시킨다 (hug)
4. 주변 여백을 회수·재분배한다
5. 필요하면 주변 요소의 y 좌표를 최소한만 이동한다

§ 4여백 대수와 Abacus는 다른 질문에 답한다

둘이 비슷해 보이지만 담당 질문이 다르다. 구현에서 두 모듈로 분리하는 게 맞다.

총 남은 여백 220px
→ 55 / 55 / 55 / 55

min Σ wᵢ(vᵢ − dᵢ)²
s.t. uᵢ + gap ≤ vⱼ

순서는 여백 대수로 목표 좌표(di)를 만들고 → Abacus로 법제화(legalize). 반대로 하면 Abacus가 만든 좌표를 여백 대수가 다시 깨뜨린다.

§ 5공용 엔진 Abacus PlaceRow를 직접 돌려보기

“최소 변위”가 왜 단순 밀어내기보다 나은지는 숫자로 보면 바로 납득된다. 슬라이더로 B를 키워보자.

단순 밀어내기는 오른쪽 요소만 계속 밀린다. Abacus는 겹치는 박스들을 클러스터로 병합하고 클러스터의 최적 위치를 가중평균으로 잡아, 왼쪽 요소도 조금 물러나게 해서 총 변위를 나눠 갖는다. solver 없이 좌→우 1패스, 선형시간에 정확해.

function placeRow(cells /* ideal 기준 정렬 */, xMin, xMax) {
  const clusters = [];
  for (const c of cells) {
    const last = clusters.at(-1);
    // 앞 클러스터와 안 겹치면 새 클러스터, 겹치면 흡수
    if (!last || last.x + last.w <= c.ideal) clusters.push(newCluster());
    addCell(clusters.at(-1), c);
    collapse(clusters, xMin, xMax);          // 병합 연쇄 해소
  }
  return clusters.flatMap(cl => layoutInside(cl));
}

function addCell(cl, c) {
  cl.cells.push(c);
  cl.wsum += c.weight;
  cl.q    += c.weight * (c.ideal - cl.w);    // ← cl.w = 클러스터 내 offset
  cl.w    += c.w;
  cl.x     = cl.q / cl.wsum;                 // ← 가중평균 = 이 클러스터의 최적 위치
}

function collapse(clusters, xMin, xMax) {
  for (;;) {
    const cl = clusters.at(-1);
    cl.x = clamp(cl.q / cl.wsum, xMin, xMax - cl.w);   // 페이지 경계 반영
    const prev = clusters.at(-2);
    if (!prev || prev.x + prev.w <= cl.x) break;       // 안 겹치면 확정
    merge(prev, cl); clusters.pop();                   // 겹치면 앞으로 흡수하고 재계산
  }
}

§ 6Method 2 폭을 넓혀 줄 수를 줄이기

먼저 오해 하나를 지우자. “텍스트 높이가 작아진다”는 fontSize를 줄인다는 뜻이 아니다.

슬라이더를 왼쪽↔오른쪽으로 움직여 보면 관계가 명확하다.

text width ↑
  → 줄바꿈 감소
    → line count ↓
      → text bounding box height ↓        (fontSize는 그대로!)

예: fontSize = 24px 유지
   width 120 → 3줄 → text height 90
   width 180 → 2줄 → text height 60
   width 300 → 1줄 → text height 30

즉 Method 2는 글씨를 작게 만드는 대신, 옆의 빈 공간을 써서 세로 공간을 확보하는 방식이다. Method 1이 “세로에서 세로를 빌린다”면 Method 2는 “가로에서 세로를 빌린다”.

§ 7Minimal Configuration — 후보를 K개로 줄이기

줄 수는 폭에 대해 부드럽게 감소하지 않는다. 계단처럼 변한다. 그래서 모든 폭을 후보로 볼 필요가 없다.

위 표의 “지배되는 구간”이 요점이다. 어떤 구간이 전부 3줄이라면 — 가령 150 ~ 219px가 전부 3줄이라면 — 3줄을 선택할 거면 그 구간의 가장 작은 폭만 보면 된다. 나머지 폭은 같은 높이에 폭만 낭비하므로 지배(dominated)된다. 남는 후보는:

configs = [(w₁,h₁), …, (w_K,h_K)]
  w_k = min{ w : n(w) ≤ k }     ← k줄이 되는 최소 폭 (폭에 대한 이분탐색)
  h_k = k · λ

h_min(w) = λ · min{ k : w ≥ w_k }   ← 근사 없이 정확
w₁ = max-content,  w_K ≥ min-content

이 후보 집합이 minimal configuration이고, 단어 W개인 텍스트는 최대 W개의 후보를 갖는다. 즉 우리 문제의 유일한 진짜 난점(계단함수)이 근사 없이 이산 선택으로 환원된다.

§ 8Constraint Graph & Slack — 얼마나 넓힐 수 있나

Method 2에서 텍스트를 무한정 넓힐 수는 없다. 오른쪽이 비어 보여도 실제로는 제약이 걸려 있다.

옆에 공간이 있어 보여도 ⓐ 이웃이 핀 고정일 수 있고 ⓑ 다른 요소와 정렬 관계가 있고 ⓒ 페이지 경계를 넘을 수 있고 ⓓ 최소 gap을 유지해야 한다. 그래서 현재 위상과 제약을 그래프로 만들고 묻는다:

“A가 다른 제약을 깨지 않고 추가로 몇 px까지 커질 수 있는가?”

이 여유가 slack이다.

Slack이 결정되면 선택은 단순한 필터 + 최선 선택이 된다. 후보 중 wk ≤ wcur + slack인 것만 남기고, 그중 줄 수가 가장 적은(= 세로를 가장 많이 아끼는) 것을 고른다.

maxWidth = w_cur + horizontalSlack(A)

feasible = configs.filter(c => c.w <= maxWidth)
if (feasible.length === 0) → Method 2로도 못 푼다 → 열화 래더로
chosen  = feasible.at(-1)          // 줄 수 최소 = 높이 최소

Method 2에서도 Abacus가 필요한 이유

A의 폭을 키우면 옆 요소와 부딪힌다. [A]   [B] → [A A A][B]. 결국 x 좌표를 최소한만 이동해 다시 배치해야 하고, 줄 수가 줄어 text height가 바뀌면 y축도 다시 조정한다. Abacus는 Method 1 전용이 아니라 두 방법의 공용 배치 엔진이다 (§5의 데모를 그대로 x축에 쓰면 된다).

§ 9Method 2는 왜 렌더 재검증이 필수인가

“width = 220이면 2줄이 될 것이다”는 실제 렌더 전 예측이다. 예측은 틀릴 수 있다.

render(sheetJson)
→ measure()
→ assert(예측 줄 수 === 실제 줄 수)
→ assert(넘침 없음)
→ assert(신규 겹침 없음)

(a) 폭 고정 → (b) 줄바꿈 높이 측정 → (c) 컨테이너 세로 확장
→ (d) 최소 변위로 위치 법제화(Abacus/VPSC)
→ (e) 폭이 바뀌었거나 페이지를 넘쳤으면 (a)로

§ 10최종 비교표

vertical container growth
+ gap redistribution
+ Abacus

minimal configuration
+ constraint graph slack
+ width expansion
+ Abacus
+ render verification

§ 11구현할 때의 정신 모델

처음부터 width · height · font · lineCount · x · y · gap을 전부 동시에 최적화하지 않는다.

먼저 Method 1로 width 고정 → 줄바꿈 고정 → 실측 데이터만 사용해서 얼마나 해결되는지 확인한다. 그래도 세로 공간이 부족한 케이스에만 Method 2로 넘어가 width 변경 → 줄바꿈 변경 → 예측 + 실제 렌더 검증을 쓴다.

파이프라인 스켈레톤

function replaceLayout(sheet: SheetJson): SheetJson {
  // 0. 사전계산 — 컨테이너·폰트크기당 1회. 루프 안에서 재측정 금지
  const configs = new Map(textNodes.map(n => [n.id, minimalConfigs(n)]));

  // 1. 위상 동결 — 관계 그래프는 절대 탐색 변수로 풀지 않는다 (다항성의 근원)
  const G = freezeRelations(sheet);   // 좌/우 · 상/하 · 정렬 그룹 · 최소 gap

  // 2. 실측 — 지금 렌더된 상태를 읽는다
  const m = measure(sheet);          // 줄 수, 텍스트 높이, 넘침량
  if (!m.hasOverflow) return sheet;

  // ── Method 1 : 폭 고정, 세로만 ─────────────────────────────
  let out = hugContainersVertically(sheet, m);      // h_i ← textHeight (실측)
  out = redistributeGaps(out, G, 'y');             // 여백 대수 (공간 분배)
  out = abacus(out, G, { axis: 'y', bias: 'y' });  // 최소 변위 법제화

  if (fits(out)) return out;                        // ✅ 예측 0회로 끝

  // ── Method 2 : 가로 slack을 빌려 줄 수를 줄인다 ───────────────
  for (const n of overflowing(out)) {
    const maxW  = n.w + horizontalSlack(G, n);      // constraint graph
    const cand  = configs.get(n.id)!.filter(c => c.w <= maxW);
    if (!cand.length) continue;                    // 이 노드는 Method 2로도 안 됨
    n.w = cand.at(-1)!.w;                          // 줄 수 최소 후보
    n.predictedLines = cand.at(-1)!.k;
  }
  out = abacus(out, G, { axis: 'x' });             // 가로 충돌 정리
  out = redistributeGaps(out, G, 'y');
  out = abacus(out, G, { axis: 'y', bias: 'y' });

  // 3. 렌더 재검증 — Method 2에서는 사실상 필수
  const v = render(out);
  if (v.lines !== predicted || v.hasOverflow) return fallbackLadder(out, v);
  //   열화 래더: 기하 → 여백 → 자간 → 수평 → 행간(≤20%) → 폰트(≥0.90)
  return out;
}