지난 FECONF 2025 컨퍼런스에서 '완전한 ZERO COST CSS-IN-JS, Devup-UI' 강연을 들은 적이 있다. 해당 강연을 들으면서 그동안 여러 프로젝트에서 CSS 프레임워크와 CSS-in-JS를 사용해왔지만, 내부 동작 원리를 제대로 이해하지 못한 채 생각없이 활용해왔다는 사실을 깨달았다.
그래서 이번 오픈소스 컨트리뷰션 활동을 통해서 CSS-IN-JS가 무엇인지 제대로 이해하고, Devup UI의 Zero Cost 런타임 구현 방식을 비롯한 코어 개념을 심층적으로 학습하고자 했다. 아래는 올해 활동에 참여한 전체적인 내용과 후기이다.
프로젝트 구조를 살펴보다
멘토님께서 OT 시간에 해당 오픈소스의 문서화가 매우 시급하다고 강조하셨기에,
핵심 로직을 6가지 섹션으로 체계화하여 영어로 문서화하는 작업을 목표로 설정했다.
단순히 코드를 보고 이해하는 것보다 설계 의도와 배경을 직접 듣는 것이 중요하다고 판단했다.
나는 한달동안의 시간동안 하나의 프로젝트의 하나의 섹션에 집중하고 싶었다.
그래서 팀을 나누기로 제안했고, 첫번째 프로젝트인 Devup UI의 문서작성 팀에 합류하게 되었다.
Rust 빌드와 삽질기
Rust는 이번 프로젝트에서 처음 설치해보고 다뤄봤다.
빌드 명령어 하나를 실행하기까지 꽤 오랜 시간이 걸렸다...
러스트 자체를 이해하긴 어려웠지만 덕분에 빌드 파이프라인이 어떻게 연결되는지,
Rust와 TypeScript가 어떤 인터페이스로 통신하는지 감을 잡을 수 있었다.
이후에는 멘토님의 가르침에 따라 레포지토리를 클론해서 실행해보았다.
Rust와 WebAssembly를 기반으로 만들어진 코어 구조가 꽤 낯설었지만,
직접 빌드해서 실행보니 생각보다 매끄럽게 작동했다.
그중 내가 문서를 작성하기 위해 가장 많이 참고한 부분은 lib 디렉토리였다.
여기서 실제 스타일을 분석하고, 중복을 제거하며, 결과적으로 원자적 CSS 클래스를 생성하는 역할을 담당하고 있었다.
처음에는 CSS-in-JS인데 런타임이 없을수가 있나라는 생각이 들었지만,
코드를 직접 뜯어보니 빌드 시점에서 스타일을 전부 계산해버리는 구조라는 것을 이해했다.
즉, 자바스크립트가 브라우저에서 돌기도 전에 이미 CSS가 완성된다는 뜻이었다.
AST 변환과 스타일 스토리지
Devup UI의 핵심은 AST(Abstract Syntax Tree) 변환 과정이었다.
개발자가 작성한 JSX나 TSX 코드에서 스타일 정보를 추출해 트리 형태로 변환한 뒤,
이 트리를 기반으로 Style Storage라는 단일 객체에 스타일을 캐싱한다.
여기서 인상적이었던 점은 'Storage는 단 하나만 존재해야 한다'는 철학이었다.
즉, 여러 컴포넌트가 동시에 스타일을 생성하더라도 Storage가 전역적으로 중복을 감지해,
이미 등록된 스타일은 재활용하도록 되어 있었다.
이는 빌드 결과물에서 중복된 CSS를 완전히 제거해주는 효과를 냈다.
N/M Base 시스템과 타입 추론
문서를 작성하며 또하나 새롭게 배운 개념이 바로 N/M Base System이었다.
이는 Tailwind의 spacing scale처럼 일관된 단위를 관리하는 시스템이었는데,
흥미롭게도 Devup UI에서는 이를 타입 시스템과 결합시켜
숫자 단위를 곧 타입으로 연결되는 구조를 만들어두었다.
또한 이밖에도 런타임을 최소화하기 위한 다양한 방법들이 있는데, 이는 문서에 작성해두었다.
문서 작성 작업
코드보다 문서가 늦으면, 결국 프로젝트는 남들에게 닫히게 될 수 밖에 없다는 말씀이 뇌리에 박혔다.
나도 마찬가지로 처음 해당 오픈소스 페이지에 접근했을때 사용방법을 몰라서 당황했었는데,
이후에 사용하는 사람들을 위해서라도 핵심 로직 여섯 가지를 정리한 문서를 내가 작성해보기로 마음먹었다.
먼저 Zero Runtime 구조를 중심으로,
AST 변환 → 스타일 캐싱 → 중복 제거 → 타입 추론 → N/M Base → 최적화
이렇게 여섯 개 섹션을 흐름대로 구성했다.
문서 형식은 Tailwind CSS 프레임워크와 작년에 참여했던 Continue의 구조를 참고해 작성했다.
또한 영어로 작성하고 가능한 한 코드 예시를 추가해, 국내외 개발자들도 쉽게 이해할 수 있도록 했다.
내가 작성한 문서들은 다음 링크에서 확인할 수 있다!
https://devup-ui.com/docs/overview
Pull Request와 피드백
나는 이번 컨트리뷰션 활동에서 총 두 번의 PR을 날렸다.
첫 번째 PR에서는 Zero Runtime 프로세스 전반을 문서화했고,
두 번째 PR에서는 Style Storage와 Type System 파트를 보완했다.
PR을 올릴 때는 단순히 문법 교정 수준이 아니라,
각 메커니즘이 해결하는 문제와 기존 솔루션 대비 개선점을 명확히 기술하려고 했다.
예를 들어, Emotion이나 Styled-components에서 발생하는 런타임 CSS 재생성 비용을
Devup UI는 어떻게 정적 분석으로 제거했는지를 중점적으로 다뤘다.
물론 내가 코어로직을 개발하지 않았기 때문에 처음에는 틀린 부분이 많았다..
잘못된 부분은 멘토님의 피드백대로 수정하고 방향성을 잡기 어려울때는 목차 자체에 대한 질문도 많이 했었다.
최종적으로는 일부 설명을 더 명확히 다듬고 수정하여 두 개의 PR이 머지되었다!
회고
이번 오픈소스 컨트리뷰션 활동은 단순한 문서 작성이 아니라, CSS in JS가 어떻게 동작하는지 이해하고
런타임이라는 개념 자체를 제거한 설계로 이뤄진 라이브러리를 탐구할 수 있는 유익한 시간이었다.
단순히 읽는 개발자에서 '이해하고 설명하는 개발자'로 한 발자국 나아가는 계기가 되었다.
또한 또한 오프라인 모임이 끝난 후 저녁에는 팀당 지원비를 활용하여 멘토님 및 멘티들과 함께 식사 시간을 가졌다.
작년 활동은 대부분 온라인으로 이뤄져 친목을 다룰 기회가 없었는데,
나를 제외하고 거의 직장인분들이셔서 각자의 개발 경험과 관심사를 자유롭게 나눌 수 있었다.
개발뿐만 아니라 이런 인사이트를 나누고 인맥을 쌓는 활동도 신입 개발자 취준 입장에서 무척이나 중요한 것 같다.
벌써 OSSCA 활동도 2년째 참가중인인데, 앞으로도 꾸준히 오픈소스 생태계에 참여하는 개발자로 성장하고 싶다!!☺️
'Activities > OSSCA' 카테고리의 다른 글
| [OSSCA] Continue 오픈소스 기여해보기 (3) | 2024.10.13 |
|---|---|
| [OSSCA] Continue에서 커스텀 프롬프트 만들기 (0) | 2024.10.01 |
| [OSSCA] vscode에서 Continue 익스텐션 설치 및 설정하는 방법 (1) | 2024.09.21 |