기본적인 SCSS 폴더 구조 예시 - by. UXKM

  • Publishing
  • SCSS
  • 파일 분리와 SCSS 구조 설계
  • 기본적인 SCSS 폴더 구조 예시
요약 설명

SCSS 프로젝트의 폴더 구조를 체계적으로 구성하면 코드를 관리하기 쉬워집니다.
프로젝트 크기에 따라 다양한 폴더 구조를 사용할 수 있으며, 각 구조의 장단점을 이해하는 것이 중요합니다.

이 페이지에서는 작은 프로젝트, 중간 프로젝트, 큰 프로젝트별 폴더 구조, 각 폴더의 역할, 파일 구성 예시를 상세히 알아봅니다.

폴더 구조의 중요성

체계적인 폴더 구조는 코드를 찾고 관리하기 쉽게 만들어줍니다.
프로젝트 크기에 맞는 구조를 선택하면, 파일 수가 늘어나도 어디에 무엇이 있는지 직관적으로 파악할 수 있어 협업과 유지보수 효율이 크게 향상됩니다.

좋은 폴더 구조의 특징

좋은 폴더 구조는 다음과 같은 특징을 가집니다:

  • 명확한 역할: 각 폴더가 명확한 역할을 가짐
  • 직관적 네이밍: 폴더명만 봐도 무엇이 들어있는지 알 수 있음
  • 확장 가능성: 프로젝트가 커져도 구조를 유지할 수 있음
  • 일관성: 프로젝트 전체에서 일관된 구조 사용

프로젝트 크기별 구조

프로젝트 크기에 따라 다른 폴더 구조를 사용합니다.

  • 프로젝트 크기
  • 폴더 구조
  • 특징

  • 작은 프로젝트

    단일 폴더, 파일만 분리

    간단하고 직관적

  • 중간 프로젝트

    카테고리별 폴더 (base, components 등)

    체계적이고 확장 가능

  • 큰 프로젝트

    다층 폴더 구조

    세밀한 분류, 대규모 관리

작은 프로젝트 구조

작은 프로젝트에서 사용하는 간단한 폴더 구조입니다.
모든 파일을 하나의 폴더에 두는 단순한 구조로, 빠르게 시작하고 필요할 때 확장할 수 있어 랜딩 페이지나 소규모 웹사이트에 적합합니다.

기본 구조

모든 SCSS 파일을 하나의 폴더에 두는 구조입니다.

이 구조는 간단하고 직관적이어서 작은 프로젝트에 적합합니다.

각 파일의 역할

각 파일이 어떤 역할을 하는지 설명합니다.

  • 파일명
  • 역할
  • 내용

  • _variables.scss

    변수 정의

    색상, 폰트, 여백 등 모든 변수

  • _mixins.scss

    믹스인 정의

    재사용 가능한 스타일 블록

  • _buttons.scss

    버튼 컴포넌트

    버튼 관련 모든 스타일

  • _cards.scss

    카드 컴포넌트

    카드 관련 모든 스타일

  • main.scss

    메인 파일

    모든 파셜을 불러와서 컴파일

main.scss 구성

메인 파일에서 모든 파셜을 불러오는 예시입니다.

중간 프로젝트 구조

중간 규모의 프로젝트에서 사용하는 카테고리별 폴더 구조입니다.
abstracts, base, components, layout 등 기능별로 폴더를 나누면, 파일 수가 많아져도 체계적으로 관리할 수 있어 중규모 웹사이트나 웹 애플리케이션에 적합합니다.

카테고리별 구조

기능별로 폴더를 나누어 관리하는 구조입니다.

이 구조는 체계적이고 확장 가능하여 중간 규모 프로젝트에 적합합니다.

각 폴더의 역할

각 폴더가 어떤 역할을 하는지 설명합니다.

  • 폴더명
  • 역할
  • 포함 파일

  • abstracts/

    추상적 요소

    변수, 믹스인, 함수 등

  • base/

    기본 스타일

    리셋, 타이포그래피 등

  • components/

    컴포넌트

    버튼, 카드, 폼 등

  • layout/

    레이아웃

    헤더, 푸터, 그리드 등

main.scss 구성

카테고리별 구조에서 main.scss를 구성하는 예시입니다.

