SCSS 활용 팁 7. 스타일시트를 효율적으로 모듈화 하기 위한 7-1패턴

 

SCSS를 모듈화하면 규모가 큰 프로젝트에서도 관리의 효율성과 유지보수성을 확보할 수 있습니다. 

 

7-1패턴

SCSS 파일과 폴더를 체계적으로 관리하기 위한 패턴으로, 7개의 폴더와 하나의 파일로 구성됩니다. 확장 가능성과 재사용성을 극대화하기 위하여 만들어졌으며, 대규모 프로젝트에서 유용합니다. 다음과 같은 구조로 사용됩니다.

src/
  └── styles/
      ├── abstracts/ 
      │   ├── _variables.scss
      │   ├── _mixins.scss
      │   ├── _functions.scss
      ├── base/         
      │   ├── _reset.scss
      │   ├── _typography.scss
      ├── components/   
      │   ├── _button.scss
      │   ├── _card.scss
      ├── layout/       
      │   ├── _header.scss
      │   ├── _footer.scss
      │   ├── _grid.scss
      ├── pages/        
      │   ├── _home.scss
      │   ├── _about.scss
      ├── themes/      
      │   ├── _dark.scss
      │   ├── _light.scss
      ├── vendors/      
      │   ├── _bootstrap.scss
      │   ├── _fontawesome.scss
      ├── main.scss

각 폴더와 파일의 역할

파일명 앞에 붙인 '_'의 의미
파일명 앞에 '_(언더스코어)'를 붙이면, 파일 분할(Partial) 이라는 뜻으로, 해당 파일을 독립적으로 컴파일 하지 않겠다고 선언한 것입니다. 메인파일에서 필요에 따라 임포트하여 사용합니다.

abstracts/ 폴더

프로젝트 전반에서 재사용이 가능한 추상화된 유틸리티를 저장합니다.

예) _variables.scss(변수), _mixins.scss(믹스인), _functions.scss(함수)

base/ 폴더

기본적인 스타일을 정의하는 css리셋, 기본 HTML요소 스타일, 타이포그래피 스타일 등이 포함됩니다.

components/ 폴더

작은 단위의 UI 컴포넌트 스타일을 정의합니다.

예) _button.scss, _card.scss

layout/ 폴더

페이지 레이아웃에 관련된 스타일을 정의합니다.

예) _header.scss, _footer.scss 

pages/ 폴더

특정 페이지에서만 적용되는 스타일을 따로 관리합니다.

예) _home.scss, _about.scss

themes/ 폴더

테마 관련 스타일을 관리합니다. 다크모드 사용시 편리합니다.

예) _dark.scss, _light.scss

vendors/ 폴더

외부 라이브러리 스타일을 오버라이드하거나 확장합니다.

예) _bootstrap.scss, _jquery-ui.scss

main.scss 파일

main.scss는 모든 폴더의 scss파일을 한 곳에서 관리하는 엔트리 파일로, @import 또는 @use를 사용해 각 폴더의 파일을 불러옵니다. 최신 방식으로 네임스페이스를 사용해 파일 분할을 보다 명확하게 관리하는 @use가 권장되고 있지만, 여기서는 일단 쉬운 방식인 @import로 불러와 보겠습니다. 불러오는 파일명을 작성할 때, _와 .scss는 생략할 수 있습니다.

// abstracts
@import "abstracts/variables";
@import "abstracts/mixins";
@import "abstracts/functions";

// base
@import "base/reset";
@import "base/typography";

// layout
@import "layout/header";
@import "layout/footer";
@import "layout/grid";

// components
@import "components/button";
@import "components/card";

// pages
@import "pages/home";
@import "pages/about";

// themes
@import "themes/dark";
@import "themes/light";

// vendors
@import "vendors/bootstrap";
@import "vendors/fontawesome";

7-1 패턴의 장점

7-1패턴을 사용하면, 스타일이 명확하게 분리되어 각 파일의 역할이 명확해집니다. 그래서 프로젝트 규모가 커지더라도 구조를 깔끔하게 유지할 수 있습니다. 필요한 파일만 수정하면 되므로 협업시 역할 분담이 쉬워지고 유지보수에 유리합니다.

그런데, 폴더가 7개나 필요할까?

대규모 프로젝트라면 7-1패턴이 적합하겠지만, 일반적인 소규모 프로젝트에서는 세밀한 분리가 어려울 수 있습니다. 이럴 때는 abstract/ 폴더와 base/ 폴더를 통합하여 common/ 폴더로 관리하고, pages/ 폴더는 생략해 내용물을 components/ 폴더에 포함하여 관리합니다. themes/ 와 vendors/ 는 필요한 경우에만 사용하고 그렇지 않을 경우는 생략합니다.

 

단순화한 구조로 변경한 패턴은 이렇습니다.

src/
  └── styles/
      ├── common/
      │   ├── _variables.scss
      │   ├── _mixins.scss
      │   ├── _reset.scss
      ├── layout/
      │   ├── _header.scss
      │   ├── _footer.scss
      ├── components/
      │   ├── _button.scss
      │   ├── _card.scss
      ├── main.scss

이렇게 필요에 따라 단순화하거나 확장하여 프로젝트에 적합한 구조로 사용할 수 있습니다.