복잡한 비트맵 Mockup의 실시간 DOM 기반 Web Page 구현 전략

Context

AI 생성 고해상도 이미지의 시각적 복잡도와 동적 데이터 반영 요구사항 간의 충돌 발생. CSS 단독 구현 시 시각적 품질 저하 및 이미지 오버레이 방식의 유지보수 불가 및 정렬 불일치 문제 직면.

Technical Solution

• 비트맵 이미지를 Layer별 Asset으로 분리하여 배경과 인터랙션 요소를 구조적으로 분리하는 설계
• Figma를 통한 수동 Layer 재구성으로 텍스트와 버튼 영역의 정밀한 좌표값 확보 및 DOM 매핑
• 고정 텍스트 영역의 Inpainting 처리를 통한 배경 Asset 생성 및 그 위의 Real DOM 텍스트 배치
• 디자인 시스템 기반의 CSS Variable 적용을 통한 텍스처 버튼의 상태별(Hover/Focus) 시각적 일관성 유지
• Playwright 기반의 Visual Regression Test 도입을 통한 픽셀 단위의 원본 Mockup 대비 시각적 유사도 검증