AI UI의 병목은 화면이 아니다

AI가 화면을 만드는 속도는 이미 놀라울 정도로 빨라졌다. 버튼을 만들고, 카드를 배치하고, 대시보드의 형태를 잡는 일은 예전보다 훨씬 짧은 시간 안에 끝난다. 그런데 막상 실제 제품을 만들기 시작하면 이상한 일이 벌어진다.

화면은 빨리 만들어지는데, 제품은 생각보다 빨리 완성되지 않는다.

카드 하나의 크기가 변하면 옆의 요소가 밀려난다. 화면 너비가 달라지면 배치가 깨진다. 새로운 패널을 끼워 넣으면 다른 영역이 예상치 못한 위치로 이동한다. 웹에서는 그럭저럭 작동하던 구조가 다른 환경으로 넘어가면서 다시 설계 대상이 되기도 한다.

생성형 AI 시대의 UI 문제를 단순히 ‘화면을 얼마나 빨리 그리느냐’의 문제로만 보면 이 지점을 놓치기 쉽다. 실제 제품에서 중요한 것은 요소를 생성하는 속도가 아니라 수많은 요소가 서로의 공간을 어떻게 나눠 갖도록 만들 것인가이기 때문이다.

최근 Hacker News에서 주목받은 Taffy는 바로 이 문제를 다루는 라이브러리다. Taffy는 Rust로 작성된 크로스플랫폼 UI 레이아웃 라이브러리로, CSS Block과 Flexbox, CSS Grid 방식의 레이아웃 계산을 구현한다.

중요한 점은 Taffy가 새로운 GUI 프로그램 자체가 아니라는 것이다. 버튼이나 메뉴를 직접 보여주는 완성형 UI 툴킷이 아니라, 다른 UI 프레임워크 안에 들어가 각 요소가 어디에 놓이고 얼마나 커져야 하는지를 계산하는 엔진에 가깝다.

DOM과 비슷한 노드 트리를 만들고 각 노드의 스타일과 부모·자식 관계를 전달하면, 결과로 각 노드의 2차원 위치와 크기를 계산한다. 화면이 아니라 화면 아래의 ‘공간 배분 규칙’을 담당하는 셈이다.

이 차이는 생각보다 중요하다.

AI가 UI 코드를 더 많이 생성하게 될수록 화면의 구성 요소는 더 빠르게 늘어난다. 그러나 구성 요소가 많아질수록 레이아웃의 상호작용도 복잡해진다. 생성 속도가 올라갈수록 오히려 구조를 통제하는 계층의 중요성이 커질 수 있다.

Taffy를 흥미롭게 볼 이유도 여기에 있다. 이 프로젝트 하나가 UI 개발의 미래를 결정한다는 의미가 아니다. 다만 Taffy의 구조를 따라가 보면 AI 시대에 어떤 기술이 점점 더 가치 있어지는지를 읽을 수 있다.

앞으로 중요한 것은 ‘무엇을 생성할 수 있는가’보다 생성된 것들을 어떤 규칙 아래 배치하고 재사용하며 통제할 수 있는가일 가능성이 높다.

그리고 이 관점은 개발자에게만 해당하지 않는다. AI로 서비스와 업무 도구를 만드는 개인, 프로토타입을 빠르게 만드는 창작자, 여러 플랫폼을 동시에 다뤄야 하는 작은 팀도 같은 질문을 마주하게 된다.

어디까지 AI에게 맡기고, 어디부터 구조를 직접 설계해야 하는가.

생성보다 구조가 어려워지는 이유

Taffy의 역할을 이해하려면 먼저 UI를 두 층으로 나눠볼 필요가 있다.

첫 번째는 무엇을 보여줄 것인가다. 버튼, 입력창, 이미지, 카드, 목록과 같은 구성 요소가 여기에 속한다. 생성형 AI가 특히 빠르게 접근하고 있는 영역이기도 하다.

두 번째는 그 요소들이 서로 어떤 관계를 맺을 것인가다. 부모와 자식이 어떻게 연결되고, 공간이 부족할 때 무엇이 줄어들며, 요소가 추가됐을 때 어디까지 밀려나야 하는지를 결정하는 문제다.

Taffy는 두 번째 영역을 담당한다.

Taffy의 레이아웃 모델에서는 UI를 노드의 트리로 바라본다. 각 노드는 스타일을 가지고 있고, 부모·자식 관계를 형성한다. 엔진은 이 구조를 바탕으로 각 요소의 위치와 크기를 계산한다.

이런 구조는 AI UI 생성에서 특히 의미가 있다. AI가 개별 컴포넌트를 잘 만드는 것과, 그 컴포넌트들이 전체 시스템에서 안정적으로 작동하는 것은 다른 문제이기 때문이다.

프레임워크가 아니라 기반 계층을 본다

새로운 개발 도구를 볼 때 많은 사람은 먼저 “이걸로 무엇을 만들 수 있는가”를 묻는다.

하지만 Taffy는 그 질문만으로 평가하기 어렵다. 독립적인 GUI 툴킷이 아니라 다른 UI 시스템 내부에 들어가는 구성 요소이기 때문이다.

고수준 API에서는 TaffyTree가 노드를 저장하고, 레이아웃 결과를 캐싱하며, 적절한 레이아웃 알고리즘을 선택하는 과정까지 내부적으로 처리한다.

반대로 더 깊은 통합이 필요한 경우에는 저수준 API를 사용할 수 있다. 기존 UI 시스템이 자체적인 노드 구조를 유지하면서 Flexbox나 Grid 같은 계산 로직만 가져다 쓰는 방식이다.

여기서 실전적인 판단 기준이 하나 나온다.

새로운 AI 도구나 오픈소스를 볼 때 완성품인가, 기반 계층인가를 먼저 구분해야 한다.

완성품은 당장 사용할 수 있는 기능을 보여준다. 기반 계층은 눈에 잘 보이지 않지만 여러 제품과 프레임워크에 반복적으로 들어갈 가능성이 있다.

Taffy가 Servo, Blitz, Bevy, Slint, iocraft 등에 사용되고 있고, Floem을 통해 Lapce에, GPUI를 통해 Zed에도 사용된다는 사실은 이 특성을 잘 보여준다.

즉 이런 프로젝트를 평가할 때 화면의 화려함보다 “다른 시스템 안에 얼마나 자연스럽게 들어갈 수 있는가”가 더 중요한 평가 항목이 된다.

누구에게 이 변화가 중요한가

모든 사람이 레이아웃 엔진을 직접 만들 필요는 없다.

오히려 중요한 것은 자신이 어느 위치에 있는지를 구분하는 것이다.