[React-Native] 디자인 시스템(Atomic Design) 도입기

📎 문제 상황 

기존 디렉토리 구조

├── 📁 assets
│   ├── 📁 fonts
│   ├── 📁 images
├── 📁 components
│   ├── 📁 appList
│   │	├── AppNameButton.js
│   │	└── AppInfoButton.js
│   ├── 📁 myPage
│   │	├── MyPageInfoText.js
│   │	└── MyPageInfoHeader.js
│   ├── 📁 main
│   │	├── DailyWorkContainer.js
│   │	└── ...
│   ├── 📁 notice
│   │	├── NoticeButton.js
│   │	└── ...
│   └── ...
├── 📁 screens
│   ├── appListScreen.js
│   ├── myPageScreen.js
│   └── ...
├── 📁 utils
├── 📁 api
└── App.js

 

• assets: 이미지, 폰트, 아이콘 등의 정적 리소스 파일을 모아둔 디렉토리입니다.
• components: 도메인별로 UI 컴포넌트를 모아둔 디렉토리입니다.
• screens: UI 컴포넌트를 조립하여 구성한 주요 화면 단위를 모아둔 디렉토리입니다. 
• utils: 헬퍼 함수를 모아둔 디렉토리입니다.
• api: API 호출 로직을 모아둔 디렉토리입니다.

🙂 장점

• 관련 파일들이 한 곳에 모여 있어 찾기 쉽습니다.

🙃 단점

• 도메인별로 나눠서 관리하기 때문에 다른 도메인에서 컴포넌트 재사용이 어렵습니다.
• 컴포넌트 분리 기준이 정확하지 않아 재사용이나 확장성에 어려움을 겪을 수 있습니다. 

컴포넌트 분리 기준 명확 X

 

🙋🏻‍♀️ 개선 방안

• 컴포넌트 분리 기준 설계하여 일관성 있게 컴포넌트를 구성하고, 컴포넌트 재사용성을 향상시키자.
• 그럼 분리 기준은 어떻게 설계할까? 아토믹 디자인을 참고하자. 

 

💡 Atomic Design

 

컴포넌트를 atoms, molecules, organisms, templates, pages 5단계로 나눠 관리하는 방식

• atoms(원자)
  • 가장 작은 단위의 요소
  • button, text, input ...
• molecules(분자)
  • atom들을 최소의 역할 수행할 수 있게 합한 그룹
  • button + text + input
• organisms(유기체)
  •  배치를 위한 layout 단위로 하나의 인터페이스를 형성하는 그룹
  • header, navigation
• templates(템플릿)
  •  orgainisms들을 레이아웃이나 데이터 흐름으로 연결하여 전체적인 페이지 구조를 만드는 단계
• pages(페이지)
  • templates에 실제 데이터를 적용하여 완성된 페이지

 

 

🚗 적용 과정

👻 고민한 부분

1. molecules랑 organisms 분리 기준은 어떻게 설정할 것 인가

• molecules: 재사용 가능성 O
• organisms: 재사용 가능성 X, (주로 header/navigation/contents 로 구성되도록 하였음)

2. templates, pages 통합하자

• 현 프로젝트에서 나누는 것이 무의미하다고 판단되었음
• Props Drilling 문제 해소 가능

 

아토믹 디자인 적용한 디렉토리 구조

├── 📁 assets
│   ├── 📁 fonts
│   └── 📁 images
├── 📁 components
│   ├── 📁 atoms
│   │	├── 📁 Button
│   │	│	├── HeaderMenuButton.js
│   │	│	├── BackButton.js
│   │	│	└── ...
│   │	├── 📁 Image
│   │	│	├── CompanyAppIconImage.js
│   │	│	└── ...
│   │	├── 📁 Input
│   │	│	└── LoginInput.js
│   │	└── 📁 Text
│   │		├── NoticeTitleText.js
│   │		├── NoticeInfoText.js
│   │		└── ...
│   ├── 📁 molecules
│   │	├── 📁 Global
│   │	│	├── CompanyInfo.js
│   │	│	└── AppInfo.js
│   │	├── 📁 Profile
│   │	│	└── ProfileInfo.js
│   │	├── 📁 Main
│   │	│	└── NoticeTitle.js
│   │	└── 📁 DailyWork
│   │		└── DailyWorkInfo.js
│   └── 📁 organisms
│   	├── 📁 Global
│   	│	└── Header.js
│   	├── 📁 Profile
│   	│	└── ProfileContents.js
│   	├── 📁 Main
│   	│	└── NoticeContents.js
│   	└── 📁 DailyWork
│   		└── DailyWorkContents.js
├── 📁 pages
│   ├── 📁 Profile
│   │	└── index.js
│   ├── 📁 Main
│   │	└── index.js
│   └── 📁 DailyWorks
│   	└── index.js
│   	└── index.form.js
├── 📁 utils
├── 📁 api
└── App.js

📍 네이밍 규칙

1️⃣ 디렉토리

atoms: 기능별 디렉토리 구조(button, image, text ...)

molecules, organisms, pages: 도메인별 디렉토리 구조(global(공통), main, profile ...)

2️⃣ 컴포넌트 

atoms: 도메인/세부설명/기능 (ex. NoticeTitleText)

molecules, organisms: 도메인을 접두사로 사용 (ex. ProfileInfo, ProfileContents)

 

😇 느낀점

👎🏻 처음부터 잘 설계하고 개발하자 (구조 변경하는데 꽤나 시간이 소요되었음)

👎🏻 Props Drilling 를 해소할 수 있는 방안에 대해 고민해봐야할 것 같다. 

 

👍🏻 재사용 가능한 UI 컴포넌트를 체계적으로 구축하여, 디바이스별 디자인을 적용이 편리해졌다.

👍🏻 컴포넌트 간의 의존성을 낮추어 유지보수 용이, 재사용성 향상할 수 있었다.

 

 

 

---

💙 참고 자료 

• https://fe-developers.kakaoent.com/2022/220505-how-page-part-use-atomic-design-system/
• https://gsretail.tistory.com/20