What is Atomic design?

magnet·2021년 11월 9일
0

출처
https://overthecode.io/the-meaning-and-limits-of-atomic-design-from-a-software-design-perspective/
https://sumini.dev/guide/009-dont-use-atomic-design/
https://speakerdeck.com/feel5ny/atomig-paeteoneuro-dijaineowa-hyeobeobhagi?slide=79

서론

아토믹디자인이 뭔가? 아마 디자인패턴중에 가장 핫한 주제가 아닐까 한다(지금은 조금 식은거같지만).

프론트엔드 엔지니어 또한 이러한 디자인 패턴을 통해 얻을수있는 이익이 많다고 생각한다.

현재까지 내가알기로 아토믹디자인이 적용된 사례로는 쏘카(socar)

그 기본골자는 바로

원자(최소단위)까지 분해 및 재조립

이게 상당히 골때렸다. 최소단위까지 분해한다음 재조립한다. 생각만해도 해야할 일들이 눈앞에 펼쳐져 눈앞이 아찔하다.

이 atoms안에 button이 있고 버튼에 일일이 패딩값과 어트리뷰트값들이 만들어진 최소단위들이 모여 분자(molecules)를 만들고..

상당히 그럴듯하게 들리지만 일을 하기위해 일을 한다는 느낌이 너무 많이 든다.

물론 여기에는 많은 장점들이 있다. 재활용성, 컴포넌트들의 유기성등 장점들이 너무 많지만... 이런 디자인패턴은 내 생각에는 대규모프로젝트일경우 고려해볼 만한 사항이다. 적어도 서비스기간이 5년이상 살아남는다는 기준이다.

예를들어 이러한 작은 카드를 하나 만든다고 생각하자. 버튼이 약 4개이지만 구독(toggle_btn)버튼의 경우 혹은 nightmode버튼의 경우 혹은 이 버튼 하나로 인터렉티브하게 화면이 바뀌는경우 단순히 atom에 넣기엔 애매해진다는 이야기다.
때문에 단순한 예외로 두기엔 이런것들이 너무 많기때문에 작성해야할 서류들도 많아지고 아토믹디자인의 최대장점 단순함이 사라진다


(밟아야할 지뢰가 늘었습니다?)

한마디로 표현하자면 아토믹디자인은 레고조립이라고 할수있겠다. 레고 하나하나마다 의미와 용도를 부여한 후 그것을 이용해 많은것들을 만드는... 때문에 ui/ux디자이너와 프론트엔지니어간의 약속이 상당히 중요했었다 새로운 레고조각을 만들때마다 "이건 4x8 긴막대로써 건물에 들어가는 기본 골재야" 하면서 말이죵

profile
풀스택을 지향하는 한 발자국씩 삽질하기

0개의 댓글