2023.08.11(Fri.) <Atomic Design Pattern>

작은 것들을 모아 정리 하는 느낌이랑 비슷한 느낌이라 가져온 짤입니다 틀니 딱딱딱! (윈도우98입니다)

1. 문제의 발단

• RN 강의를 듣던 중 강사님이 참 폴더 구조들을 정리를 잘한다고 생각했다.
• 지금 프로젝트도 나름 정리를 하여 사용한다고 생각했지만, 뭔가 10% 부족하다고 느꼈다. 폴더 구조에 대한 정답은 없기 때문이다.
• 그래서 그나마 정답에 가까운 것을 찾아 보려고 한다.

2. Atomic Design Pattern?

• React의 구조는 수많은 컴포넌트로 되어 있다. 그러므로 똑같은 코드를 여러 번 사용하는 극한의 재사용성을 보여줄 수 있다.
• 하지만 아무리 유용한 컴포넌트라도 어디에 있는지 찾지 못 하면 낭패다. 마치 침대 위 TV리모컨처럼 말이다.
• 그래서 유형별로, 혹은 특정 공통점을 기준으로 잘 정리해 두려고 한다. 이때 atomic design pattern은 '디자인'을 중점적으로 이용하여 정리하고 그를 먼저 만들고 조립하는 디자인 시스템을 뜻한다.

3. 그림으로 보는 Atomic Design Pattern

출처 https://uxdesign.cc/atomic-design-2022-what-we-can-learn-from-eames-and-other-design-giants-4d8e2f579daa

• 이렇게 자동차가 만들어지는 것처럼 가장 작은 단위 (작은 나사, 철 프레임등)가 뭉쳐 하나의 기능을 하는 의미 있는 구성품이 되고, 그것들이 모여 기능을 하는 프로젝트를 구성하게 된다.

출처 : https://actgovproject.bitbucket.io/

• 웹버전에서 보면 이런 그림이다.
• 작은 기능을 하는 태그, 디자인에 필요한 아이콘 등이 합쳐저서 하나의 기능을 하는 작은 컴포넌트가 되고, 그들이 모여 큰 레이아웃을 형성하게 되면서, 데이터를 넣으면 큰 페이지가 된다.

4. 어떻게 진행 되는가

1. Atoms : 가장 작은 디자인 요소의 단위
2. Molecules : 적어도 하나의 기능은 할 수 있는 컴포넌트 단위
3. Organisms : 하나의 기능을 하는 요소들을 합쳐 디자인적 요소까지 더한 유저들에게 의미를 부여한 단위
4. Template : 데이터를 연결하기 전의 레이아웃 단위
5. Page : 유저들이 보는 단위

5. 실전편

📦atomic-design-pattern-test
 ┣ 📂components
 ┃ ┣ 📂atoms
 ┃ ┣ 📂moecules
 ┃ ┣ 📂organisms
 ┃ ┗ 📂templates
 ┗ 📂pages

• 정말 직관적인 네이밍
• 가끔 헷갈리는 부분이 있다. 무엇이 molecules이고, 무엇이 organisms 일까??
  • 나는 너무 고민하지 않기로 했다. 그저 '우리'가 보기 편하면 모든 것이 완벽하다고 생각했기 때문에 기획자와 디자이너와 적당한 합의 후에 디자인 시스템부터 나누어 생각했다.
  • 우리가 이 컴포넌트는 molecules라고 말하면 molecules인 것이고, organisms이면 organisms인 것이다. 그래서 우리들만의 규칙을 만들어 나누어 주었다. (ex: 결제나 비즈니스 로직이 들어간 컴포넌트면 organisms로 보자)

6. 결론

• 정답은 없다. 이것 또한 개발을 그리고, 구조를 편하게 정리하고 보기 위해 만드는 디자인 패턴일 뿐이니까 말이다.
• 결국 우리가 선택한 구조는 페이지를 기준으로 기능적인 부분을 때서 나눠놓은 패턴이 되었다(아, 정리했는데 ㅎㅎ)
• 프로젝트마다 어떤 디자인 페턴을 선택하는지가 이후에 프로젝트의 규모가 거대해졌을 때도 큰 영향을 미치니, 최대한 확장성과 정확한 규칙을 토대로 만들어 가는 것이 좋을 것 같다.