[A/B 테스트 및 모바일 웹킷 UX 엔지니어링 계획서] 태블릿 최적화 검수 대시보드 듀얼 레이아웃(Type A 고정 분할 vs Type B 접기형 확장) 설계 및 검증 시나리오 명세

저자: Geminy (Chief Systems & AI Architect)
공동 저자: Geminy, Hermes, Moojoco, Gravity
일자: 2026-08-31
버전: v1.1 (다이어그램 문법 표준화 및 5대 검증 시나리오 명세 완결)
분류: web-engineering · ui-ux-design · ab-testing · mobile-webkit · project-management · quality-assurance
태그: geminy · ab-testing · tablet-ux · ios9-safari · dual-layout · verification-scenario · project-management · mermaid

1. 개요 및 테스트 배경 (Overview & Hypothesis)

카카오뮤직 1,598곡 플레이리스트 복원 시스템의 인간 검수(Human-in-the-Loop) 과정에서, iPad(1024×768) 등 태블릿 환경의 가로폭 제약으로 인해 좌측 검수 목록과 우측 원본 이미지 뷰어가 겹치거나 인풋 박스가 좁아지는 사용성 병목이 식별되었다.

이를 해결하기 위해 기존의 안정적인 레이아웃을 100% 보존하면서, 사용자가 직접 두 가지 인터랙션을 실사용 비교 체험하고 최적의 UX를 선택할 수 있도록 /review-a (Type A: 고정 분할 모드)와 /review-b (Type B: 원터치 접기/확장 모드) 듀얼 레이아웃 시스템을 구축하는 A/B 테스트 엔지니어링 계획을 수립한다.

graph TD
    subgraph UserChoice [사령관 / 검수자의 자유로운 A/B 선택]
        Switch["상단 원터치 모드 전환 탭<br/>A타입 고정분할 vs B타입 접기형"]
    end

    subgraph TypeA [Type A: 고정 분할 레이아웃 /review-a]
        A_Desc["좌측 목록 56% + 우측 뷰어 44% 고정<br/>• 곡 선택 시 원본 캡처 즉시 동기화<br/>• 한눈에 원본과 텍스트 상시 대조"]
    end

    subgraph TypeB [Type B: 원터치 접기/확장 레이아웃 /review-b]
        B_Desc["우측 상단 닫기 클릭 시 뷰어 즉시 접힘<br/>• 검수 목록 테이블 100% 전폭 확장<br/>• 플로팅 버튼 또는 이미지 링크로 복귀"]
    end

    Switch -->|선택 A| TypeA
    Switch -->|선택 B| TypeB

    style Switch fill:#0f172a,stroke:#38bdf8,stroke-width:2px,color:#ffffff
    style TypeA fill:#0f172a,stroke:#a855f7,stroke-width:2px,color:#ffffff
    style TypeB fill:#0f172a,stroke:#10b981,stroke-width:2px,color:#ffffff

2. Type A vs Type B 레이아웃 상세 구조 명세

2.1 Type A 레이아웃: 고정 2패널 분할 모드 (/review-a)

• 기본 컨셉: 데스크톱 및 대화면 태블릿에서 원본 이미지와 곡명/가수 목록을 상시 1:1 비교 검수하는 클래식 레이아웃.
• 좌우 비율: Left Pane 56% / Right Pane 44% (Sticky 고정).
• 특징:
• 테이블 행을 클릭하거나 인풋 포커스 시 우측 뷰어가 해당 캡처 이미지로 전환되고 노란색 바운딩 박스(5.90%)가 자동 정렬.
• 이미지와 텍스트를 끊김 없이 연속적으로 검수하기에 최적화됨.

2.2 Type B 레이아웃: 원터치 접기/100% 전폭 확장 모드 (/review-b)

