Molecule 과 Organism (by PhoneAuth)

Atomic Design 분류하기

나는 작업을 시작하기 앞서 다음과 같이 3가지의 형태로 분류를 했다.

 

flowmap 만들기 

분류한 내용을 바탕으로, Atom / Molecule / Organism에 대한 컴포넌트 명을 만들어 놓고 작업을 시작했다.

Molecule? Organism ?

Atom 컴포넌트 생성까지는 큰 문제가 없었다. LabelInput (Molecule) 컴포넌트도 기능과 재사용성이 명확했기 때문에 만드는데 큰 문제가 없었다.

여기서 나는 궁금한 부분이 생겼다. PhoneAuth라는 컴포넌트는 Molecule로 사용하는것이 맞을까?

내가 이고민에 빠진 이유는 Molecule이라고 하기에는 재사용성이 없고, 그렇다고 Organism으로 잡기에는 기능이 너무 없다는 생각이 들었다.

그렇다면, Molecule과 Organism은 어떤 기준으로 설계를 해야될까 라는 생각이 들게 되었고 해당내용에 대해서 찾아보게 되었다.

 

 

나누는 기준의 주관성

Atomic Design 방법론으로 컴포넌트 시스템을 구성하다 보면 어느 순간 반드시 Molecule로 둘지 Organism에 둘지 고민하는 순간이 온다. 그런 경우 무의식적으로 컴포넌트가 차지하는 영역이 크다면 Organism에 넣고 아닌 경우 Molecule에 넣을 때가 많지만 별로 좋은 방법은 아니다.

다른 사례를 보면 React 용 Atomic Design 기반 Starter Kit인 ARc는 일단 너무 고민하지 말고 아무 곳에 넣고 추후 어떤 레이어에 속해야 하는지 알게 되면 정리하라고 권한다.

-effective-atomic-design-

 

 

위 내용에서 말하는 Molecule과 Organism에 대한 구분법은 다음과 같다.

• Molecule은 데이터를 표시하고 이벤트를 받을 수 있지만 "하나의 역할"만을 가진다.
• Organism은 사용자에게 의미를 가지는 기능적 요구사항에 포함되는 경우에 해당되는 컴포넌트다.

 

 

위내용을 바탕으로 바라본 나의 컴포넌트

 

컴포넌트의 복잡성이나 크기로만 생각한다면 휴대폰 인증 영역은 Organism이 아닌 Molecule로 들어갈 수 있다. 그렇기에 나는 처음에 이것을 Molecule로 지정했었다.

하지만 “휴대폰번호를 적고 인증을 요청한다.” , “인증 여부 확인을 위해 기다린다.” 라는 기능적 요구사항을 생각해 보았고, 이걸 바탕으로 나는 Organism에 포함시키기로 했다.

이처럼 기능적 요구사항 관점으로 생각을 해보는 편이 좋은거같다. 기능적 요구사항을 결정하는 부분은 어렵긴 하곗지만 최대한 많이 생각해보고 결정해야겠다.

만약에 아무리 생각해도 답이 안나온다싶으면 ARc 처럼 일단 아무곳이나 넣고 나중에 고민하는것도 좋은방법이라고 한다.