금융 트레이딩 회사 제인스트리트(Jane Street)가 사내 웹 애플리케이션을 만드는 데 쓰는 UI 라이브러리 '본사이(Bonsai)'를 공개했다. 본사이는 OCaml로 반응형 웹 앱을 만들기 위한 라이브러리로, OCaml 코드를 자바스크립트로 변환하는 Js_of_ocaml 위에서 동작한다. 설계 철학의 일부는 함수형 프론트엔드 언어 Elm에서 영향을 받았다. 제인스트리트는 임직원 디렉터리 같은 일반 사내 도구부터 트레이딩 시스템을 모니터링하고 제어하는 도구까지 거의 모든 내부 웹 앱을 본사이로 구축한다고 밝혔다.
상태·증분·렌더링을 분리한 설계
본사이의 컴포넌트는 순수 함수형 상태 기계(state machine)로 구현되며 서로 쉽게 조합할 수 있다. 프레임워크 내부에 '증분화(incrementalization)'가 내장돼 있어, 어떤 값이든 실제로 필요해지기 전까지는 다시 계산되지 않는다. 여기서 중요한 점은 이 증분화가 화면(view)에만 적용되는 것이 아니라 모든 값에 적용된다는 것이다.
대부분의 웹 프레임워크는 상태 관리, 증분 계산, 렌더링을 'UI 컴포넌트'라는 하나의 추상화 안에 뭉뚱그린다. 반면 본사이는 상태 원시요소와 증분 원시요소를 필요에 따라 골라 조합하도록 한다. 사용자 조작 시 페이지 전체가 다시 그려지는 것을 막는 데 쓰이는 원시요소를, 실시간으로 갱신되는 데이터셋 위에서 비용이 큰 비즈니스 로직 계산을 증분화하는 데에도 그대로 쓸 수 있다는 것이다. 제인스트리트는 리액트(React)에 익숙한 개발자를 위해 '모든 것이 훅(hook)과 매우 유사한 방식으로 동작하고, 상태는 컴포넌트 계층 바깥에서 관리된다고 상상하면 된다'고 설명했다.
상태가 컴포넌트에 묶이지 않는다
상태가 특정 컴포넌트에 종속되지 않기 때문에, 사용자가 페이지를 조작하는 동안 상태의 수명 주기와 범위(scope)를 관리하기 위한 별도의 방대한 API가 제공된다. 예컨대 탭 인터페이스처럼 상태를 가진 UI 컴포넌트 여러 개를 다른 컴포넌트 안에 끼워 넣을 때, 개발자가 내부 컴포넌트의 상태를 일일이 앱 최상위 모델로 끌어올릴(hoist) 필요 없이 본사이가 상태 관리를 대신 처리한다. 이는 규모가 커질수록 상태 관리가 지저분해지는 기존 방식과 대비되는 지점이다.
본사이가 OCaml로 작성됐다는 사실도 실무적으로 의미가 크다. 백엔드와 프론트엔드에서 같은 언어와 같은 타입을 쓸 수 있기 때문이다. 오류를 줄이기 위해 OCaml의 타입 시스템을 곳곳에서 적극 활용하는 조직이라면, 이 점이 대형 웹 앱 코드베이스의 가독성과 관리 가능성에 미치는 영향은 상당하다. 실제로 제인스트리트는 과거 터미널 UI만 있던 여러 내부 시스템의 기존 타입과 비즈니스 로직을 이 프레임워크를 통해 손쉽게 웹으로 이식했다고 한다. 이 밖에 자체 템플릿 언어, 컴포넌트별 스타일시트, 앱 전체를 대상으로 한 자동화 테스트 체계도 함께 제공된다.
브라우저를 열지 않고도 하는 테스트
본사이의 강점으로 꼽히는 기능은 현실적인 테스트를 쉽게 작성할 수 있다는 점이다. UI 요소를 프로그램으로 조작하면서 DOM이 어떻게 변하는지 관찰하는 방식이다. 공개된 예시에서는 텍스트 박스에 입력한 내용이 'hello' 메시지 뒤에 붙는 사용자 선택기를 테스트한다. 여기에는 두 개의 expect 블록이 등장하는데, 하나의 시나리오 안에서 여러 단정(assertion)을 하고 설정·헬퍼 코드를 그 시나리오에만 국한시키기 위한 구조다. 첫 블록은 UI를 눈에 보이게 만들고, 차이(diff)를 담은 둘째 블록은 텍스트를 프로그램으로 입력한 뒤의 동작을 보여준다. 본사이는 사용자 입력에 따라 HTML 속성이나 클래스 이름이 어떻게 바뀌는지까지 보여주며, 테스트에 모의(mock) 서버 호출을 포함하거나 UI뿐 아니라 이를 구동하는 상태의 변화까지 다룰 수 있다. 덕분에 브라우저를 한 번도 열지 않고 컴포넌트 하나를 통째로 작성하는 것이 가능하다.
한 가지 유의할 점은 본사이 라이브러리 자체가 이름이 주는 인상보다 더 범용적이라는 것이다. 본사이의 핵심은 웹 전용이 아니라 '증분적이고 조합 가능한 상태 기계'를 만드는 범용 도구다. 우리가 흔히 말하는 웹 UI 기능은 이 핵심 위에 브라우저용으로 특화한 Bonsai_web이 담당한다. 같은 원리로 터미널 기반 대화형 UI를 만드는 Bonsai_term도 있으며, 만우절용으로는 반응형 VR UI를 위한 Bonsai_vr 프로토타입까지 나온 적이 있다.
정리하면 본사이는 특정 회사의 대규모 실무 환경에서 검증된, 상태·증분·렌더링을 분리해 조합하는 접근을 택한 프레임워크다. 다만 OCaml과 Js_of_ocaml이라는 생태계 특성상 진입 장벽이 있으므로, 도입을 검토하는 국내 개발팀이라면 자사 스택과의 정합성과 학습 비용을 함께 따져봐야 한다. 처음 접하는 이들에게는 공식 문서인 'Bonsai Quick Start'와 'Thinking in Bonsai'가 실습 기반의 출발점으로 안내된다.