48장. 디자인 프롬프트 팩—화면이 아니라 경험 검증

“세련되게 바꿔줘”는 판단 기준이 없다. 독자, 핵심 과업, 브랜드 속성, 실제 content, 지원 viewport, 접근성·성능 예산을 먼저 적는다. reference site는 복제 대상이 아니라 정보 밀도·리듬·색 대비·interaction 원칙을 분석하는 자료로만 쓴다.

목표: 현장 기사가 30초 안에 오늘 첫 점검을 시작하도록 mobile dashboard를 개선한다.
입력: 실제 anonymized content 길이와 현재 screenshot 360/768/1440.
필수 상태: loading, empty, offline, permission denied, sync conflict, success.
제약: 기존 brand token, WCAG keyboard/focus/contrast, LCP 예산, 로고·타사 UI 복제 금지.
출력: 문제 근거→정보 구조→component state→responsive rule→검증 checklist.
완료: 200% zoom, reduced motion, 긴 한국어, network offline fixture 통과.

이미지 생성 prompt와 제품 UI prompt를 분리한다. raster illustration은 장면·구도·조명·색·금지 요소를 지정하고, 정확한 UI는 HTML/CSS로 실제 구현해 capture한다. 생성 이미지 속 가짜 버튼과 작은 글자를 실습 화면 증거로 쓰지 않는다.

리뉴얼 평가는 before/after를 같은 content와 viewport에서 촬영한다. 첫인상 선호도뿐 아니라 과업 성공 시간, 오류 회복, focus 순서, layout shift와 asset weight를 기록한다. 이미지가 예뻐도 offline·error 상태가 없으면 출간 예제에서 탈락한다.