스타트업 PM 단어백과 컴포넌트와 아토믹디자인?! 차이
Component design, Atomic design 알고 계신가요!
구독자 여러분들 안녕하세요, [스타트업 PM이 알려주는 스타트업 필수 단어!]
오늘은 컴포넌트와 아토믹 디자인에 대해 알아보겠습니다. Tech 직군이시라면 너무나 많이 들어보셨겠지만,
과연 어떤 의미를 갖고있는지 알아보겠습니다!
먼저 두개의 컴포넌트 기반 디자인과 아토믹 디자인은 둘 다 웹 및 앱 디자인에서 매우 중요한 개념이지만, 약간의 차이가 있습니다. 그 차이에 대해 알아보러 가실까요!?
컴포넌트 기반 디자인:
컴포넌트 기반 디자인은 인터페이스를 작은 부분으로 나누고 이러한 부분을 재사용 가능한 "컴포넌트"로 구성하는 디자인 패턴입니다. 이러한 컴포넌트는 독립적으로 작동할 수 있으며, 전체 디자인 시스템의 일부로서 사용됩니다. 각각의 컴포넌트는 자체적으로 의미론적이며, 스타일과 상태를 가질 수 있습니다.
컴포넌트 기반 디자인의 핵심 3가지 개념은 다음과 같습니다:
1) 재사용성: 각 컴포넌트는 재사용 가능하며, 다양한 컨텍스트에서 사용될 수 있습니다.
2) 독립성: 각 컴포넌트는 독립적으로 존재하며, 다른 컴포넌트와의 의존성이 낮아야 합니다.
3) 구성 가능성: 컴포넌트는 다양한 방식으로 조합하여 더 큰 인터페이스를 형성할 수 있어야 합니다.
아토믹 디자인:
아토믹 디자인은 인터페이스 요소를 더 작은 단위인 "원자(atom)"로 분해하여 디자인하는 접근 방식입니다. 원자는 매우 작고 단순한 구성 요소로, 버튼, 텍스트 입력 필드, 아이콘 등과 같은 것들을 포함합니다. 이러한 원자는 다양한 조합을 통해 더 복잡한 "분자(molecule)" 및 "유기체(organism)"로 발전할 수 있습니다.
아토믹 디자인를 바라보는 개념은 주요 3가지 개념은 다음과 같습니다:
1) 원자: 가장 기본적이고 단순한 디자인 요소로, 재사용 가능하고 독립적입니다. = Atomic Point of view
2) 분자: 여러 원자가 결합하여 형성된 더 큰 요소로, 더 복잡한 기능을 수행할 수 있습니다. = Molecule Point of view
3) 유기체: 분자와 다른 유기체들이 결합하여 형성된 완전한 디자인 요소로, 실제 인터페이스의 일부를 형성합니다. = Organic Point of view
약간 이해가 안가시죠!? 아토믹디자인의 주요 포인트는 디자인의 요소들을 작은 단위에서 큰 단위로 바라보는 관점이라고 생각하시면 됩니다. 확실한 이해를 위하여 예시를 들고 왔습니다. 페이지의 구성요소들 버튼을 하나의 아토믹으로 바라보고, 버튼의 결합체를 (상단 헤더) 분자구조로 보고, 상단헤더의 연결 구성을 유기체로 바라보는 것입니다. 즉, 컴포넌트 기반 디자인은 단위를 먼저 정의하고 이를 조합하여 인터페이스를 구성하는 반면, 아토믹 디자인은 원자를 시작으로 한 차곡차곡 쌓아 올려가는 접근 방식을 취합니다.
핵심 차이점:
1) 단위 크기: 컴포넌트 기반 디자인은 큰 단위의 재사용 가능한 컴포넌트를 강조하는 반면, 아토믹 디자인은 더 작은 단위의 원자부터 시작하여 조합해 나가는 것을 강조합니다.
2) 구조: 컴포넌트는 단독으로 존재하는 반면, 아토믹 디자인은 컴포넌트를 여러 단계로 분류하고 조합하는 구조를 제시.
3) 추상화 수준: 컴포넌트 기반 디자인은 더 높은 수준의 추상화를 제공하여 디자인 시스템을 관리하는 데 도움을 줍니다. 반면에 아토믹 디자인은 보다 구체적이고 세부적인 수준의 디자인 요소를 다룹니다.
비유:
컴포넌트는 건축 자재 (벽돌, 창문 등)
아토믹 디자인은 건축 설계도 (건축 자재를 사용하여 집을 만드는 방법)
결론:
컴포넌트 기반 디자인은 재사용 가능한 구성 요소에 중점을 두며, 아토믹 디자인은 작고 단순한 원자의 관점으로 시작하여 인터페이스를 구성하는 방식에 중점을 둡니다.
2024/03/27 Jayden!
추가로, MVP에 대해서 알고싶으시다면?!
