[디자인시스템] 아토믹 디자인(Atomic Design)

• 아토믹 디자인은 원자(Atom)부터 시작하여 분자(Molecule), 유기체(Organism), 템플릿(Template), 페이지(Page)의 5단계로 구성된 컴포넌트 기반 디자인 시스템이다.

• 이 방법론은 컴포넌트의 재사용성과 일관성을 높여 유지보수 비용을 줄이고 통일감 있는 UI를 구현할 수 있도록 도와준다.

• 컴포넌트의 유연성과 재사용성을 높이기 위해 UI 상태와 이벤트 핸들러를 props로 처리하고, 레이아웃 관련 스타일은 외부에서 주입한다.

• 아토믹 디자인 적용 시 주의할 점으로는 Molecule과 Organism 구분 기준, 중복 컴포넌트와 불필요한 Props 증가, UI 변화 시 유연성 부족, 비효율 초래 가능성 등이 있다.