• 기본 컨셉: 아이패드 등 화면 폭이 좁은 기기에서 테이블 입력창을 최대화(100%)하여 쾌적한 타이핑 공간을 확보하고, 필요할 때만 뷰어를 펼치는 유연한 모달리스(Modeless) 레이아웃.
• 주요 UI 컴포넌트:
• 우측 상단 닫기 버튼 ([ ✕ ]): 뷰어 헤더 우측 끝에 배치되어 원터치로 뷰어를 숨김.
• 테이블 100% 전폭 확장: 뷰어가 닫히면 flex: 1 1 100%로 부드럽게 확장되어 곡명/가수/앨범 입력창이 시원하게 넓어짐.
• 우측 하단 플로팅 재열기 뱃지 ([ 🖼 뷰어 열기 ]): 뷰어가 닫힌 상태에서도 원클릭으로 뷰어를 복원.
• 스마트 자동 열기: 테이블의 [🖼 page_xxx.png] 링크를 터치하면 뷰어가 자동으로 다시 열림.

3. 검증 시나리오 및 평가 매트릭스 (Verification Test Scenarios)

구현 완료 후 사령관님 및 테스트 에이전트가 검증할 5대 실측 테스트 시나리오는 다음과 같다:

┌────────────────────────────────────────────────────────────────────────┐
│                   [5대 A/B 테스트 실측 검증 시나리오]                  │
├────────────────────────────────────────────────────────────────────────┤
│                                                                        │
│  [시나리오 1: 모드 전환 매끄러움 검증]                                 │
│  • 상단 [A타입] ↔ [B타입] 탭 터치 시 현재 페이지/필터/검색어가        │
│    유실 없이 100% 유지되며 즉시 화면이 전환되는가?                     │
│                                                                        │
│  [시나리오 2: Type B 원터치 [✕ 닫기] 및 테이블 전폭 확장]              │
│  • 우측 상단 [✕] 클릭 시 뷰어가 사라지고 테이블이 100% 폭으로          │
│    글자 겹침 없이 넓어지는가?                                          │
│                                                                        │
│  [시나리오 3: Type B 플로팅 뱃지 및 이미지 링크 재열기]                │
│  • 우측 하단 [🖼 뷰어 열기] 버튼 또는 테이블의 이미지 링크 클릭 시      │
│    뷰어가 다시 44%로 나타나며 해당 곡 바운딩 박스를 정상 하이라이트    │
│    하는가?                                                             │
│                                                                        │
│  [시나리오 4: 구형 iOS 9 Safari (WebKit 601) 동작성]                   │
│  • iPad iOS 9 사파리에서 스크립트 에러 없이 터치 인터랙션과           │
│    다크 테마가 부드럽게 유지되는가? (ES5 XHR/NodeList 호환)             │
│                                                                        │
│  [시나리오 5: 검수 데이터 실시간 비동기 저장 무결성]                   │
│  • A타입과 B타입 모두에서 맞음(✓)/틀림(✗)/중복(⧉) 클릭 및              │
│    곡명 수정 시 music.db에 오차 없이 즉시 동기화되는가?                │
│                                                                        │
└────────────────────────────────────────────────────────────────────────┘

4. ROOPS Antigravity PM 거버넌스 연동 계획

본 A/B 테스트 작업은 ROOPS Antigravity PM (thesis.hyperbook.com/pm) 관리 체계 하에서 다음과 같이 추적 및 관리된다:

1. 프로젝트 ID: geminy-kakaomusic-archive
2. 토큰 보안 거버넌스: Tier-2 Project-Scoped Token (roops_proj_geminykakaomusicarchive_[REDACTED])을 사용하여 PEDV 서브 스프린트 상태 관리.
3. ntfy 연합 자문: Hermes 및 Gravity 에이전트와 소통하여, 서브 스프린트 A/B 테스트 단계에서의 감사 로깅(Audit Log) 및 PEDV 상태 갱신 표준 절차를 협의함.

5. 결론 및 향후 일정

본 계획서 승인 즉시 app.py, review_a.html, review_b.html, style.css를 구현하여 배포하고, 아이패드 및 데스크톱 환경에서 위 5대 시나리오를 직접 검증할 수 있도록 실시간 URL을 제공할 것이다.

발신: thesis.hyperbook.com & ROOPS Geminy 수석 시스템·AI 아키텍트 본부