✅ 스타일 도구를 선정해야 할 필요성이 생겼다!
현재 나는 4인 1팀(기획, 디자인, FE, BE)으로 팀을 이뤄 해, 커리어(원티드 해커톤)에 참여중이다. 서비스를 개발하는 과정 중 스타일 도구를 선정해야 할 필요성이 있었다.
💡 단순히 익숙한 스타일 정의를 사용하기 보다는 각 방법의 장, 단점을 파악한 뒤 내가 개발할 서비스에 대입하여 어떤 방식이 가장 효과적일지 생각하였다. 그 생각의 과정과 결과를 블로그를 통해 작성하였다.
Styled Component 채택의 이유
스타일 도구의 사용 방법은 CSS-in-JS, css, sass 등 다양하다. 원티드 해커톤에 참가 중인 우리 팀은 styled-components(CSS-in-JS)를 채택했다.
어차피 FE 개발자는 나 혼자라서 혼자 채택한 것이지만..?
그럼 왜 styled-components(CSS-in-JS 방식)를 사용하기로 결정했고, 이 방식의 장단점을 알아보자.
CSS-in-JS란?
CSS-in-JS는 스타일 정의를 css나 scss 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다. 대표적으로는 styled-components, emotion 등의 라이브러리가 있으며, 이것을 import하여 활용한다.
기존 웹사이트는 HTML, CSS, JavaScript를 각자 별도의 파일로 두었는데, React나 Vue, Angluar와 같은 모던 자바스크립트 라이브러리가 인기를 끌고 컴포넌트 기반 개발 방법이 주류가 됨에 따라 한 컴포넌트에 HTML, CSS, JavaScript를 모두 포함하는 패턴이 많이 사용되고 있는 추세다. 특히 이러한 부분 때문에 CSS-in-JS가 더욱 각광받고 있다.
기존 방식(css, scss 등)의 단점
몇 가지 문제점이 있는데, 그 중 대표적인 것들 2개만 작성하겠다.
- 전역 관리
- css 파일은 전역적으로 관리해야 한다. 다른 디렉토리에서 작업을 하더라도 해당 파일이 또 다른 디렉토리에 영향을 미칠 수 있다.
- 유지보수
- 1번과 연결되는 부분이다. 전역적으로 관리한다는 것은 모듈화가 미흡하다는 의미이기 때문에, 작업이 크고 고도화 될수록 유지 보수에 더 많은 시간과 비용을 발생시킨다.
그에 반해, CSS-in-JS 방식을 사용했을 때의 장점은 다음과 같다.
CSS-in-JS의 장점
-
CSS의 컴포넌트화로 스타일시트의 파일을 유지보수 할 필요가 없다. CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화한다. (모듈성)
-
또한 CSS-in-JS는 Javascript 환경을 최대한 활용 할 수 있다.
-
JavaScript와 CSS 사이의 상수와 함수를 쉽게 공유 할 수 있다. 예를 들어, React에서는 props를 활용한 조건부 스타일링이 가능하다.
-
현재 사용중인 스타일만 DOM에 포함한다.
-
CSS-in-JS는 짧은 길이의 유니크한 클래스를 자동으로 생성하기 때문에 코드 경량화의 장점이 있다.
이러한 장점에도 불구하고, 몇 가지 단점 또한 존재한다.
CSS-in-JS의 단점
-
학습 곡선이 더 커집니다. JS 내에서 CSS까지 모두 다뤄야 한다.
-
별도의 라이브러리를 설치해야 하므로 번들 크기가 커진다.
-
인터랙션한 페이지일 경우 CSS 파일을 따로 관리하는 방법에 비해 느린 성능을 보여줄 수 있다.
FOUC(Flash of unstyled content): 브라우저에 보여줄 것들이 많아짐에 따라, 점차적으로 속도가 느려집니다. 특히, 컴포넌트가 렌더링되며 형태가 잡히기 때문에 원형의 모습이 잠깐 노출되는 현상인 FOUC가 나타납니다.
이는 바꿔 말하면 기존 방식(css, scss 등)의 장점이라고도 할 수 있다. 그러나 이를 개선하기 위해 CSS-in-JS에서도 css를 SSR 방식으로 넣어주는 등 다양한 노력을 이어가고 있다.
결론
-
이번 해커톤의 경우 큰 프로젝트를 하는 것이 아니고, 비교적 가벼운 기능을 구현하는 것이기 때문에 CSS-in-JS 방식이 더 적합하다고 생각하였다. 위에서 언급한 CSS-in-JS의 단점인 -번들 크기가 커진다, 인터랙션이 늦어진다- 등의 단점은 작은 규모의 프로젝트에는 크게 영향이 없을 것이라 생각하였다.
-
요즘은 많은 개발자들이 CSS-in-JS 방식을 채택하는 추세다. 따라서 CSS-in-JS 방식이 해결책이라고 생각하는 사람이 많습니다. 하지만, CSS-in-CSS와 CSS-in-JS 중 어떤 방식이 더 낫다고 쉽게 말할 수는 없다. 중요한 것은 용도에 맞는 선택이라고 생각하며, 지금 개발하려 하는 서비스가 어떤 용도로 사용되는지 정의하고 그에 맞는 방법을 선택해야 한다고 생각한다.
