Digital Studio

성공적인 웹 프로젝트를 위한 프론트엔드 스타일링: CSS-in-JS vs 전통적 CSS

안녕하세요! 이더블케이 담당자 설화입니다 😊

웹 프론트엔드 개발을 진행하다 보면 웹사이트 상에서의 디자인 구현 방식이 다양하다는 것을 깨닫게 됩니다.
많은 개발자들이 선택하는 대표적인 방법으로는 "CSS-in-JS"와 "기존 CSS" 방식이 있습니다.

각각 어떻게 이루어지는지, 어떤 이점과 한계가 있는지, 그리고 어떤 경우에 어떤 방식을 고르는 것이 좋은지 알기 쉽게 이야기해 보겠습니다.

🤔 CSS-in-JS란 무엇인가요?

말 그대로 "JavaScript 내에서 CSS를 작성하는 방법"을 CSS-in-JS라고 합니다. 바꿔 말하면, 스타일링을 외부 CSS 파일 대신 JavaScript 코드 내부에 작성하는 것입니다. 주요 라이브러리에는 Styled-Components, Emotion, JSS 등이 포함됩니다.

JavaScript 내 CSS의 장점

컴포넌트와 스타일을 통합적으로 관리 가능 하나의 파일 내에서 웹페이지의 구성 요소들과 스타일을 모두 작성할 수 있어서 관리 및 수정이 간편합니다. 스타일이 특정 구성요소에만 적용되기 때문에 다른 곳에서 스타일이 중복되는 경우가 감소할 것으로 예상됩니다.
스타일을 쉽게 변경할 수 있음 JavaScript의 변수를 이용하면 색상, 크기, 간격 등의 속성값들을 수정할 수 있습니다. 이를테면, 사용자가 직접 버튼의 색상을 원하는 대로 바꿀 수 있는 가능성이 열립니다.
더 이상 사용하지 않는 스타일이 자동으로 정리됨 기존 방식에서는 불필요한 스타일이 파일에 그대로 남아있어 비효율적인데, CSS-in-JS를 사용하면 미사용 스타일을 자동으로 걸러주어 코드 성능 향상이 가능합니다.

JavaScript 내 CSS의 단점

초기 실행 시 지연이 발생할 수 있음 스타일이 자바스크립트 코드 내에서 적용되기 때문에, 브라우저에서 화면을 출력하는 데 약간의 지연이 발생할 수 있습니다.
클래스 이름이 명확하지 않음 CSS-in-JS 방식에서는 클래스 이름이 자동으로 생성되기 때문에 복잡한 이름이 만들어질 수 있고 이로 인해 디버깅이 어려울 수 있습니다.
스타일을 브라우저에 적용 시 시간 소요 전통적인 파일 로딩 방식과는 달리, JavaScript 실행 중에 스타일이 적용되므로 성능에 영향을 미칠 수 있습니다.

🎨 전통적인 CSS 방식이란 무엇일까요?

전통적인 작성 방식은 별도의 파일을 생성해서 그곳에 스타일을 작성하는 것입니다. 다양한 방법들이 존재하지만 대표적으로 CSS, SCSS(SASS), LESS, CSS Modules 등이 있으며 이들의 공통점은 별도의 파일을 생성하여 적용한다는 것입니다.

기존 CSS의 이점

성능이 더 좋음 CSS 파일은 웹페이지를 불러오기 전에 브라우저에서 먼저 받아오고 임시 저장하므로 웹페이지 로딩 속도가 빨라질 것입니다. 스타일 시트가 JavaScript와 별도로 작동하기 때문에 브라우저는 스타일을 신속하게 적용할 수 있습니다.
테마 변경이 쉬움 (CSS 변수 활용) CSS 변수를 이용하면 웹사이트의 전반적인 디자인을 간편하게 수정할 수 있습니다. 이를테면, 어두운 모드와 밝은 모드를 간편하게 바꿀 수 있습니다.
개발자들 사이에서 널리 사용되는 방식 대다수의 개발자는 기초부터 배우기 때문에 추가적인 개념을 습득하지 않아도 되며, 이전 프로젝트들과의 연동이 원활하게 이루어집니다.

기존 CSS의 한계점

전역 네임스페이스 관련 오류 여러 스타일이 한 곳에서 관리되므로, 스타일끼리 충돌이 일어날 수도 있습니다. 이런 상황을 피하려면 BEM, OOCSS와 같이 철저한 명명 규칙을 준수해야 합니다.
동적으로 스타일을 바꾸는 것은 어려움 JavaScript와 함께 사용하려면 변수 또는 클래스를 별도로 만들어야 하고, 이로 인해 코드가 복잡해질 수 있습니다.
대형 프로젝트에서는 유지 보수가 어려울 가능성 종류가 다양해질수록 유지보수가 힘들어지고, 겹치는 코드가 발생할 확률이 증가합니다.

📊 어떤 방법을 고르는 게 좋을까?

기준	CSS-in-JS	전통적인 CSS
성능	자바스크립트 실행에 부하가 걸릴 수 있음	스타일 시트 파일을 저장하여 웹 페이지 로딩 속도 향상
유지보수	구성 요소 단위 스타일 관리	스타일이 서로 충돌할 가능성이 있음
동적 스타일링	소품(Props) 활용으로 매우 용이함	제한적 적용 가능 (클래스 토글 등)
사용 용도	React, Vue 등의 구성요소 기반 프로젝트	큰 규모의 사업, 움직이지 않는 정적인 웹사이트