CSS 아키텍처 설계: 코드가 아닌 건축에서 시작하라

웹 개발에서 CSS는 단순한 스타일 도구를 넘어서는 구조적 사고가 필요한 분야입니다. 이번 글에서는 CSS 아키텍처를 어떻게 구성하고, 모듈화·재사용성·유지보수성을 고려한 구조를 어떻게 구현할 수 있는지 다뤄보겠습니다.

---

왜 CSS에도 아키텍처가 필요한가?

많은 개발자들이 프로젝트를 시작할 때 레이아웃과 구조 설계 없이 곧장 코딩에 들어가는 실수를 합니다. 하지만 이렇게 하면 시간이 지날수록 유지보수가 어려워지고, 기능 추가나 스타일 변경 시 문제가 생깁니다.

따라서 프로젝트 초반부터 아래 요소를 고민해야 합니다:

• 전체 레이아웃 설계
• 일관된 클래스 네이밍 전략
• 폴더 및 파일 구조 정의

---

컴포넌트 기반 디자인

**구성 요소 중심 설계(Component-based design)**는 CSS를 모듈화하는 핵심 철학입니다. UI를 **재사용 가능한 작은 조각(컴포넌트)**들로 나누고, 각각을 독립적으로 스타일링함으로써 재사용성과 확장성을 높일 수 있습니다.

• 컴포넌트는 독립적으로 존재 가능해야 함
• 페이지 어디에 배치해도 문제가 없어야 함
• 개발 속도 향상 + 유지보수 용이

이 개념은 브래드 프로스트의 원자 디자인(Atomic Design) 철학과도 연결됩니다.

---

클래스 네이밍 전략: BEM

BEM(Block Element Modifier)은 CSS 클래스 네이밍에서 가장 널리 사용되는 방식 중 하나입니다.

• Block: 독립적 UI 구성 요소 (ex. recipe, button)
• Element: Block 내부 구성 요소 (ex. recipe__info-panel)
• Modifier: 변형 또는 상태 (ex. button--rounded)

BEM의 장점은 명확한 구조와 높은 예측 가능성입니다. 클래스 이름만으로도 해당 요소의 역할과 위치를 파악할 수 있습니다.

예시:

<div class="recipe">
  <div class="recipe__info-panel">
    <button class="button button--rounded">Add</button>
  </div>
</div>

---

🗂 CSS 파일 구조: 7-1 패턴

효율적인 스타일링을 위해 7-1 폴더 구조 패턴을 도입할 수 있습니다. 이는 Hugo Giraudel이 제안한 방식으로, 아래와 같은 폴더로 구성됩니다:

폴더설명

abstracts/	변수, 믹스인 등 (출력 없음)
vendors/	외부 CSS 라이브러리
base/	기본 reset, typography
layout/	헤더, 푸터 등 페이지 구조
components/	버튼, 카드 등의 UI 구성 요소
pages/	특정 페이지 전용 스타일
themes/	다크모드, 특정 색상 테마 등

 

주요 Sass 또는 CSS 파일에서 이 모든 부분 파일을 @import하여 최종 CSS를 구성합니다.

---

✨ 결론

좋은 CSS 아키텍처는 디자인의 품질을 높이는 동시에 개발자의 삶을 편하게 만들어 줍니다.
구조적 사고와 명확한 전략을 통해 더 나은 CSS 코드를 작성해보세요.

코드 품질은 건축 설계에서 시작됩니다.