스타일링
✅ 요구사항
- 다양한 스타일링 방법의 특징과 차이를 이해하고, 프로젝트 상황에 적합한 방법을 선택한다.
- 직접 스타일링 할 수 있는 방법 중 한 가지를 팀 내에서 자율적으로 결정하고 도입한다.
- 프로젝트에서 사용할 스타일링 방법이 명확히 정해져 있다.
- 결정한 이유가 문서화되어 있다.
- 기술적 선택의 이유를 설명할 수 있다.
✅ 사용 가능한 도구는?
- CSS
- CSS Modules
- CSS-in-JS (Emotion 등)
- Zero Runtime CSS-in-JS (Vanilla extract 등)
- CSS Preprocessor (SASS 등)
단순한 생각은...
CSS, CSS Modules, Emotion은 모두 미션을 진행하면서 직접 사용해보았다. 내가 단순하게 정리한 생각은 이렇다.
먼저 CSS는 별도의 설치가 필요 없다는 점은 좋았지만, 스타일의 범위가 글로벌이기 때문에 클래스명 충돌 가능성을 항상 고려해야 한다는 점이 번거로웠다. 그래서 탈락.
CSS Modules는 이 문제를 해결해 클래스명 충돌을 막아주긴 하지만, props 기반 조건부 스타일링이 Emotion만큼 자연스럽고 편하지 않다는 단점이 있었다. 그래서 이것도 탈락.
Emotion은 앞의 두 도구와 달리, props를 기반으로 한 동적 스타일링이 강력하고 편리하다. 하지만 한 가지 차이점이 있다. 스타일을 동적으로 처리하기 때문에 런타임이 필요하다는 점이다. 다시 말하자면, emotion은 단순히 css를 컴파일해서 브라우저에 넘겨주는 도구가 아니다. 앱이 실행될 때(= JS 코드 실행 시점), JS 코드로 스타일을 계산해서 DOM에 <style> 태그를 직접 추가한다. 그래서 런타임 비용이 발생한다. 이는 초기 렌더링 시간을 지연시킬 수 있다.
그럼에도 Emotion을 선택하고 싶다. 개발 속도와 생산성이 중요하다고 판단했다. props 기반 동적 스타일링이 자연스럽고 직관적이다. 컴포넌트 단위 스타일 관리가 쉬워 유지보수가 편하다. 디자인 시스템 구축에도 잘 어울린다. Emotion의 런타임 비용으로 인한 성능 문제는 다른 기술적 최적화 방법으로 충분히 해결할 수 있을 것이라고 생각한다. (찾아보니 '@emotion/babel-plugin으로 빌드 시 CSS 추출' 등 여러 방법이 있는 것 같다.)
사용자 스토리 작성으로 비교
Spotify 팀은 스타일링 도구를 선정할 때 사용자 스토리와 기능을 정의하고, 각 항목별로 객관적인 점수를 매겨 결정하는 POS 과정을 거친다고 한다. (링크)
그래서 나도 이전 미션에서의 경험을 가지고 스타일링 도구를 비교해보았다.
기능이 존재하지 않으면 0점, 기술 부채를 유발하는 경우에는 1점, 완벽하게 제공되면 2점이다.
- 사용자 스토리 (기능)
- HTML 코드를 보면 대략 어떤 스타일인지 알 수 있기를 바란다. (직관적 이해)
- 클래스명을 정하는 데 너무 많은 시간 쓰지 않길 바란다. (CSS 네이밍 부담 최소화)
- CSS를 보기 위해 파일 위아래를 왔다갔다 하지 않도록 하고 싶다. (CSS 위치 접근성)
- HTML 용량을 줄이기 위해 클래스명을 난독화하고 싶다. (production에서 클래스명 난독화)
- 타입스크립트로 값을 올바르게 사용하는 데 자신감을 갖고 싶다. (타입스크립트 지원)
- 자세하고 최신화된 공식 문서를 원한다. (문서화)
- 다양한 조직에서 검증된 프레임워크를 사용하고 싶다. (커뮤니티 해결 사례)
- 디자인 시스템 값에 대한 자동완성이 있으면 좋겠다. (VSC 자동완성)
- 색상 미리 보기 등 VSCode에서 추가 도구를 사용할 수 있으면 좋겠다. (도구 확장성)
- 배운 기술이 다른 사이드 프로젝트나 직장에서 그대로 쓸 수 있으면 좋겠다. (기술 이전 가능성)
| 사용자 스토리 | CSS | CSS Modules | Emotion |
|---|---|---|---|
| HTML 코드를 보면 스타일 직관적 이해 | 2 | 2 | 1 |
| CSS 네이밍 부담 최소화 | 0 | 2 | 2 |
| CSS 위치 접근성 (파일 위아래 이동 필요) | 0 | 1 | 2 |
| 프로덕션 클래스명 난독화 | 0 | 2 | 2 |
| 타입스크립트 지원 | 0 | 1 | 2 |
| 공식 문서 최신화 | 2 | 2 | 2 |
| 커뮤니티 검증 사례 | 2 | 2 | 2 |
| 디자인 시스템 자동완성 | 0 | 1 | 2 |
| VSCode 도구 확장성 (색상 미리보기 등) | 2 | 2 | 2 |
| 기술 이전 가능성 (다른 프로젝트 적용) | 2 | 2 | 2 |
| 최종 | 10 | 17 | 19 |
Spotify가 중요하게 생각하는 사용자 스토리 중 나에게 필요한 항목만 뽑아 점수를 매겨보니, Emotion이 가장 높은 점수를 기록했다. 특히 props 기반 조건부 스타일링, 타입스크립트 지원, 디자인 시스템 자동완성 등에서 CSS와 CSS Modules 대비 큰 차이를 보였다. 런타임 비용이라는 단점이 있긴 하지만, 이는 최적화로 해결할 수 있는 부분이고 개발 생산성 측면에서는 Emotion이 가장 적합하다고 판단했다.
emotion/styled VS emotion/react
아직 확정이 안 남.
🍵 마무리
앞으로도 계속 도구를 선택하게 될 텐데, 그 과정에서 더 나은 판단을 내릴 수 있는 선택의 감각을 키우기 위해 여러 방법을 시도해볼 계획이다!
