2026-02-15

프론트엔드 스타일링 방식

스타일링 종류

  • 전통적인 CSS 방식
    • 일반 CSS (인라인/내부/외부)
    • Sass / SCSS (전처리기)
    • Less
  • 모듈화된 CSS 방식
    • CSS Modules
    • BEM 방식
  • CSS-in-JS
    • styled-components
    • Emotion
    • JSS
  • CSS 프레임워크
    • Tailwind CSS (유틸리티 퍼스트 프레임워크)
    • Bootstrap
    • Material UI
    • Ant Design
  • 전체 비교
    • CSS → 가장 기본
    • Sass → CSS를 더 잘 쓰기 위한 확장
    • CSS Modules → CSS를 안전하게 쓰기 위한 방식
    • CSS-in-JS → 컴포넌트 중심 스타일링
    • Tailwind → 빠르고 일관된 UI 제작 | 구분 | 일반 CSS | Sass (SCSS) | CSS Modules | CSS-in-JS | Tailwind | | ————– | ——————— | ———————— | ———————– | ———————– | ——————– | | 기본 개념 | 순수 CSS 작성 | CSS 확장 문법 (전처리기) | 클래스 스코프 자동 분리 | JS 내부에서 스타일 정의 | 유틸리티 클래스 조합 | | 동작 시점 | 런타임 | 빌드 타임 | 빌드 타임 | 런타임 | 빌드 타임 | | 스코프 관리 | 전역 | 전역 | 자동 로컬 | 컴포넌트 단위 | 전역 유틸리티 | | 동적 스타일 | 제한적 | 제한적 | 제한적 | 매우 강함 | 제한적 | | 재사용성 | 낮음 | 높음 | 보통 | 높음 | 높음 | | 유지보수 | 구조 설계에 따라 다름 | 구조화 쉬움 | 충돌 적음 | 컴포넌트 중심 | 클래스 관리 필요 | | React 친화성 | 보통 | 보통 | 좋음 | 매우 좋음 | 좋음 | | 대표 사용 사례 | 작은 프로젝트 | 대규모 웹 | React 프로젝트 | SPA, 디자인 시스템 | 빠른 MVP 개발 |

Sass (CSS 전처리기)

Sass는 CSS 전처리기(Preprocessor) SCSS 문법으로 작성한 코드를 빌드 시점에 CSS로 변환 (런타임X)

기존 CSS 한계

  • 변수 없음
  • 반복 코드 많음
  • 중첩 구조 표현 불가
  • 재사용 어려움
  • 유지보수 어려움

특징

  • 빌드 타임 컴파일
  • 변수 사용 가능 
    $primary-color: blue;
button {
  color: $primary-color;
}
  • 중첩(Nesting) 
    nav {
  ul {
    li {
      color: red;
    }
  }
}
  • 믹스인(Mixin) 
    @mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  @include flex-center;
}
  • 상속 
    %button-style {
  padding: 10px;
  border-radius: 5px;
}
.btn {
  @extend %button-style;
}
  • 연산 가능 
    $base: 10px;
div {
  width: $base * 2;
}

장점

  • 대규모 프로젝트에서 구조화 용이
  • 재사용성 높음
  • 유지보수 좋음
  • CSS 기반이라 러닝커브 낮음

단점

  • 런타임 동적 스타일 처리 어려움
  • 컴포넌트 단위 캡슐화는 직접 관리해야 함

CSS-in-JS

자바스크립트 파일 안에서 CSS를 작성하는 방식

  • styled-components
  • Emotion
  • JSS
const Button = styled.button`
  color: red;
`;

특징

  • JS 로직과 스타일을 같은 파일에서 관리
  • props 기반 동적 스타일링
  • 런타임 스타일 생성

장점

  • 컴포넌트 단위 캡슐화
  • 조건부 스타일링 매우 쉬움
  • 테마 관리 편리
  • React와 궁합 좋음

단점

  • 런타임 성능 오버헤드 가능성
  • 번들 크기 증가
  • 빌드 최적화 고려 필요

Tailwind CSS

유틸리티 퍼스트(Utility-first) CSS 프레임워크

<button class="bg-blue-500 text-white px-4 py-2 rounded"></button>

CSS를 직접 작성하지 않고 미리 정의된 클래스 조합으로 스타일 구성

특징

  • CSS 파일 거의 안 만듦
  • 클래스 조합 중심
  • 디자인 토큰 기반

장점

  • 빠른 개발 속도
  • 일관된 디자인
  • 유지보수 쉬움
  • 번들 크기 최적화 가능 (Purge)

단점

  • 클래스가 길어짐
  • HTML 가독성 떨어질 수 있음
  • 추상화 레벨 낮음

참고자료

  • https://velog.io/@ziny02/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%8A%A4%ED%84%B0%EB%94%94-React-%EC%8A%A4%ED%83%80%EC%9D%BC%EB%A7%81
  • https://inpa.tistory.com/entry/SCSS-%F0%9F%92%8E-SassSCSS-%EB%9E%80-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%BB%B4%ED%8C%8C%EC%9D%BC
  • https://voyage-dev.tistory.com/59
  • https://uracle.blog/2025/05/02/css-vs-scss-%EC%99%9C-scss%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%95%BC-%ED%95%A0%EA%B9%8C/

results matching ""

    No results matching ""