GN⁺: 클레이 – UI 레이아웃 라이브러리
(nicbarker.com)-
Clay 소개
- Clay는 C 언어로 작성된 플렉스박스 스타일의 UI 자동 레이아웃 라이브러리임.
- 선언적 문법과 마이크로초 단위의 성능을 제공함.
- 현재 이 웹페이지의 레이아웃도 Clay로 구성되어 있음.
-
주요 특징
-
고성능
- 플렉스박스 스타일의 반응형 레이아웃을 지원함.
- 단일
.h파일로 C/C++에서 사용 가능하며, 15kb의.wasm파일로 컴파일 가능함. - 약 2000줄의 C99 코드로 구성되어 있으며, C 표준 라이브러리를 포함한 의존성이 없음.
- Raylib, WebGL Canvas, HTML 등 다양한 렌더러와 함께 사용 가능함.
- 사용자 정의 엔진이나 환경에서 쉽게 합성할 수 있는 유연한 출력 제공함.
-
선언적 문법
- 중첩된 UI 요소 계층 구조를 가진 유연하고 읽기 쉬운 선언적 문법을 제공함.
- 루프, 조건문, 함수와 같은 표준 C 코드와 요소를 혼합할 수 있음.
- 텍스트, 이미지, 사각형과 같은 UI 기본 요소로 재사용 가능한 컴포넌트 라이브러리를 생성할 수 있음.
-
고성능
- 매 프레임마다 전체 UI를 다시 계산할 수 있을 만큼 빠름.
- 정적 할당 및 재사용을 통해 3.5mb의 작은 메모리 사용량을 가짐.
malloc/free를 사용하지 않음. - 표준 성능 해킹을 피함으로써 애니메이션과 반응형 UI 디자인을 단순화함.
-
-
렌더러 및 플랫폼 독립성
- RECTANGLE, TEXT, IMAGE와 같은 기본 렌더 명령의 정렬된 배열을 출력함.
- 몇 백 줄의 코드로 자신만의 렌더러를 작성하거나, Raylib, WebGL 캔버스 등의 제공된 예제를 사용할 수 있음.
- HTML 렌더러도 제공되며, 현재 보고 있는 페이지가 그 예임.
-
통합 디버그 도구
- "Chrome Inspector" 스타일의 내장 디버그 도구를 포함함.
- 실시간으로 레이아웃 계층 구조와 구성을 확인할 수 있음.
- "d" 키를 눌러 지금 바로 시도해 볼 수 있음.
Hacker News 의견
-
몇 천 줄의 코드로 멋진 것을 만들 수 있음이 인상적임. Flex보다는 CSS Grid를 선호하여 Nim으로 CSS Grid 레이아웃 라이브러리를 만들었음. Clay와 레이아웃 알고리즘을 비교해볼 예정임. C 인터페이스를 노출할 수 있을지 궁금함
- CSS Grid를 좋아하는 이유는 다음과 같은 형식을 모방할 수 있기 때문임
- GitHub 링크
-
HTML과 Canvas 간 전환 버튼이 있는데, iOS Safari + Dark Reader에서는 HTML 페이지가 다크 모드로 변환되지만 Canvas 페이지는 그렇지 않음. 이로 인해 감동이 줄어듦
-
개발자가 만든 훌륭한 YouTube 비디오를 시청했음. 매우 인상적임
-
UI 논리를 드로잉 명령 세트와 분리하는 아이디어가 매우 유용하고 다재다능함. microui에서 처음 보았으며, WASM과 Canvas2D를 사용하여 브라우저에서 쉽게 라이브러리를 사용할 수 있었음
- WASM에서 레이아웃을 하고 HTML로 렌더링하는 아이디어가 훌륭함
- microui 링크
-
애니메이션 이후의 모든 텍스트가 선택되지 않음. 포커스가 도난당한 것 같음
-
웹사이트에서 링크를 오른쪽 및 중간 클릭하면 왼쪽 클릭처럼 작동함
-
첫 번째 초안으로 괜찮음. HTML 출력이 div 요소로만 구성된 것이 아쉬움. 접근성을 조금 더 고려하면 좋을 것 같음. 텍스트를 선택하려고 하면 재렌더링으로 인해 선택이 해제됨
-
C로 2000줄의 코드와 의존성 없이 구현한 것이 멋짐. Haskell/OCaml로 더 안전하게 구현할 수 있지 않을까 생각했음
-
Rust로 작성된 taffy도 있으며, C 바인딩이 진행 중임
-
프론트엔드 개발자가 아니어서 CSS를 직접 사용하거나 CSS 프레임워크/라이브러리를 사용하는 것보다 이 방법이 왜 더 나은지 이해하기 어려움. 이미 수백 개의 CSS 프레임워크가 존재하는데, 이와 같은 기능을 수행하는 것 같음