소규모 프로젝트에서의 SCSS 구조 설계 - by. UXKM

Publishing
SCSS
파일 분리와 SCSS 구조 설계
소규모 프로젝트에서의 SCSS 구조 설계

요약 설명
소규모 프로젝트는 간단한 구조로 시작하되, 나중에 확장할 수 있는 구조를 설계하는 것이 중요합니다.
너무 복잡한 구조는 오히려 부담이 될 수 있으므로, 프로젝트 규모에 맞는 적절한 구조를 선택해야 합니다.

이 페이지에서는 소규모 프로젝트의 특징, 적합한 폴더 구조, 파일 구성, main.scss 작성법, 확장 가능한 구조 설계, 그리고 실제 예시를 상세히 알아봅니다.

소규모 프로젝트의 특징

소규모 프로젝트는 다음과 같은 특징을 가집니다.
페이지 수가 적고, 컴포넌트가 적으며, 팀 규모가 작은 프로젝트의 특성을 이해해 두면, 과도한 구조 설계를 피하고 실용적인 구조를 선택할 수 있습니다.

소규모 프로젝트란?: 페이지 수가 적음: 1-5페이지 정도의 작은 웹사이트; 컴포넌트가 적음: 버튼, 카드 등 기본적인 컴포넌트만 사용; 팀 규모가 작음: 1-2명이 작업하는 프로젝트; 기간이 짧음: 빠르게 완성해야 하는 프로젝트

소규모 프로젝트의 요구사항: 간단한 구조: 복잡한 폴더 구조보다는 간단한 구조; 빠른 개발: 구조 설계에 시간을 많이 쓰지 않고 빠르게 개발; 유지보수 용이: 나중에 수정하기 쉬운 구조; 확장 가능성: 필요하면 나중에 확장할 수 있는 구조

소규모 프로젝트 구조 설계

소규모 프로젝트에 적합한 구조를 설계하는 방법을 알아봅니다.
최소한의 파일로 시작하되, 각 파일의 역할을 명확히 정의하면, 나중에 프로젝트가 커져도 확장하기 쉬운 기반을 만들 수 있습니다.

최소한의 구조

소규모 프로젝트는 최소한의 구조로 시작하는 것이 좋습니다.

								scss/
								  ├─ _variables.scss    // 변수
								  ├─ _mixins.scss       // 믹스인
								  ├─ _base.scss         // 기본 스타일
								  ├─ _components.scss   // 컴포넌트
								  └─ main.scss          // 메인 파일

이 구조는 간단하면서도 확장 가능합니다.

각 파일의 역할

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

_variables.scss

프로젝트에서 사용하는 모든 변수를 정의합니다.

									// _variables.scss
									// 색상
									$color-primary: #0a58ca;
									$color-secondary: #6c757d;

									// 간격
									$spacing-sm: 8px;
									$spacing-md: 16px;
									$spacing-lg: 24px;

									// 폰트
									$font-size-base: 16px;
									$font-weight-bold: 700;

_mixins.scss

프로젝트에서 사용하는 모든 믹스인을 정의합니다.

									// _mixins.scss
									@mixin flex-center {
									  display: flex;
									  justify-content: center;
									  align-items: center;
									}

									@mixin button-base {
									  padding: 8px 16px;
									  border-radius: 4px;
									}

_base.scss

프로젝트의 기본 스타일을 정의합니다.

									// _base.scss
									* {
									  margin: 0;
									  padding: 0;
									  box-sizing: border-box;
									}

									body {
									  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
									  font-size: 16px;
									  line-height: 1.5;
									}

_components.scss

프로젝트에서 사용하는 모든 컴포넌트 스타일을 정의합니다.

									// _components.scss
									.button {
									  padding: 8px 16px;
									  background: #0a58ca;
									  color: #ffffff;
									}

									.card {
									  background: #ffffff;
									  border-radius: 8px;
									  padding: 16px;
									}

main.scss 작성법

소규모 프로젝트에서 main.scss를 작성하는 방법을 알아봅니다.
변수 → 믹스인 → 기본 스타일 → 컴포넌트 순서로 파셜을 불러오면, 의존성 문제 없이 모든 스타일을 사용할 수 있어 실무에서 바로 적용할 수 있는 패턴입니다.

기본 main.scss

소규모 프로젝트의 기본 main.scss 구성입니다.

								// main.scss
								// 1. 변수 (가장 먼저 불러오기)
								@use "variables";

								// 2. 믹스인 (변수 사용 가능)
								@use "mixins";

								// 3. 기본 스타일
								@use "base";

								// 4. 컴포넌트
								@use "components";

