원본 링크 :
개요
전 회사에서 열심히 썼던 styled-components가 공식적으로 기능 개발을 중단한다고 발표했다.
(사실 4월에 발표했으니 3달이나 지나긴 했다.)
CSS-in-JS의 최전선에서 활약하던 라이브러리가 이렇게 막을 내리게 된 것이다. 솔직히, 이미 예견된 일이라고 생각한다.
요즘 프론트엔드 생태계는 거의 [[Tailwind CSS]]로 기울어진 운동장이 되었고, CSS-in-JS는 점점 설 자리를 잃어가고 있었다. 이번 기회에 왜 styled-components가 죽어야 했는지, 그리고 요즘 CSS 개발은 어떤 방향으로 흘러가고 있는지 정리해보고자 한다.
1. Styled Components가 걸어온 길과 그 종말
Styled Components는 CSS-in-JS 진영의 절대강자였다. React 컴포넌트 안에서 CSS를 작성할 수 있게 해주는 혁신적인 아이디어로 많은 개발자들의 마음을 사로잡았다. 컴포넌트 기반 개발이 대세가 되면서, 스타일도 컴포넌트와 함께 관리하자는 철학은 분명 매력적이었다.
하지만 CSS-in-JS는 근본적인 한계가 있었다고 생각한다:
- 런타임 성능 오버헤드: 브라우저에서 스타일을 동적으로 생성하다 보니 성능에 부담이 갔다
- 번들 사이즈 증가: JavaScript 번들에 CSS 로직까지 포함되다 보니 크기가 커졌다
- SSR 복잡성: 서버사이드 렌더링 시 스타일 처리가 까다로웠다
- 개발자 경험의 아쉬움: CSS 자동완성이나 디버깅 도구의 지원이 제한적이었다
결국 이런 문제들이 누적되면서 개발자들이 다른 대안을 찾기 시작했던 것 같다.
2. Tailwind CSS의 압도적 승리
요새는 거의 모든 프로젝트가 Tailwind CSS로 넘어간 것 같다. 내가 보기에 Tailwind가 이렇게 널리 퍼진 이유는 다음과 같다:
- 빌드 타임 최적화: 사용하지 않는 CSS는 자동으로 제거되어 번들 크기가 작다
- 일관된 디자인 시스템: 미리 정의된 spacing, color 등으로 일관성을 유지하기 쉽다
- 빠른 개발 속도: HTML을 벗어나지 않고도 스타일링이 가능하다
- 러닝 커브: CSS를 아는 개발자라면 금방 익힐 수 있다
하지만 직접 사용해보니 Tailwind도 완벽하지는 않았다.
3. Tailwind의 현실적인 한계들
실무에서 Tailwind를 써보면서 느낀 아쉬운 점들이 있었다:
1. Figma 시안과의 괴리감 디자이너가 만든 시안의 미묘한 간격이나 색상을 Tailwind의 정해진 값으로 표현하기 어려운 경우가 많았다. 매번 custom class를 만들자니 Tailwind를 쓰는 의미가 희석되는 느낌이었다.
2. SCSS 대비 표현력 부족 복잡한 애니메이션이나 정교한 레이아웃을 구현할 때는 여전히 SCSS가 더 강력했다고 생각한다. Tailwind의 유틸리티 클래스만으로는 한계가 있었다.
3. 끔찍한 가독성 솔직히, className이 한 줄을 가득 채우는 코드를 보면 정말 답답했다. 코드 리뷰할 때도 스타일 변경사항을 파악하기가 쉽지 않았다.
4. 내가 선택한 절충안
그래서 이전 회사에서 디자인 시스템을 설계할 때는 나름의 절충안을 만들었다:
- Core Components: 공통 UI 라이브러리는 SCSS로 구현(figma에서 스타일을 그대로 갖다 쓸 수 있음)
- Business Logic: 각 업무 시스템에서는 Tailwind 활용(빠르고 수정하기 쉽고..)
- Design Tokens: 폰트, 색상, spacing 등은 별도 토큰으로 관리하여 양쪽에서 공유
이렇게 하니까 각각의 장점을 살리면서 단점은 어느 정도 보완할 수 있었다. 정교한 컴포넌트는 SCSS로, 빠른 프로토타이핑은 Tailwind로 해결하는 식이었다.
5. 기술 선택에 대한 단상
앞으로는 기술 선택을 할 때 미래 전망을 더 신중하게 고려해야겠다는 생각이 든다. Styled Components로 열심히 만든 프로덕트들을 생각해보면, 언젠가는 누군가 유지보수를 시도하다가 포기하고 전체를 다시 만들게 될 가능성이 높다.
물론 모든 기술이 언젠가는 레거시가 되는 것이 자연스러운 일이지만, 그래도 조금이라도 더 오래 버틸 수 있는 기술을 선택하는 것이 현명한 일이라고 생각한다.
사실, 가장 안전한 선택은 웹 표준에 가까운 기술들이다. CSS는 계속 발전하고 있고, CSS Grid, Flexbox, CSS Variables 등 네이티브 기능들이 점점 강력해지고 있다. 어쩌면 미래에는 지금의 프레임워크들 대신 순수 CSS로 돌아가는 날이 올지도 모른다.
결론
Styled Components의 죽음은 단순히 하나의 라이브러리가 사라지는 것 이상의 의미가 있다고 생각한다. 기술 생태계가 얼마나 빠르게 변하는지, 그리고 우리가 얼마나 유연하게 적응해야 하는지를 보여주는 사례다.
결국 완벽한 기술은 없고, 상황에 맞는 최선의 선택을 하는 것이 중요하다. 그리고 그 선택이 미래에도 유효할지 항상 고민해봐야 한다.
앞으로도 이런 변화들이 계속될 텐데, 특정 기술에 너무 의존하지 말고 본질적인 웹 기술에 대한 이해를 탄탄히 하는 것이 가장 좋은 대비책이 아닐까 싶다.
'개발자 이야기' 카테고리의 다른 글
언더커버 사일로 - 토스 챌린저스 감상평 (2) | 2025.06.24 |
---|---|
'커리어리'에서 회원가입 안하고 게시글 보는 방법 (0) | 2023.06.29 |
React(nextJS)에서 카카오 로그인 기능 구현하기 (0) | 2023.06.18 |
chatGPT, AutoGPT란 무엇인가? 그리고 얼마나 쓸만한가? (0) | 2023.04.22 |
AI로 키워드 던져주면 일러스트 그려주는 앱(프로토타입) (0) | 2022.12.07 |