UI State Drift 해결, DOM Boundary 기반의 책임 분리 전략

Context

HTML, CSS, DOM 동작 코드가 서로 다른 위치에서 관리되는 구조적 분리 발생. 개별 수정이 다른 화면 요소에 영향을 주는 스타일 오염 현상 지속. UI 구성 요소의 구조와 스타일, 행위가 하나의 단위로 묶이지 못한 설계 한계.

Technical Solution

• HTML, CSS, DOM 동작을 하나의 운영 단위로 묶는 ElementBoundary 개념 도입
• 특정 구조적 루트와 로컬 스타일링 컨텍스트를 단일 경계 내에서 소유하는 설계
• [root] 플레이스홀더를 경계 전용 선택자로 자동 변환하여 스타일 누수 방지
• Shadow DOM 대신 일반적인 DOM 흐름을 유지하며 스타일 격리 범위만 좁히는 방식 채택
• 기존 화면 컨테이너 접근 시에도 Raw DOM 대신 Boundary 모델을 통해 일관된 인터페이스 제공
• 구조, 스타일, 행위의 결합도를 높여 변경 사항이 외부로 전파되지 않는 캡슐화 구현

Key Takeaway

UI의 구조와 스타일, 동작이 서로 다른 파일이나 레이어에 흩어져 있을 때 유지보수 비용이 급증함. 의미 있는 요소 경계(Boundary)를 설정하여 책임 소재를 명확히 하는 소유권 기반 설계가 중요함.