mockup-reviewlisted

# mockup-review 기획서에 정의된 목적을 기준으로 **디자인 시안 최소 3개**를 서로 다른 축으로 변형 생성하고, 만든 세션과 **분리된 세션**에서 비평받아 사용자가 판단 근거를 가지고 직접 고르게 한다. **핵심 원칙**: 시안을 만든 것과 같은 대화/세션에서 그 시안을 스스로 비평하면 자기 결과물을 옹호하는 방향으로 판단이 기운다. 비평은 반드시 시안 생성 맥락을 모르는 별도 세션(서브에이전트)에 맡기고, 그 결과를 사용자에게 그대로 전달한다. 최종 선택은 AI가 대신 결론 내리지 않고 사용자가 근거를 보고 고른다. --- ## 실행 절차 ### 0. 전제조건 확인 이번에 시안을 만들 화면의 기획서 섹션(타겟/문제/목적/요구사항)이 있는지 먼저 확인한다. 없으면 시안 생성으로 넘어가지 말고 `screen-brief`로 먼저 기획서를 작성하도록 안내한다. 목적 없이 만든 시안은 무엇을 기준으로 변형·비평할지가 없어 이 단계 전체가 무의미해진다. ### 1. 기획서 발췌 → 프롬���트 조립 기획서에서 이번 화면 섹션만 발췌한다(다른 화면 섹션은 포함하지 않는다). 타겟·문제·목적· 성공 기준·핵심 요구사항을 시안 생성 프롬프트의 입력으로 정리한다. ### 2. 변형 축 선택 아래 중 이 화면에 의미 있는 축을 하나 이상 골라 최소 3개 시안이 서로 다른 지점에 위치하도록 만든다. 축이 없으면 세 시안이 사실상 같은 디자인의 색만 바뀐 버전이 되어 비교할 이유가 없어진다. - 정보 밀도 (최소 정보만 vs 한 화면에 많이) - 플랫폼 기준 (모바일 우선 vs 데스크톱/반응형) - 액션 수 (핵심 액션 1개로 집중 vs 여러 액션 병렬 노출) 사용자가 선호하는 축이 있으면 그것을 우선한다. 각 시안은 실제로 렌더링해 볼 수 있는 형태(HTML/CSS 등 현재 프로젝트 스택에 맞는 형식)로 만든다. ### 3. 분리된 세션에서 비평 시안 3개를 각각 별도 서브에이전트(Agent 도구)에 넘겨 비평받는다. 서브에이전트에는 시안 파일과 아래 기준만 전달하고, 이 대화의 논의 과정이나 어떤 시안이 "메인" 안인지 같은 맥락은 주지 않는다 — 맥락을 주면 편향된 비평이 나온다. 비평 기준: - Nielsen 사용성 휴리스틱 10항목(시스템 상태 가시성, 시스템과 현실의 일치, 사용자 제어권과 자유, 일관성과 표준, 오류 예방, 기억보다 인지, ���연성과 효율성, 심미성과 미니멀 디자인, 오류 인식·진단·복구 지원, 도움말과 문서) - 터치 타겟 최소 44×44pt 준수 여부 - 정보 위계(가장 중요한 정보/액션이 시각적으로도 우선하는지) 각 서브에이전트의 비평 결과를 시안별로 정리해 사용자에게 그대로 보여준다. AI가 비평 결과를 요약하며 특정 시안을 은근히 추천하지 않는다. ### 4. 판단 메모 사용자가 시안을 고르면, 왜 그 시안을 골랐는지 판단 근거를 짧게 메모로 남긴다(기획서 문서에 이어 붙이거나 별도 파일). AI가 "이 시안이 낫습니다"라고 결론을 대신 내리지 않는다 — 비평 결과