디자인 시스템 SCSS 구조 - by. UXKM

tokens/ 폴더

역할: 디자인 시스템의 모든 값을 정의하는 폴더입니다.

• 포함해야 할 것: 색상, 타이포그래피, 간격, 둥근 모서리, breakpoint 등의 값 정의
• 포함하면 안 될 것: 실제 CSS 스타일 규칙, 컴포넌트 스타일
• 의존성: 다른 폴더에 의존하지 않음 (가장 아래 레이어)

tokens 폴더는 순수한 값 정의만 포함하며, 실제 스타일을 작성하지 않습니다.

base/ 폴더

역할: 기본 HTML 요소의 스타일을 정의하는 폴더입니다.

• 포함해야 할 것: Reset 스타일, 기본 HTML 요소(body, h1-h6, p, a 등) 스타일
• 포함하면 안 될 것: 컴포넌트 스타일, 레이아웃 스타일
• 의존성: tokens 폴더만 의존

base 폴더는 프로젝트의 기본 스타일을 정의하며, 모든 컴포넌트의 기반이 됩니다.

layout/ 폴더

역할: 페이지 레이아웃과 구조를 정의하는 폴더입니다.

• 포함해야 할 것: App Layout, Grid, Flex 레이아웃, Container
• 포함하면 안 될 것: 컴포넌트 내부 레이아웃, 개별 컴포넌트 스타일
• 의존성: tokens, base 폴더 의존

layout 폴더는 페이지 전체 구조를 담당하며, 반응형 로직도 여기에서 관리합니다.

components/ 폴더

역할: 재사용 가능한 UI 컴포넌트를 정의하는 폴더입니다.

• 포함해야 할 것: Button, Card, Input, Checkbox 등 독립적인 컴포넌트
• 포함하면 안 될 것: 페이지 특정 스타일, 레이아웃 스타일
• 의존성: tokens, base 폴더 의존 (layout은 선택적)

components 폴더의 각 파일은 독립적으로 동작하며, 다른 컴포넌트에 의존하지 않습니다.

themes/ 폴더

역할: 테마별 토큰 값을 정의하는 폴더입니다.

• 포함해야 할 것: Light/Dark 등 테마별 CSS 변수 정의
• 포함하면 안 될 것: 컴포넌트 스타일, 레이아웃 스타일
• 의존성: tokens 폴더 의존 (토큰의 값을 재정의)

themes 폴더는 tokens의 값을 테마별로 재정의하며, 컴포넌트 코드는 변경하지 않습니다.

main.scss 작성

의존성 순서를 고려한 main.scss 구성입니다.

이 순서를 지켜야 각 레이어가 필요한 값을 사용할 수 있습니다.

@forward를 활용한 구조

각 폴더에 index 파일을 만들어 @forward로 정리하면 더 체계적으로 관리할 수 있습니다.

@forward를 사용하면 각 폴더의 내부 구조를 숨기고, 폴더 단위로 관리할 수 있습니다.