원문 : https://www.adebayosegun.com/blog/the-future-of-chakra-ui
The future of Chakra UI 글을 읽고 Chakra UI가 기존에 어떤 문제가 있었고 왜 zag.js, ark, panda 와 같은 라이브러리를 만들고 있는지를 알게 됐습니다. 개인적으로 오픈소스를 좋아하는 입장에서 Chakra UI 창시자의 고민들이 인상깊어 번역을 진행했습니다.
원작자 Sage님의 허락을 받은 후 번역했습니다.
저는 지난 5년동안 Chakra UI 팀에서 일하고 있고, 우리 팀이 함께 성취한 것을 매우 자랑스럽게 생각합니다. 우리의 성장하는 팀과 함께 우리는 매월 190만건 이상의 다운로드, 매월 200만 건 이상의 웹사이트 방문, 31,000개 이상의 Github star를 달성했습니다. 이것은 지금까지 나에게 가장 보람있는 프로젝트중 하나였습니다.
단일 메인테이너로 시작한 프로젝트가 여러개의 프레임워크 팀이 되기까지 이는 긴장되고 흥미진진한 과정이었습니다. 코어 Chakra 팀을 성장시키고 관리하는 것은 정말 즐거운 일이었으며 앞으로도 계속 그럴 것입니다.
이제 Chakra UI의 다음 단계를 살펴보겠습니다. 여러분과 공유하게 되어 매우 기쁩니다.
Quick recap
Chakra UI 를 시작할 때 제 목표는 복잡한 UI를 구축하기 위해 구성할 수 있는 접근가능한 UI 컴포넌트를 만드는 것이었습니다. 저는 React 사용 수준에 상관없이 누구든 사용할 수 있는 컴포넌트 시스템을 만들고 싶었고 싶었습니다.
그동안 Styled System, Styled Components와 Emotion은 앱과 디자인 시스템을 스타일링하기 위한 가장 인기있는 도구였습니다. Styled System을 사용하는 Brent Jackson 의 작업에 영감을 받아 Chakra UI의 스타일링 기반을 구축하기 위해 많은 아이디어를 활용했습니다.
// Here's a box
<Box>I'm a box</Box>
// 배경을 red로 하고 싶다면 `background=red`를 넘겨주면 돼요. 직관적입니다!
<Box background="red">I'm a red box</Box>
// hover할 때 배경색을 바꾸고 싶다면
<Box background="red" _hover={{ background: 'blue' }}>
I'm a red box that turns blue on hover
</Box>Chakra UI의 굉장히 직관적이고 유연한 스타일링 시스템는 라이브러리에서 가장 사랑받는 기능 중에 하나입니다. 이 라이브러리를 사용할 때마다 Chakra와 같은 도구가 존재한다는 사실은 저를 기쁘게 합니다.(그렇습니다. 비록 제가 만들었지만)
헤드리스(headless) 컴포넌트, 디자인 토큰, 서버 컴포넌트를 둘러싼 생태계의 최근 추세로 인해 컴포넌트 라이브러리에 대한 기대가 바뀌고 환경이 변화하고 있습니다.
저는 Chakra UI를 어떻게 진화시킬지 생각해왔고 가장 지배적인 생각 중 하나는 이를 “디자인 시스템 인프라(Design System Infrastructure)”로 전환하는 것입니다. 한번 보도록 합시다.
The Challenge
주된 기술적인 단점으로 Chakra UI는 @emotion/styled 의존성 때문에 런타임 CSS-in-JS를 가집니다. 이는 Chakra에만 그런 것이 아니라 Material UI, Mantine, Theme UI와 같은 인기있는 라이브러리에서도 똑같습니다.
런타임 CSS-in-JS를 제거하는 것은 사용자로부터 받은 가장 흔한 요구 중 하나입니다. 이는 더 좋은 성능을 내고, 초기 JS 페이로드를 줄이고 React 서버 컴포넌트(RSC)에서 Chakra를 사용할 수 있도록 하기 때문입니다.
네 “런타인 CSS-in-JS를 없앨 수 있나요?”라고 묻는 DM이 80개 이상 있을 거에요.
다른 요구사항으로는 data picker, 커스텀 select, 중첩 menu 와 같은 복잡한 컴포넌트를 추가해달라는 것입니다. 지금 우리는 활용될 수 있는 많은 React hook을 가지지만, 새로운 기능이나 패치를 통해 컴포넌트의 작동 방식을 이해하는 데 필요한 인지 부하가 크게 증가한다는 것을 발견했습니다.
UI 컴포넌트에 대한 API를 설계하고 유지보수하기 직관적이고 쉬운 해결책에 도달하는 것은 어려운 일입니다.
이렇게 말하긴 했지만 우리는 확실히 data picker와 커스텀 select를 개발하고 있습니다 😉
많은 시니어 엔지니어링 및 인재를 갖춘 대규모 팀과 일할 때 우리는 light와 dark 모드를 넘어 멀티브랜드 솔루션이 될 수 있는 보다 강력한 테마 솔루션의 필요성을 인식합니다.
가장 일반적인 요청은 다음과 같습니다. “Figma Token이나 Style Dictionary와 같은 토큰 플랫폼을 Chakra의 테마 솔루션과 어떻게 통합할 수 있습니다?”
The Requirements
이런 도전 과제들에 대해 생각하면서 “물론 그렇게 작업할 수 있습니다”라고 말하고 React 특정 솔루션을 만드는데 많은 시간을 쏟아붓는 거는 쉽습니다. Chakra UI는 이제 멀티 프레임워크 라이브러리라는 점을 명심하면 Vue.js 팀에서도 동일한 노력이 중복되어야 함을 의미합니다. 우리는 전부터 이 방법을 시도해왔고 번아웃과 일관되지 않는 DX로 이어지기 때문에 실행 가능한 옵션이 아닙니다.
저는 이러한 과제를 해결해줄 최선책이 더 작고, 관리하기 쉬운 수준으로 쪼개는 것임을 찾았습니다. 엔지니어링 정신에 따라 요구사항을 정의하는 것은 문제를 해결하기 위한 중요한 첫번째 단계입니다.
Chakra UI의 미래에 대한 몇 가지 요구사항은 다음과 같습니다.
- Framework agnostic: Chakra UI는 멀티 프레임워크 라이브러리입니다. React, Vue, Angular, Svelte, Solid에서 사용되곤 합니다. 이는 어떤 해결책이든 framework agnostic해야 함을 의미합니다.
- Design Token: Chakra UI에 테마 솔루션은 매우 간단하고 대부분의 상황에서 잘 작동해야 합니다. 하지만 더 복잡한 상황을 지원하기에는 충분히 유연하지 않습니다.
- Style Props: Chakra UI의 style props는 매우 직관적이고 사용하기 쉽습니다. 우리는 런타임 CSS-in-JS를 제거하더라도 이러한 경험을 유지할 필요가 있습니다.
- Reduce Maintainance Workload: 올바르게 설계한다면 관심사를 더 작고 관리하기 쉬운 수준으로 나눔으로써 라이브러리의 유지보수 비용을 줄일 수 있습니다.
휴! 많은 요구사항이 있습니다. 우리가 어떻게 올바르게 접근했는지 살펴봅시다.
The Approach
2022년 중반, state machine과 XState에 관심을 가졌습니다. 왜냐하면 이는 강제적인 약속을 제공해주기 때문입니다. 한번 복잡한 시스템을 설계하면 어디서든 그것을 재사용할 수 있습니다. 또한 이는 상태 차트를 시각화하고 디버깅하는 최고의 방법을 제공해줍니다.
이로 인해 "호기심의 구멍"에 빠졌고 UI 컴포넌트를 구축하기 위한 저수준의 state machine인 Zag.js라는 새로운 라이브러리 작업을 시작하게 되었습니다.
Lee Robinson과 Chakra의 미래와 우리가 다음을 위해 계획하고 있는 것이라는 주제로 영상을 찍었습니다. 여기서 볼 수 있습니다
https://www.youtube.com/watch?v=I5xEc9t-HZg
이 시점에서 이를 어떻게 달성할 것인지 전혀 몰랐지만 XState를 사용해 Chakra UI에 있는 컴포넌트들 중 몇개를 PoC(Proof of Concept, 개념 증명)하면서 더 명확해졌습니다.
Breaking the monolith
현재 저는 Chakra UI를 다양한 관심사를 가진 거대한 monolith로 생각합니다. react hook, 컴포넌트, 테마 시스템, 스타일링 시스템, polymorphic type 모두 끈끈하게 연결되어 있습니다.
몇 년동안 이는 코드베이스를 이해하거나 기여하는데 장벽을 만들어왔습니다. 각 부품이 어떻게 결합되는지 완전히 이해하는데 상단한 시간이 걸려 분류 및 버그 수정이 필요 이상으로 길어집니다.
복잡도를 줄이기 위해 Chakra를 더 작고 관리하기 쉽고 독립적인 프로젝트로 나누고 있습니다.
간단한 개요는 다음과 같습니다.
- Styling System: style props를 지원하는 Zero runtime CSS-in-JS system
- Design Token: design token을 작성, 문서화 및 자동화할 수 있는 곳
- State machines: 한번 컴포넌트 로직을 모델링하고 모든 곳에서 재사용합니다.
- Headless UI Components: state machine에 대한 특정 프레임워크 래퍼. 모든 프레임워크에 대한 Radix UI를 떠올리면 됩니다.
Zero runtime CSS-in-JS [Panda]
이것은 우리가 사용자로부터 받은 가장 일반적이고 도전적인 요구사항입니다.
런타임 CSS-in-JS와 style props는 개발자가 구성가능하고 예상가능하며 사용하기 쉬운 동적인 UI 컴포넌트를 구축하도록 해주는 강력한 기능입니다. 하지만 이는 성능과 런타임 비용이 따릅니다.
React 서버 컴포넌트가 출시됨에 따라 서버에서 Chakra UI 컴포넌트를 작성할 수 있게 제공하는 것은 중요해졌습니다. 이는 성능, 개발, 사용자 경험 측면에서 큰 이득입니다.
우리는 Chakra 스타일링 시스템의 뛰어난 기능을 대부분 유지하면서 빌드 시 스타일을 추출하는 새로운 framework-agnostic 스타일링 솔루션을 만들고 있습니다. 또한 개발 중 postcss 런타임에 스타일을 추출하는 PostCSS 플러그인도 제공합니다.
Panda는 CSS variable, cascade layer, W3C token 사양과 같은 새로운 최신 플랫폼 기능을 활용할 것입니다.
이 프로젝트는 아직 개발 초기 단계입니다. 테스트해보고 개선하는 데 도움을 주고 싶다면 트위터나 저에게 segun@chakra-ui.com로 이메일을 주세요
State machines for Components [Zag]
Chakra UI의 모든 상호작용하는 컴포넌트는 state machine으로 모델링될 것입니다. 우리의 핵심 원칙은 대부분의 컴포넌트가 프레임워크에 상관없이 간단하게 동작해야한다는 것입니다.
State machine는 우리가 컴포넌트 로직의 상태와 전환을 주의깊게 설계하도록 해줍니다. 이러한 접근 방식은 쉽게 디버깅가능하고 예상가능하며 관리하기 쉬운 컴포넌트를 구축하도록 해줄 것입니다.
Zag.js는 Chakra UI의 모든 컴포넌트를 구축하는데 사용되는 저수준의 state machine 라이브러리입니다. 우리는 대부분의 JS 프레임워크에서 작동하는 강력한 애플리케이션 및 이커머스 컴포넌트들을 개발하는 것을 목표로 합니다.
Zag.js에 대해 배우고 싶다면 이 문서를 확인해보거나(https://zagjs.com), 여기에서 Learn with Jason 쇼의 데모를 시청하실 수 있습니다.
https://www.youtube.com/watch?v=l8HJoE_ktDc
다음은 React와 Zag.js를 사용해 숫자 입력 컴포넌트를 구축한 간단한 예시입니다.
// 1. Import the state machine
import * as numberInput from '@zag-js/number-input';
// 2. Import the React bindings
import { useMachine, normalizeProps } from '@zag-js/react';
export function NumberInput() {
// 3. Consume the machine
const [state, send] = useMachine(numberInput.machine({ id: '1', max: 50, min: -50 }));
// 4. Convert machine to a user friendly API
const api = numberInput.connect(state, send, normalizeProps);
// 5. Render the component
return (
<div {...api.rootProps}>
<label {...api.labelProps}>Enter number:</label>
<div>
<button {...api.decrementButtonProps}>DEC</button>
<input {...api.inputProps} />
<button {...api.incrementButtonProps}>INC</button>
</div>
</div>
);
}Moving to a headless component system [Ark]
State machine과 함께 UI 컴포넌트를 구축하는 것은 흥미롭게 들리지만 때로는 복잡하고 두렵게 받아들여 질 수 있습니다. 때로는 이것을 사용하기 전에 State machine에 대해 알거나 적어도 배울 필요가 있다는 인상을 줄 수 있습니다. (전혀) 그렇지 않습니다.
채택률을 높이기 위해 Zag.js 컴포넌트 로직을 빠르게 애플리케이션과 디자인 시스템을 구축하는데 사용할 수 있도록 헤드리스 컴포넌트 라이브러리로 래핑했습니다.
import { NumberInput } from '@ark-ui/react';
export function Demo() {
return (
<NumberInput min={-50} max={50}>
<NumberInput.Label>Label</NumberInput.Label>
<NumberInput.Field />
<NumberInput.Control>
<NumberInput.DecrementTrigger>
<button>-1</button>
</NumberInput.DecrementTrigger>
<NumberInput.IncrementTrigger>
<button>+1</button>
</NumberInput.IncrementTrigger>
</NumberInput.Control>
</NumberInput>
);
}Chakra UI를 위한 헤드리스 컴포넌트 기반이 될 새로운 라이브러리 Ark를 만들었습니다.
이것은 오픈소스이고 여기서 확인할 수 있습니다. https://github.com/chakra-ui/ark
How does Ark fit in Chakra UI?
- Zag.js: UI 컴포넌트를 위한 저수준 state machine
- Ark: Zag.js 기반 헤드리스 컴포넌트 (대부분 DX 향상을 위한 것)
- Chakra: Ark + runtime CSS-in-JS
Panda가 정식 출시가 되면 새 프로젝트를 위해 Ark와 Panda로 전환하는 것이 좋습니다.
Design token platform [Ultra]
디자인 토큰은 현재 제품 혹은 웹 사이트에서 디자인 의사결정을 위해 빠르게 기준이 되어가고 있습니다. 디자인 토큰은 유연하고 확장가능하며 관리하기 쉬운 디자인 시스템을 구축하도록 하는 강력한 개념입니다.
Chakra UI는 현재 디자인 토큰이랑 컴포넌트를 어떤 수준의 디테일이든 테마 시스템을 커스텀할 수 있게 해줍니다. 또한 개발자가 애플리케이션에서 light와 dark 모드를 자동으로 구축할 수 있도록 시맨틱 토큰에 대한 지원도 추가했습니다. 대부분의 기업 애플리케이션에는 light와 dark 모드 이상의 기능이 필요합니다.
디자인 토큰 제작을 넘어 토큰을 다양한 플랫폼과 프로젝트로 변형하고 배포하는 것은 대부분의 디자인 시스템에서 있어 큰 어려움입니다.
제품 팀이 다음을 수행할 수 있게 해주는 SaaS 플랫폼인 UItra를 구축하고 있습니다.
- 핵심과 시맨틱 디자인 토큰을 시각적으로 생성합니다. (지루한 작업처럼 느껴지지 않음)
- 프로젝트 전반에 걸쳐 모범 사례, 공유 레이어 및 텍스트 스타일을 정의합니다.
- 검색 및 필터링을 위한 GPT 인터페이스를 통해 토큰에 대해 자동으로 문서를 제공합니다.
- 디자인 토큰을 다양한 플랫폼과 프로젝트에 배포합니다.
더 배우거나 투자하거나 이 프로젝트를 후원하고 싶다면 트위터 혹은 이메일로 저에게 연락주세요. segun@chakra-ui.com
What should I use in my project?
- 디자인 시스템을 구축하고 있고 API 설계, 스타일링, 번들 사이드를 제어하고 싶다면 Zag.js를 사용하세요.
- 디자인 시스템을 구축하고 있고 디자인과 UX에 집중하고 싶다면 Ark를 사용하세요.
- 애플리케이션을 구축하고 있고 시간이 지남에 따라 개선할 수 있는 좋은 기본 스타일을 갖춘 미리 만들어진 UI 컴포넌트를 원한다면 Chakra를 사용하세요.
- 런타임 CSS-in-JS가 괜찮다면 Chakra UI를 사용하세요 (Ark와 현재 CSS-in-JS 솔루션(런타임 CSS-in-JS)과 함께 제공됩니다.)
- 런타임 CSS-in-JS가 괜찮지 않다면 Ark와 Panda를 사용하세요.
Conclusion
우리는 아직 진행 중인 것이 많고 이런 것들을 공유하는 것이 즐겁습니다. 궁극적인 목표는 제품 팀을 위한 디자인 시스템 인프라스트럭처를 구축하는 것입니다.
기여, 투자 혹은 Chakra를 후원하고 싶다면 트위터 혹은 이메일로 저에게 연락주세요. segun@chakra-ui.com
Chakra UI의 미래를 위하여!
번역에 도움을 준 분
Thanks to @naro-Kim