이렇게 하면 의존성 순서가 명확하고, 각 카테고리의 역할이 분명합니다.

큰 프로젝트 구조

프로젝트 규모가 커지고 파일이 많아지면, 카테고리별 구조만으로는 관리가 어려워집니다.
이런 경우에는 폴더 안에 다시 폴더를 만들어서 더 세밀하게 구분하는 다층 폴더 구조를 사용합니다.
예를 들어, 컴포넌트가 20개 이상이라면 components/ 폴더 안에 다시 세부 카테고리별로 폴더를 나누어 관리하는 것이 효율적입니다.

다층 구조

더 세밀하게 폴더를 나누어 관리하는 구조입니다.

이 구조는 대규모 프로젝트에서 세밀한 관리가 필요할 때 사용합니다.

추가 폴더 설명

큰 프로젝트 구조의 추가 폴더들을 설명합니다.

  • 폴더명
  • 역할
  • 포함 내용

  • abstracts/_variables/

    변수 세분화

    색상, 간격, 타이포그래피 등 변수 타입별 분리

  • components/_buttons/

    컴포넌트 세분화

    버튼의 기본, 변형 등 세부 분리

  • pages/

    페이지별 스타일

    특정 페이지에만 사용하는 스타일

7-1 패턴 구조

7-1 패턴이란?

7-1 패턴은 SCSS에서 널리 사용되는 표준 폴더 구조입니다. 이름에서 알 수 있듯이, 7개의 폴더와 1개의 메인 파일(main.scss)로 구성되어 있어서 "7-1 패턴"이라고 불립니다.
각 폴더는 코드의 성격에 따라 명확하게 구분되어 있어, 어떤 코드를 어디에 넣어야 할지 쉽게 판단할 수 있습니다.
프로젝트 규모와 상관없이 일관된 구조를 유지할 수 있어, 팀 작업이나 장기적인 프로젝트 관리에 특히 유용합니다.

각 폴더의 역할

7-1 패턴의 각 폴더 역할을 설명합니다.

  • 폴더
  • 역할
  • 예시

  • abstracts/

    추상적 요소

    변수, 믹스인, 함수

  • base/

    기본 스타일

    리셋, 타이포그래피

  • components/

    재사용 가능한 컴포넌트

    버튼, 카드, 폼

  • layout/

    레이아웃 관련

    헤더, 푸터, 그리드

  • pages/

    페이지별 스타일

    홈, 어바웃 페이지

  • themes/

    테마 관련

    다크 모드, 라이트 모드

  • vendors/

    외부 라이브러리

    Bootstrap, Normalize

main.scss 구성

7-1 패턴에서 main.scss를 구성하는 예시입니다.

폴더 구조 선택 가이드

프로젝트에 어떤 폴더 구조를 선택할지 가이드라인을 제시합니다.

작은 프로젝트 (1~5페이지)

작은 프로젝트에는 단일 폴더 구조가 적합합니다.

간단하고 직관적이어서 작은 프로젝트에 적합합니다.

중간 프로젝트 (5~20페이지)

중간 프로젝트에는 카테고리별 폴더 구조가 적합합니다.

체계적이고 확장 가능하여 중간 프로젝트에 적합합니다.

큰 프로젝트 (20페이지 이상)

큰 프로젝트에는 7-1 패턴 또는 다층 구조가 적합합니다.

세밀한 분류와 대규모 관리가 가능하여 큰 프로젝트에 적합합니다.

정리

기본적인 SCSS 폴더 구조 예시에 대해 알아본 내용을 정리합니다.

  • 폴더 구조의 중요성: 명확한 역할, 직관적 네이밍, 확장 가능성, 일관성
  • 작은 프로젝트 구조: 단일 폴더, 파일만 분리, 간단하고 직관적
  • 중간 프로젝트 구조: 카테고리별 폴더, 체계적이고 확장 가능
  • 큰 프로젝트 구조: 다층 폴더, 세밀한 분류, 대규모 관리
  • 7-1 패턴: 7개 폴더와 1개 메인 파일로 구성된 널리 사용되는 패턴
  • 구조 선택 가이드: 프로젝트 크기에 따라 적절한 구조 선택

다음 페이지에서는 소규모 프로젝트에서의 SCSS 구조 설계를 자세히 알아봅니다.