StyleX 소개하기
생성일: 2024-01-27
수정일: 2024-01-27
StyleX를 소개하게 되어 매우 기쁘다. StyleX는 애플리케이션을 위한 표현력(expressive), 결정성(deterministic), 안정성(reliable), 확장성(scalable)을 갖춘 스타일링 시스템이다. 기존에 출시된 스타일링 라이브러리에서 최고의 아이디어를 가져와 친숙하면서도 독특하고 새로운 것을 만들었다.
StyleX란?
StyleX는 CSS-in-JS 라이브러리의 개발자 경험을 컴파일-타임 툴을 사용하여 정적 CSS의 성능 및 확장성과 연결한다. 하지만 StyleX는 단순한 컴파일러 기반 CSS-in-JS 라이브러리가 아니다. StyleX는 대규모 애플리케이션, 재사용 가능한 컴포넌트 라이브러리, 정적으로 타입이 지정된 코드베이스의 요구사항을 충족하도록 세심하게 설계되었다.
- StyleX는 CSS의 여러 기능들을 지원한다. 복잡한 선택자(selector)를 피하고 생성된 CSS에서 명시도 충돌이 발생하지 않도록 보장한다.
- StyleX는 스타일을 "아토믹" CSS 클래스 이름으로 변환, 구성 및 최적화한다. 별도 유틸리티 클래스 라이브러리를 학습하거나 관리할 필요가 없다.
- StyleX를 사용하면 파일과 컴포넌트 경계를 넘어 스타일을 병합할 수 있으므로 사용자 정의가 가능한 컴포넌트 라이브러리에 이상적이다.
- StyleX는 완전 타입화되어 있으며 타입 유틸리티를 제공하여 컴포넌트에서 허용할 수 있는 속성과 값을 세밀하게 제어할 수 있다.
StyleX의 이점은?
빠르다
StyleX는 컴파일 타임과 런타임 모두에서 빠르도록 설계되었다. 바벨 변환으로 인해 빌드 속도가 크게 느려지지 않는다.
런타임에 스타일을 삽입하기 위해 JavaScript를 사용할 때 발생하는 비용을 완전히 피할 수 있으며, 필요한 경우 클래스 이름 문자열을 효율적으로 결합하는 것만 수행한다. 또한 생성된 CSS는 크기에 맞게 최적화되어 가장 큰 웹사이트의 스타일도 브라우저에서 빠르게 파싱할 수 있다.
확장성
StyleX는 메타(Meta)에서 사용하는 코드베이스와 같이 매우 큰 규모의 코드베이스로 확장할 수 있도록 설계되었다. Babel 플러그인은 아토믹 빌드와 파일 수준 캐싱을 활용하여 컴파일 시 수천 개의 컴포넌트에서 스타일 처리를 처리할 수 있다. 또한 StyleX는 스타일을 캡슐화하도록 설계되었기 때문에 다른 컴포넌트 내에서 사용하면 예측 가능한 렌더링을 기대하면서 새로운 컴포넌트를 독립적으로 개발할 수 있다.
StyleX는 아토믹 CSS 클래스 이름을 생성함으로써 CSS 번들의 크기를 최소화하는 데 도움이 된다. 애플리케이션의 컴포넌트 수가 증가함에 비례하여 CSS 번들의 크기가 증하지 않는다. 따라서 개발자는 CSS 파일을 수동으로 최적화하거나 지연 로드할 필요가 없다.
예측가능성
StyleX는 생성된 규칙 간에 충돌이 발생하지 않도록 CSS 선택자의 명시도를 자동으로 관리한다. StyleX는 개발자에게 스타일을 안정적으로 적용하는 시스템을 제공하고 "마지막으로 적용된 스타일이 항상 승리"하도록 보장한다.
컴포저블
StyleX 스타일은 쉽게 작성할 수 있다. 여러 로컬 스타일을 조건부로 적용할 수 있을 뿐만 아니라 파일과 컴포넌트 간에 스타일을 전달할 수도 있다. 스타일은 항상 예측 가능한 결과로 병합된다.
타입 안정성
타입스크립트 또는 플로우(Flow) 타입을 사용하여 컴포넌트가 허용하는 스타일을 제한할 수 있다. 모든 스타일 프로퍼티와 변수는 완전히 타입화된다.
코로케이션
StyleX는 스타일을 사용하는 컴포넌트와 동일한 파일에 스타일을 작성하는 것을 허용하고 권장한다. 이러한 공동 위치는 장기적으로 스타일을 더 가독성 있고 유지 관리하기 쉽게 만드는 데 도움이 된다. StyleX는 정적 분석 및 빌드-타임 툴을 사용하여 여러 컴포넌트에서 스타일을 중복 제거하고 사용하지 않는 스타일을 제거할 수 있다.
테스트 가능
StyleX는 기능적 아토믹 클래스 이름 대신 디버그 클래스 이름을 출력하도록 구성할 수 있다. 이는 사소한 디자인 변경에 대응하여 자주 변경되지 않는 스냅샷을 생성하는 데 사용할 수 있다.
StyleX의 작동원리
StyleX는 함께 작동하는 여러 도구의 모음이다.
- 바벨 플러그인
- 작은 런타임 라이브러리
- ESLint 플러그인
- 번들러 및 프레임워크와의 통합을 위한 플러그인들
StyleX에서 가장 중요한 부분은 바벨 플러그인이다. 이 플러그인은 소스 코드에 정의된 모든 스타일을 찾아서 추출하고 컴파일 시 이를 아토믹 클래스 이름으로 변환한다. 헬퍼 함수는 수집된 스타일을 중복 제거, 정렬하고 CSS 파일에 작성한다. 이러한 도구는 번들러 플러그인을 구현하는 데 사용된다.
StyleX를 최대한 자연스럽게 사용할 수 있도록 로컬 상수와 표현식을 사용하여 스타일을 정의하는 다양한 정적 패턴을 지원한다. 또한 최상의 성능을 제공하기 위해 바벨 플러그인은 가능한 경우 최종 클래스 이름을 미리 계산하여 주어진 파일에서 클래스 이름 병합을 포함한 모든 런타임 비용을 제거한다. 컴포넌트가 동일한 파일 내에서 스타일을 정적으로 정의하고 사용하는 경우 런타임 비용은 0이 된다.
스타일 컴포지션과 같은 보다 강력한 패턴을 사용하는 경우, 작은 런타임이 클래스 이름의 객체를 동적으로 병합한다. 이 런타임은 매우 빠르게 최적화되어 있으며 결과는 메모화된다.
StyleX의 기원
이전 Facebook 웹사이트는 CSS 모듈과 유사한 것을 사용했고 여러 가지 문제로 어려움을 겪었으며, 이는 CSS-in-JS의 초기 아이디어에 영감을 주었다. facebook.com 방문자는 평균적으로 수십 메가바이트의 CSS를 다운로드했다. 대부분은 사용되지 않았다. 초기 로드를 최적화하기 위해 CSS를 지연(lazy) 로드하면 업데이트 시간이 느려질 수 있었다. 복잡한 선택자를 사용하면 충돌이나 '명시도 전쟁'이 발생할 수 있다. 엔지니어는 문제를 해결하기 위해 !important나 더 복잡한 선택자를 사용하는 경우가 많았고, 이는 전체 시스템을 점점 더 악화시켰다.
몇 년 전, React를 사용해 facebook.com을 처음부터 다시 구축할 때, 우리는 더 나은 무언가가 필요하다는 것을 깨닫고 StyleX를 구축했다.
StyleX는 확장이 가능하도록 설계되었으며, 수년간의 사용 경험을 통해 그 우수성이 입증되었다. 우리는 성능이나 확장성을 후퇴시키지 않으면서도 새로운 기능을 추가하여 StyleX를 더욱 즐겁게 사용할 수 있도록 만들었다.
StyleX를 사용하면서 확장성과 표현력이 모두 크게 향상되었다. facebook.com에서는 수십 메가바이트의 지연 로드된 CSS 번들을 수백 킬로바이트의 단일 번들로 줄일 수 있었다.
웹에서 React 개발자의 스타일링 요구를 충족시킬 뿐만 아니라 웹과 네이티브에서 React의 스타일링을 통합하기 위해 StyleX를 만들었다.
Meta에서는 어떻게 StyleX를 사용하는가?
StyleX는 메타 내의 모든 웹 서피스에서 컴포넌트의 스타일을 지정하는 데 선호되는 방법이 되었다. StyleX는 Facebook, WhatsApp, Instagram, Workplace, Threads 등 Meta의 모든 주요 외부 및 내부 제품의 React 컴포넌트 스타일을 지정하는 데 사용된다. 컴포넌트를 작성하는 방식이 바뀌었고, 스타일이 지정된 컴포넌트를 캡슐화하고 확장할 수 없어 팀이 겪었던 문제를 해결했다.
메타의 엔지니어가 StyleX를 사용하여 정적 및 동적 스타일을 모두 작성할 수 있도록 StyleX의 원래 기능을 확장했다. 우리 팀은 StyleX 테마 API를 사용하여 다양한 메타 제품 내에서 사용되는 다양한 디자인 시스템의 외관을 취하도록 테마가 지정된 "범용" 컴포넌트를 개발하고 있다. 또한 스타일X가 React Native의 스타일링 시스템에 도입된 캡슐화 원칙과 일치하기 때문에 크로스 플랫폼 스타일링에 대한 지원을 점차 확대하고 있다.
오픈소스
우리가 오픈소싱하는 것은 내부적으로 사용하는 것이다. 우리는 Github에서 먼저 개발한 후 다시 Meta에 동기화한다. StyleX는 원래 메타에서 메타를 위해 만들어졌지만, 메타에만 국한된 것은 아니다.
그렇지만 이것은 아직 시작에 불과하다. 앞으로 커뮤니티와 협력하여 추가적인 최적화와 더 많은 통합 기능을 도입할 수 있기를 기대한다.
