안녕하세요! 이더블케이 담당자 설화입니다 😊
웹 프론트엔드 개발을 진행하다 보면 웹사이트 상에서의 디자인 구현 방식이 다양하다는 것을 깨닫게 됩니다.
많은 개발자들이 선택하는 대표적인 방법으로는 "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 등의 구성요소 기반 프로젝트 |
큰 규모의 사업, 움직이지 않는 정적인 웹사이트 |
💡 추천 사용 사례
✅ JavaScript에서 CSS를 사용하는 것이 이점이 있는 상황 (CSS-in-JS)
- 리액트(React), 뷰(Vue) 등 컴포넌트 중심의 사용자 인터페이스(UI)를 구축할 때 효과적일 것입니다.
- 스타일이 실시간으로 변화하는 어플리케이션에서 큰 잠재력을 발휘할 수 있습니다.
- 전역 스타일 충돌이 발생하지 않게 하려면 이 방식이 유리합니다.
💎 전통적인 CSS가 이점을 갖는 경우
- 속도가 중요한 정적인 웹사이트나 성능 개선이 필수적인 프로젝트에서 더 나은 결과를 기대할 수 있습니다.
- 대규모 프로젝트에서 파일을 별도로 관리해야 하는 경우 적합합니다.
- 명확한 스타일 가이드가 확실한 디자인 시스템을 만들 때 효율적입니다.
✨ 정리
전통적인 CSS와 CSS-in-JS에는 각각 장단점이 존재하며, 프로젝트 성격에 맞춰 알맞은 방식을 채택해야 합니다.
👉 만약 컴포넌트 기반 개발을 진행한다면?
→ CSS-in-JS 방식이 더욱 효율적일 수 있습니다.
👉 기능성 및 초기 속도가 중요한 웹사이트 제작 시에는?
→ 기존의 방식을 적용하는 것이 더 적절합니다.
어떠한 방법을 고르더라도 핵심은 코드의 유지 보수성 및 성능을 염두에 두어야 한다는 점입니다.
이더블케이는 프로젝트 성격에 맞게끔 최상의 스타일링 기법을 채택하여 활용하고 있으며,
앞으로도 더 나은 개발 환경과 압도적인 결과물을 구축해 나갈 것입니다.
디지털 스튜디오
스튜디오 콘솔