# 클레이 – UI 레이아웃 라이브러리

> Clean Markdown view of GeekNews topic #18365. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=18365](https://news.hada.io/topic?id=18365)
- GeekNews Markdown: [https://news.hada.io/topic/18365.md](https://news.hada.io/topic/18365.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2024-12-21T08:38:05+09:00
- Updated: 2024-12-21T08:38:05+09:00
- Original source: [nicbarker.com](https://www.nicbarker.com/clay)
- Points: 2
- Comments: 1

## Topic Body

- **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" 키를 눌러 지금 바로 시도해 볼 수 있음.

## Comments



### Comment 32569

- Author: neo
- Created: 2024-12-21T08:38:05+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=42463123) 
- 몇 천 줄의 코드로 멋진 것을 만들 수 있음이 인상적임. Flex보다는 CSS Grid를 선호하여 Nim으로 CSS Grid 레이아웃 라이브러리를 만들었음. Clay와 레이아웃 알고리즘을 비교해볼 예정임. C 인터페이스를 노출할 수 있을지 궁금함
  - CSS Grid를 좋아하는 이유는 다음과 같은 형식을 모방할 수 있기 때문임
  - [GitHub 링크](https://github.com/elcritch/cssgrid)

- HTML과 Canvas 간 전환 버튼이 있는데, iOS Safari + Dark Reader에서는 HTML 페이지가 다크 모드로 변환되지만 Canvas 페이지는 그렇지 않음. 이로 인해 감동이 줄어듦

- 개발자가 만든 훌륭한 YouTube 비디오를 시청했음. 매우 인상적임
  - [YouTube 링크](https://www.youtube.com/watch?v=DYWTw19_8r4)

- UI 논리를 드로잉 명령 세트와 분리하는 아이디어가 매우 유용하고 다재다능함. microui에서 처음 보았으며, WASM과 Canvas2D를 사용하여 브라우저에서 쉽게 라이브러리를 사용할 수 있었음
  - WASM에서 레이아웃을 하고 HTML로 렌더링하는 아이디어가 훌륭함
  - [microui 링크](https://rxi.github.io/microui_v2_an_implementation_overview.html)

- 애니메이션 이후의 모든 텍스트가 선택되지 않음. 포커스가 도난당한 것 같음

- 웹사이트에서 링크를 오른쪽 및 중간 클릭하면 왼쪽 클릭처럼 작동함

- 첫 번째 초안으로 괜찮음. HTML 출력이 div 요소로만 구성된 것이 아쉬움. 접근성을 조금 더 고려하면 좋을 것 같음. 텍스트를 선택하려고 하면 재렌더링으로 인해 선택이 해제됨

- C로 2000줄의 코드와 의존성 없이 구현한 것이 멋짐. Haskell/OCaml로 더 안전하게 구현할 수 있지 않을까 생각했음

- Rust로 작성된 taffy도 있으며, C 바인딩이 진행 중임
  - [taffy 링크](https://crates.io/crates/taffy)

- 프론트엔드 개발자가 아니어서 CSS를 직접 사용하거나 CSS 프레임워크/라이브러리를 사용하는 것보다 이 방법이 왜 더 나은지 이해하기 어려움. 이미 수백 개의 CSS 프레임워크가 존재하는데, 이와 같은 기능을 수행하는 것 같음