아토믹 아키텍처 완벽 가이드 with Vue, Nuxt

출처: https://atomicdesign.bradfrost.com/chapter-2/#the-part-and-the-whole

 

목차

1. 왜 아토믹 아키텍처가 필요할까요?
2. 아토믹 아키텍처란?
3. 실전 예제로 배우는 아토믹 구조
4. 프로젝트에 적용하기

 

1. 왜 아토믹 아키텍처가 필요할까요?

여러분, 이런 경험 있으신가요? 🤔

• "components 폴더가 너무 복잡해졌어요..."
• "비슷한 코드가 여기저기 중복되어 있어요."
• "컴포넌트가 너무 커져서 수정하기가 무서워요."
• "다른 팀원의 코드를 이해하기 어려워요."

이런 문제들을 해결하기 위해 '아토믹 아키텍처'가 등장했습니다!

 

2. 아토믹 아키텍처란?

아토믹 아키텍처는 화학에서 영감을 받아 만들어졌어요. 마치 모든 물질이 원자로 이루어진 것처럼, UI도 작은 단위로 나누어 조립한다는 개념입니다.

다섯 가지 주요 컴포넌트 레벨

1. Atoms (원자)
   • 가장 기본이 되는 컴포넌트
   • 예: 버튼, 입력창, 라벨
   • 특징: 더 이상 쪼갤 수 없는 최소 단위!
2. Molecules (분자)
   • Atoms를 조합한 간단한 컴포넌트
   • 예: 검색창(입력창 + 검색버튼)
   • 특징: 한 가지 일만 하는 단순한 기능
3. Organisms (유기체)
   • 더 복잡한 컴포넌트
   • 예: 헤더(로고 + 네비게이션 + 검색창)
   • 특징: 독립적으로 동작 가능한 완성된 컴포넌트
4. Templates (템플릿)
   • 페이지의 뼈대
   • 예: 레이아웃
   • 특징: 실제 콘텐츠 없이 구조만 정의
5. Pages (페이지)
   • 실제 콘텐츠가 들어간 완성된 페이지
   • 특징: API 호출, 데이터 관리 담당

3. 실전 예제로 배우는 아토믹 구조

할 일 관리 앱(Todo App)을 만들어보면서 아토믹 구조를 이해해봅시다!

 

📁 components/
├── 📁 atoms/
│   ├── BaseButton.vue    (기본 버튼)
│   ├── BaseInput.vue     (기본 입력창)
│   └── BaseText.vue      (기본 텍스트)
├── 📁 molecules/
│   ├── TodoForm.vue      (할 일 입력 폼)
│   └── TodoItem.vue      (할 일 항목)
├── 📁 organisms/
│   └── TodoList.vue      (할 일 목록)
└── 📁 templates/
    └── DefaultLayout.vue (기본 레이아웃)

 

⭐ 실제 코드로 보는 각 레벨의 예시

1. Atom 예시 (BaseButton.vue)

<template>
  <button :class="[
    'p-2 rounded transition-all',
    variant === 'danger' ? 'bg-red-500' : 'bg-blue-500'
  ]">
    <slot></slot>
  </button>
</template>

<script setup lang="ts">
defineProps<{
  variant?: 'primary' | 'danger'
}>()
</script>

 

2. Molecule 예시 (TodoItem.vue)

<template>
  <li class="flex justify-between p-3 bg-gray-100 rounded">
    <BaseText>{{ todo.text }}</BaseText>
    <BaseButton 
      variant="danger"
      @click="$emit('delete-todo', todo.id)"
    >
      삭제
    </BaseButton>
  </li>
</template>

4. 프로젝트에 적용하기

시작하기 전 체크리스트 ✅

1. 컴포넌트 분류하기
   • "이 컴포넌트는 더 작게 나눌 수 있나요?"
   • "다른 곳에서도 재사용할 수 있나요?"
   • "이 컴포넌트의 역할이 명확한가요?"
2. 폴더 구조 만들기
    
3. 네이밍 컨벤션
   • Atoms: Base-로 시작 (예: BaseButton)
   • Molecules: 기능 중심 이름 (예: SearchForm)
   • Organisms: 영역 중심 이름 (예: TheHeader)
   • Templates: -Layout으로 끝남 (예: DefaultLayout)

src/
├── components/
│   ├── atoms/
│   ├── molecules/
│   ├── organisms/
│   └── templates/
└── pages/

🎯 실전 적용 팁

1. 점진적으로 적용하세요!
   • 새로운 기능부터 아토믹 구조 적용
   • 기존 코드는 천천히 리팩토링
2. 팀원과 합의하세요!
   • 컴포넌트 분류 기준 정하기
   • 코드 리뷰 시 구조 검토하기
3. 유연하게 적용하세요!
   • 프로젝트 특성에 맞게 수정
   • 너무 엄격하게 지키려고 하지 않기

마무리

아토믹 아키텍처는 처음에는 복잡해 보일 수 있지만, 실제로 적용해보면 코드 관리가 훨씬 쉬워집니다. 특히 팀 프로젝트에서는 큰 힘을 발휘하죠!😊