컴포넌트 재사용성과 UX 확장성을 고려한 구조 설계 – Atomic Design부터 폴더 구조까지 실전 가이드

컴포넌트 재사용성과 UX 확장성을 고려한 구조 설계 – 설계 기준, 폴더 구성, 공통화 전략 완전 가이드

React 개발을 하다 보면 “이 버튼, 또 만들었네…”, “이 카드 UI 어디서 본 것 같은데?” 같은 상황을 자주 겪습니다. 컴포넌트를 재사용 가능한 구조로 잘 만들어두지 않으면, 똑같은 UI를 여러 번 만들고, 유지보수도 점점 어려워지죠.

이번 글에서는 재사용성과 UX 확장성을 동시에 고려한 컴포넌트 설계 전략을 소개합니다.

컴포넌트 재사용성과 UX 확장성을 고려한 구조 설계 – Atomic Design부터 폴더 구조까지 실전 가이드

단순히 폴더만 나누는 게 아니라, ✅ 설계 기준 ✅ props 패턴 ✅ 공통 컴포넌트 분류법 ✅ 스타일 전략 ✅ 폴더 구조 예시 까지 실무 중심의 고급 전략으로 정리해보겠습니다.

---

1. 🔍 왜 재사용성과 확장성이 중요한가?

📌 재사용성의 핵심

• 같은 기능을 여러 컴포넌트에서 반복하지 않도록
• 디자인 일관성 유지
• 수정 시 한 곳만 고치면 되도록

📌 UX 확장성의 핵심

• 새로운 요구사항이 생겨도 유연하게 대응
• 디자이너와의 협업이 원활
• 비즈니스 흐름 변화에도 흔들리지 않음

➡️ 이 두 가지를 만족시키는 설계가 바로 현대 React 프로젝트의 핵심 역량입니다.

---

2. ⚙️ 컴포넌트 설계 기준 – 언제 나누고, 어떻게 쓸 것인가?

📦 나눠야 할 기준 5가지

1. 반복 여부: 동일한 UI가 다른 곳에서 반복되는가?
2. 변경 가능성: 재사용 시 props만 바꿔서 쓸 수 있는가?
3. 기능 분리: UI와 로직을 나눌 수 있는가?
4. 스타일 범용성: 디자인 시스템과 맞물리는가?
5. 유지보수 효율: 테스트와 문서화가 쉬운가?

✅ 실전 예시

• Button, Input → Atomic 컴포넌트로 분리
• Card, Modal → UI 패턴 단위로 분리
• ProductList, FilterBar → feature 레벨 컴포넌트

3. 🧱 Atomic Design 패턴 응용

디자인 시스템을 코드 구조에 반영하는 데 가장 효과적인 방법 중 하나는 바로 Atomic Design 패턴입니다.

🔹 원칙

• Atoms: Button, Input, Label 등 가장 작은 단위
• Molecules: Input + Label, ButtonGroup 등 조합 요소
• Organisms: Header, Footer, Form 등 복잡한 구조
• Templates / Pages: 전체 레이아웃을 구성하는 상위 요소

📁 예시 디렉터리 구조

components/
├── atoms/
│   ├── Button/
│   └── Input/
├── molecules/
│   └── SearchBar/
├── organisms/
│   └── Header/
│   └── ProductGrid/
├── templates/
│   └── ProductPage/

✅ 장점

• 구성 단위에 따라 컴포넌트를 자연스럽게 분리 가능
• 파일 구조가 UI 구조를 그대로 반영
• 디자이너와 협업 시 용어 통일이 쉬움

---

4. ⚙️ props 설계 전략 – 유연성과 명확성을 동시에

✅ 좋은 props의 조건

• 의미가 명확해야 함: isDisabled보다 moreGray 이런 건 피하기
• 역할이 분리되어야 함: style, callback, content는 분리
• 기본값을 잘 정의해야 함: defaultProps 또는 초기값 명시

📌 추천 props 패턴

Button.jsx
props:
- variant: 'primary' | 'secondary' | 'ghost'
- size: 'sm' | 'md' | 'lg'
- isLoading: boolean
- disabled: boolean
- onClick: () => void

🎯 컴포넌트 외부에서 스타일 제어 필요할 땐?

<Button className="custom-margin" />

➡️ 내부 스타일과 충돌하지 않게 className, style 등의 props는 따로 분리 설계합니다.

---

5. ♻️ 공통 컴포넌트화 – 어디까지 공통으로 뺄까?

📌 공통화 기준

• 2개 이상의 feature에서 반복 사용
• 스타일과 로직이 범용적
• 테스트와 문서화가 쉬운 단위

✅ 컴포넌트 예시

• 공통 가능: Button, Input, Dropdown, Modal, Toast
• feature 한정: ProductCard, UserMenu, AdminBanner

🎯 핵심은 재사용보다 “의도”입니다. "이 컴포넌트를 다른 화면에서도 쓰게 될까?"가 판단 기준입니다.

6. 🎨 컴포넌트 스타일 설계 전략

재사용성과 확장성을 고려한 설계에서는 스타일 관리도 구조화되어야 합니다.

✅ 스타일 방식 선택 가이드

• CSS Module: 파일 단위 분리 + 클래스 충돌 방지
• Tailwind CSS: 빠른 UI 구현 + 디자인 시스템 일치
• Emotion / Styled Components: props 기반 동적 스타일

📦 스타일 폴더 구조 예시

components/
└── Button/
    ├── index.jsx
    ├── Button.module.css
    └── theme.js (variant, size 별 스타일 모음)

📌 글로벌 스타일 적용 팁

• 디자인 토큰 기반 스타일 변수 활용 (colors.js, spacing.js 등)
• 공통 스타일은 styles/base.css 등으로 분리

---

7. 🗂️ 실전 폴더 구조 예시 (중대형 프로젝트 기준)

src/
├── components/
│   ├── atoms/
│   ├── molecules/
│   ├── organisms/
│   └── index.ts
├── features/
│   ├── auth/
│   ├── product/
│   └── user/
├── hooks/
├── stores/
├── styles/
├── pages/
├── layouts/
├── utils/
├── assets/
├── constants/
└── App.tsx

📌 폴더 구성 팁

• components: UI 기반 분리 (디자인 시스템 중심)
• features: 비즈니스 로직 기반 컴포넌트
• hooks/stores/utils: 기능 분리 & 재사용을 고려한 분류

---

8. 🧠 마무리 – 컴포넌트 구조 설계의 핵심은 '예측가능성'

잘 설계된 컴포넌트 구조는 새로운 기능을 추가해도 쉽게 확장할 수 있고, 다른 사람이 코드를 봐도 빠르게 이해할 수 있도록 돕습니다.

✨ 핵심 설계 요약

• Atomic Design 구조로 컴포넌트 계층 구분
• 공통화 기준: 2회 이상 반복, 범용성, 테스트 용이성
• props는 명확하고 최소한으로, 동적 스타일은 분리
• 스타일은 일관된 디자인 토큰 기반으로 구조화
• 폴더 구조는 UI 중심 + 기능 중심이 조화를 이뤄야 함

여러분의 React 앱이 더 견고하고 유연하게 성장할 수 있도록, 오늘의 설계 전략이 실무에 도움이 되길 바랍니다!

---

글이 유익하셨다면 댓글과 공감으로 응원해주세요 🙌