[SCSS] 프로젝트 아키텍처 7-1 Pattern

장유진·2023년 2월 19일

HTML/CSS

목록 보기

1/2

7-1 Pattern

CSS 전처리기 SCSS를 사용함으로 얻을 수 있는 주된 장점 중 하나는, 코드 베이스를 여러 파일로 분할할 수 있다는 것입니다.
7-1 패턴은 이를 이용한 SCSS의 대표적인 아키텍처로 공식 가이드라인에서도 언급하고 있습니다.
7개의 폴더 안의 분할된 SCSS 파일들은, 루트 디렉토리의 main.scss에서 합쳐져 1개의 파일로 컴파일링 됩니다.
CSS 파일은 용도 별로 나뉘어진 폴더 구조와 자신의 이름을 통해 어떤 역할을 하는지, 무엇을 위해 만들어졌는지 가시적으로 보여줍니다.

폴더 구조

파일 앞에 붙은 언더바(_)는 이 파일은 @import를 통해 불러지기 전까지는 컴파일링 되지 않는 것을 의미합니다.

Abstracts

abstracts 폴더는 프로젝트에서 사용되는 전역 변수와 믹스인, scss 함수에 대한 폴더입니다.
utilities 혹은 helpers라는 이름을 대신 사용할 수도 있습니다.

_variables.scss
_mixin.scss
_function.scss
_placeholder.scss

Base

base 폴더는 프로젝트의 뼈대가 되는 디폴트 스타일, 폰트 스타일과 관련된 파일이 위치합니다.

_reset.scss
혹은 nomalize.scss가 될 수도 있습니다. 초기화 스타일이 들어가는 파일입니다.
보여주고자 하는 화면을 모든 환경에서 동일하게 보여주기 위해서는 웹 브라우저마다 각기 다르게 가지고 있는 태그의 스타일을 초기화 해주어야 합니다.
_typography.scss
태그가 가진 font-family, font-size, line-height, font-style, color 스타일이 들어가는 파일입니다.
_animation.scss (optional)
프로젝트에서 CSS 애니메이션을 많이 사용한다면 고려할 수 있는 optional 파일입니다.
사용하는 애니메이션이 그렇게 많지 않다면, 해당 페이지에 포함시키도록 합니다.

Layout

layout 폴더는 사이트나 어플리케이션에서 공통적으로 사용되는 레이아웃 스타일에 대한 폴더입니다.
layout 대신에 partials라는 이름을 사용하기도 합니다.

_header.scss
_footer.scss
_sidebar.scss
_navigation.scss
_forms.scss
_grid.scss

Components

components 폴더는 사이트나 어플리케이션에서 공통적으로 사용되는 컴포넌트 스타일에 대한 폴더입니다.
loader(로딩 애니메이션), slider(슬라이드) 등 위젯 형식으로 들어가는 모든 것들이 여기에 해당합니다.
components 대신에 modules라는 이름을 사용할 수도 있습니다.

_buttons.scss
_carousel.scss (= slider)
_dropdown.scss

Pages

페이지에만 한정된 스타일이 있다면 그것은 pages 폴더에서 다룰 수 있습니다. 파일의 이름은 페이지의 이름을 따서 짓도록 합니다.

_landing.scss
_contact.scss

다만 해당 페이지에 접근했을 때 사용하지 않는 다른 pages 코드까지 가져올 필요가 없기 때문에, 별도로 컴파일해서 호출할 수 있습니다.

<link rel="stylesheet" href="./assets/css/main.css" />
<link rel="stylesheet" href="./assets/css/landing.css" />
...

Theme

theme 폴더는 사이트나 어플리케이션 테마에 관한 폴더입니다. 존재하지 않을 수 있습니다.

Vendors

외부 라이브러리 및 프레임워크와 관련된 폴더입니다. 존재하지 않을 수 있습니다.
외부 라이브러리 및 프레임워크 의 CSS를 수정해야 할 경우 직접 건드리지 않고 여덟번째 폴더 vendors-extension 을 만들고
덮어쓰는 vendor의 이름을 그대로 사용한 별도의 파일에서 CSS를 수정하도록 합니다.

Main

main.scss는 위 폴더의 모든 파일들을 @import로 불러와 컴파일링합니다.

가독성을 위한 @import 가이드라인은 다음과 같습니다.

한 줄에 하나의 @import.
@import에는 하나의 파일만.
같은 폴더의 @import 사이에는 새 줄로 띄우지 않는다.
폴더와 폴더 사이에는 새 줄로 띄운다.
파일 확장자와 앞에 붙는 언더바(_)는 생략한다.

@import "abstracts/variables";
@import "abstracts/mixin";

@import "base/reset";

@import "components/buttons"

7-1 Pattern BoilerPlate

Reference

① Sass Guidelines https://sass-guidelin.es/#architecture
② 7-1 Sass Architecture https://www.learnhowtoprogram.com/user-interfaces/building-layouts-preprocessors/7-1-sass-architecture

장유진

다음 포스트