Viewport Area 가중치 기반 디자인 토큰 추출 최적화

Context

Headless Browser로 CSS를 분석하여 AI 에이전트용 디자인 문서를 생성하는 brandmd 도구의 휴리스틱 오류 발생. 단순 평균값 산출 및 Element 기반 카운팅 방식의 한계로 인해 실제 시각적 지배력과 괴리된 잘못된 디자인 분석 결과 도출.

Technical Solution

• 전체 Luminance 평균 방식에서 Viewport Area 점유율 기반의 Dominant Background 판단 로직으로 전환
• RGB Euclidean Distance 기반 색상 명명법을 HSL 기반의 Lightness 및 Hue 범위 매핑 방식으로 변경
• Luminance 공식의 Blue 채널 가중치(7%) 한계를 극복하기 위해 Tone 판별 기준으로 HSL Lightness 채택
• 999px 초과 Border-radius 값을 Pill-shape로 정규화하고 Shape 추론 대상에서 제외하는 필터링 적용
• Sub-pixel 렌더링 노이즈 제거를 위해 0.5px 단위 반올림 후 Deduplication 수행하는 Clustering 패스 도입
• Element Count 기반의 중요도 산출 방식을 화면 점유 면적 기반의 가중치 모델로 교체