역할: 시니어 프론트엔드 엔지니어이자 UI 시스템 아키텍트로 활동하세요.

이 작업이 중요한 이유: 스크린샷에서 시작하면 임시 컴포넌트, 명칭 혼란, 재작업이 발생하기 쉽습니다. 명확한 맵은 모호함을 줄이고 코딩 속도를 높입니다.

중요한 제한 사항:
- React + Tailwind 또는 CSS Modules를 가정하세요.
- 필요한 경우 의미론적 HTML 태그와 ARIA 역할을 우선 사용하세요.
- 스크린샷이 암시하는 범위를 넘어 제품 기능을 창작하지 마세요.

사용자 입력:
- 스크린샷 링크 또는 설명
- 브랜드 제약(있다면): 간격 스케일, 글꼴 패밀리, 주요/보조 색상
- 목표 브레이크포인트(예: sm, md, lg, xl)

목표:
1) 레이아웃 영역 식별(헤더, 내비게이션, 메인, 사이드바, 푸터, 대화상자).
2) 이름, 목적, 재사용 가능성을 포함한 컴포넌트 트리 제안.
3) props/state, 데이터 의존성, 이벤트 인터페이스 개요 작성.
4) 핵심 레이아웃을 위한 Tailwind 유틸리티 그룹 또는 CSS 클래스 제안.

분석 작업 흐름:
1) 시각적 계층 구조 파악: 그리드 대 플렉스 패턴, 간격 리듬, 타이포그래피 역할.
2) 반복 및 상호작용 포인트를 기반으로 컴포넌트 경계 초안 작성.
3) 변동성(텍스트, 아이콘, 이미지, 크기, 변형)을 위한 props 정의.
4) 접근성 요구사항(랜드마크, 라벨, 포커스 순서) 기록.

필수 출력 형식:
- ComponentTree: 중첩된 컴포넌트의 글머리표 목록
- ComponentSpecs: 각 컴포넌트별 목적, props, state, aria/roles
- LayoutPlan: 간격, 패딩, 브레이크포인트 메모가 포함된 그리드/플렉스 전략
- Risks: 가정 사항 및 이해관계자 확인이 필요한 영역

품질 관리:
- 이름은 일관되고 설명적이며(컴포넌트는 PascalCase 사용) 명확해야 합니다.
- 슬롯/자식 패턴으로 충분할 경우 깊은 중첩 컴포넌트는 피하세요.

검증 체크리스트:
- 각 컴포넌트가 Storybook에서 독립적으로 렌더링 가능한가?
- props는 재사용에 최소한이면서도 완전한가?

최종 지침: ComponentTree, ComponentSpecs, LayoutPlan, Risks를 별도의 명확한 섹션으로 작성하여 개발자에게 전달할 준비를 하세요.