atomic-pattern

hskwon517·2022년 7월 1일
0

컴포넌트를 하나의 함수로 보고, 클린 아키텍쳐의 관점에서 재사용 가능한 컴포넌트들을 그 기능과 구성에 따라 구조화 하여 사용하는 패턴

Atomic Design Pattern

이는 프론트엔드 시스템을 구성하는 컴포넌트들을 논리 구조 (Building Blocks) 단위로 나누어 효율적으로 재사용하도록 만들어서, 불필요한 "코드 중복"을 제거하고 "클린"한 아키텍쳐를 유지할 수 있도록 한다

Atomic Design Pattern은 바로 "디자인 시스템을 위한 것"이라는 점이다
즉 애초에 "재사용 가능한 컴포넌트들의 집합"인 디자인 시스템에서 컴포넌트들을 효율적으로 구성하는 방식을 의미한다

컴포넌트로서의 디자인 시스템(개발자의 입장에서)은 말 그대로 특정한 디자인 가이드를 따르는(회사, 기관 등 공동체에서 약속한 디자인 가이드라인) Input, Button, Form등과 같은 "기본 구성 요소"들을 코드화하여 재사용성을 높인 컴포넌트들의 집합을 의미한다.

즉 "우리 회사에서 버튼의 종류는 4가지가 있고, 메인 컬러는 주황색, 보더는 8px정도로 둥글게 되어 있어야 해"라는 약속들을 컴포넌트로 구현하여 이를 사용하는 프로젝트에서 단순히 이를 import하여 사용할 수 있도록 만든 것이다.

디자인 시스템을 가지고 있는 회사나 기관의 정체성을 대변하는 Style이 들어가고(브랜드 컬러 등),
이를 재사용함으로써 불필요한 스타일링에 드는 리소스를 절약한다는 의미도 있지만

Atomic Design Pattern이 디자인 시스템을 위한 좋은 디자인 패턴인 이유는 디자인 시스템의 본질이 "컴포넌트를 기능의 단위로 나눈다는 점"에 있다

코드를 구조화하면 한두개의 페이지를 만드는 경우에는 괜찮을 수 있으나,
페이지가 많아질수록, "화면에 보이는" 요소들이 많아질수록 그에 비례해서 organisms, molecules들도 늘어나게 된다.

결국, "기능"을 고려하지 않고 "View"를 기준으로 요소들을 나누게 되면서 재사용하기도 어렵고, 관리하기도 어려운 아키텍쳐로 변하게 된다.

따라서 재사용 가능한 코드들은 "View" 보다 그 "기능"에 집중하여 구현해야 한다. 또한 "레이아웃"을 고려해야 하는 페이지들은 그 속성과 도메인에 따라 재량껏 적절한 디렉토리 구조로 옮기는 것이 좋다

profile
Frontend

0개의 댓글