현대 디자인 시스템의 핵심 정신 모델인 Atomic Design은 종종 원자에서 페이지로 이어지는 선형적인 과정으로 잘못 적용됩니다. 작은 부분들을 조립하여 컴포넌트 라이브러리를 구축하는 데 이상적이지만, 제품 작업은 일반적으로 사용자 경험 관점에서 시작하여 화면상의 사용자 요구와 행동에 초점을 맞춥니다. 이 "범위 우선" 접근 방식은 단순히 컴포넌트를 나열하는 것보다 사용자가 무엇을 해야 하고 그들의 행동이 무엇에 영향을 미치는지 결정하는 것부터 시작합니다. 이는 컴포넌트 생성 전에 화면의 구조적 모델을 정의하고, 행동의 범위에 따라 요소 간의 관계를 파악하는 데 도움이 됩니다.예를 들어, 데이터 테이블에서 필터링은 컨트롤이 물리적으로 열 헤더에 위치하더라도 전체 데이터 세트에 영향을 미칩니다. 이 접근 방식은 각 사용자 행동으로 인해 무엇이 변경되는지 정의하고, 툴팁과 같은 정적 요소와 컨트롤을 구분합니다. 컴포넌트를 디자인할 때 재사용성이 중요하지만, 제품 디자인은 비즈니스 로직도 고려합니다. 템플릿 수준은 컴포넌트의 상호 연결 및 공유 상태를 관리하는 자연스러운 장소이며, 개별 컴포넌트의 재사용성을 저해하지 않으면서 화면 내에서 컴포넌트가 조화롭게 작동하도록 보장합니다.전통적으로 "단순한" 레이아웃 구조로 간주되는 템플릿은 화면별 로직을 포함하고 독립적인 컴포넌트가 어떻게 상호 작용하는지 관리하도록 확장될 수 있습니다. 이는 템플릿이 화면 내에서 영역, 연결, 공유 상태 및 규칙을 정의하여 "프레젠테이션" 컴포넌트에 대한 "스마트" 래퍼 역할을 할 수 있음을 의미합니다. 이러한 템플릿은 다양한 제품 컨텍스트에 걸쳐 적용되는 재사용 가능한 구조이며, 컴포넌트 세트 이상의 제품 패턴을 설명하는 데 도움이 됩니다.페이지 수준에서는 템플릿에 실제 콘텐츠를 채워 시스템을 스트레스 테스트하고, 빈 상태, 데이터 로딩, 예상치 못한 콘텐츠 길이 등 다양한 시나리오를 구조가 처리할 수 있는지 확인합니다. 이 "범위 우선" 방법은 기존 제품에 대한 디자인 시스템을 만드는 데 특히 유용하며, 행동에 초점을 맞춰 컴포넌트 경계에 대한 논쟁을 해결하고 유사한 화면에 걸쳐 패턴을 체계화합니다. 이는 컴포넌트의 평면적인 목록이 아닌 사용자 행동과 범위를 기반으로 제품 패턴을 문서화하는 더 명확한 방법을 제공합니다.그러나 이 접근 방식은 보편적이지 않습니다. 로직이 단일 화면에 맞춰져 컴포넌트의 다용성을 저해하거나, 밀도가 낮거나 간단한 흐름의 화면에 적용되어 전통적인 컴포넌트 목록으로 충분할 경우 오용될 수 있습니다. 궁극적으로 Atomic Design은 다재다능한 모델이지만, 제품 팀은 컴포넌트 라이브러리를 구축하기 전에 사용자 요구를 이해하고 구조적 모델을 정의하기 위해 "범위 우선" 관점에서 이점을 얻어 일관되고 기능적인 사용자 경험을 보장합니다.