[setting] Atomic Design?

Atomic Design?

• (원자 - 분자 - 유기체 - 템플릿 - 페이지)
• 아토믹 디자인이 조금 더 컴포넌트를 나눌 때 도움이 될 거라고 생각이 들었다.
• 하지만, 아토믹 또한 모호한 면이 생기게 되었고 LINE Entry 📹에서 아토믹 디자인을 좀 더 유연하게 쓴 사례를 보게 되어 다시 정립하게 되었다.

Atom

• 원자 단위에서는 Button, h1과 같은 쪼갤 수 없는 단위를 말한다.
• 만약 CustomButton, LinkButton이 생기게 된다면 폴더를 하나로 합쳐야 할까?
  • A: 현재는 폴더를 따로 가야하는게 맞는 거 같다 if문 같이 분기를 타고 리턴하는 것은 나중에 유지보수 시 찾기 힘들 경 우가 많을 듯하다.

Molecule, Organism => Organism

• 분자는 Atom 2개 이상의 구성된다.
• 유기체는 분자 혹은 Atom를 구성하는 단위.
• Organism과 Molecule은 너무 모호한 면이라고 생각한다.
  • 작은 Card 영역을 Molecule로 생각할 수 있지만, 그렇다면 Card에 많은 Atom을 넣게 된다면 Molecule 영역에서 Organism으로 넘어가야 할까? 그렇다면 프로젝트에서 작업 중 Molecule과 Organism 영역에 깊은 고민에 빠지지 않을까?
    • A: Atom을 구성한 요소는 모두 Organism 영역으로 생각하게 되었다.
    • 반복되는 List, 하나 의 Item을 모두 Organism 영역으로 생각하면 될 거 같다.

Template

• 컴포넌트를 구성하는 레이아웃 틀

Page

• Atom + Organism + Template을 구성하는 최종 UI 페이지

실무에 적용이 가능한가?

• stop-using-atomic-design이 컴포넌트는 유기체에 비해 덜 복잡하니까 분자 아닌가요? UI 상으로는 원자끼리의 집합으로도 볼 수 있잖아요?

[setting] React 컴포넌트 분리와 폴더 구조화를 고사하면서 기존 실무 프로젝트에 도입하는 과정에서 5단계로 나누었을 때, 정말 의견 충돌이 많았다. 어디 부분이 Molecule, Organism 영역인지 모호했으며, Template이 생겨나게 되면, 합성 부분에서는 해당 영역 중 어디로 넣어야 할지 까다로웠다.

약 1주일이 지난 시점에서 Line에서 5단계로 이루어진 정의를 3단계로 줄인 사례를 찾게 되었고, 다시 모호한 면을 걷어 낼 수 있었다. 하지만, Template 영역이 모호한 부분이 아직 해결이 안 되었다.

페이지에 아토믹 패턴을 적용할 때, 내가 사용하는 컴포넌트 영역 중 재사용 영역이 적은 도메인 영역일 경우도 organism에 적용되기 때문에 폴더 관리가 떨어진다고 생각이 들었다. codesandbox

유기체에 atom 영역인 거 같지만 해당 유기체 영역에서 스타일을 정의를 하게 된다면, 코드 리뷰에서 의견을 나누는 순간 시간 소비가 많이 든다고 느꼈다. (feature의 이슈를 논의하는 게 아닌 아키텍처 논의가 늘어나는 것은 생산성에서 떨어진다고 판단된다.)
즉, 이러한 커뮤니케이션으로 합의가 이루어져야 한다면 나는 이 패턴은 별로라는 결정을 내리게 되었다. 단순히 폴더를 아키텍처를 만들고 관리하기 위함인데 협의를 통해 폴더를 만들고 있는 모습이 너무 웃픈 상황이 된 것이다.

하지만, 여기서 영감을 얻은 부분은 Atom, Organism을 디자인 시스템처럼 순수 함수의 합성 컴포넌트를 만들어 사용하고, 페이지에서 도메인 영역을 분리하게 된다면, 해당 폴더에서 자식 폴더를 만들어서 관리를 하는 방법으로 가게 되었다. 아토믹 디자인을 적용한 프로젝트 (Notepad)

비로써, [setting] React 컴포넌트 분리와 폴더 구조화를 만들 수 있었다.

참고

아토믹 디자인

적용 사례 1

적용 사례 2

적용 사례 3-1

적용 사례 3-2

적용 Project

• 문서

적용 영상

stop-using-atomic-design