SSAFY 1학기 과정에 참여 중이다.
우리 반에서는 기술이 되었든 취미 생활이 되었든 자신이 가지고 있는 지식을 반 동기들에게 나누는 지식 공유 세미나를 진행한다.
나의 경우 프론트엔드 개발 지망생이기 때문에, 내가 알고 있는 개발적인 지식을 나누기 위해 css tool 비교를 주제로 삼아 발표를 진행했다.
발표한 지 꽤 시간이 지났지만 해당 내용을 추후에 참고할 일이 생기지 않을까 하는 생각이 들어, 발표를 위해 제작했던 PPT와 발표대본을 일부 수정해 블로그에도 기록을 해보기로 했다.
현대 웹 개발에서의 스타일링 도구
안녕하세요. 현대 웹 개발에서의 스타일링 도구를 주제로 발표 시작해보겠습니다.
순서대로
- CSS 라이브러리의 정의와 필요성
- CSS 라이브러리의 분류
- 주요 라이브러리 소개와 라이브러리 선택 기준
에 대해 발표하겠습니다.
먼저 CSS 라이브러리란 무엇인지에 대해 설명드리겠습니다.
엄밀히 말하면 프레임워크와 라이브러리는 구분하는 것이 맞지만, 오늘 발표에서는 편의상 두 가지를 모두 ‘CSS 라이브러리’라고 부르겠습니다.
CSS 라이브러리는 웹 UI를 빠르게 만들고, 스타일 일관성을 유지하도록 도와주는 도구입니다. 그렇다면 이런 라이브러리를 왜 사용하는 걸까요?
이 슬라이드를 보시면 화면에 보시는 것처럼 일반 CSS로 작성한 코드와 스타일 라이브러리 중 하나인 Tailwind를 사용한 코드사이에 차이가 확실히 보입니다. 일반 CSS를 사용할 때는 별도의 CSS 파일을 만들고 클래스와 선택자를 일일이 정의해야 해서 코드량이 많아지고 관리가 번거롭습니다. 반면 Tailwind를 사용하면 HTML 안에서 클래스만 조합해 스타일을 적용할 수 있어 코드가 훨씬 간결해집니다.
Tailwind를 사용하면 별도의 CSS 파일이 필요 없고, 색상, 크기, hover 같은 속성을 클래스 조합만으로 바로 적용할 수 있습니다. 또한 프로젝트 전반에서 같은 유틸리티 클래스를 사용하기 때문에 스타일 일관성을 유지하기도 쉽습니다. 이렇게 보면 CSS 라이브러리를 사용하면 개발 속도를 높이는 동시에 코드 관리도 훨씬 편리해진다는 것을 알 수 있습니다.
CSS 라이브러리를 사용하면 얻을 수 있는 장점을 더 정리해보자면 다음과 같습니다.
먼저 디자인 일관성을 유지하기 쉽습니다. 라이브러리는 미리 정의된 컴포넌트와 디자인 시스템을 제공하기 때문에, 프로젝트 전반에서 동일한 스타일과 규칙을 적용할 수 있습니다.
두 번째로 생산성이 향상됩니다. 라이브러리에는 버튼, 모달, 카드와 같이 자주 쓰이는 UI 컴포넌트가 이미 구현되어 있기 때문에, 개발자가 직접 코드를 작성하지 않고 바로 활용할 수 있습니다. 덕분에 UI 구성과 기능 개발 속도가 훨씬 빨라집니다.
마지막으로 유지보수가 용이합니다. CSS 라이브러리는 구조화된 스타일 시스템을 제공하기 때문에, 새로운 기능을 추가하거나 디자인을 변경할 때도 수정 범위가 명확하고 관리가 쉽습니다. 따라서 프로젝트가 커져도 스타일 일관성을 유지할 수 있습니다.
이러한 장점 때문에 다양한 CSS 라이브러리가 개발되었고, 프로젝트 상황에 맞게 여러개의 라이브러리 중에서 하나를 선택해서 사용하게 됩니다.
그렇다면, CSS 라이브러리에는 어떤 종류가 있는지 살펴보겠습니다.
CSS 라이브러리는 크게 세 가지로 분류할 수 있습니다.
먼저 Utility-first 방식에 대해 설명드리겠습니다.
이 방식은 원자 단위의 클래스를 조합해 스타일을 적용하는 형태로, 대표적인 예가 Tailwind CSS입니다.
Utility-first 방식의 장점은 HTML 안에서 바로 클래스를 조합해 사용할 수 있어 빠른 개발 속도를 구현할 수 있다는 점과, 프로젝트 전반에서 같은 유틸리티 클래스를 사용하므로 디자인 일관성을 유지하기 쉽다는 점입니다.
하지만 클래스명이 길어질 수 있기 때문에, 코드가 다소 길고 복잡해 보일 수 있다는 단점이 존재합니다.
다음은 CSS-in-JS 방식입니다.
이 방식은 JavaScript 파일 안에서 CSS를 작성하고, 컴포넌트 단위로 스타일을 관리할 수 있습니다.
props를 활용하면 동적으로 스타일을 적용할 수 있어 유연한 스타일링이 가능하다는 장점이 있습니다.
하지만 단점도 존재합니다. CSS 코드가 별도의 .css 파일로 분리되지 않고 JS 번들에 포함되기 때문에, 번들 사이즈가 증가하고 성능 이슈가 발생할 수 있습니다. 또한, Next.js와 같은 서버 사이드 렌더링(SSR) 환경에서는 스타일링 우선순위를 정확히 관리해야 하므로 구현 복잡도가 올라갑니다.
조금 더 자세히 살펴보면, CSS-in-JS는 런타임 시점에 스타일을 생성합니다. 즉, JS 코드가 실행될 때 CSS가 만들어지고 HTML 요소에 적용되는 구조입니다.
만약 서버에서 렌더링된 HTML이 클라이언트에 내려갈 때 CSS가 아직 적용되지 않았다면, 화면 깜박임(Flicker)이나 스타일 순서 문제로 레이아웃이 깨질 수 있습니다.
따라서 SSR 환경에서는 서버와 클라이언트에서 스타일 시트를 동기화하는 추가 작업이 필요합니다.
이런 이유로 Next.js 프로젝트에서는 CSS-in-JS보다는 Tailwind나 SCSS와 같은 정적 스타일링 방식을 사용하는 경우가 많습니다.
다음은 CSS Module입니다.
CSS Module은 파일 단위로 CSS를 모듈화하여, 클래스 이름이 자동으로 고유하게 변환되기 때문에 클래스 충돌을 방지할 수 있습니다. 컴포넌트 단위로 CSS를 격리할 수 있어 유지보수가 쉽고, React 환경에서 특히 효율적으로 사용할 수 있습니다. 단, SCSS처럼 문법 확장 기능은 제공하지 않기 때문에 동적 스타일링이나 변수 등은 별도로 구현해야 합니다.
이 외에도 UI 컴포넌트 라이브러리를 사용할 수도 있습니다. 이 방식은 이미 완성된 UI 컴포넌트를 바로 가져와 사용할 수 있다는 장점이 있습니다. 접근성과 반응형을 기본으로 지원해 생산성을 크게 높일 수 있고, 프로젝트 초기 개발 속도를 빠르게 올릴 수 있습니다. 대표적인 예로는 BootStrap와 MUI(Material UI)가 있습니다. 단점으로는 디자인 개성이 부족하고, 특정 프레임워크에 종속될 수 있다는 점이 있습니다.
여기까지가 라이브러리의 분류를 말씀드렸고, 이제는 여러가지 css 툴 중 특정 네 가지를 골라서 조금 더 자세히 살펴보겠습니다.
먼저 CSS 전처리기인 SCSS에 대해 말씀드리겠습니다.
기존 CSS는 변수, 함수, 중첩 문법이 없기 때문에 대규모 프로젝트에서 유지보수가 어려웠습니다. 이러한 한계를 극복하기 위해 만들어진 것이 SCSS입니다.
SCSS의 주요 특징으로는 변수를 사용해 색상이나 폰트 크기 등을 재사용할 수 있고, 중첩 문법을 통해 선택자를 계층적으로 작성할 수 있다는 점이 있습니다. 또한 Mixin과 함수를 활용하면 반복되는 코드를 재활용할 수 있습니다. 여기서 믹스인은 자주 반복되는 스타일 코드 블록을 재사용할 수 있도록 만든 CSS 조각입니다. 버튼이나 카드 등 공통 스타일을 미리 정의해두고 필요할 때마다 불러와 적용할 수 있습니다.
SCSS는 파일 분리와 임포트를 통해 코드를 모듈화할 수도 있습니다. 장점으로는 코드 재사용성과 유지보수성을 높일 수 있고, 구조적 CSS 관리를 할 수 있다는 점이 있습니다. 반면 빌드 과정이 필요하고 JS 생태계의 CSS-in-JS보다 동적 스타일 적용에는 제한이 있다는 점은 단점입니다. 예를 들어 `$primary-color: #3498db; .button { background: $primary-color; &:hover { background: darken($primary-color, 10%); } }`처럼 작성하면, 빌드 후 일반 CSS로 변환되어 사용됩니다.
다음은 Tailwind CSS입니다.
Tailwind는 Utility-first 프레임워크로, HTML 안에서 미리 정의된 유틸리티 클래스를 조합해 스타일을 작성합니다. Utility-first 프레임워크를 사용하면 클래스 네이밍 부담과 컴포넌트 단위 스타일 관리 문제를 해결하고, 빠른 프로토타이핑과 일관된 디자인 유지가 가능합니다. HTML 안에서 바로 스타일 적용 가능하다는 점과 tailwind.config.js 파일을 통해 커스터마이즈가 가능하고, 반응형과 다크 모드를 기본 지원한다는 장점이 있습니다.
반면 클래스명이 길어져 가독성이 떨어지고, 네이밍 규칙과 조합 방식을 익히는 초반 학습 곡선이 존재한다는 점이 단점입니다.
화면에 보이는 것처럼 Tailwind에서는 이렇게 클래스 이름에 유틸리티 단위의 스타일 속성을 작성해서, HTML 요소에 바로 스타일을 적용할 수 있습니다. 덕분에 CSS 파일을 따로 작성하지 않고도 빠르게 디자인할 수 있습니다
이렇게 작성을 마치면, 버튼 색상, 여백, 호버 효과가 한 번에 적용됩니다.
styled-components은 CSS-in-JS 라이브러리로, JavaScript 파일 안에서 CSS를 작성하고 컴포넌트 단위로 스타일을 관리할 수 있는 방식입니다. 기존 CSS와 JS가 분리되어 있을 때 생기는 스타일 관리 문제나 클래스 이름 충돌 문제를 해결하기 위해 만들어졌습니다.
주요 특징을 보면, 먼저 컴포넌트 단위 스타일링이 있습니다. 컴포넌트마다 스타일을 독립적으로 관리할 수 있어서, 다른 컴포넌트와 섞이는 일을 방지할 수 있죠. 세번째는 props 기반 동적 스타일링인데, props를 전달하면 같은 컴포넌트라도 상태나 용도에 따라 다른 스타일을 적용할 수 있어 유연하게 UI를 구성할 수 있습니다. 마지막으로 자동 벤더 프리픽스 처리 기능이 있습니다. CSS 속성 중에는 브라우저별로 접두사(-webkit, -moz 등)를 붙여야 하는 경우가 있는데, styled-components는 이러한 접두사를 개발자가 신경 쓰지 않아도 자동으로 처리해 주어 브라우저 호환성을 쉽게 확보할 수 있습니다.
장점은 클래스 충돌이 없고, 컴포넌트 재사용성이 높으며, 동적 스타일 적용이 가능하다는 점이고, 단점으로는 런타임 시 스타일이 생성되기 때문에 성능에 영향을 줄 수 있고, 번들 사이즈가 커질 수 있으며, 디버깅이 조금 어렵다는 점이 있습니다.
예시를 보면, 버튼 컴포넌트를 위 코드와 같이 정의할 수 있습니다.
그리고 사용할 때는 아래와 같이 컴포넌트 태그 안에 props를 전달해서 배경색을 동적으로 바꿀 수 있습니다. 이렇게 하면 같은 버튼 컴포넌트지만, 상황에 따라 다른 스타일을 적용할 수 있습니다.
마지막으로 Bootstrap입니다. Bootstrap은 가장 널리 사용되는 CSS 프레임워크로, 트위터 개발자들이 UI 통일을 위해 제작했습니다. 풍부한 컴포넌트와 그리드 시스템을 제공해, 반응형 레이아웃을 쉽게 구현할 수 있고, 일관된 디자인과 공식 문서, 활발한 커뮤니티까지 갖추고 있다는 점이 큰 강점입니다.
하지만 단점도 존재합니다. 먼저, 기본적으로 제공되는 디자인이 다소 개성이 부족하여, 프로젝트마다 독창적인 스타일을 구현하려면 추가적인 커스터마이즈가 필요합니다. 이 과정에서 CSS를 오버라이드해야 하는 경우가 많아, 스타일 관리가 복잡해질 수 있습니다. 또한, 많은 컴포넌트와 기능을 포함하고 있기 때문에, 사용하지 않는 코드까지 포함되어 번들 크기가 커지고 페이지 로딩 속도가 느려질 수 있습니다.
예를 들어, Bootstrap을 사용하면 버튼과 그리드를 이렇게 간단하게 구현할 수 있습니다.
<button class="btn btn-primary">Primary</button>
<div class="row">
<div class="col-md-6">Column 1</div>
<div class="col-md-6">Column 2</div>
</div>
이처럼 최소한의 코드로 일관된 스타일과 반응형 레이아웃을 바로 적용할 수 있다는 점이 Bootstrap의 장점입니다.
이제까지 네 가지 대표적인 CSS 라이브러리를 살펴봤습니다.
그렇다면 실제 프로젝트에서는 어떤 기준으로 이들 중 하나를 선택하면 좋을까요?
비교 기준은 크게 네 가지로 나눌 수 있습니다.
첫째, 학습 난이도입니다. Tailwind는 HTML 안에서 클래스 조합만으로 스타일링이 가능해 상대적으로 쉽게 배울 수 있지만, CSS-in-JS나 SCSS는 문법과 사용 방식에 익숙해지는 시간이 필요합니다.
둘째, 생산성입니다. UI 컴포넌트 라이브러리는 이미 완성된 컴포넌트를 가져다 쓸 수 있어 초기 개발 속도를 빠르게 올릴 수 있습니다. Tailwind 또한 유틸리티 클래스 조합만으로 빠른 스타일링이 가능하죠.
셋째, 유지보수성입니다. CSS-in-JS와 SCSS는 구조화된 스타일 관리가 가능해 프로젝트 규모가 커질수록 유지보수에 유리합니다.
마지막으로, 디자인 유연성 및 일관성입니다. Tailwind는 미리 정의된 클래스 조합을 사용하므로 프로젝트 전반에서 일관된 디자인을 유지하기 쉽습니다. 반면 UI 컴포넌트 라이브러리는 디자인이 이미 정해져 있어 개성 있는 커스터마이징에는 한계가 있을 수 있습니다.
정리하자면, 각 라이브러리는 프로젝트 성격과 팀의 상황에 따라 장단점이 뚜렷하게 달라집니다.
작은 프로젝트나 빠른 프로토타이핑에는 Tailwind나 UI 컴포넌트 라이브러리가 적합할 수 있고, 규모가 크고 복잡한 프로젝트에서는 CSS-in-JS나 SCSS가 더 안정적일 수 있습니다.
즉, 선택 기준을 명확히 하고, 팀과 프로젝트 환경에 맞는 라이브러리를 고르는 것이 가장 중요합니다.
위 자료는 제가 말씀드린 것 외에도 정말 다양한 라이브러리들이 존재하고 있다는 걸 알려드리기 위해 추가적으로 정리해 놓은 슬라이드입니다.
이런 라이브러리들은 프로젝트 성격이나 팀의 상황에 따라 선택할 수 있는 옵션이라고 보시면 됩니다.
오늘은 나머지 라이브러리들에 대해서는 깊이 다루진 않았지만, 관심 있는 분들은 더 찾아보셔도 좋을 것 같습니다
오늘은 이렇게 CSS 라이브러리의 분류, 특징, 장단점, 선택 기준까지 살펴보았습니다.
CSS 라이브러리는 프로젝트 규모, 팀 구성, 디자이너 존재 여부, 커스터마이즈 필요성에 따라 선택해서 사용할 수 있습니다. 따라서 상황에 맞는 라이브러리를 선택하여 개발 생산성을 극대화하는 것이 중요하다고 생각합니다.
그럼 이상으로 발표를 마치겠습니다. 감사합니다.