부스트캠프 팀프로젝트를 진행하며 우리팀은 스타일 언어로 Emotion을 선택했다.
이를 선택하는 과정에서 우리는 우리 프로젝트의 주요 기능이 각자의 은하를 꾸미고 감상하는 것이라는 점을 최우선으로 고려했다.
사용자는 우리 서비스를 이용하는 과정에서 대부분의 시간을 이 주요 기능에 집중하고 있을 것이다.
즉 CSS를 통해 꾸며져야할 UI와 같은 요소들은 그 자체로 매력적이기 보다 우리의 주요 기능인 3D 화면과 자연스럽게 어우러지기만 하면 문제가 없다.
CSS
우선 순수 CSS의 경우 팀프로젝트에 적합하지 않다고 판단했다.
가장 가벼운 CSS 이지만 class를 사용하건 id를 사용하건 서로가 구현한 selector의 이름까지 일일이 고려하며 구현 하는 것을 그리 효율적이지 않다.
가독성 또한 그리 좋지 않아 팀원에게 공유하기에도 그리 효율적이지 않다.
심지어는 어떤 CSS가 적용될지 예측하기도 어렵다.
그렇다고 우리 프로젝트가 순수 CSS를 사용해야 할 정도로 무겁지도 않기에 제외했다.
SCSS
CSS에 중첩, 변수 선언, 연산자 등을 도입해 단점을 어느정도 개선한 CSS 전처리기이다.
CSS의 단점을 어느정도 개선 했고 우리도 익숙한 만큼 이점은 있지만 selector 충돌 문제가 여전히 발생할 수 있고 JS에서 직접적인 스타일 수정이 불편한 문제가 있다.
또 여전히 어떤 스타일이 적용될지 예측하기 어렵다.
이에 CSS와 마찬가지로 제외했다.
Tailwind CSS
class를 통해 스타일을 미리 설정하고 사용하는 유틸리티 우선 CSS 프레임워크다.
컴포넌트 단위 생산성을 높일수 있다는 점에서 상당히 효율적이지만 우리 프로젝트에는 그리 적합하지 않다고 판단했다.
Tailwind CSS는 위에서 언급한 것처럼 반복적인 스타일을 사용하는 컴포넌트가 많은 경우 효과적이다.
하지만 우리가 진행하는 프로젝트는 컴포넌트도 그리 많지 않을 뿐더러 3D 화면에 어우러지는게 우선인 만큼 스타일에 많은 변동이 있을 수 있다.
이에 사전에 스타일을 설정하고 반복적으 사용하는 Tailwind CSS는 제외되었다.
CSS module
CSS를 모듈화 하여 import해서 사용하는 방식이다.
node-sass를 설치하면 SCSS에서도 동일하게 사용할 수 있다.
이 방식으로 class 이름을 설정하면 자동으로 뒤에 hash 값이 붙어 고유한 클래스로 인식하도록 한다.
이를 통해 selector 충돌 문제를 해결할 수 있다.
하지만 컴포넌트 단위의 React 프로젝트의 경우 각 컴포넌트 마다 CSS 파일을 만들어 줘야 한다.
CSS in JS
CSS module의 방대한 CSS 파일 문제를 해결하기 위한 방법이다.
각 컴포넌트에 맞는 CSS를 컴포넌트에 같이 작성해 관리하도록 한다.
이를 통해 위의 대부분의 단점들을 해결할 수 있다.
또한 JS 코드와 상태값을 공유 할 수 있는 장점이 있다.
하지만 이 방법 또한 단점이 없지는 않다.
CSS 파일을 따로 만들어 두지 않기 때문에 JS 내의 CSS 코드를 파싱하는 단계가 필요해 상대적으로 느리다.
매우 많은 컴포넌트가 사용되거나 복잡한 스타일 계산이 발생하는 경우 runtime overhead가 발생할 수 있다.
이를 해결하기 위한 zero-runtime과 nero-runtime이 나왔다.
하지만 우리 프로젝트의 경우 컴포넌트가 매우 적은 편에 속해 이러한 문제로 부터 자유롭다.
이에 상대적으로 최신에 등장해 호환성 문제가 있고 추가적인 설정이 필요한 zero-runtime이나 nero-runtime의 경우 제외했다.
styled-components VS Emotion
runtime CSS in JS 중 styled-components와 Emotion 중 선택을 했다.
그런데 전반적인 스타일 기능도 동일하고 sass 문법을 사용해 문법적 차이도 없었다.
성능적으로도 유의미한 차이를 보이지 않았다.
그럼에도 Emotion을 선택한 이유는 아래와 같다.
- label 기능을 통해 디버깅을 더 편하게 할 수 있다.
아래와 같이 label을 달면 디버깅 과정에서 클래스 명을 보고 그 태그가 원래 어떤 컴포넌트였는지 알 수 있어 편하다.
const container = (props: Props) => css`
label: container;
}
`;- CSS props 기능을 사용할 수 있다.
props를 통해 CSS 속성을 넘겨줘 스타일링을 할 수 있어 컴포넌트 재활용성이 더 높다.
약간의 차이만 있는 컴포넌트를 사용할때 효과적으로 사용 가능하다.
결론
Emotion와 styled-components 사이에는 성능적이 차이는 크게 두드러지지 않았다.
그러나 팀프로젝트를 진행함에 있어 우리가 생각하기에 좀 더 편리한 기능을 일부 지원해 Emotion을 선택하게 되었다.
