[CSS] SCSS 아키텍처 7-1 pattern 폴더 및 파일 정리 하는 기준 (+ 실제 구성)

CSS 공부를 위해 Udemy에서 advanced css인강을 하나 들었었는데, 그 인강에서 SCSS 파일들을 구분해놓은 방식이 신기했었다. 나중에 알고보니까 그렇게 파일을 구분해놓은 것이 CSS 아키텍처 중 하나인 7-1패턴이라는 것이었다. 7-1패턴에 대해 좀 더 알아보기 위해 구글링 중, 좋은 글을 발견해서 중요한 부분만 번역을 하면서 내가 정리해놓았던 부가 설명을 덧붙여서 공유!

원문 : https://www.learnhowtoprogram.com/user-interfaces/building-layouts-preprocessors/7-1-sass-architecture

7-1 Sass Architecture

내 css들을 효율적으로 정리하고 싶은데 어떻게 해야할지 막막할 수 있다. 하지만 해당 고민에 대한 정답은 없다. 모든 개발자들은 그들만의 방식을 갖고 있고, 심지어 프로젝트마다 그 방식들을 바꿔서 적용을 하기도 하기 때문이다. 

그럼에도 불구하고 제일 유명하고 효율적인 sass 아키텍처 방식을 꼽자면 7-1패턴이 될 것이다. sass 가이드라인에서 제시한 모듈화 방식은 다음과 같다. 

가이드라인 예시

1. abstracts

실제 스타일은 없고, 그저 다른 폴더에 정의된 스타일을 도와는 역할을 한다. 글로벌 변수, 함수는 _variables 파일에,  mixins은 _mixins에 작성한다. 

(내가 공부했던 프로젝트에서)실제 들어 있는 파일들과 정의되어 있는 스타일

• _minxins.scss : 반응형을 위한 @media only 등
• _variables.scss : 변수명 지정 (색상, 폰트사이즈, 그리드 사이즈 )

2. vendors

프로젝트에서 사용하는 외부 스타일을 이 폴더에 넣으면 된다. 예를들어 부트스트랩을 커스터마이징 하고 싶다면 부트스트랩 stylesheet을 다운받아 이 폴더에 넣으면 된다.

(공부했던 프로젝트에서는 외부 스타일시트를 사용하지 않았기 때문에 해당 폴더가 없었다.)

3. base

사이트 전반에 걸쳐서 재사용되는 스타일을 여기에 정의한다. 사이트 전반에 사용될 폰트, 디폴트 스타일이 여기에 해당된다.

(내가 공부했던 프로젝트에서)실제 들어 있는 파일들과 정의되어 있는 스타일

• _animations.scss : transform (@keyfroames)
• _base.scss : 디폴트에 대한 사항 (html, body, ::selection 등)
• typography : 폰트
• utilites

4. layout

사이트 구조에 해당하는 레이아웃을 여기서 정의한다. nav bars, headers, footers 와 같은 것이 여기에 해당된다.

(내가 공부했던 프로젝트에서)실제 들어 있는 파일들과 정의되어 있는 스타일

• _header.scss : 헤더 레이아웃
• _navigation.scss : 네이게이션 바 레이아웃
• _grid.scss : 그리드 레이아웃
• _footer.scss :  푸터 레이아웃

5. components

컴포넌트는 "소형" 레이아웃 같은 것이다. 사이트 내에서 재사용가능한 작은 부분들을 여기에 정의한다. buttons, forms, profile pictures와 같은 것이 여기에 해당된다. 

(내가 공부했던 프로젝트에서)실제 들어 있는 파일들

• _card.scss 
• _button.scss 
• _composition.scss 
• _popup .scss
• _story.scss
• _feature-box.scss

6. pages

모든 페이지가 같은 스타일을 사용할 수는 없기 때문에 각 페이지에서 사용될 구체적인 스타일을 여기에 넣으면 된다. 예를들어, "Contact Us"에서만 사용될 스타일이 있다면 __contact.scss와 같이 네이밍한 후 이 폴더에 넣으면 된다. 

(내가 공부했던 프로젝트에서)실제 들어 있는 파일들과 정의되어 있는 스타일

• _home : 메인 페이지

7. themes

사이트가 다른 종류의 모드를 지원할 때 사용된다. 예를들어 관리자모드와 디폴트모드가 있는 사이트라던가, 다크모드(야간모드)와 라이트모드가 있는 사이트가 있을 수 있다. 각 모드에 따라서 각기 다른 스타일이 지정되기 때문이다. 

(공부했던 프로젝트에서는 모드가 딱히 없었어서 해당 폴더가 없었다.)

---

main.scss

이제 위와같이 각 폴더에 기준에 따라 scss파일들을 분류했다면, 이 파일을 한데 모을 허브가 필요하다. 그럼 main.scsss 라는 파일을 생성해서 모든 파일들을 import를 해주면된다. main.scss는 다른 파일들과는 달리 앞에 _표시가 없다. 해당 파일에는 직접 스타일을 정의하지 않고 "import"만을 담당하는 폴더이다.

 

이렇게 7개의 파일 구분 기준을 알아봤는데, 7-1패턴임에도 불구하고 언제나 7개의 폴더가 항상 필요한 것은 아니다. 예를 들어, 어떤 사이트는 부트스트랩과 같은 외부 스타일시트를 사용하지 않을 수도 있고, 단 하나의 모드만을 사용하기 때문에 themes가 필요 없을 수도있다. 사실 3~4개의 폴더만 필요할 수도 있다. 

나도 인강을 들으면서, 총 3개의 프로젝트를 공부했는데, 실제로 7개의 폴더를 다 사용한 프로젝트는 없었다. 모두 3~5개만 사용했다. 

 

실제로 회사에서도 이와 비슷한 방법을 이용해서 css 작업을 했었는데, 해당 아키텍트가 초면이라면 처음엔 파일들이 헷갈릴 수 있지만 적응되면 정말 효율적인 방식 같았다. 

다음에는 7-1패턴과 같이 사용했었던 BEM 방식에 대해 정리해야겠다.