AI가 만든 UI 목업을 실제 DOM 웹 페이지로 전환하는 최적 워크플로는?

Source: Dev.to

고해상도 AI‑생성 시각 목업을 기반으로 모바일 웹 페이지를 프로토타이핑하고 있습니다. 시각 스타일이 복잡합니다: 나무 탁자, 종이 카드, 천, 부드러운 그림자, 작은 일러스트, 텍스처가 있는 버튼 등.

최종 페이지는 투명 핫스팟이 있는 평면 이미지가 될 수 없습니다. 동적인 콘텐츠 때문에 실제 DOM 텍스트와 실제 컨트롤이 필요합니다.

• 참가자 이름이 바뀔 수 있다.
• 카드 라벨과 설명이 바뀔 수 있다.
• 버튼은 클릭/포커스 상태가 필요하다.
• 페이지는 모바일 웹에서 동작해야 한다.

What I tried

• CSS‑only 재현: 인터랙션은 동작하지만 시각 품질이 크게 떨어진다.
• 전체 페이지 이미지 배경 + DOM 오버레이: 시각적으로는 더 가깝지만 DOM 텍스트가 안정적으로 정렬되지 않고 자산 유지보수가 어렵다.
• 목업에서 텍스트 제거 / 인페인팅: 특히 종이/카드 영역 주변에 아티팩트가 생긴다.

What I am looking for

• 복잡한 비트맵 목업을 레이어드 웹 자산으로 변환하는 성숙한 워크플로우.
• 어떤 부분을 Figma, Photoshop, 혹은 다른 도구에서 수행해야 하는지.
• AI 레이어 추출 도구가 프로덕션에 충분히 좋은가?
• 모든 텍스트/버튼을 실제 DOM으로 유지하는 방법.
• 스크린샷이나 픽셀 차이로 시각적 유사성을 검증하는 방법.

예시 (일반적인 경우)

“Tea Tasting Journal” 모바일 페이지를 상상해 보세요.

• 따뜻한 책상 배경
• 참가자 카드를 담은 종이 패널
• 종이 옵션 카드 그리드
• “Start”와 “Open Journal” 실제 버튼
• 텍스처가 적용된 시각 자산 위에 동적인 텍스트

질문: 아직도 가장 좋은 방법은 Figma/Photoshop에서 수동으로 레이어를 재구성하고, 그 위에 DOM을 오버레이한 뒤 Playwright 같은 도구로 시각 회귀 테스트를 하는 것인가요? 아니면 보다 성숙된 이미지‑투‑레이어 / 디자인‑투‑코드 워크플로우가 존재합니까?

특히 마케팅 데모가 아니라 실제로 제품에 적용해 배포한 실제 워크플로우에 대한 경험을 알고 싶습니다.