이 순서로 불러오면 의존성 문제 없이 모든 스타일을 사용할 수 있습니다.

의존성 순서

파일을 불러오는 순서가 중요합니다.

								// ✅ 올바른 순서
								@use "variables";  // 1. 변수 (다른 파일에서 사용)
								@use "mixins";     // 2. 믹스인 (변수 사용 가능)
								@use "base";       // 3. 기본 스타일
								@use "components"; // 4. 컴포넌트 (변수, 믹스인 사용 가능)

								// ❌ 잘못된 순서
								@use "components"; // 에러! variables와 mixins가 아직 불러와지지 않음
								@use "variables";

변수 → 믹스인 → 기본 스타일 → 컴포넌트 순서로 불러오는 것이 안전합니다.

확장 가능한 구조 설계

소규모 프로젝트도 나중에 확장할 수 있도록 구조를 설계하는 것이 좋습니다.

초기 구조

프로젝트 시작 시 간단한 구조로 시작합니다.

								scss/
								  ├─ _variables.scss
								  ├─ _mixins.scss
								  ├─ _components.scss
								  └─ main.scss

확장 시 구조

프로젝트가 커지면 파일을 분리하여 확장합니다.

								scss/
								  ├─ _variables.scss
								  ├─ _mixins.scss
								  ├─ _base.scss          // 새로 추가
								  ├─ _buttons.scss       // components에서 분리
								  ├─ _cards.scss         // components에서 분리
								  ├─ _forms.scss         // 새로 추가
								  └─ main.scss

이렇게 하면 초기 구조를 유지하면서 점진적으로 확장할 수 있습니다.

확장 가이드라인

프로젝트를 확장할 때 다음 기준을 참고합니다:

파일이 200줄 이상: 파일을 분리 고려
명확한 기능 구분: 버튼, 카드 등 기능이 명확히 구분될 때 분리
여러 곳에서 사용: 특정 컴포넌트가 여러 곳에서 사용될 때 분리

실제 프로젝트 예시

이론으로 배운 내용을 실제 프로젝트에 적용하는 것은 쉽지 않을 수 있습니다.
다음 예시들은 소규모 프로젝트에서 실제로 사용할 수 있는 구조를 보여줍니다. 각 예시는 프로젝트의 성격과 규모에 따라 어떤 구조가 적합한지 판단하는 데 도움이 됩니다.
이 예시들을 참고하여 자신의 프로젝트에 맞는 구조를 선택하고 조금씩 변형하여 사용하면 됩니다.

예시 1: 랜딩 페이지

단일 페이지 랜딩 페이지의 구조 예시입니다.

								scss/
								  ├─ _variables.scss
								  │   // $color-primary: #0a58ca;
								  │   // $spacing-md: 16px;
								  │
								  ├─ _mixins.scss
								  │   // @mixin flex-center { }
								  │
								  ├─ _base.scss
								  │   // body { }
								  │   // h1, h2 { }
								  │
								  ├─ _components.scss
								  │   // .hero { }
								  │   // .button { }
								  │   // .section { }
								  │
								  └─ main.scss
								      // @use "variables";
								      // @use "mixins";
								      // @use "base";
								      // @use "components";

예시 2: 소규모 웹사이트

3~5페이지 웹사이트의 구조 예시입니다.

								scss/
								  ├─ _variables.scss
								  │   /* 색상, 간격, 폰트 변수 */
								  │
								  ├─ _mixins.scss
								  │   /* flex-center, button-base 등 */
								  │
								  ├─ _base.scss
								  │   /* 리셋, 타이포그래피 */
								  │
								  ├─ _layout.scss
								  │   /* 헤더, 푸터, 컨테이너 */
								  │
								  ├─ _components.scss
								  │   /* 버튼, 카드, 폼 등 */
								  │
								  └─ main.scss
								      /* @use "variables"; */
								      /* @use "mixins"; */
								      /* @use "base"; */
								      /* @use "layout"; */
								      /* @use "components"; */

소규모 프로젝트 구조 설계 체크리스트

필수 파일: _variables.scss: 변수 정의 (색상, 간격, 폰트 등); _mixins.scss: 믹스인 정의 (재사용 가능한 스타일); _base.scss: 기본 스타일 (리셋, 타이포그래피); _components.scss: 컴포넌트 스타일 (버튼, 카드 등); main.scss: 메인 파일 (모든 파셜 불러오기)

