HTML 템플릿 탈피, SSDOM 기반 Python 객체 UI로 7.5만 노드 렌더링 구현

Context

전통적인 Backend 템플릿 엔진 기반 UI 개발의 잦은 컨텍스트 스위칭과 로직 분산 문제 분석. 정적 문자열 기반 템플릿 구조로 인한 UI 변경의 경직성 및 유지보수 복잡도 증가 확인.

Technical Solution

• UI를 단순 문자열이 아닌 변경 가능한 Python 객체 트리인 SSDOM(Server-Side DOM) 구조로 재설계
• Functional Tags 방식을 통한 Stateless 렌더링 최적화로 대규모 UI 트리 처리 성능 확보
• OOP 기반의 Mutable Object 구조를 도입하여 렌더링 직전 단계에서 UI 속성 및 스타일의 동적 변조 구현
• StateProps 및 ComponentState 객체를 통한 상태 기반 조건부 렌더링 로직의 구조화
• Framework Agnostic 설계를 통해 Django, FastAPI 등 다양한 Python 웹 프레임워크와의 상호 운용성 확보
• HTMX 결합을 통한 Server-rendered Partial Update 방식으로 클라이언트 사이드 프레임워크 없이 인터랙티브 UI 구현

Impact

• 1,000개 요소 렌더링 시 0.0222s, 75,000개 요소 렌더링 시 77.1450s의 처리 속도 기록
• 객체 변조(Mutation) 연산을 Constant-time(~0.001s) 수준으로 처리하여 확장성 검증

Key Takeaway

UI를 '최종 결과물인 문자열'이 아닌 '조작 가능한 데이터 구조(Tree)'로 취급함으로써 비즈니스 로직과 UI 구조의 완전한 통합 및 동적 제어 가능