Next.js에서 Atomic Design pattern 적용하기

Atomic design pattern 이란

디자인 설계를 5가지 부분으로 나누는 방법입니다. 왼쪽에서 부터 가장 작은 단위에서 큰 단위로 조립됩니다.

적용하게된 계기

전에 하던 프로젝트에서 디자인 패턴을 적용시키지않고 폴더 구조를 짜다보니 중첩되는 컴포넌트를 다시 import 해서 쓰고 하는데 구조가 복잡해져서 공통화 할수있는 컴포넌트를 모아두면 좋겠다해서 찾아봤더니
Atomic design pattern 이 나와서 적용하게 되었다.

Atoms

1. 가장 기본적인 컴포넌트 블록입니다.
2. 예를들어, label, input, button 등 입니다.
3. color platettes나 폰트 혹은 애니메이션 같은 추상적인 컴포넌트들도 포함됩니다.
   

Molecules

1. atom들의 그룹
2. 컴파운드들의 가장 작고 기틀이 되는 단위
3. molcules 들은 자신만의 property를 가질 수 있습니다.
4. 예를들어, form, input, button은 개별적으로는 별로 중요하지 않지만, 세가지가 합쳐진다면 검색이라는 하나의 역할을 수행할 수 있습니다.
   

Organisms

1. molcule들의 모음
2. 인터페이스가 어떠한 모양을 갖기 시작하는 단계
3. 다른 mocule들을 바꿔서 사용할 수 있습니다.
4. 독자적이고 변형이 가능하고 재사용가능한 컴포넌트들을 만들 수 있습니다.
   

Templates

1. organism들의 그룹
2. layout과 디자인을 볼 수 있는 단계
3. 각각의 추상적인 molecules와 organism들에게 context를 제공하여 구체적인 페이지가 되는 단계
   

Pages

1. 페이지는 template의 구체적인 구현체
2. placeholder 대신 실제 사진을 입력
3. 디자인 시스템의 효율성을 테스트해보는 단계

적용한 사진