선택적 파일: _layout.scss: 레이아웃 관련 스타일 (헤더, 푸터 등); _utilities.scss: 유틸리티 클래스 (마진, 패딩 등); _themes.scss: 테마 관련 스타일 (다크 모드 등)

모범 사례

소규모 프로젝트에서 구조를 설계할 때 지켜야 할 모범 사례를 정리합니다.

간단하게 시작

너무 복잡한 구조로 시작하지 말고, 간단하게 시작하는 것이 좋습니다.
프로젝트가 작을 때는 복잡한 폴더 구조가 오히려 부담이 될 수 있습니다.

								// 작은 프로젝트인데 7-1 패턴으로 시작
								scss/
								  ├─ abstracts/
								  ├─ base/
								  ├─ components/
								  ├─ layout/
								  ├─ pages/
								  ├─ themes/
								  └─ vendors/
								// 대부분의 폴더가 비어있거나 1~2개 파일만 있음
								// 유지보수가 오히려 어려움

								// 작은 프로젝트에는 단순한 구조로 시작
								scss/
								  ├─ _variables.scss
								  ├─ _mixins.scss
								  ├─ _components.scss
								  └─ main.scss
								// 필요한 것만으로 시작하고, 필요할 때 확장

필요할 때 점진적으로 확장하는 것이 프로젝트 초기에는 더 효율적입니다.

일관성 유지

프로젝트 전체에서 일관된 네이밍과 구조를 유지하는 것이 중요합니다.
일관성 있는 구조는 코드를 찾고 이해하는 데 걸리는 시간을 줄여줍니다.

								// 네이밍 규칙이 통일되지 않음
								_button.scss      // 언더스코어로 시작
								button.scss       // 언더스코어 없음
								Button.scss       // 대문자로 시작
								btn-style.scss    // 줄임말 사용
								// 어떤 파일이 어떤 규칙을 따르는지 혼란스러움

								// 모든 파셜 파일은 언더스코어로 시작
								_variables.scss
								_mixins.scss
								_buttons.scss
								_cards.scss
								// 모든 컴포넌트는 복수형 사용 (또는 단수형으로 통일)
								// 한 가지 규칙으로 통일되어 있어 찾기 쉬움

프로젝트 시작 전에 네이밍 규칙을 정하고, 모든 파일에 일관되게 적용하는 것이 중요합니다.

확장 가능성 고려

초기 구조를 설계할 때 나중에 확장할 수 있는 구조를 고려합니다.
프로젝트가 커질 때 구조를 변경하는 것보다, 처음부터 확장 가능한 구조로 설계하는 것이 효율적입니다.

								// 프로젝트 초기: 모든 컴포넌트를 하나의 파일에
								_components.scss
								// - 버튼 스타일
								// - 카드 스타일
								// - 폼 스타일

								// 프로젝트 확장 시: 기능별로 분리
								_buttons.scss   // _components.scss에서 분리
								_cards.scss     // _components.scss에서 분리
								_forms.scss     // _components.scss에서 분리
								// 각 파일이 독립적으로 관리 가능

초기에는 하나의 파일에 관련 코드를 모아두되, 기능별로 섹션을 나누어 작성하면 나중에 분리하기 쉽습니다.

정리

소규모 프로젝트에서의 SCSS 구조 설계에 대해 알아본 내용을 정리합니다.

소규모 프로젝트 특징: 페이지 수 적음, 컴포넌트 적음, 팀 규모 작음, 기간 짧음
최소한의 구조: _variables, _mixins, _base, _components, main.scss
각 파일의 역할: 변수, 믹스인, 기본 스타일, 컴포넌트 스타일
main.scss 작성법: 의존성 순서 고려 (변수 → 믹스인 → 기본 → 컴포넌트)
확장 가능한 구조: 초기에는 간단하게, 필요시 점진적으로 확장
실제 예시: 랜딩 페이지, 소규모 웹사이트 구조 예시
모범 사례: 간단하게 시작, 일관성 유지, 확장 가능성 고려

지금까지 학습한 SCSS 문법과 구조 설계 방법을 바탕으로, 다음 장에서는 실무에서 바로 사용할 수 있는 디자인 시스템 예제를 단계별로 구성해봅니다.
디자인 토큰, 레이아웃 시스템, UI 컴포넌트, 테마 시스템 등을 실제로 구현하면서, SCSS가 어떻게 실무 구조로 완성되는지 체감할 수 있습니다.