Appearance
UX Studio 검증 루프
후속 구현: 모델 선택·미판정 승인 차단·라운드별 검수표 등의 변경은 최신 구현·사용성 점검을 참고한다. 인터랙티브 그림의 정본 JSON·HTML은 구현 경로와 목표 범위를 반영해 정리했다. 아래 대조표는 2026-09-10 최초 점검 기록이며 후속 코드의 변경점과 구분한다. 현행 React 작업실은 루트
SPEC.md§7-1을 따르며, 기존 정적 HTML 루프·프로세스 생성·원본 갤러리와 승인 범위가 다르다. 2026-09-11 입력 전제 정정: 3호망에서도 Figma에 접속하지 않는다. 검증 루프 앞단의 외부 산출물 파일 반입을 선행 단계로 정했다. 현재 주 작업실에 구현돼 있으며 파일 보관·해석과 UX 검증을 구분한다.
이 장에서 얻는 것
AI가 만든 화면을 확정된 UX 기준으로 검증하고, 위반 근거를 돌려주어 수정·재검증하는 흐름이다. 완료 조건은 필수 규칙 통과, 미판정 0건, 수정 범위 밖 변경 0건, UX 최종 승인이다.
그림은 구현된 검수 경로와 추가 목표를 구분해 읽는다. 상세 흐름은 링크된 HTML·정본 JSON을 기준으로 확인하며, 역사적 구현 대조표의 모든 보완 항목이 여전히 미구현이라는 뜻은 아니다. 그림의 갱신 자체가 배포·검증 완료를 증명하지는 않는다. 그림의 내용은 한국어이며, 뷰어의 고정 메뉴와 HTML 언어 속성은 도구가 지원하는 기본값인 영어다.
왜 문제가 되는가
빠르게 생성해도 담당자가 상품 조건 누락, 디자인 규칙 위반, 수정 중 발생한 배치 변경을 다시 찾아 고쳐야 하면 업무 완료 시간은 줄지 않는다. 생성 결과에는 검증 결과가 함께 있어야 한다.
이전 점검 기록은 기존 스튜디오의 2026-09-02 demo/uiux-studio/ 이관과 2026-09-04 설계 문서를 근거로 삼았다. 당시 회의 웹페이지 원문은 확보하지 못했으므로, 회의 요구 대조는 저장소에 보존된 설계 요약의 범위였다.
핵심 개념
- UX가 기준을 확정한다. 상품 명세, UX SM 모델, 승인 컴포넌트, 표준 용어, 체크리스트와 수정 허용 영역을 하나의 버전으로 묶는다. 생성 AI가 검증 중 기준을 낮추거나 예외를 새로 만들 수 없다.
- AI가 시안을 만든다. 승인 자산과 고정된 기준을 사용한다. 생성 성공은 검수 완료와 별도 상태다.
- 독립 역할이 검증한다. 규칙 검사기는 문구·구조를, 리뷰 AI는 의도·상품 정합성을, 렌더 테스트는 실제 배치·상호작용·접근성·변경 범위를 확인한다. 별도 역할의 AI도 오류를 낼 수 있어 실제 화면과 테스트 근거가 필요하다. 주 React 작업실에는 실제 빌드·브라우저 검사가 구현돼 있으며, 기존 정적 HTML 검수의 범위와 구분한다.
- 위반을 구체적인 피드백으로 바꾼다. 규칙 ID, 화면·요소, 기대값, 실제 결과, 근거, 수정 허용 범위, 보존할 영역을 함께 전달한다.
- 지정 범위를 수정하고 전체 필수 항목을 재검증한다. 원래 실패 항목의 수정과 이미 통과한 영역의 회귀를 모두 확인한다. 미판정은 해결하거나 보류하며 통과로 바꾸지 않는다.
- 검증한 동일 버전을 UX가 승인한다. 시안 버전·기준 버전·검증 리포트·승인자를 묶어 보관한다. 승인본의 사례와 실패 사례는 다음 작업에 활용하되, 새 규칙은 UX의 검토 후 별도 버전으로 반영한다.
UX SM 모델의 역할은 몰큘의 의도, 오가니즘의 구성·규칙·관계, 템플릿의 구조·위치를 생성과 검증 양쪽에 제공하는 것이다.
결정 표
| 상태 | 다음 행동 | 승인 가능 여부 |
|---|---|---|
| 필수 규칙 통과, 미판정 0, 범위 밖 변경 0, 설정된 품질 기준 충족 | UX가 실제 화면·의도·리포트 검수 | 검증한 버전에 한해 UX 승인 가능 |
| 규칙 위반 또는 수정 범위 밖 변경 | 근거와 허용 범위를 반환 → 수정 → 동일 기준 재검증 | 불가 |
| 미판정·테스트 오류·증거 누락 | 재검증하거나 미승인 보류 | 불가 |
| UX 반려 | 요소·의도·수정 범위를 피드백으로 반환 | 불가 |
| 반복 상한·시간 상한 도달·규칙 충돌 | 결과와 미해결 항목을 보존하고 UX가 다음 조치 결정 | 자동 승인 불가 |
| UX가 요구사항·기준을 변경 | 새 기준 버전으로 새 검증 실행 | 이전 검증 결과를 승계하지 않음 |
보류는 이번 실행의 종료 상태다. 담당자가 원인을 해결한 뒤 명시적으로 새 실행을 시작한다. 점수는 비교 지표로 사용하고, 필수 항목의 실패를 높은 평균 점수로 상쇄하지 않는다.
상품 조건에서 파생되는 검증 예
| 입력 | 필수 검증 |
|---|---|
| 축구클럽 가입자에게 우대금리를 주는 적금 | 클럽 인증 단계, 실제 입력·증빙 수단, 자격 검증 결과, 우대 조건 고지 |
| 클럽 인증 실패 또는 미가입 | 기본금리 안내와 진행·중단 분기가 명세와 일치 |
| 같은 분류의 일반 적금 | 근거 없는 클럽 인증 단계를 추가하지 않음 |
| 버튼 문구만 수정 요청 | 지정 문구만 바뀌고 다른 요소의 위치·크기·순서·내용은 유지 |
피드백 예: FLOW-COND / 가입 흐름 / 인증 입력 누락 / 명세의 클럽 인증 조건 / 인증 화면만 추가 / 기존 상품안내·약관·완료 화면 보존. 수정 후에는 인증 화면과 보존 대상 화면을 함께 검사한다.
최초 점검에서 확인한 구현과 보완점
후속 수정 전인 2026-09-10의 로컬 코드 기준이다. 최신 배포 상태는 위의 구현·사용성 점검과 구분해서 읽는다.
| 확인한 코드 | 2026-09-10 당시 동작 | 당시 보완 제안 |
|---|---|---|
platform/studio/spec.py | 상품·조건·절차·정책에서 체크리스트 구성 | 기준·자산·수정 영역의 승인 버전을 검증 결과에 결속 |
platform/studio/review.py의 deterministic_checks, parse_review, score | DOM·문구 검사와 LLM 항목 판정. 필수 항목 실패를 통과에서 제외 | 비필수 미판정도 최종 승인 전에 해소. 증거 누락·렌더 결과까지 판정에 반영 |
같은 파일의 skeleton_diff, stability_item | 전체 DOM 태그 경로의 변화 비율 검사. STABLE은 비필수, 기본 허용 비율 35% | 선택 영역 밖의 DOM·스타일·문구·실제 배치를 비교하는 필수 검사. 전체 DOM 비율로 변경 범위를 대신하지 않음 |
platform/studio/loop.py | 실패 근거·수정 지시를 재생성 입력에 전달. 기본 3라운드, 설정 1~20, 시간 상한 780초 | 미해결 상태 보류와 승인 차단을 연결. 완료 결과를 고를 때 통과 여부를 점수보다 먼저 고려 |
| 같은 파일의 최종 결과 선택 | 전체 기록 중 점수 → HTML 유무 → 최신 라운드 순서로 선택 | 통과 라운드가 있어도 더 높은 점수의 실패 라운드가 선택될 수 있는 경계 조건 방지 |
platform/api/handlers/studio.py의 studio_feedback, platform/studio/store.py의 set_draft_status | 시안 존재와 상태 값을 확인한 뒤 승인·반려 저장 | 서버에서 필수 통과·미판정·회귀·시안 버전을 다시 확인한 뒤 승인 허용 |
platform/studio/store.py의 approved_drafts | 승인 상태인 시안을 다음 생성의 참고로 사용 | 실패 사례의 회귀 검사 자산화와 기준 개정은 별도 검토·버전 관리 |
platform/design_loop/loop.py | 별도 프로세스 생성 엔진. 재생성 최대 1회. ok는 실패 목록이 없는지로 계산 | 이 경로도 미판정을 성공과 분리하고 동일 승인 조건 적용 |
2026-09-13 코드 대조: 위 역사적 지적 가운데 미판정 통과·점수 우선 선택·단순 상태 승인에 관한 설명은 후속 구현으로 변경됐다.
| 경로 | 현행 코드에서 확인한 동작 |
|---|---|
platform/studio/review.py, loop.py | 미판정이 있으면 통과하지 않으며 최종 결과는 통과 여부 → 점수 순서로 선택 |
platform/api/handlers/studio.py::studio_feedback | 저장된 통과 라운드·완전한 항목·URL 일치·필수 검사·설정된 안정성 검사를 확인한 뒤 정적 승인 |
platform/design_loop/loop.py | 재생성 최대 1회이며 모든 비통과 항목을 미해결로 취급 |
platform/workspace/ | 요청별 1~5라운드·시간 상한, 실제 React 타입·빌드·브라우저 검사, 정확한 라운드 승인과 같은 소스 재빌드 |
기존 정적 루프의 1~20라운드는 프로세스 루프나 React 작업실과 다른 설정이다. 이를 모든 경로가 같은 상한을 준수한다는 뜻으로 설명하지 않는다. 기존 DOM 골격 변화율은 선택 영역 밖의 스타일·문구·픽셀·키보드 동작 보존을 입증하지 않는다. 원본 demo/uiux-studio/ 갤러리 승인도 주 작업실의 검수 계약으로 자동 승격되지 않는다.
안티패턴
- “다시 예쁘게” 같은 지시만 주고 위반 규칙과 수정 범위를 전달하지 않는다.
- 생성 AI가 스스로 품질 점수를 매기고 최종 승인을 대신한다.
- 수정한 항목만 검사해 주변 화면·컴포넌트의 회귀를 놓친다.
- 결과가 미판정이거나 상한에 도달했는데 완료·승인으로 표시한다.
- 승인 사례를 자동으로 조직의 새 규칙으로 취급하거나, 오래된 리포트로 변경된 시안을 승인한다.
계측
아래는 도입할 측정 지표이며 실측 수치가 아니다.
| 지표 | 측정 기준 |
|---|---|
| UX 승인까지 걸린 시간 | 기준 확정부터 승인까지의 경과 시간. 담당자의 실제 수정 시간도 별도 기록 |
| 최초 통과율 | 최초 생성에서 모든 필수 검사에 통과한 실행 수 / 유효 실행 수 |
| 수정 중 회귀율 | 범위 밖 변경 또는 기존 통과 항목의 실패가 발생한 수정 라운드 수 / 수정 라운드 수 |
| 미해결 종료율 | 미판정·위반·상한 때문에 미승인으로 끝난 실행 수 / 실행 수 |
| 승인 후 결함률 | 승인 후 필수 UX 규칙 위반이 확인된 시안 수 / 승인 시안 수 |
체크리스트
- [ ] 실행 전 기준·자산 버전과 수정 허용 영역이 확정됐다.
- [ ] 모든 필수 항목에 대상 화면·요소와 기대값·검증 방법이 있다.
- [ ] 생성 역할과 검증 역할을 분리하고 실제 화면·테스트 근거를 확인한다.
- [ ] 각 라운드에서 필수 항목 전체와 수정 범위 밖 영역을 함께 재검증한다.
- [ ] 필수 실패·미판정·검증 오류·범위 밖 변경은 서버에서 승인을 차단한다.
- [ ] 상한·충돌은 미승인 보류로 남기고, 기준 변경은 새 버전과 새 실행으로 처리한다.
- [ ] UX가 검수한 시안 버전과 실제 승인·자산화한 버전이 일치한다.
참고
- 회의 요구와 스튜디오 설계: 상품 명세 기반 에이전틱 루프.
- 원본 스튜디오:
demo/uiux-studio/README.md,demo/uiux-studio/harness/app.py,demo/uiux-studio/feedback/handler.py. - 현행 HTML 시안 루프:
platform/studio/,platform/api/handlers/studio.py. - 별도 프로세스 생성 루프:
platform/design_loop/,platform/docs/specs/2026-09-04-design-studio-agentic-loop-design.md. - 반복 상한의 경로별 요구와 기록:
SPEC.md§7-1·§12 항목 11·§16. 구현 차이를 요구사항 면제로 해석하지 않는다. - 다이어그램 정본:
docs/diagrams/ux-validation-loop.workflow.json. HTML은 정본에서 재생성한다.